Meaningful page structure

01Use landmarks

Header introduces a page or section, nav contains navigation, main contains the main content and footer closes a page or section. Use one visible main landmark for the page.

<header><a href="index.html">Studio</a></header>
<nav aria-label="Main">...</nav>
<main>
  <h1>Our work</h1>
</main>
<footer>Contact and credits</footer>

02Section, article or div?

Use section for a thematic group, usually with a heading. Use article for self-contained content. Use div when you need a grouping element without extra meaning.

<section aria-labelledby="services-title">
  <h2 id="services-title">Services</h2>
  <article>
    <h3>Kitchen design</h3>
    <p>A complete design service.</p>
  </article>
</section>

03Keep reading order logical

The source order should still make sense without CSS. A visually moved sidebar should not cause keyboard users to jump through a confusing sequence. Prefer native HTML before adding ARIA.

04Try it yourself

Add a section with a heading and two paragraphs inside the article.

Further reading

Use the MDN learning guides and HTML Living Standard for deeper explanations and current browser guidance.