mark out the major regions of a page, such as main content, navigation, header and footer. Assistive technologies like screen readers use these landmarks for orientation: users can jump straight to the main content, identify navigation and move through the page in a structured way.
Important landmarks come from native elements:
<main>for the main region,<nav>for navigation areas,<header>and<footer>,<aside>for supplementary content.
Well-implemented landmarks are unambiguous and sensibly named, for example a navigation with an aria-label. Problems arise from duplicate or unnamed landmarks, several visible <main> elements, or regions rebuilt via a role attribute when a native element would suffice.
The landmarks that matter #
HTML5 landmarks — <header>, <nav>, <main>, <aside> and <footer> — divide a page into named regions. Screen reader users jump between them directly; crawlers and AI models use the same boundaries to separate the actual content from navigation and boilerplate. Use exactly one <main> per page.
Common mistakes #
Frequent problems: everything wrapped in generic <div>s (no landmarks at all), multiple unlabelled <nav> elements that are indistinguishable, and content outside <main> that belongs inside. If a page has more than one nav, label them via aria-label ("Main navigation", "Footer navigation").