Why It Matters
Landmarks programmatically define the major sections of a page (Header, Navigation, Main, Footer). Screen reader users can jump directly to these regions.
Core Landmarks
<header>: Banner/Top of page.<nav>: Navigation links.<main>: The primary content (must be unique to the page).<footer>: Content info.<aside>: Complementary content (sidebar).<section>: Generic section (accessible name recommended viaaria-labelledby).
Pattern
<body>
<header>
<!-- Logo and Search -->
</header>
<nav aria-label="Main">
<!-- Primary Menu -->
</nav>
<main>
<h1>Page Title</h1>
<!-- Content -->
</main>
<footer>
<!-- Copyright -->
</footer>
</body>
Note: If you have multiple <nav> elements, use aria-label to distinguish them (e.g., "Main", "Pagination", "Social").