You can build a whole page using only <code><div></code> elements — but you should not. Semantic HTML uses elements whose names describe their purpose, making your pages clearer to browsers, screen readers, search engines and other developers.
What "semantic" means
A semantic element tells you what it is, not just how it looks. A <code><div></code> is a meaningless box; a <code><nav></code> clearly means "navigation". Using the right element gives the content meaning that machines can understand — which matters enormously for accessibility and SEO.
The main semantic layout elements
A typical page has a clear structure, and HTML has an element for each part.
| Element | Purpose |
|---|---|
| <header> | Top of the page or a section (logo, title) |
| <nav> | A block of navigation links |
| <main> | The main content (one per page) |
| <section> | A thematic grouping of content |
| <article> | Self-contained content (a post, a card) |
| <aside> | Side content (sidebar, related links) |
| <footer> | Bottom of the page or section |
A semantic page layout
Here is how these elements fit together into a real page skeleton. Notice how readable it is compared to a wall of identical divs.
Why it beats "div soup"
- <div> for everything
- No meaning to machines
- Hard for screen readers
- Confusing to maintain
- Right element for each part
- Clear meaning
- Screen readers navigate easily
- Easy to read and maintain
Take the editable layout above and extend it: add a second article inside main, give the header a nav with three links, and add a section that groups two articles together. Keep it all semantic — no plain divs.
1. What does "semantic" mean in HTML?
2. Which element holds the main content of a page?
3. Which is best for a self-contained blog post?
4. When should you use a plain <div>?
- Semantic elements describe meaning, not just appearance.
- Use header, nav, main, section, article, aside, footer for page regions.
- Semantic HTML helps accessibility, SEO and maintainability.
- Use <div> only when no semantic element fits.