Landmarks
HTML · Reference cheat sheet
HTML · Reference cheat sheet
📋 Overview
Landmark elements (header, nav, main, aside, footer, search) structure pages for accessibility and SEO. One main per page; skip links jump to it.
🔧 Core concepts
| Element | Role |
|---|---|
header | Banner / intro |
nav | Primary navigation |
main | Unique page content |
aside | Complementary |
footer | Site/page footer |
search | Search landmark (modern) |
💡 Examples
<body>
<a class="skip" href="#main">Skip to content</a>
<header>
<p>Code Reference</p>
<nav aria-label="Primary">...</nav>
</header>
<main id="main">
<article>...</article>
</main>
<aside aria-label="On this page">...</aside>
<footer>...</footer>
</body>⚠️ Pitfalls
- Multiple
mainconfuses AT; nest sections inside onemain. navwithout accessible name is vague when several exist — usearia-label.