HTML landmark elements

Definition

Landmark elements identify major page regions. main contains the primary content; nav groups important navigation; contextual header, aside, and footer elements describe surrounding roles.

Syntax

<header>Site identity</header>
<nav aria-label="Primary">...</nav>
<main>
  <h1>Page title</h1>
</main>
<footer>Policies and contact information</footer>

Context

A page has one visible primary main region. Repeated navigation or complementary regions need labels that make their purposes distinct. section usually needs a heading; article should make sense as a self-contained composition.

header and footer are contextual. At the body level they commonly describe sitewide identity and supporting information. Inside an article, they describe that article instead. Not every header or footer becomes a top-level landmark, so inspect the accessibility tree rather than inferring behavior from the tag name alone.

Naming repeated regions

One unnamed primary navigation may be understandable, but repeated nav regions need concise names such as “Primary,” “Breadcrumb,” and “Footer.” aria-label or a referenced visible heading can provide the distinction. Do not include the word “navigation” in the label when the role already announces it.

The same principle applies to multiple complementary regions. Names should describe purpose, not position: “Related lessons” remains useful if the layout moves it from right to bottom.

Section and article

section groups a thematic part of a document and normally has a heading. article represents a self-contained composition that could be distributed or reused independently. Neither element is a generic styling hook.

Use a div when a container exists only for layout or scripting and no named document section fits. Too many landmarks or sections make navigation noisy rather than clearer.

Main content and skip links

Keep one visible main for the page’s primary content and give it a stable target for a “Skip to main content” link. The skip link should become visible on focus and move keyboard focus to a useful start location without changing the URL to an unrelated page.

Single-page interfaces that swap views should ensure only the active main region is exposed. Hidden duplicate landmarks must not remain in the accessibility tree.

Common misuse

Do not wrap every container in section. Do not use header or footer because of screen position alone. Generic containers remain appropriate when no semantic role fits.

Verification checklist

• Inspect the accessibility tree’s landmark list.
• Confirm one visible main region contains the unique page content.
• Give repeated navigation and complementary regions distinct purpose names.
• Test the skip link from the top of the page with a keyboard.
• Read headings with CSS disabled to verify meaningful source order.
• Remove semantic wrappers that add no real region or document structure.