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.