Landmarks: Use Semantic Regions So the Layout Makes Sense

Semantic landmarks help assistive technology and developers understand a page at a structural level.

They also encourage cleaner layout separation.

What It Is

Landmarks are semantic regions such as header, nav, main, aside, and footer that define the major areas of a page.

<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>

Why It Matters

• Screen reader users can jump directly to major sections.
• It clarifies page structure for maintainers.
• It supports consistent layouts across the site.

Best Practices

1. Use one clear main region for the page content.
2. Wrap navigation in nav and footer content in footer.
3. Prefer semantic tags over generic containers when they match the purpose.

Common Mistakes

• Everything inside nested divs with no semantic structure.
• Multiple confusing main regions.
• Using landmarks purely for styling instead of meaning.

Quick Checklist

• Main content lives in main.
• Navigation uses nav.
• Header and footer regions are clear.

Final Takeaway

Landmarks are quiet infrastructure. When they are missing, navigation gets harder.