Semantic HTML5
All HTML topics∙ Chapter 15
Semantic HTML5
Semantic elements describe their meaning clearly. Always prefer them over generic <div> tags where possible.
Why semantics matter
Semantic tags help search engines understand your page, make code more readable, and help screen readers for visually impaired users.
Instead of <div id="header"> use <header>. Instead of <div id="nav"> use <nav>. Same look, much better meaning.
| Tag | Meaning & Use |
|---|---|
| <header> | Page or section header — logo, title, nav |
| <nav> | A block of navigation links |
| <main> | The main unique content (only one per page) |
| <section> | Thematic grouping of related content |
| <article> | Self-contained content (blog post, news story) |
| <aside> | Side content — sidebar, related links |
| <footer> | Footer — copyright, contact, links |
| <figure> / <figcaption> | Image with a descriptive caption below |
📝 Edit Code
👁 Live Preview
💡 A complete semantic layout — header, nav, main, article, aside and footer in one!