Labelled region landmark

Recipe 2.4 Structure the main content

Sample:

<article> vs. <section>: How To Choose The Right One

Quick summary

In this article, Olushuyi explores a mental model that helps you decide between the <article> and <section> elements when writing documents. You will explore how grouping content affects accessibility and how you can make it all count for users.

Code:

<h1>
  &lt;article&gt; vs. &lt;section&gt;: How To Choose The Right One
</h1>

<div role="region" aria-labelledby="summary">
  <h2 id="summary">
    Quick summary
  </h2>
  <p>
    In this article, Olushuyi explores a mental model that helps you decide between
    the <code>&lt;article&gt;</code> and <code>&lt;section&gt;</code> elements when
    writing documents. You will explore how grouping content affects accessibility
    and how you can make it all count for users.
  </p>
</div>