What is the difference between <p>, <div> and <span>?
Can they be used interchangeably?
Because I am facing problem that, for <span> margin not working but for the <div> and <p> it's working..
What is the difference between ,
and in HTML&XHTML?
Asked
Active
Viewed 7.7k times
48
OneCricketeer
- 179,855
- 19
- 132
- 245
Dhamu
- 1,694
- 5
- 22
- 47
7 Answers
67
p and div elements are block level elements where span is an inline element and hence margin on span wont work. Alternatively you can make your span a block level element by using CSS display: block; or for span I would prefer display: inline-block;
Apart from that, these elements have specific semantic meaning, div is better referred for a block of content having different nested elements, p which is used for paragraphs, and span is nothing but an empty element, hence keeping SEO in mind, you need to use right tag for right thing, so for example wrapping the text inside div element will be less semantic than wrapping it inside a p
Mr. Alien
- 153,751
- 34
- 298
- 278
-
4
"and span is nothing but an empty element" may be a bit confusing for juniors devs. It may sound like you can not add text inside a span.
– Broda Noel
Feb 09 '19 at 19:25
23
A <p> should contain paragraghs of text, a <div> is to layout your page using divisions and a <span> allows markup to be styled slightly different, for example within a <p>
This is how they should be used semantically, the styling of them however using CSS is up to you.
DavidB
- 2,566
- 3
- 33
- 63
15
As a web developer, I can't help but feel all these guidelines are incredibly misleading in the year 2015.
Sure, a "p" tag was at one point designed for paragraph use... but in 100% of my applications, designs, and just day-to-day general development, we've encountered nothing but limitations imposed by the "p" tag... it offers no benefit in today's internet.
I would say yes, "p" is a descriptive element, and for that reason if that's all it did; "describe something", I'd be all for it... but it DOESN'T just describe the content, it straight up ALTERS the content, which while already being a limitation in itself, isn't all it does, it also LIMITS the content. Why anyone in their right mind would purposefully embrace a limiting building block when it comes to web development is beyond me. From a design standpoint it doesn't make sense. From a structural standpoint it doesn't make sense. From any from of DOM manipulation PERIOD, it doesn't make sense.
We've all-together stopped using the "p" tag except where we are absolutely forced to (client WordPress post implementations, silly things like that, for example). There is no excuse as to why we can't describe nearly everything with well-named classes and ID's, so we see zero reason to have to bow to "standards" that add no benefit whatsoever, and in fact HINDER every piece of the puzzle. The "p" tag is of no help to the developer, the end-user, nor to modern search engines. In a nutshell... "p" tag is all but deprecated in even remotely complicated implementations (and with very good reason), don't let the comments of these standard's nazi's control how you display your content!
Even on this very site, a site oriented towards developers at it's core, has at the VERY TOP of it's own page a little pop-in piece that could have used a "p" tag as it contains enough text to run around to a second line, but is entirely captured in a DIV (and only a div, not a div -> p) for a nearly infinite number of reasons... foremost being that today, "p" SUCKS compared to any well described block created from DIVs, that is as-well-described (moreso... I say) as a paragraph "p" with the very descriptive id="blurb".
From Stack Overflow:
<div id="blurb">Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.</div>
I say down with
<p>I suck</p>
and long live
<div class="p">I rock</div>
And yes, I do appreciate our current web standards, and things like <span> still have their place, even offering up abilities to do things with some modern browsers you can't accomplish with a <div> container, but it's just that this one in particular, the broken element "p", as a piece of a restructured and modernized HTML... should have been left in the grave where it belongs... this is a generation of web where paragraphs aren't even paragraphs forever anymore... the blocks literally change... it's just plain outdated and impractical.
Stephen Ostermiller
- 23,933
- 14
- 88
- 109
Fujilives
- 299
- 2
- 4
-
17
-
11
"it offers no benefit in today's internet." — false: assistive technologies know the difference between `
` and `
` even if users can't tell. "standards add no benefit whatsoever." — I would suggest you touch up on your accessibility knowledge. Just out of curiosity, what "limitations" has `` imposed? You've only made abundantly clear how it "limits" the content (whatever that means) and how it "doesn't make sense." Can you please be more specific?
– chharvey
Oct 30 '17 at 17:14
-
@Mr.Alien by assigning a class of `p` to the `div`, you are able to apply global CSS rules defined in your main.css file under `.p{}`. This would have the effect of allowing you to customize your own definition of what a `p` tag should be at the expense of assistive technologies that are designed to handle those tags in a special way.
– Nicholas Gentile
Aug 03 '18 at 19:25
10
As others have answered… div and p are “block elements” (now redefined as Flow Content) and span is an “inline element” (Phrasing Content). Yes, you may change the default presentation of these elements, but there is a difference between “flow” versus “block”, and “phrasing” versus “inline”.
An element classified as flow content can only be used where flow content is expected, and an element classified as phrasing content can be used where phrasing content is expected. Since all phrasing content is flow content, a phrasing element can also be used anywhere flow content is expected. The specs provide more detailed info.
All phrasing elements, such as strong and em, can only contain other phrasing elements: you can’t put a table inside a cite for instance. Most flow content such as div and li can contain all types of flow content (as well as phrasing content), but there are a few exceptions: p, pre, and th are examples of non-phrasing flow content (“block elements”) that can only contain phrasing content (“inline elements”). And of course there are the normal element restrictions such as dl and table only being allowed to contain certain elements.
While both div and p are non-phrasing flow content, the div can contain other flow content children (including more divs and ps). On the other hand, p may only contain phrasing content children. That means you can’t put a div inside a p, even though both are non-phrasing flow elements.
Now here’s the kicker. These semantic specifications are unrelated to how the element is displayed. Thus, if you have a div inside a span, you will get a validation error even if you have span {display: block;} and div {display: inline;} in your CSS.
chharvey
- 8,580
- 9
- 56
- 95
-
Thanks for teaching me «`p`, `pre`, and `th` are examples of non-phrasing flow content (“block elements”) that can *only* contain phrasing content (“inline elements”)».
– Jeroen Wiert Pluimers
Jan 21 '22 at 12:57
5
<p> and <div> are block elements by default. <span> is an inline element.
Block elements start and end with a new line in the browser while inline elements do not. "Inline" means they are part of the current line.
With today's complex web designs the purpose of these distinctions are less obvious but if you think back to the early days of HTML (where these tags come from) where documents were basically embellished text with images, the distinction becomes clearer.
Either way, with CSS you can override basically any property of a tag. So if you want a <span> to behave like a <div> or a <p> then all you need to do is add:
span
{
display: block;
}
With this code, you will be able to set the vertical margins as well as the horizontal ones.
ose
- 4,065
- 2
- 24
- 40
-
I dont like this answer as you are encouraging the incorrect use of tags.
– DavidB
May 08 '13 at 08:47
-
I'm not encouraging anybody to make incorrect use of tags, simply answering the OP's question as to why the margin is not working. My answer can be generalised to other tags and so serves a legitimate purpose - teaching about the difference between block and inline.
– ose
May 08 '13 at 09:00
-
It was the part where you said with CSS you can make a span behave like a div or a p. Do you think its good web practices to build a page entriely with spans?
– DavidB
May 08 '13 at 09:26
-
Obviously not.... For clarification: there is nowhere where I come close to suggesting creating a web page entirely using spans. "With CSS you can override basically any property of a tag". That is the point of CSS. "If you want a span to behave like a div or p". "If" -- ie. you would need to have a good reason to do so. If you have a good reason to do so, I say go for it. I don't pretend to know every possible situation another person may be in that would necessitate doing something like this. I'm just pointing out a tool that can be used and leaving its responsible use to the user
– ose
May 08 '13 at 09:58
-
2
Ok, maybe this is worded better. "I dont like this answer as you are not discouraging the incorrect use of tags, nor do you mention the importance of the semantic use of tags, which for a beginner is a lot more important than the fact you can make a span act like a div.
– DavidB
May 08 '13 at 10:18
-
@DavidB A span cannot act like a div (regardless of how it is styled) because a span cannot contain flow content as divs can. Spans may only contain phrasing content, even if they have `display: block;`.
– chharvey
Jun 02 '14 at 04:35
2
1) div element is designed to describe a container of data.
div tag can contain other elements---div is Block Level
2)p element is designed to describe a paragraph of content---para is Block Level
3)span element Usually used for a small chunk of HTML.---span is Inline
4)block-level elements begin on new lines,
inline elements do not.
5)Most browsers insert a blank line between any two block-level elements.
Ex: There will be blank line between para and para and header and para and between two headers,between a paragraph and a list, between a list and a table,
etc
karthik gorijavolu
- 860
- 3
- 14
- 28
0
I more thought that,p and div elements are block level element on the other side, span is an inline element. but when you write p in your code it will take space top and bottom but div behavior not like that. Check out this experiment on JS fiddle:
Fazlul Karim
- 367
- 1
- 2
- 13
Asked
Active
Viewed 7.7k times
48
OneCricketeer
- 179,855
- 19
- 132
- 245
Dhamu
- 1,694
- 5
- 22
- 47
7 Answers
67
p and div elements are block level elements where span is an inline element and hence margin on span wont work. Alternatively you can make your span a block level element by using CSS display: block; or for span I would prefer display: inline-block;
Apart from that, these elements have specific semantic meaning, div is better referred for a block of content having different nested elements, p which is used for paragraphs, and span is nothing but an empty element, hence keeping SEO in mind, you need to use right tag for right thing, so for example wrapping the text inside div element will be less semantic than wrapping it inside a p
Mr. Alien
- 153,751
- 34
- 298
- 278
-
4"and span is nothing but an empty element" may be a bit confusing for juniors devs. It may sound like you can not add text inside a span. – Broda Noel Feb 09 '19 at 19:25
23
A <p> should contain paragraghs of text, a <div> is to layout your page using divisions and a <span> allows markup to be styled slightly different, for example within a <p>
This is how they should be used semantically, the styling of them however using CSS is up to you.
DavidB
- 2,566
- 3
- 33
- 63
15
As a web developer, I can't help but feel all these guidelines are incredibly misleading in the year 2015.
Sure, a "p" tag was at one point designed for paragraph use... but in 100% of my applications, designs, and just day-to-day general development, we've encountered nothing but limitations imposed by the "p" tag... it offers no benefit in today's internet.
I would say yes, "p" is a descriptive element, and for that reason if that's all it did; "describe something", I'd be all for it... but it DOESN'T just describe the content, it straight up ALTERS the content, which while already being a limitation in itself, isn't all it does, it also LIMITS the content. Why anyone in their right mind would purposefully embrace a limiting building block when it comes to web development is beyond me. From a design standpoint it doesn't make sense. From a structural standpoint it doesn't make sense. From any from of DOM manipulation PERIOD, it doesn't make sense.
We've all-together stopped using the "p" tag except where we are absolutely forced to (client WordPress post implementations, silly things like that, for example). There is no excuse as to why we can't describe nearly everything with well-named classes and ID's, so we see zero reason to have to bow to "standards" that add no benefit whatsoever, and in fact HINDER every piece of the puzzle. The "p" tag is of no help to the developer, the end-user, nor to modern search engines. In a nutshell... "p" tag is all but deprecated in even remotely complicated implementations (and with very good reason), don't let the comments of these standard's nazi's control how you display your content!
Even on this very site, a site oriented towards developers at it's core, has at the VERY TOP of it's own page a little pop-in piece that could have used a "p" tag as it contains enough text to run around to a second line, but is entirely captured in a DIV (and only a div, not a div -> p) for a nearly infinite number of reasons... foremost being that today, "p" SUCKS compared to any well described block created from DIVs, that is as-well-described (moreso... I say) as a paragraph "p" with the very descriptive id="blurb".
From Stack Overflow:
<div id="blurb">Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.</div>
I say down with
<p>I suck</p>
and long live
<div class="p">I rock</div>
And yes, I do appreciate our current web standards, and things like <span> still have their place, even offering up abilities to do things with some modern browsers you can't accomplish with a <div> container, but it's just that this one in particular, the broken element "p", as a piece of a restructured and modernized HTML... should have been left in the grave where it belongs... this is a generation of web where paragraphs aren't even paragraphs forever anymore... the blocks literally change... it's just plain outdated and impractical.
Stephen Ostermiller
- 23,933
- 14
- 88
- 109
Fujilives
- 299
- 2
- 4
-
17
-
11"it offers no benefit in today's internet." — false: assistive technologies know the difference between `
` and `
` even if users can't tell. "standards add no benefit whatsoever." — I would suggest you touch up on your accessibility knowledge. Just out of curiosity, what "limitations" has `– chharvey Oct 30 '17 at 17:14` imposed? You've only made abundantly clear how it "limits" the content (whatever that means) and how it "doesn't make sense." Can you please be more specific?
-
@Mr.Alien by assigning a class of `p` to the `div`, you are able to apply global CSS rules defined in your main.css file under `.p{}`. This would have the effect of allowing you to customize your own definition of what a `p` tag should be at the expense of assistive technologies that are designed to handle those tags in a special way. – Nicholas Gentile Aug 03 '18 at 19:25
10
As others have answered… div and p are “block elements” (now redefined as Flow Content) and span is an “inline element” (Phrasing Content). Yes, you may change the default presentation of these elements, but there is a difference between “flow” versus “block”, and “phrasing” versus “inline”.
An element classified as flow content can only be used where flow content is expected, and an element classified as phrasing content can be used where phrasing content is expected. Since all phrasing content is flow content, a phrasing element can also be used anywhere flow content is expected. The specs provide more detailed info.
All phrasing elements, such as strong and em, can only contain other phrasing elements: you can’t put a table inside a cite for instance. Most flow content such as div and li can contain all types of flow content (as well as phrasing content), but there are a few exceptions: p, pre, and th are examples of non-phrasing flow content (“block elements”) that can only contain phrasing content (“inline elements”). And of course there are the normal element restrictions such as dl and table only being allowed to contain certain elements.
While both div and p are non-phrasing flow content, the div can contain other flow content children (including more divs and ps). On the other hand, p may only contain phrasing content children. That means you can’t put a div inside a p, even though both are non-phrasing flow elements.
Now here’s the kicker. These semantic specifications are unrelated to how the element is displayed. Thus, if you have a div inside a span, you will get a validation error even if you have span {display: block;} and div {display: inline;} in your CSS.
chharvey
- 8,580
- 9
- 56
- 95
-
Thanks for teaching me «`p`, `pre`, and `th` are examples of non-phrasing flow content (“block elements”) that can *only* contain phrasing content (“inline elements”)». – Jeroen Wiert Pluimers Jan 21 '22 at 12:57
5
<p> and <div> are block elements by default. <span> is an inline element.
Block elements start and end with a new line in the browser while inline elements do not. "Inline" means they are part of the current line.
With today's complex web designs the purpose of these distinctions are less obvious but if you think back to the early days of HTML (where these tags come from) where documents were basically embellished text with images, the distinction becomes clearer.
Either way, with CSS you can override basically any property of a tag. So if you want a <span> to behave like a <div> or a <p> then all you need to do is add:
span
{
display: block;
}
With this code, you will be able to set the vertical margins as well as the horizontal ones.
ose
- 4,065
- 2
- 24
- 40
-
I dont like this answer as you are encouraging the incorrect use of tags. – DavidB May 08 '13 at 08:47
-
I'm not encouraging anybody to make incorrect use of tags, simply answering the OP's question as to why the margin is not working. My answer can be generalised to other tags and so serves a legitimate purpose - teaching about the difference between block and inline. – ose May 08 '13 at 09:00
-
It was the part where you said with CSS you can make a span behave like a div or a p. Do you think its good web practices to build a page entriely with spans? – DavidB May 08 '13 at 09:26
-
Obviously not.... For clarification: there is nowhere where I come close to suggesting creating a web page entirely using spans. "With CSS you can override basically any property of a tag". That is the point of CSS. "If you want a span to behave like a div or p". "If" -- ie. you would need to have a good reason to do so. If you have a good reason to do so, I say go for it. I don't pretend to know every possible situation another person may be in that would necessitate doing something like this. I'm just pointing out a tool that can be used and leaving its responsible use to the user – ose May 08 '13 at 09:58
-
2Ok, maybe this is worded better. "I dont like this answer as you are not discouraging the incorrect use of tags, nor do you mention the importance of the semantic use of tags, which for a beginner is a lot more important than the fact you can make a span act like a div. – DavidB May 08 '13 at 10:18
-
@DavidB A span cannot act like a div (regardless of how it is styled) because a span cannot contain flow content as divs can. Spans may only contain phrasing content, even if they have `display: block;`. – chharvey Jun 02 '14 at 04:35
2
1) div element is designed to describe a container of data. div tag can contain other elements---div is Block Level
2)p element is designed to describe a paragraph of content---para is Block Level
3)span element Usually used for a small chunk of HTML.---span is Inline
4)block-level elements begin on new lines, inline elements do not.
5)Most browsers insert a blank line between any two block-level elements. Ex: There will be blank line between para and para and header and para and between two headers,between a paragraph and a list, between a list and a table, etc
karthik gorijavolu
- 860
- 3
- 14
- 28
0
I more thought that,p and div elements are block level element on the other side, span is an inline element. but when you write p in your code it will take space top and bottom but div behavior not like that. Check out this experiment on JS fiddle:
Fazlul Karim
- 367
- 1
- 2
- 13