What is the difference between <p> and <div>?
Can they be used interchangeably? What are the applications?
What is the difference between and
?
Asked
Active
Viewed 1.5e+01k times
228
12 Answers
335
They have semantic difference - a <div> element is designed to describe a container of data whereas a <p> element is designed to describe a paragraph of content.
The semantics make all the difference. HTML is a markup language which means that it is designed to "mark up" content in a way that is meaningful to the consumer of the markup. Most developers believe that the semantics of the document are the default styles and rendering that browsers apply to these elements but that is not the case.
The elements that you choose to mark up your content should describe the content. Don't mark up your document based on how it should look - mark it up based on what it is.
If you need a generic container purely for layout purposes then use a <div>. If you need an element to describe a paragraph of content then use a <p>.
Note: It is important to understand that both <div> and <p> are block-level elements which means that most browsers will treat them in a similar fashion.
Andrew Hare
- 344,730
- 71
- 640
- 635
-
My experience has been that if you want to layout some piece of content differently than some other piece of content, those two are semantically distinct and thus should be marked up indepedently *anyway*. If OTOH, they *aren't* semantically distinct, then they should probably be layed out together. In either case, there is no need to add an element for layout purposes, because in the first case it should have already been there to begin with and in the second case there is no layouting going on. But then again, I'm a purist and my sites always look like flashbacks to 1995.
– Jörg W Mittag
Feb 09 '10 at 14:04
-
9
When you say to use `
` for "paragraph of content", does the content have to be in the form of letters and words? Would you ever use `
` to describe some other type of content, like images?
– drs
Jun 11 '13 at 11:42
-
3
@drs: Permitted content for
is "Phrasing content", which consists of phrasing elements intermixed with normal character data. Btw, images belong to phrasing elements so you can use them inside
. References: http://w3.org/TR/html-markup/p.html and http://www.w3.org/TR/html-markup/common-models.html#common.elem.phrasing. HTH
– Paolo
Apr 21 '14 at 10:54
-
2
You forgot to mention that you cannot nest p's while you can with div's. As for the "don't include layout information in the html" kind of attitudes: it is not possible to write an html file without bothering with how it should look. Your choice of the order and nesting of div's will always have an influence -- unless you write some javascript that rips your page apart and restructures it. Thus seeing div as "a generic container *purely for **layout** purposes*" is the correct wording.
– masterxilo
May 28 '14 at 13:10
87
All good answers, but there's one difference I haven't seen mentioned yet, and that's how browsers render them by default. The major web browsers will render a <p> tag with margin above and below the paragraph. A <div> tag will be rendered without any margin at all.
ceejayoz
- 176,543
- 40
- 303
- 368
-
12
If you want to control rendering, you should be using CSS. Don't rely on browsers' current defaults.
– Mechanical snail
Oct 08 '11 at 06:34
-
23
The question asked what differences there are between DIV and P tags. This is a significant one for anyone not using a CSS reset, especially as it may be non-obvious to someone using just one browser.
– ceejayoz
Oct 08 '11 at 15:32
-
5
Thanks for the clarification. I was looking for this exact difference since using P tag was causing text to appear with margin at the top (and bottom probably), so was wondering where that space is coming from. Needed to get rid of the space.
– WhatsInAName
Feb 07 '13 at 00:39
-
-
1
@JAVA Just write two dummy .html files with `AB` in the first and `
A
B` in the second and see the difference.
– logi-kal
Apr 30 '21 at 14:07
-
1
70
<p> indicates a paragraph and has semantic meaning.
<div> is simply a block container for other content.
Anything that can go in a <p> can go in a <div> but the reverse is not true. <div> tags can have block-level elements as children. <p> elements cannot.
Tae a look at the HTML DTD.
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % block
"P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT |
BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS">
<!ENTITY % flow "%block; | %inline;">
<!ELEMENT DIV - - (%flow;)* -- generic language/style container -->
<!ELEMENT P - O (%inline;)* -- paragraph -->
cletus
- 616,129
- 168
- 910
- 942
11
The only difference between the two elements is semantics. Both elements, by default, have the CSS rule display: block (hence block-level) applied to them; nothing more (except somewhat extra margin in some instances). However, as aforementioned, they both different greatly in terms of semantics.
The <p> element, as its name somewhat implies, is for paragraphs. Thus, <p> should be used when you want to create blocks of paragraph text.
The <div> element, however, has little to no meaning semantically and therefore can be used as a generic block-level element — most commonly, people use it within layouts because it is meaningless semantically and can be used for generally anything you might require a block-level element for.
miken32
- 42,008
- 16
- 111
- 154
Ashish Agarwal
- 6,215
- 12
- 58
- 91
-
3
There's no need for that last sentence. Almost all the questions on this site could probably be googled for, but that's not the point. The point is to make a resource for developers with the same questions in the future.
– nickf
Feb 09 '10 at 03:50
-
ya,but he could have start a discussion with some relevant info ,any way will edit it
– Ashish Agarwal
Feb 09 '10 at 03:52
-
1
Since both p and div are block elements, why is it that when a h1 element is nested within a div, it will inherit the styles but when nested in a p it wont? Thank you
– Return-1
Jun 10 '17 at 11:55
-
@Return-1 I don't know what exactly happens in your case, but an h1 is a header, which is _not_ phrasing content and therefore not allowed inside a paragraph. Consider printed text - it contains headers and paragraphs, but the headers are not part of the paragraphs.
– Oskar Berggren
Mar 28 '19 at 18:49
9
It might be better to see the standard designed by W3.org. Here is the address: http://www.w3.org/
A "DIV" tag can wrap "P" tag whereas, a "P" tag can not wrap "DIV" tag-so far I know this difference. There may be more other differences.
Nazmul
- 7,078
- 12
- 51
- 63
7
Think of DIV as a grouping element. You put elements in a DIV element so that you can set their alignments
Whereas "p" is simply to create a new paragraph.
Suraj Chandran
- 24,433
- 12
- 63
- 94
6
<p> represents a paragraph and <div> represents a 'division', I suppose the main difference is that divs are semantically 'meaningless', where as a <p> is supposed to represent something relating to the text itself.
You wouldn't want to have nested <p>s for example, since that wouldn't make much semantic sense (except in the sense of quotations) Whereas people use nested <div>s for page layout.
According to Wikipedia
In HTML, the span and div elements are
used where parts of a document cannot
be semantically described by other
HTML elements.
Chad Okere
- 4,570
- 1
- 21
- 19
5
A p tag is for a paragraph, generally used for text. A div tag is for division, and generally used for creating sections of text.
Daniel A. White
- 187,200
- 47
- 362
- 445
5
Besides the already given answer one major distinction:
div can contain other div elementsp cannot contain another p element
Which means that div can be stacked while p cannot!
LeO
- 4,238
- 4
- 48
- 88
0
Generally, if the content in question consists only of text and/or any other phrasing content such as spans, links, buttons, etc. then use <p>. (<button> elements are phrasing content.)
https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
Even if <p> is not appropriate because of block-level elements in the content, <div> isn't the only container to consider. <section>, <article>, and <aside> are a few of the several potential alternatives to <div> that can be used when appropriate. Still, <div> is no longer a second-class element, because it is often the correct element to use to leverage (modern) CSS layout capabilities such as grid and flex box.
Coder
- 133
- 7
Asked
Active
Viewed 1.5e+01k times
228
12 Answers
335
They have semantic difference - a <div> element is designed to describe a container of data whereas a <p> element is designed to describe a paragraph of content.
The semantics make all the difference. HTML is a markup language which means that it is designed to "mark up" content in a way that is meaningful to the consumer of the markup. Most developers believe that the semantics of the document are the default styles and rendering that browsers apply to these elements but that is not the case.
The elements that you choose to mark up your content should describe the content. Don't mark up your document based on how it should look - mark it up based on what it is.
If you need a generic container purely for layout purposes then use a <div>. If you need an element to describe a paragraph of content then use a <p>.
Note: It is important to understand that both <div> and <p> are block-level elements which means that most browsers will treat them in a similar fashion.
Andrew Hare
- 344,730
- 71
- 640
- 635
-
My experience has been that if you want to layout some piece of content differently than some other piece of content, those two are semantically distinct and thus should be marked up indepedently *anyway*. If OTOH, they *aren't* semantically distinct, then they should probably be layed out together. In either case, there is no need to add an element for layout purposes, because in the first case it should have already been there to begin with and in the second case there is no layouting going on. But then again, I'm a purist and my sites always look like flashbacks to 1995. – Jörg W Mittag Feb 09 '10 at 14:04
-
9When you say to use `
` for "paragraph of content", does the content have to be in the form of letters and words? Would you ever use `
` to describe some other type of content, like images?
– drs Jun 11 '13 at 11:42 -
3@drs: Permitted content for
is "Phrasing content", which consists of phrasing elements intermixed with normal character data. Btw, images belong to phrasing elements so you can use them inside
. References: http://w3.org/TR/html-markup/p.html and http://www.w3.org/TR/html-markup/common-models.html#common.elem.phrasing. HTH
– Paolo Apr 21 '14 at 10:54 -
2You forgot to mention that you cannot nest p's while you can with div's. As for the "don't include layout information in the html" kind of attitudes: it is not possible to write an html file without bothering with how it should look. Your choice of the order and nesting of div's will always have an influence -- unless you write some javascript that rips your page apart and restructures it. Thus seeing div as "a generic container *purely for **layout** purposes*" is the correct wording. – masterxilo May 28 '14 at 13:10
87
All good answers, but there's one difference I haven't seen mentioned yet, and that's how browsers render them by default. The major web browsers will render a <p> tag with margin above and below the paragraph. A <div> tag will be rendered without any margin at all.
ceejayoz
- 176,543
- 40
- 303
- 368
-
12If you want to control rendering, you should be using CSS. Don't rely on browsers' current defaults. – Mechanical snail Oct 08 '11 at 06:34
-
23The question asked what differences there are between DIV and P tags. This is a significant one for anyone not using a CSS reset, especially as it may be non-obvious to someone using just one browser. – ceejayoz Oct 08 '11 at 15:32
-
5Thanks for the clarification. I was looking for this exact difference since using P tag was causing text to appear with margin at the top (and bottom probably), so was wondering where that space is coming from. Needed to get rid of the space. – WhatsInAName Feb 07 '13 at 00:39
-
-
1@JAVA Just write two dummy .html files with `AB` in the first and `
A
B` in the second and see the difference. – logi-kal Apr 30 '21 at 14:07 -
1
70
<p> indicates a paragraph and has semantic meaning.
<div> is simply a block container for other content.
Anything that can go in a <p> can go in a <div> but the reverse is not true. <div> tags can have block-level elements as children. <p> elements cannot.
Tae a look at the HTML DTD.
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;"> <!ENTITY % block "P | %heading; | %list; | %preformatted; | DL | DIV | NOSCRIPT | BLOCKQUOTE | FORM | HR | TABLE | FIELDSET | ADDRESS"> <!ENTITY % flow "%block; | %inline;"> <!ELEMENT DIV - - (%flow;)* -- generic language/style container --> <!ELEMENT P - O (%inline;)* -- paragraph -->
cletus
- 616,129
- 168
- 910
- 942
11
The only difference between the two elements is semantics. Both elements, by default, have the CSS rule display: block (hence block-level) applied to them; nothing more (except somewhat extra margin in some instances). However, as aforementioned, they both different greatly in terms of semantics.
The <p> element, as its name somewhat implies, is for paragraphs. Thus, <p> should be used when you want to create blocks of paragraph text.
The <div> element, however, has little to no meaning semantically and therefore can be used as a generic block-level element — most commonly, people use it within layouts because it is meaningless semantically and can be used for generally anything you might require a block-level element for.
miken32
- 42,008
- 16
- 111
- 154
Ashish Agarwal
- 6,215
- 12
- 58
- 91
-
3There's no need for that last sentence. Almost all the questions on this site could probably be googled for, but that's not the point. The point is to make a resource for developers with the same questions in the future. – nickf Feb 09 '10 at 03:50
-
ya,but he could have start a discussion with some relevant info ,any way will edit it – Ashish Agarwal Feb 09 '10 at 03:52
-
1Since both p and div are block elements, why is it that when a h1 element is nested within a div, it will inherit the styles but when nested in a p it wont? Thank you – Return-1 Jun 10 '17 at 11:55
-
@Return-1 I don't know what exactly happens in your case, but an h1 is a header, which is _not_ phrasing content and therefore not allowed inside a paragraph. Consider printed text - it contains headers and paragraphs, but the headers are not part of the paragraphs. – Oskar Berggren Mar 28 '19 at 18:49
9
It might be better to see the standard designed by W3.org. Here is the address: http://www.w3.org/
A "DIV" tag can wrap "P" tag whereas, a "P" tag can not wrap "DIV" tag-so far I know this difference. There may be more other differences.
Nazmul
- 7,078
- 12
- 51
- 63
7
Think of DIV as a grouping element. You put elements in a DIV element so that you can set their alignments
Whereas "p" is simply to create a new paragraph.
Suraj Chandran
- 24,433
- 12
- 63
- 94
6
<p> represents a paragraph and <div> represents a 'division', I suppose the main difference is that divs are semantically 'meaningless', where as a <p> is supposed to represent something relating to the text itself.
You wouldn't want to have nested <p>s for example, since that wouldn't make much semantic sense (except in the sense of quotations) Whereas people use nested <div>s for page layout.
According to Wikipedia
In HTML, the span and div elements are used where parts of a document cannot be semantically described by other HTML elements.
Chad Okere
- 4,570
- 1
- 21
- 19
5
A p tag is for a paragraph, generally used for text. A div tag is for division, and generally used for creating sections of text.
Daniel A. White
- 187,200
- 47
- 362
- 445
5
Besides the already given answer one major distinction:
divcan contain otherdivelementspcannot contain anotherpelement
Which means that div can be stacked while p cannot!
LeO
- 4,238
- 4
- 48
- 88
0
Generally, if the content in question consists only of text and/or any other phrasing content such as spans, links, buttons, etc. then use <p>. (<button> elements are phrasing content.)
https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
Even if <p> is not appropriate because of block-level elements in the content, <div> isn't the only container to consider. <section>, <article>, and <aside> are a few of the several potential alternatives to <div> that can be used when appropriate. Still, <div> is no longer a second-class element, because it is often the correct element to use to leverage (modern) CSS layout capabilities such as grid and flex box.
Coder
- 133
- 7
inside another
so
are not interchange.
s so they behave differently. If they were just block elements plus semantic meaning that would be ok. But why prevent you from e.g. embedding an illustration in a paragraph?
– dkretz Aug 30 '11 at 18:14` does not in specific circumstances
– Mark Schultheiss Aug 28 '19 at 17:45