Document structure

Landmark elements give screen-reader users a map of the page and make your markup self-documenting.

HTML has elements for the typical regions of a page. They look exactly like <div> until styled, but they carry meaning.

<header>: introductory content, usually a logo, site title and navigation. Can also head an article.
<nav>: a block of major navigation links. Not every group of links; the main menu, a table of contents, pagination.
<main>: the page's primary content. Exactly one visible <main> per page, not inside header, footer or article.
<article>: a self-contained piece that would make sense on its own: a blog post, a comment, a product card.
<section>: a thematic group of content, normally with its own heading. If you can't think of a heading, you probably want a <div>.
<aside>: tangentially related content, like a sidebar or callout.
<footer>: closing information, such as copyright, contact links or an article's author info.

Browsers expose many of these as landmarks: a screen-reader user can jump straight to main or to the navigation, skipping repetitive content. header and footer count as page landmarks only when they aren't nested inside an article or section.

Other useful semantic elements are <time datetime="2026-10-17"> for machine-readable dates, <address> for contact info of the page or article author, and <search> for a search region. Semantics also feed reader modes, browser features and search engines, so they pay off in many places at once.

Example

<body>
  <header>
    <a href="/">Acme</a>
    <nav aria-label="Main">
      <a href="/products">Products</a> <a href="/blog">Blog</a>
    </nav>
  </header>

  <main>
    <article>
      <h1>Shipping our new API</h1>
      <p>Published <time datetime="2026-10-17">17 October 2026</time></p>
      <section>
        <h2>What changed</h2>
        <p>...</p>
      </section>
    </article>
    <aside>Related posts...</aside>
  </main>

  <footer>© 2026 Acme</footer>
</body>

Remember

Landmarks (header, nav, main, aside, footer) let users jump around a page
One main per page
article = stands alone; section = themed part with a heading

Watch out for

Wrapping every chunk in <section> without a heading; use div for pure styling groups.

Check yourself

Which element fits a single user comment under a blog post best?

Official docs: developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Structuring_documents

Semantic page layout

Example

Remember

Watch out for

Check yourself

Builds on

Unlocks