Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

HTML landmarks: give navigation, main content, and page edges clear owners

Last updated: 1 Oct 20266 min read
tutorial
IntermediateBy AITrove Editorial

header, nav, main, and footer identify the purpose of page regions without assigning visual layout.

Use it for a real task

A receipt page has one primary task, a short site navigation, and a separate footer. The nav element gets a label when another navigation region may appear. A skip link lets keyboard users bypass repeated site links and reach the main region directly.

html
<a href="#content">Skip to receipt content</a>
<header><p>AI Trove receipts</p></header>
<nav aria-label="Primary">
  <a href="/receipts">Receipts</a>
  <a href="/reports">Reports</a>
</nav>
<main id="content">
  <h1>Pending receipts</h1>
  <p>Review 47 open records.</p>
</main>
<footer><p>Receipt operations desk</p></footer>

What the markup guarantees

The skip link requires CSS that leaves it available on focus. Landmark elements do not automatically make their links or text accessible; names, focus, and reading order still need review.

Cost and limits

Native regions avoid custom role code. Too many unnamed navigation regions can create noisy landmark lists, so name distinct regions by purpose.

Common Mistakes

  • Do not add multiple main elements for separate cards.
  • A header inside an article is that article's header, not necessarily the site header.
  • Keep the skip target and its id in the same document.

Connected lessons

Related: HTML document skeleton: declare language, encoding, and a real title.

Related: HTML headings and paragraphs: expose a readable outline without styling tricks.

Related: HTML anchors: use href for navigation and stable fragment targets.

Related: HTML article and section: mark standalone content and named subdivisions.

Related: HTML script loading: choose ordered defer or independent async work.

Related: HTML focus order: use native controls and keep DOM order usable.

Related: HTML data table versus layout container: preserve relationships, not columns.

Related: HTML receipt index project: landmarks, links, tables, and a bounded image.

Related: HTML skip link: reach main content before repeated navigation.

Related: HTML search element: mark a search interface by purpose.

Related: HTML aria-current: mark the current page within a link set.

html
semantics
Storage details