Document Landmarks & Semantic Hierarchy

Why Semantic Structure Matters

Screen readers, search engines, and keyboard users rely on HTML landmarks (<header>, <nav>, <main>, <article>, <aside>, <footer>) to navigate complex technical documentation efficiently.

Important One <main> and One <h1> Per Page Every page should declare a single <main id="main-content"> landmark paired with a clear heading hierarchy (<h1> → <h2> → <h3>).

Worked Example: Technical Article Skeleton

Inspect how semantic tags organize an engineering specification without div soup:

<main id="main-content">
  <article>
    <header>
      <h1>Cantilever Beam Deflection Analysis</h1>
      <p>Published in Structural Mechanics Reference</p>
    </header>
    <section aria-labelledby="assumptions-heading">
      <h2 id="assumptions-heading">Governing Euler-Bernoulli Assumptions</h2>
      <p>Plane sections remain plane and perpendicular to the neutral axis.</p>
    </section>
  </article>
</main>

Key Takeaways

• Use <button> for interactive actions and <a href="..."> for navigation.
• Always pair form inputs with explicit <label for="..."> elements.