HTML Semantic Elements: What Is New and What Is Misused

The semantic elements that are genuinely recent are <search> (Baseline October 2023) and <dialog> (Baseline March 2022). Alongside them, <details> gained a name attribute (Baseline September 2024) that gives you an exclusive accordion with no JavaScript.

A caveat first: <header>, <footer>, <main>, <article> and <section> are sometimes presented as “new semantic elements.” They are HTML5-era elements from around 2010. Not new.

This article separates the genuinely new from the long-established-but-misused. In particular, the distinction between <section> and <div> is widely got wrong.

When each element became available

<search>: marking up the search area

It replaces what you used to write as <form role="search">. It carries an implicit ARIA role of search, so the role attribute is no longer needed.

<header>
  <h1>My blog</h1>

  <search>
    <form action="/search/">
      <label for="q">Search this site</label>
      <input type="search" id="q" name="q">
      <button type="submit">Search</button>
    </form>
  </search>
</header>

Screen reader users can jump straight to the search landmark from a list of landmarks. That is what “meaningful markup” buys you, concretely.

The common mistake

<search> is not for search results. It wraps the controls for searching or filtering. Results belong in the page’s main content, inside <main>.

<!-- only the form -->
<search>
  <form>...</form>
</search>

<main>
  <h2>Search results</h2>
  <ul>...</ul>
</main>

It also works for in-page filter UI, and a <form> is not required.

<details name>: an exclusive accordion, no JavaScript

Give several <details> elements the same name and only one can be open at a time. The standard FAQ accordion, with no script.

<details name="faq">
  <summary>How much is shipping?</summary>
  <p>Free on orders over 5,000 yen.</p>
</details>

<details name="faq">
  <summary>Can I return an item?</summary>
  <p>Within seven days of delivery.</p>
</details>

<details name="faq">
  <summary>Can I get a receipt?</summary>
  <p>Yes, from your account page.</p>
</details>

Supported in Chrome 120, Edge 120, Firefox 130 and Safari 17.2, reaching Baseline in September 2024.

Decide carefully whether exclusivity is right

Closing one panel when another opens is unhelpful when people want to compare. It suits an FAQ read one item at a time; it does not suit a specification comparison.

Also worth knowing: browser in-page search can find text inside a closed <details> and open it automatically in Chromium browsers. Behaviour varies by browser, so do not hide information people need to find.

<dialog>: the standard modal element

Available in all modern browsers since March 2022. Focus trapping, making the background inert, and Escape-to-cancel are handled by the browser.

<button id="open">Open confirmation</button>

<dialog id="dlg">
  <form method="dialog">
    <p>Delete this post?</p>
    <button value="cancel" autofocus>Cancel</button>
    <button value="delete">Delete</button>
  </form>
</dialog>

Implementation details are in the HTML dialog element.

section versus div

From here on, the long-established elements. <section> is the most misused, so start here.

The rule: if it has no heading, use <div>, not <section>.

<!-- section with no heading -->
<section class="card-wrapper">
  <img src="photo.jpg" alt="">
  <p>Caption</p>
</section>

<!-- layout grouping: use div -->
<div class="card-wrapper">
  <img src="photo.jpg" alt="">
  <p>Caption</p>
</div>

<!-- a meaningful section with a heading -->
<section>
  <h2>Pricing</h2>
  <p>...</p>
</section>

<section> has no implicit ARIA role (it becomes a region only when you add aria-label or aria-labelledby). A page full of heading-less <section> elements conveys nothing to assistive technology that <div> would not. It is markup that feels semantic without being so.

article versus section

A useful check: would it make sense on its own in an RSS feed? If yes, <article>. If no, <section> or <div>.

How many main, header and footer elements

<main> is one per page. With several, assistive technology cannot tell which is the primary content. If you genuinely need more in the markup, only one may be without the hidden attribute.

<header> and <footer>, by contrast, can appear multiple times—but only those that are direct children of <body> become landmarks.

<body>
  <header><!-- becomes the banner landmark --></header>

  <main>
    <article>
      <header><!-- article header; not a landmark -->
        <h2>Article title</h2>
        <p><time datetime="2024-02-17">17 February 2024</time></p>
      </header>
      <p>Body...</p>
    </article>
  </main>

  <footer><!-- becomes the contentinfo landmark --></footer>
</body>

<nav> can also repeat. With two or more, distinguish them with aria-label.

<nav aria-label="Main menu">...</nav>
<nav aria-label="Breadcrumb">...</nav>

Putting it together

<body>

<header>
  <h1>My blog</h1>

  <nav aria-label="Main menu">
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>
  </nav>

  <search>
    <form action="/search/">
      <label for="q">Search this site</label>
      <input type="search" id="q" name="q">
      <button type="submit">Search</button>
    </form>
  </search>
</header>

<main>
  <article>
    <header>
      <h2>Choosing semantic elements</h2>
      <p><time datetime="2024-02-17">17 February 2024</time></p>
    </header>

    <p>Body...</p>

    <section>
      <h3>Frequently asked questions</h3>

      <details name="faq">
        <summary>section or div?</summary>
        <p>If it has no heading, use div.</p>
      </details>

      <details name="faq">
        <summary>Can I have several main elements?</summary>
        <p>Only one visible per page.</p>
      </details>
    </section>
  </article>

  <aside aria-label="Related articles">
    <h2>Related</h2>
    <ul>...</ul>
  </aside>
</main>

<footer>
  <p><small>&copy; 2024 My blog</small></p>
</footer>

</body>

What this does and does not do for SEO

Honestly: using semantic elements does not by itself improve rankings. Google evaluates the content.

Meaningful markup is still worth doing, for these reasons:

• Accessibility genuinely improves: landmark navigation works. This is measurable
• Content extraction gets more accurate: <main> and <article> inform reader modes and summarisation about what the content is
• The code is easier to read than nested <div class="header">

Treating semantics as an SEO tactic just produces heading-less sections. Choose based on what it communicates to assistive technology.

Summary

• <header>, <footer>, <main>, <article>, <section> are HTML5-era, not new
• Recent additions: <dialog> (2022), <search> (2023), <details name> (2024)
• <search> wraps the controls; results go in <main>
• <details name> gives an exclusive accordion, but is wrong when people need to compare
• No heading means <div>, not <section>—section has no implicit role
• Use <article> when it would stand alone if extracted
• One <main>; label multiple <nav> elements with aria-label
• Semantics alone will not raise rankings. The reliable payoff is accessibility

Form semantics are covered in HTML form features worth using today, and input attributes in the HTML input element.