Non-Phrasing & Phrasing Elements in HTML

What Are Non-Phrasing & 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.

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>

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>

We use cookies and similar technologies to enhance the quality of services, maintain statistics and adjust marketing content. You will find more information in the Cookies Policy.

By clicking OK you grant consent to processing of your personal data by us and our Trusted Partners with the purpose of maintain statistics and adjustment of the marketing content pursuant to the Privacy Policy. If you wish to not grant that consent and/or limit its extent click Settings.