Semantic layout

Why the tag name matters

<div> means nothing. <nav> means "this is navigation". Browsers, screen readers, search engines and reading modes all use those names: a screen reader user can jump straight to the main content, skipping a menu they have already heard on every page.

Semantic elements do not look different by default. The benefit is entirely in what they mean.

The landmarks

Element	Use it for
`<header>`	Introductory content for the page or for a section it sits in.
`<nav>`	A major block of navigation links. Not every group of links.
`<main>`	The unique content of this page. Exactly one, not nested in the others.
`<article>`	Something that would still make sense on its own: a post, a card, a comment.
`<section>`	A thematic grouping — normally with a heading.
`<aside>`	Related but separable: a sidebar, a pull quote, related links.
`<footer>`	Closing content for the page or its section.

A page in full

the skeleton of most pages

<body>
  <header>
    <a href="/">Studio</a>
    <nav aria-label="Main">
      <a href="/work/">Work</a>
      <a href="/learn/">Learn</a>
    </nav>
  </header>

  <main>
    <h1>Learn</h1>

    <section>
      <h2>Courses</h2>
      <article>
        <h3>HTML</h3>
        <p>Structure you can read.</p>
      </article>
    </section>

    <aside>
      <h2>Related</h2>
    </aside>
  </main>

  <footer>
    <p>© 2026</p>
  </footer>
</body>

section or div?

Use <section> when the block is a part of the document that you could give a heading to — and then give it one. If you are only grouping things to position them, <div> is correct and honest.

A <section> with no heading tells assistive technology "a region begins here" and then fails to say what it is, which is worse than a <div>.

The test

Could this block appear in a table of contents for the page? Then it is a section. Is it a wrapper that exists because of CSS? Then it is a div.

You can have several. A <footer> inside an <article> is that article's byline; a second <nav> might be a table of contents. When you have more than one of a landmark, name them so they can be told apart.

naming landmarks

<nav aria-label="Main">…</nav>
<nav aria-label="In this guide">…</nav>

Headings carry the outline, not the elements

A common misunderstanding: nesting <section> elements does not create heading levels. <h1> inside a nested section is still an <h1>. The outline comes from the heading numbers you write, so keep them in order and do not skip levels.

Two more that pull their weight

<details> is a disclosure widget with keyboard support and no JavaScript. <dialog> with showModal() gives you a real modal: focus trapping, Escape to close and the top layer, all built in.

built-in behaviour

<details>
  <summary>What is included?</summary>
  <p>Frame, leaf, fittings and fitting.</p>
</details>

<dialog id="confirm">
  <form method="dialog">
    <p>Delete this draft?</p>
    <button value="cancel">Cancel</button>
    <button value="ok">Delete</button>
  </form>
</dialog>