HTML Semantic Page Layout

Semantic elements say what a region is, not how it looks. header introduces a page or section, nav holds navigation links, main wraps the unique content of the page, article is a self-contained piece, aside is related content, and footer closes a page or section. Browsers, search engines, and screen readers use these landmarks to help people jump around the page. Use div only when no semantic element fits.

<header>
  <h1>Programonic</h1>
  <nav aria-label="Main">
    <a href="/tutorials">Tutorials</a>
    <a href="/examples">Examples</a>
  </nav>
</header>
<main>
  <article>
    <h2>Learning loops</h2>
    <p>A loop repeats a block of code.</p>
  </article>
  <aside>
    <h2>Related</h2>
    <p>Functions and recursion.</p>
  </aside>
</main>
<footer>
  <p>&copy; 2026 Programonic</p>
</footer>