Semantic Elements

Tomasz Bogusz

Semantic Sectioning Elements

Semantic sectioning elements are elements that convey in an algorithmically readable way the meaning of their content and the content of their enclosing elements through dividing the enclosing elements into named parts.

The semantic sectioning elements are:

  • section,

  • article,

  • nav, and

  • aside.

Section

The section element represents a thematic group of content which can be but doesn't have to be headed with one of the header elements (h1, h2, etc.).

The section element can represent for example:

  • a document introduction,

  • a chapter,

  • a summary,

  • side information, and

  • any other separated thematic piece of content,

<body>
  <h1>Witcher Horses</h1>
  <section>
    <h2>Introduction</h2>
    <p>There are many horses in Witcher universe.</p>
  </section>
  <section>
    <h2>About Geralt's and Ciri's Horses</h2>
    <p>Geralt's horse name is Roach and Ciri's horse name is Kelpie.</p>
  </section>
<body>

Article

The article element represents a stand-alone and independent group of content that can be easily cut off from an HTML document and paste into another.

An HTML document can include many article elements within itself.

<body>
  <h1>Horses</h1>
  <article>
    <h2>Geralt's Horse</h2>
    <p>Geralt's horse name is Roach.</p>
  </article>
  <article>
    <h2>Ciri's Horse</h2>
    <p>Ciri's horse name is Kelpie.</p>
  </article>
<body>

Section vs Article

It is allowed to nest multiple article elements within a single section element and it is allowed to nest multiple section elements within a single article element.

<body>
  <section>
    <h1>...</h1>
    <article>
      <h2>...</h2>
      <section>
        ...
      <section>
      <section>
        ...
      <section>
    </article>
    <article>
      <h2>...</h2>
      <section>
        ...
      <section>
      <section>
        ...
      <section>
    </article>
  </section>
  <section>
    <h1>...</h1>
    ...
  </section>
<body>

It is disputed (vide Stackexchange) whether multiple section and/or article elements nested directly in the body element should be headed with h1 or h2.

Nav

The nav element represents a group of navigation links of crucial importance for the enclosing element such as body, section, article, header, and/or footer.

<article>
  <header>
    <nav>
      <a href="...">...</a>
      <a href="...">...</a>
      <a href="...">...</a>
    </nav>
  </header>
  ...
</article>

Aside

The aside element represents a group of content which does not constitute a part of the main content of its enclosing element to which it is only indirectly related.

<article>
  <h1>Horse Names</h1>
  <p>Geralt's horse name is Roach.</p>
  <p>Ciri's horse name is Kelpie.</p>
  <aside>
    Geralt and Ciri are witchers.
  </aside>
</article>

Semantic Phrasing Elements

The semantic phrasing elements are elements that control the structure of phrases in HTML documents and convey to computer programs the meaning of their content.

The most notable semantic phrasing elements are:

  • em,

  • strong,

  • mark,

  • time,

  • abbr,

  • q,

  • cite, and

  • code.

Emphasis

The em element is a semantic phrasing element that represents the part of a phrase which is emphasized.

Browsers typically add font-style: italic; CSS attribute to em elements.

<p>
  Geralt had many horses. He called <em>all</em> of them "Roach"
</p>

Stronger Emphasis

The strong element is a semantic phrasing element that represents the part of a phrase strongly emphasized. Stronger than when the em element is used.

Browsers typically add font-weight: bold; CSS attribute to strong elements.

<p>
  There are many swordsmen in the Witcher universe. <strong>None of them could compare to Geralt of Rivia.</strong>
<p>

Marking Relevance

The mark element represents the part of a phrase that is highlighted due to its relevance (as opposed to em and strong importance emphasis).

The mark element can for example be used to highlight:

  • a part of a quotation, or

  • a matched search string.

<blockquote>
  There are many high fantasy books. <mark>None of them compares to "the Wither".</mark>
</blockquote>

Point or Period in Time

The time element represents a specific point or a period in time.

The time element can have the datetime attribute to indicate an algorithmically readable counterpart of the point or the period in time.

<div>
  The summit is to take place on <time datetime="2022-03-01">March 1st, 2022</time>
</div>

Examples of valid datetime attribute:

  • a year (e.g. 2022)

  • a year and month (e.g. 2022-01)

  • a year, month and day (e.g. 2022-01-01)

  • an hour, minute and second (e.g. 09:30:00),

  • a local year, month, day, hour, minute and second (e.g. 2022-01-01T09:30:00),

  • a global year, month, day, hour, minute and second (.e.g 2022-01-01T09:30:00Z or 2022-01-01T09:30:00-0400), and

  • a duration string.

Abbreviation

The abbr element represents an abbreviation or an acronym.

The abbr element can have an optional attribute title which semantically expands the content of the abbr element. Some browsers expand the title when hovering over the abbr element.

<p>
  The effectiveness of <abbr title="United Nations">UN</abbr> is questioned by many.
</p>

One of the usage examples of an abbr element is using it within a dfn (definition) element.

Quote

The q element represents an inline quotation. Browsers typically display a q element in quotation marks.

For non-inline (aka block) quotations use the blockquote element instead of the q element.

<p>
  I love the quote from the Andrzej Sapkowski's <cite>Last Wish</cite>: <q>Evil is Evil. Lesser, greater, middling… Makes no difference. The degree is arbitrary. The definition’s blurred. If I’m to choose between one evil and another… I’d rather not choose at all.</q>
<p>

Citation Reference

The cite element represents a reference to citation source title. The cite element is often used with the q or blockquote elements to refer to the source from which a given quotation originates.

<figure>
  <blockquote>
    Evil is Evil. Lesser, greater, middling… Makes no difference. The degree is arbitrary. The definition’s blurred. If I’m to choose between one evil and another… I’d rather not choose at all.
  </blockquote>
  <figcaption>
    From <cite>Last Wish</cite> by Andrzej Sapkowski.
  </figcaption>
<figure>

Inline Code

The code element represents a piece of computer code.

Most browsers use a monospace font for a code element.

<p>
  In JavaScript an assignment of an arrow function to a variable might look like this: <code>const foo = bar => console.log(bar)</code>
</p>

Semantic Non-Sectioning Non-Phrasing Elements

Semantic non-sectioning non-phrasing elements are HTML block elements of non-sectioning nature that convey in an algorithmically readable way the meaning of their content.

The most notable non-sectioning non-phrasing semantic elements are:

  • main

  • header,

  • footer,

  • figure, and

  • details.

Main

The main element represents the primary content of a given HTML document.

It is not allowed for an HTML document to have more than one visible main element.

<body>
  <header>...</header>
  <main>
    ...
  </main>
  <footer>...</footer>
</body>

Elements shared between many HTML documents of the same service or application (such as header, footer, sidebar, links) should not be enclosed within the main element.

In turn, the main element cannot be enclosed within an article, aside, header, footer, or nav element.

The main element can be helpful for assistive computer programs at finding the primary content of a given document.

Header

The header element denotes an introductory group of content for a body, section, and/or article element.

It is allowed for a body, section and article element to each have a separate header element.

Typically header includes within itself:

  • a heading,

  • a cover image and/or logo,

  • an author,

  • a date,

  • an editorial, and

  • navigation links.

<article>
  <header>
    <h1>...</h1>
    <a href="http://soundof.it" rel="author">Tom</a>
    <time datetime="2022-02-23">February 23rd, 2022</time>
    <p class="editorial">...</p>
  </header>
  <p>...</p>
  <p>...</p>
</article>

Figure

The figure element represents an independent piece of content (typically an image) relevantly connected with other pieces of content of the HTML document.

A potential figure's caption is enclosed within the figcaption element.

<p>
  <figure>
    <img src="/assets/horses/roach" alt="Geralt's horse">
    <figcaption>Geralt's horse</figcaption>
  </figure>
</p>

Details

The details element represents a piece of content that is only disclosed once the element's label is clicked. Therefore, the details element can have a closed and an open state.

For details' label the summary element is used.

<p>
  <details>
    <summary>Roach</summary>
    Roach is a name given to all horses owned by Geralt.
  </details>
</p>