Learning objectives
Identify the main content; label navigation; distinguish an article from a section.
Prerequisites
Understand headings, paragraphs, and links.
Understand the markup
Semantic layout gives names to the main regions of a page. A body-level header commonly contains the site identity and introductory controls. A nav contains a major navigation block. The main element identifies the page's dominant content. A body-level footer commonly holds site information. These elements describe purpose; they do not create a visual grid by themselves.
Use a single visible main for the page's primary content. A skip link can take keyboard users directly to its ID. Repeated navigation is useful, but requiring people to tab through it on every page makes the interface slower to use. A fragment target and a visible focus style make the shortcut discoverable.
An article is a self-contained composition, such as a news story, forum post, or tutorial. A section groups content around a theme, normally with a heading. An aside contains tangential information that can be considered separately from the surrounding content. A div remains appropriate when a wrapper exists solely for styling or scripting.
Header and footer are contextual: a header inside an article introduces that article and does not act as the page's banner landmark. Multiple navigation regions should have meaningful, distinct accessible names, such as Main and On this page. Do not assume section elements automatically repair heading levels; write an explicit heading hierarchy.
Try a working example
<header><p>Local walks</p></header>
<nav aria-label="Main"><a href="#walk">Featured walk</a></nav>
<main id="walk"><h1>Canal trail</h1><p>A gentle two-hour route.</p></main>
<footer><p>Updated in October 2026.</p></footer>Expected output
The page presents a site introduction, navigation link, main trail description, and footer. Default styling alone does not show landmark boundaries.
Another example
<a href="#main">Skip to content</a>
<header><p>Trail journal</p></header>
<main id="main">
<article><h1>Walking the canal</h1>
<section><h2>Getting there</h2><p>Take the bus to East Bridge.</p></section>
</article></main>Common mistakes
Do not replace every div with section. A styling wrapper has no thematic meaning. Avoid two visible main elements or several unlabeled navigation regions.
Accessibility and browser notes
Native landmarks already provide useful roles. Redundant role="main" on main is unnecessary. Landmarks complement headings; both need a sensible structure.
Check your work
Inspect the page with a browser accessibility tree or landmark navigation in a screen reader. You should be able to locate the main content and distinguish navigation regions without relying on their visual position. Temporarily turn off the stylesheet and check that the reading sequence remains sensible. A layout that is understandable only when displayed in columns needs a better source order.
Practice
Mark up an article called A day at the coast with a Getting there section and a separate main navigation region.
Review the solution
<nav aria-label="Main"><a href="/">Home</a></nav>
<main><article><h1>A day at the coast</h1>
<section><h2>Getting there</h2><p>The train stops near the beach.</p></section>
</article></main>Related lesson
Specifications and further reading
Resilient components need page-level review
A reusable card can be locally reasonable and still create a poor page when repeated. For example, each card might hard-code an h1 or introduce another main region. Decide which semantics belong to the page shell and which belong to a component. A page usually owns its dominant main landmark and top-level topic; a component receives a suitable heading level from its context.
Do not assume an article or section restarts heading numbering. Write the intended h2/h3 hierarchy explicitly. This matters when content is assembled by a CMS, where an editor can insert a section inside an existing chapter without seeing the whole template. Preview the assembled heading list rather than validating each isolated content fragment only.
Landmarks are navigation aids, so more is not automatically better. Use nav for major navigation groups and name repeated instances distinctly when their purposes differ. A tiny set of contextual links can remain within an article without becoming another landmark. The right question is whether a region name helps someone orient themselves, not whether every wrapper could accept a role.