Document Structure

Navigation Links

Anchors Create Page Paths

A small navigation bar adds anchors to the page before the matching sections appear below it.

Program

Anchor elements define destinations. A nav element groups those destinations as page navigation rather than ordinary body text.

navigation_links.html
Visuals: captured from real browser rendering
<nav aria-label="Sections">
  <a href="#overview">Overview</a>
  <a href="#steps">Steps</a>
</nav>
<main>
  <section id="overview">Overview content</section>
  <section id="steps">Step list</section>
</main>

  1. Create a named navigation region.

    A navigation bar region appears without links yet.
    The nav element groups page links.

  2. Add the Overview anchor.

    The nav bar shows an Overview link.
    The href points to the overview section id.

  3. Add the Steps anchor.

    The nav bar shows Overview and Steps links.
    The second anchor points to a different section id.

  4. Create the Overview destination.

    The Overview content section appears below the nav links.
    The section id matches the first anchor href.

  5. Create the Steps destination.

    Both Overview content and Step list sections are visible.
    Now both anchors have matching destinations in the document.
anchor An anchor creates a link to another URL or to an element id on the same page.
aria-label An aria-label gives an accessible name to an otherwise unlabeled region.