Is the <div> tag ever an undesirable alternative to the <p> tag?

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

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.