20

I see the <p> tag used a lot in the code of others but have never used it in my own work.

I'm wondering what advantage this gives over using a <div> tag?

  1. Are there any benefits I could get from incorporating the <p> tag into my pages?

  2. Is there any disadvantage in only using <div> tags without <p>?

eggdrop
  • 3,356
  • 5
  • 29
  • 32

7 Answers7

30

DIV indicates a separate section on a page, which is not semantically connected to the others. With P tags you indicate that this piece of text is broken into paragraphs but it still stays a single entity.

ADDED: With "semantics" people usually refer to the possibility to extract information from HTML as to what various elements of a page represent and how they are related to each other, as opposed to treating the whole HTML as just a markup to be rendered. For example, when you do menus it is recommended that you use ULs (unordered list) for that purpose, because it will be possible to learn from the markup that all LIs (list items) contained within a particular list probably mean choice options of the same level. I know it is helpful for screen readers for impaired people that you try to make your markup as semantic-rich as possible.

If you're not concerned with this, then it is virtually no difference for the rendered result whether you use DIVs or Ps. You can style both with CSS to achieve the same look and feel.

Semantic HTML is still not "the absolute good" to be strived for. For many people semantics does not add any value as they wish just that their pages are rendered correctly. That's why the ever-lasting discussion on whether to use tables for markup (and add semantics where it does not belong) or stick to CSS is not going to end any soon.

User
  • 30,403
  • 22
  • 79
  • 107
  • Sorry. I don't understand what you mean by "not semantically connected to the others". – eggdrop May 25 '09 at 16:35
  • 11
    @Hippo A
    can contain child elements that a

    cannot: a

    's children are only inline elements and text node.

     – ChrisW May 25 '09 at 16:36
  • "whether to use tables for markup (and break semantics) or stick to CSS" - after reading your explanation of semantics I expected the opposite - that tables reinforce semantics while CSS skirts semantics and simply allows all objects to be treated as equals. – eggdrop May 25 '09 at 16:59
  • @eggdrop, I changed the wording of this passage to be more clear. – User May 25 '09 at 17:03
  • 'Semantic HTML is still not "the absolute good" to be strived for' Good answer - in some cases semantics have no advantage, eg HTML inside of an OS app that never gets machine read. – MachineElf Oct 02 '13 at 13:00
  • Using p tag instead of div can drastically affect later development of your web application, as ChrisW noted you can't have divs and other elements within that paragraph... so P would be really only for use when you *know* it will *only* be paragraph text. – NoBugs Aug 25 '17 at 07:11
11

p means 'paragraph', div means 'division'. That's as complicated as it gets. It's a way of telling search-engines, scrapers, tools, etc that this is a paragraph of text.

div is undesirable when you're actually marking up a 'paragraph' of text.

SpliFF
  • 38,186
  • 16
  • 91
  • 120
  • So essentially they are interchangeable as far as my layouts are concerned? If I'm using CSS for the layout I could use either without any particular advantages or disadvantages? – eggdrop May 25 '09 at 16:47
  • correct, however it may have an impact on SEO or trigger different layout in some browsers (like to add a line of space between paragraphs on a text reader). – SpliFF May 25 '09 at 16:52
  • @Lai: no, they are not really "interchangeable".
    is meant for "generic" elements where there is no appropriate element to use, eg columns.

    is for paragraphs, so for the column example, you'd have a

    for the column, with paragraphs inside it.
     – DisgruntledGoat May 25 '09 at 17:05
  • we're mixing terms here. I'm sure he means 'interchangeable' in regards to layout, not semantics (meaning). – SpliFF May 25 '09 at 17:24
  • 2
    In that case, the answer is still "no".

    always has a margin by default whereas

    doesn't; it's essentially a blank tag. (I know you can add or remove margins with CSS, but under that definition, practically *every* HTML tag in interchangeable.)
     – DisgruntledGoat May 25 '09 at 18:50
  • You *can* style them and use them in an interchangable way, but you could have problems with, for example, screen readers or Web Crawlers or with old browsers. Also some people (me and I gess a few more :P) like to disable the default CSS from pages to keep them easier to read. Just do the right thing(tm). Use

    with paragraphs. Use

    for things that don't already have a real tag.
     – Esteban Küber May 26 '09 at 00:21
  • What is a "paragraph' of text"? Specifically, are short, unconnected pieces of text 'paragraphs'? eg. "JoJo's Pizza Online Orders", "Our sponsors", "Next". I think I've answered my own question (after reading this discussion). Semantically, it's some other tag, eg.

    , or nothing,
    , but it's not a 'paragraph'.

     – Stephen Hosking Aug 06 '09 at 23:34
7

Both tags have a different purpose.

  • p indicates a paragraph, usually for organising content (text and images,mostly)
  • div on the other hand is a rectangular space on the canvas, usually for layout purposes.

Example: You would put your navigation panel in a div, making it easy to move it from the left to the right of the page, or switching to a 3 column layout. The different sections in your navigation (first the general site navigation, next specific hotlinks to the most recent blog post or whatever) could be seperated by putting them in defferent paragraphs.

(I know, bad example, because the navigation is better represented by unordered lists, but what the hey).

In direct answer to your question, they give you the advantage of differentiating between organising your layout and organising your content, in a way that becomes clear in the HTML source.

Treb
  • 19,903
  • 7
  • 54
  • 87
6

If you are tagging content so you can lay it out with CSS, you probably want <div>; <p> should be used to indicate a paragraph of text and that's it.

Steve Jessop
  • 273,490
  • 39
  • 460
  • 699
Dan Davies Brackett
  • 9,811
  • 2
  • 32
  • 54
  • Yes I am primarily interested in using CSS for my layouts. Why do you say "and that's it"? – eggdrop May 25 '09 at 16:42
  • s are good for paragraphs but really don't serve any purpose for layout beyond adding some space between paragraphs or indenting lines, etc. That is, a typical layout would likely use
    s for the major blocks, including the block wherein the

    s are placed

     – Michael Haren May 25 '09 at 16:48
  • @Michael Haren - Yes, that's what I've seen (regarding "a typical layout"). But my question was whether this needs to be the case. That is, whether a typical layout could as easily use

    s for the major blocks, including the block wherein the

    s are placed?

     – eggdrop May 25 '09 at 16:51
  • Yes, that is technically true. It would go against how those tags were intended to be used, though (or at least how everyone else uses them). – Michael Haren May 25 '09 at 17:07
  • 1
    @eggdrop - no - <p>s can't be nested in text/html which restricts your layout options. As a demonstration see http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cp%3EOuter%20text%3Cp%3Einner%20text%3C/p%3E%3C/p%3E – Alohci May 25 '09 at 23:18
  • @Alohci - I looked at the link - for some reason the inner p block is not recognized as being nested within the outer p block based on the dom diagram to the left. If that's really true, then a p is certainly not a viable alternative to a div for layout purposes. – eggdrop May 26 '09 at 01:44
3

Beyond just the semantics of it (which are important), you will also want to consider validation problems. According to the HTML4 spec, you are not allowed to nest other block-level elements (<div>, <ul>, other <p>, etc) inside a <p> without invalidating your HTML.

I've seen a number of instances where parsers will choose to prematurely close the <p> to allow the other nested block element to begin.

Bryan M.
  • 17,142
  • 8
  • 46
  • 60
  • You mean like this: http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%3Cp%3EOuter%20text%3Cp%3Einner%20text%3C/p%3E%3C/p%3E – eggdrop May 26 '09 at 01:45
  • More or less. Firebug will do the same thing when inspecting the DOM. It's thrown me for a loop when trying to debug bad HTML in the past. – Bryan M. May 26 '09 at 19:06
3

Are there any benefits I could get from incorporating the

tag into my pages?

Yes, provided that you use it correctly -- because the use of semantic HTML is always a benefit.

There are a range of reasons why this is so, but the primary one for people who need a quick explanation is SEO. Search engines will understand your page better if you use semantic HTML.

AmbroseChapel
  • 11,957
  • 7
  • 46
  • 68
1

p tags are for paragraphs. p tags often contain additional CSS styling regarding the textual content that goes into them, and this styling can be defined in various places in the css documentation. for example, a p usually has a bit of extra space below it. if you try laying something out with p tags, you'll end up with uneven padding.

It is better to use divs if you want to have more control over the content in your page from a programmatic perspective. sticking to divs for all layout concerns will also allow you to use p tags exclusively for paragraphs.

fwitz
  • 11
  • 1