17

I recently had a debate with a colleague who claimed that a <div> tag should be used over a <p> tag when formatting paragraphs.

The case against the use of <p> is that it produces irregular spacing across browsers and it is likely to become obsolete like the <b> tag.

Is this opinion of the <p> tag shared by the community?

BradB
  • 647
  • 4
  • 11
  • 5
    Just to point out, <b> (and <i> for that matter) are far from obsolete. Check the HTML5 spec. – DisgruntledGoat Oct 25 '10 at 13:36
  • Good point - I just checked, I've always been instructed that and are depreciated tags and and should be used. – BradB Oct 25 '10 at 14:01
  • <strong> and <em> should always be used for emphasis. <b> and <i> are deprecated in that respect but they do have legitimate, albeit limited, use in HTML5. – DisgruntledGoat Oct 25 '10 at 18:43
  • Does this discussion really belong here? It seems to me that this should be on Doctype – Charles Boyung Oct 28 '10 at 20:44
  • @Charles - it's a grey area at the moment, as the site is still in its infancy. If you feel strongly, feel free to start a new discussion over at http://meta.webmasters.stackexchange.com - or post your comments here: http://meta.webmasters.stackexchange.com/questions/117/what-is-the-line-between-a-pro-webmaster-question-and-a-well-not-pro-webmas – Mark Henderson Oct 28 '10 at 21:54
  • @Farseeker, I'm just basing it on what is in the FAQ; isn't the FAQ supposed to represent what the site's about (even if it is still growing and learning)? – Charles Boyung Oct 29 '10 at 13:25

2 Answers2

41

divs and ps are for completely different purposes. p is for paragraphs, div is for sectional divisions. One is for text formatting, the other is for page structure. It is semantically incorrect to use div in place of p.

And the reason the use of b is discouraged is because it's a presentation tag. It has no semantic meaning. Both p and div have their own unique semantic meanings. p will never be obsolete as long as people still format text into paragraphs.

Your colleague doesn't appear to be familiar with the principle of separation of content and presentation. Otherwise, he would know why b is abhorred and that presentation issues like text spacing ought to be defined in CSS, not your HTML.

Lèse majesté
  • 15,296
  • 38
  • 49
  • 11
    +1 Agree. Just to emphasise... any "irregular spacing across browsers" (although that is debatable) can be controlled entirely by CSS. – MrWhite Oct 25 '10 at 11:59
  • 4
    Yep... p { margin: 1em 0 } makes this entire question moot. – DisgruntledGoat Oct 25 '10 at 13:35
  • 7
    <b> does have a semantic meaning now: "The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede." (source) – David Murdoch Dec 13 '11 at 18:47
13

<p> and <div> are not meant for the same purpose, as they have a different semantical meaning:

  • <p> is for paragraph,
  • <div> is to "offer a generic mechanism for adding structure to documents", as stated in the div HTML spec from W3C

<p> may not be deprecated in the future as it still is present in XHTML and HTML 5.

Both tags have different graphical rendering. A <p> has a top and a bottom margin of 1em, whereas a <div> has no margin at all. But this point is secondary as it may be overridden by CSS.

Also, note this difference: while both tags are of type "block", only <div> can contain other block elements. Thus:

  • <p><p> bla </p></p> is wrong, while
  • <div><div> bla </div></div> is ok

The important point to remember is both are valid and used tags, but not for the same purpose.

Matthieu FAURE
  • 259
  • 1
  • 3