CODEWITHSUNDEEP
html
Alex Gordon
Alex Gordon

Reputation: 60731

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

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

Can they be used interchangeably? What are the applications?

Upvotes: 237

Views: 159774

Answers (12)

user19497610
user19497610

Reputation:

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.

Upvotes: 0

Ashish Agarwal
Ashish Agarwal

Reputation: 6283

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.

Upvotes: 10

LeO
LeO

Reputation: 5238

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!

Upvotes: 6

vectran
vectran

Reputation: 1979

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

Upvotes: 4

Andrew Hare
Andrew Hare

Reputation: 351516

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.

Upvotes: 339

ceejayoz
ceejayoz

Reputation: 180014

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.

Upvotes: 92

Nazmul
Nazmul

Reputation: 7218

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.

Upvotes: 10

cletus
cletus

Reputation: 625077

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

Upvotes: 71

Daniel A. White
Daniel A. White

Reputation: 190945

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.

Upvotes: 4

Chad Okere
Chad Okere

Reputation: 4578

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

Upvotes: 5

Suraj Chandran
Suraj Chandran

Reputation: 24791

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.

Upvotes: 6

bdl
bdl

Reputation: 1502

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

Upvotes: 10

Related Questions