Phrasing & Non-Phrasing Elements

Tomasz Bogusz

What Are Phrasing & Non-Phrasing Elements in HTML?

Most body HTML elements can be included in one of the two groups:

  • non-phrasing content elements - control the structure of an HTML document and the structure of its HTML elements,

  • phrasing content elements - control the structure of phrases (sentences) that are contained within HTML elements.

Both non-phrasing and phrasing elements are part of the so-called flow content elements.

Under HTML specification phrasing elements can be contained within non-phrasing elements however non-phrasing elements cannot be contained within phrasing elements.

Phrasing Content Elements

The phrasing content elements control the structure of phrases (sentences) contained within other HTML elements.

The most notable phrasing content elements are:

  • a spanning element - span,

  • a distinguished content - strong,

  • an emphasised content - em,

  • a cited title - cite,

  • a quote - q,

  • an abbreviation - abbr,

  • a line break - br,

  • embedded code - embed & code,

  • images,

  • inputs and their labels, and

  • superscript - sup.

As presented above some elements - such as images or inputs - can be both phrasing and non-phrasing depending on the context in which they are used.

<p>
  <cite>The Two Towers</cite> is <strong>the best</strong> part of the <abbr title="Lord of the Rings">LOTR</abbr> trilogy.
</p>

Non-Phrasing Content Elements

The non-phrasing content elements control the structure of an HTML document and the structure of HTML elements rather than the structure of phrases.

The most notable non-phrasing content elements are:

  • division - div,

  • paragraph - p,

  • headings - h1, h2, h2, etc.,

  • sections - header, main, footer, section, article, aside, and nav

  • anchors - a,

  • embedded code - embed & code,

  • images,

  • inputs and their labels.

<body>
  <div>
    <h1>
      Horses
    <h1>
    <p>
      Geralt's horse is Roach.
    </p>
    <p>
      Ciri's horse is Kelpie.
    </p>
  </div>
</body>