A semantic element describes its meaning. nav means navigation. article means a self-contained piece of content. A div says nothing at all.
The same page, two ways
Without meaning:
index.html
HTML
<div class="top">
<div class="menu">...</div>
</div>
<div class="content">...</div>
<div class="bottom">...</div>With meaning:
index.html
HTML
<header>
<nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>Both can look the same once styled. Only the second tells software what each part is.
Who benefits
- Screen reader users can jump straight to the navigation, the main content or the footer.
- Search engines understand how a page is organised.
- You and your team read the code faster, because the names carry meaning.
- Browsers can add helpful behaviour, such as reader mode.
Key semantic elements
| Element | Meaning |
|---|---|
header | Introductory content for a page or section |
nav | A group of navigation links |
main | The main content, one per page |
section | A themed group, usually with a heading |
article | Content that makes sense on its own |
aside | Related but separate content |
footer | Closing content for a page or section |
The next lessons explain each of them. Start with header, nav, main and footer.
lightbulb
Test with a screen reader or the accessibility tree
Chrome and Firefox developer tools show an “Accessibility” panel with the roles the browser sees. It is a good way to check your structure.