240

What is the difference between <p> and <div>?

Can they be used interchangeably? What are the applications?

Improve this question
4
  • 40
    In any valid HTML/XHTML, transitional or strict, you cannot nest a <p> inside another <p> so <div> and <p> are not interchange. Commented Feb 9, 2010 at 3:44
  • 5
    Byran - you've struck the essential issue with these "semantic" answers. The problem is that HTML artificially constrains <p>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? Commented Aug 30, 2011 at 18:14
  • 2
    @117700 have you considered changing the accepted answer? Commented May 29, 2018 at 0:10
  • Keep in mind <div></div> requires open and closing tags, <p> does not in specific circumstances Commented Aug 28, 2019 at 17:45

12 Answers 12

Reset to default
343

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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.
When you say to use <p> for "paragraph of content", does the content have to be in the form of letters and words? Would you ever use <p> to describe some other type of content, like images?
@drs: Permitted content for <p> 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 <p>. References: w3.org/TR/html-markup/p.html and w3.org/TR/html-markup/common-models.html#common.elem.phrasing. HTH
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.
93

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.

Improve this answer

6 Comments

If you want to control rendering, you should be using CSS. Don't rely on browsers' current defaults.
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.
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.
@JAVA Just write two dummy .html files with <div>A</div>B in the first and <p>A</p>B in the second and see the difference.
VERY useful answer.
|
71

<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 -->
Improve this answer

2 Comments

So you can not have an <h1> in a <p> ?
Very useful comment.
10

DIV is a generic block level container that can contain any other block or inline elements, including other DIV elements, whereas P is to wrap paragraphs (text).

Improve this answer

Comments

10

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.

Improve this answer

Comments

10

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.

Improve this answer

4 Comments

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.
ya,but he could have start a discussion with some relevant info ,any way will edit it
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 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.
6

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.

Improve this answer

Comments

6

Besides the already given answer one major distinction:

  • div can contain other div elements
  • p cannot contain another p element

Which means that div can be stacked while p cannot!

Improve this answer

Comments

5

<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.

Improve this answer

1 Comment

Very useful comment.
4

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.

Improve this answer

Comments

4

<p> is semantically used for text, paragraphs usually.

<div> is used for a block or area in a webpage. For example it could be used to make the area of a header.

They could probably be used interchangeably, but you shouldn't.

Improve this answer

Comments

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.