Understand the idea

Semantic elements describe a region's purpose. They make a document easier to understand without depending on visual position.

Use main for the dominant content, nav for major navigation, and header and footer for introductory and concluding information. A section groups a theme and usually needs a heading. An article should make sense as a self-contained composition. A div remains useful when a wrapper has no specific semantic meaning. A header or footer inside an article is not the page-wide banner or contentinfo landmark. A section becomes a region landmark when it has an accessible name; a heading alone does not automatically provide that name. Use one visible main region for this simple page.

Read the example

This is an HTML fragment. Place it inside the body of a complete HTML document, unless the example explicitly identifies head content.

HTML · EXAMPLE
<header>
  <a href="/">My journal</a>
  <nav aria-label="Main"><a href="/about/">About</a></nav>
</header>
<main>
  <article>
    <h1>A walk through Erfurt</h1>
    <p>Today's observations.</p>
  </article>
</main>
<footer>Photographs by Mario</footer>

A small mistake, explained

What goes wrong

Replacing every div with section adds structure without necessarily adding meaning.

How to fix it. Ask what the region represents. Use a section for a named topic, and keep a neutral div for styling-only groups.

Try it yourself

Look at your page without CSS. Check whether the order and headings still make sense.

Further reading

W3C WAI — page regions

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.