# Landmarks: Use Semantic Regions So the Layout Makes Sense

> Learn how semantic landmarks like main, nav, and footer improve navigation and accessibility.

Canonical: https://softwareontheweb.com/tools/launch-readiness-checker/landmarks

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.

```html
<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 `div`s 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.

## Related
- [Home](https://softwareontheweb.com/)
- [Topics](https://softwareontheweb.com/topics)