How to use semantic tags

Semantics describe purpose

Semantic elements communicate what content is, helping browsers, search engines, assistive technology, and developers.

<header>Site identity</header>
<nav aria-label="Primary">...</nav>
<main>
  <article>
    <h1>Lesson title</h1>
    <section><h2>First topic</h2>...</section>
  </article>
  <aside>Related resources</aside>
</main>
<footer>Copyright and policies</footer>

Use landmarks intentionally

• Use one visible main for the page's unique content
• Give multiple navigation regions distinct accessible labels
• article is independently reusable content
• section is a thematic grouping, normally with a heading
• aside is complementary rather than essential content

Header and footer are contextual

A page and an article can each have a header or footer. Their meaning depends on the nearest sectioning ancestor; they are not automatically the top and bottom of the viewport.

Native HTML first

Choose the native element with the behavior you need. A real button already supports keyboard focus and activation; rebuilding it with a clickable div creates unnecessary accessibility work.