views:

1028

answers:

7

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

+15  A: 

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
thats right. it is just a semantical difference...
Hippo
Sorry. I don't understand what you mean by "not semantically connected to the others".
eggdrop
@Hippo A <div> can contain child elements that a <p> cannot: a <p>'s children are only inline elements and text node.
ChrisW
that's also right @ ChrisW :-)
Hippo
"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
@eggdrop, I changed the wording of this passage to be more clear.
User
+2  A: 

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.

DDaviesBrackett
Yes I am primarily interested in using CSS for my layouts. Why do you say "and that's it"?
eggdrop
<P>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 <div>s for the major blocks, including the block wherein the <p>s are placed
Michael Haren
@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 <p>s for the major blocks, including the block wherein the <p>s are placed?
eggdrop
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
@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
@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
+3  A: 

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
When you say "they give you the advantage", what does "they" refer to?
eggdrop
Paragraph tags.
ceejayoz
Both: p and div
Treb
+6  A: 

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
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
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
@Lai: no, they are not really "interchangeable". <div> is meant for "generic" elements where there is no appropriate element to use, eg columns. <p> is for paragraphs, so for the column example, you'd have a <div> for the column, with paragraphs inside it.
DisgruntledGoat
we're mixing terms here. I'm sure he means 'interchangeable' in regards to layout, not semantics (meaning).
SpliFF
In that case, the answer is still "no". <p> always has a margin by default whereas <div> 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
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 <p> with paragraphs. Use <div> for things that don't already have a real tag.
voyager
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. <H1>, or nothing, <DIV>, but it's not a 'paragraph'.
Javaman59
+1  A: 

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.
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
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.
+1  A: 
AmbroseChapel
Good to know. Thanks.
eggdrop
A: 

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