Semantic Layout

1. Why semantics matter

Instead of <div> everywhere, use tags that describe meaning — search engines and screen readers understand them.

<header>
  <h1>My Site</h1>
  <nav><a href="#about">About</a> <a href="#work">Work</a></nav>
</header>
<main>
  <section id="about"><h2>About</h2><p>...</p></section>
  <article><h2>Blog Post</h2><p>...</p></article>
  <aside><h3>Related</h3></aside>
</main>
<footer><p>© 2026</p></footer>

• header/nav/main/section/article/aside/footer — layout meaning
• article — standalone content
• section — thematic grouping

Rule: one <main> per page, one <h1> per page.