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:

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:

  1. “You can play with my cat simulator. <object> I'm quite proud of it.”, where object is the object element.
  2. “To see the cat simulator, use one of the following links:”.
  3. “Download simulator file”.
  4. “Use online simulator”.
  5. “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





Discover More
Browser / DOM - Range - defining a sequence of characters

Range is a function that permits defining a sequence of characters in the DOM tree and is used in selecting and copying content.
CSS - Property

CSS defines a finite set of parameters, called properties, that defines the rendering of a document. Properties are written in a css rule after the element selection definition. Properties are attached...
Css - (Line|word) (wrap|Breaking)

Line breaking, also known as word wrapping, is the process of breaking a section of text into lines such that it will fit in the available width of a page, window or other display area (such as a viewport)...
HTML - Div element (no meaning)

The div element has no special meaning at all. It's a generic content. If you want to organize a text in logical unit, you should use the section element The div elements can be useful for: stylistic...
HTML - P element

The pp element is one way of representing a paragraph. The P tag can only contain inline elements (ie phrasing content). It cannot contain block-level elements (including P itself). The p element...
HTML - Phrasing Content (Text)

Phrasing content is: the text of the document, as well as elements that mark up that text at the intra-paragraph level. Runs of phrasing content form paragraphs. Most elements that are categorized...
HTML - Title (element|attribute)

Title in HTML can be: the title element or the title attribute of an element The title element represents the document’s title or name. The document property document.title returns the...
Browser
How to select text dynamically in a Browser with Javascript? The window Selection Object explained

How to manipulate the selection made by a mouse or with the keyboard in a browser
Insert Adajcent Illustration
What is InsertAdjacent and InsertAdjacentHTML and how to use them ?

InsertAdjacent is a function that permits to insert a node or a html into the DOM tree relatively to a node at this positions (as a child or sibling)



Share this page:
Follow us:
Task Runner