Before this lesson

Complete headings, links and forms; distinguish meaning from appearance.

What you will be able to do

Organize page regions with semantic elements and verify that primary content is reachable by keyboard.

Understand the mechanism

Pages have both content hierarchy and functional regions. Headings express hierarchy; landmarks identify areas. main holds the unique primary content, and nav identifies important navigation rather than every group of links. An article should make sense independently, while a section groups a topic and normally has a heading. Use a div when a container has only a styling purpose.

Semantic tags do not solve accessibility by themselves. Navigation names, visible focus and a logical source order still matter. A skip link is a practical use of fragment navigation, allowing keyboard users to bypass repeated navigation. Reordering columns visually with CSS does not guarantee that keyboard or assistive-technology reading order will follow.

Runnable example

<a href="#content">Skip to content</a>
<header><p>Honeysuck</p><nav aria-label="Main"><a href="#lesson">Lesson</a></nav></header>
<main id="content" tabindex="-1">
  <article id="lesson">
    <h1>Build a meaningful page</h1>
    <section><h2>Structure</h2><p>Start with the content.</p></section>
    <section><h2>Practice</h2><p>Test the reading order.</p></section>
  </article>
</main>
<footer><p>Learning notes</p></footer>

Trace and verify

Put the fragment in the body and work only with the keyboard. Focus the skip link and activate it. Inspect the Accessibility tree for main and navigation landmarks. Add a second navigation for the article outline and give the two navigation regions distinct names.

Common mistakes and boundaries

Avoid multiple competing visible main regions. Do not replace native buttons with clickable divs. Removing every focus outline makes keyboard position invisible. Decorative icons can be hidden from assistive technology, but meaningful labels should remain available.

Practice challenge

Add course navigation and an on-page outline, name both nav elements, and make a skip link visible on focus. Inspect the full tab order.

Reference solution and reasoning

Name the regions Course lessons and On this page. Put the skip link first in source order and reveal it with a focus style. Do not hide it with display:none, which removes it from keyboard navigation. Begin testing from the address bar rather than clicking directly into the content.

Further reading