HTML - Paragraph

About

A paragraph is typically a run of phrasing content that forms a block of text with one or more sentences that discuss a particular topic, as in typography (paragraph), but can also be used for more general thematic grouping.

The p element is merely one of several ways of marking up a paragraph.

For instance, is also a paragraph:

an address,
a part of a form,
a byline,
or a stanza in a poem.

Example

Two paragraphs in a section

In the following example, there:

are two paragraphs in a section.
is also a heading, which contains phrasing content that is not a paragraph.

The comments and inter-element whitespace do not form paragraphs.

<section>
  <h1>Example of paragraphs</h1>
  This is the <em>first</em> paragraph in this example.
  <p>This is the second.</p>
  <!-- This is not a paragraph. -->
</section>

Flow Content

The following example takes the markup from the earlier example and puts the flow elements ins and del around some of the markup to show that the text was changed.

This example has exactly the same paragraphs as the previous one, despite the ins and del elements:

the ins element straddles the heading and the first paragraph,
and the del element straddles the boundary between the two paragraphs.

Paragraphs in flow content are defined relative to what the document looks like without the a, ins, del, and map elements complicating matters, since those elements, with their hybrid content models, can straddle paragraph boundaries,

Generally, having elements straddle paragraph boundaries is best avoided. Maintaining such markup can be difficult.

<section>
  <ins><h1>Example of paragraphs</h1>
  This is the <em>first</em> paragraph in</ins> this example<del>.
  <p>This is the second.</p></del>
  <!-- This is not a paragraph. -->
</section>

P Element

A paragraph is also formed explicitly by p elements.

Overlap, Fallback

It is possible for paragraphs to overlap when using certain elements that define fallback content. For example, in the following section:

<section>
 <h1>My Cats</h1>
 You can play with my cat simulator.
 <object data="cats.sim">
  To see the cat simulator, use one of the following links:
  <ul>
   <li><a href="cats.sim">Download simulator file</a>
   <li><a href="http://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
  </ul>
  Alternatively, upgrade to the Mellblom Browser.
 </object>
 I'm quite proud of it.
</section>

There are five paragraphs:

“You can play with my cat simulator. <object> I'm quite proud of it.”, where object is the object element.
“To see the cat simulator, use one of the following links:”.
“Download simulator file”.
“Use online simulator”.
“Alternatively, upgrade to the Mellblom Browser.”.

The first paragraph is overlapped by the other four. A user agent that supports the “cats.sim” resource will only show the first one, but a user agent that shows the fallback will confusingly show the first sentence of the first paragraph as if it was in the same paragraph as the second one, and will show the last paragraph as if it was at the start of the second sentence of the first paragraph.

To avoid this confusion, explicit p elements can be used. For example:

<section>
 <h1>My Cats</h1>
 <p>You can play with my cat simulator.</p>
 <object data="cats.sim">
  <p>To see the cat simulator, use one of the following links:</p>
  <ul>
   <li><a href="cats.sim">Download simulator file</a>
   <li><a href="http://sims.example.com/watch?v=LYds5xY4INU">Use online simulator</a>
  </ul>
  <p>Alternatively, upgrade to the Mellblom Browser.</p>
 </object>
 <p>I'm quite proud of it.</p>
</section>

Documentation / Reference

HTML5 - DOM - Paragraph