HTML5 Semantic Tags
Describe page structure correctly — for SEO and accessibility
Semantics — like an architectural blueprint
Imagine a building: entrance, lobby, rooms, kitchen, exit. If every room had a label — the architect and anyone reading the blueprint would instantly understand what goes where. HTML5 semantic tags are labels for sections of a page. Instead of countless unnamed divs — meaningful names: header, nav, main, footer.
Semantic tags vs div
Before HTML5, all blocks were made with <div> — a nameless container. This was bad: neither the browser, Google, nor a screen reader understood what was inside.
HTML5 introduced tags with meaning:
| Tag | Purpose |
|---|---|
<header> | Page or section header (logo, navigation) |
<nav> | Navigation block (menu, breadcrumbs) |
<main> | Main content of the page (one per page) |
<section> | Thematic section with a heading |
<article> | Self-contained content (article, post, lesson) |
<aside> | Sidebar, supplementary content |
<footer> | Footer (copyright, links) |
Why it matters:
- Google indexes the page better (SEO)
- Screen readers for the visually impaired work correctly
- Colleagues understand the code faster
This structure is the standard for any modern website. Learn it by heart.
Remember the main rule: one <main> per page, <header> and <footer> can appear inside each <section>, <article> describes self-contained content (a blog post, a product, a lesson).