Published lesson · 30 minutes

Use page landmarks and a clear heading outline

Objective: Organise a page with one main landmark and a logical heading outline so keyboard and screen-reader users can move through its sections.

The core idea

This lesson introduces use page landmarks and a clear heading outline. Organise a page with one main landmark and a logical heading outline so keyboard and screen-reader users can move through its sections. Begin with one small goal and make sure the result serves a real visitor or collaborator. The examples use fictional community information, so they can be adapted without exposing anyone’s private details.

The key idea is this: Landmarks name the broad parts of a page, while headings describe the order and topic of sections. A main heading introduces the page. Section headings should follow a meaningful hierarchy rather than being chosen only for their visual size. Keep that idea separate from visual decoration or tool-specific habits. When you can explain why a choice helps the intended task, it becomes easier to review the result and to choose a different approach when the situation changes.

Put it into practice

Apply it to this situation: For a community notice page, use a header for the site identity, navigation for the main links, main for the notice, and a footer for contact details. A visitor can then jump to the part they need without reading every line first. Start with the smallest useful change. Inspect what changed, describe what you expected to happen and compare the result with the goal. This makes practice possible on a shared device or with limited connectivity.

Watch out for this: A common mistake is choosing a heading level because it looks large. Visual size belongs in CSS; the heading level should match the outline. Another mistake is adding many named regions that make navigation noisier instead of clearer. If something does not work, return to one known-good version and change one detail at a time. Do not include real names, contact details, passwords or access keys in examples, screenshots or shared project history.

Review your work before moving on. Disable styling and read the outline from top to bottom. The page topic should be obvious, each heading should describe its section, and landmarks should identify the page regions that people actually need. A useful explanation names the audience, the decision and one check. Keep a short record of remaining questions so a facilitator or another learner can help without guessing what happened.

  • Name the task and audience before editing.
  • Make one focused change and inspect it.
  • Record one thing to improve or confirm next.

Worked examples

Use page landmarks and a clear heading outline: a small example

See how use page landmarks and a clear heading outline supports a clear, inclusive community web task.

index.html

<header><a href="/">Community noticeboard</a></header>
<nav aria-label="Main navigation"><a href="/events">Events</a></nav>
<main><h1>Library repair day</h1><section aria-labelledby="time"><h2 id="time">Time and place</h2><p>Saturday at the local hall.</p></section></main>

Practice tasks

  1. Explore the example

    Explore the use page landmarks and a clear heading outline example. Change one small detail for a different fictional community situation, then explain what you expected and how you checked it.

  2. Build a focused result

    Create a small result that demonstrates this objective: Organise a page with one main landmark and a logical heading outline so keyboard and screen-reader users can move through its sections. Keep the information fictional and explain one limitation that a future version should address.

  3. Review and explain your decision

    Review your use page landmarks and a clear heading outline result from another person's point of view. Name one strength, one exact uncertainty and a change that would make the result clearer or safer.

Use page landmarks and a clear heading outline is easier to learn when you name the goal, make one focused change and check the result with the people who need to use it.

Course overview