A page built only from <div> elements is like a house where every room is labelled "room". Semantic elements have names that say what they contain: <header>, <nav>, <main>, <article> and <footer>.
On screen they look exactly like <div> elements, but browsers, screen readers and search engines understand what each part of the page is for. You will too, when you come back to your code in six months and can read the structure at a glance.
"Semantic" simply means "related to meaning". Semantic HTML is HTML where every element is chosen because it describes its content accurately.
The page-level landmark elements
| Element | Contains |
|---|---|
<header> | Introductory content: logo, site name, sometimes navigation |
<nav> | A block of major navigation links |
<main> | The main content of the page, only one per page |
<aside> | Related side content: a sidebar, tips or adverts |
<footer> | Closing information: copyright, contact details, small links |
Screen-reader users can jump straight to these "landmarks". A keyboard shortcut can take them from the top of the page to <main> in one step, skipping the logo and menu they have already heard on every other page.
section vs article: what's the difference?
<article>is a complete, self-contained piece that would make sense on its own: a blog post, a product card, a comment or a news story.<section>is a themed group of content, usually with its own heading, such as "Features", "Pricing" or "FAQ".
A quick test: could you post it on another website and it would still make sense? If so, it's an <article>. Articles can contain sections, and sections can contain articles. A "Latest news" <section> holding several <article> stories is a common pattern.
Smaller semantic elements
<figure>and<figcaption>wrap an image, chart or code sample with its caption.<time datetime="2026-10-01">marks a date in a format computers can read.<address>holds contact details for a person or organisation.<mark>,<strong>and<em>give meaning to words inside text (see Text Formatting).
Why semantic HTML matters for SEO and accessibility
Search engines try to work out which part of a page is the real content and which parts are menus and footers repeated on every page. Clear landmarks make that job easier. Screen readers use the same structure to offer shortcuts and to announce where the visitor is.
Semantic elements also make teamwork easier. A colleague reading <nav> and <footer> knows immediately what each block does, without hunting through class names. None of this costs anything extra: you replace a <div> with the right element and keep the same CSS.
HTML Semantic Elements Syntax
A semantic page outline
<header>…</header>
<nav>…</nav>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>HTML Semantic Elements Summary
- Semantic elements describe what their content is, not how it looks.
<header>,<nav>,<main>,<aside>and<footer>mark the main regions of a page.- Use one
<main>per page. - Use
<article>for self-contained content and<section>for a themed group with a heading. - Semantic HTML helps screen readers, search engines and other developers.
HTML Semantic Elements Examples
Each example runs in the page. Edit the code and press Run to see what changes.
A complete blog page
The CSS just makes the regions visible. Read the HTML first and you'll see the structure explains itself.
<header>
<h1>Pixel & Paint</h1>
<nav>
<a href="#">Home</a> · <a href="#">Tutorials</a> · <a href="#">About</a>
</nav>
</header>
<main>
<article>
<h2>How I drew my first pixel cat</h2>
<p>Published <time datetime="2026-09-14">14 September 2026</time></p>
<p>It started with a 16×16 grid and a lot of orange…</p>
</article>
<aside>
<h3>Popular posts</h3>
<p>Choosing a colour palette</p>
</aside>
</main>
<footer>
<p>© 2026 Pixel & Paint · <a href="#">Contact</a></p>
</footer>
<style>
header, main, footer, article, aside, nav { outline: 2px dashed #bbb; padding: 6px 10px; margin: 6px 0; }
</style>Line-by-line explanation
- Lines 1 to 6The header holds the site name and the main navigation.
- Lines 3 to 5
<nav>groups the major links. - Lines 8 to 19
<main>is the unique main content of this page. - Lines 9 to 13The blog post is an
<article>, because it makes sense on its own. - Line 11
<time datetime>gives computers an exact date while humans read a friendly one. - Lines 15 to 18Related links go in an
<aside>. - Lines 21 to 23The footer for copyright and small links.
Sections on a landing page
<main>
<section>
<h2>Features</h2>
<p>Fast, friendly and free.</p>
</section>
<section>
<h2>Pricing</h2>
<article>
<h3>Pro plan</h3>
<p>£9/month</p>
</article>
</section>
</main>Line-by-line explanation
- Lines 2 to 5A themed section with its own heading.
- Lines 8 to 11Each price card could stand alone, so it's an
<article>inside the Pricing section.
Common HTML Semantic Elements Mistakes
Div soup
<div class="header">
<div class="nav">…</div>
</div>
<div class="content">…</div>
<div class="footer">…</div><header>
<nav>…</nav>
</header>
<main>…</main>
<footer>…</footer>Same look, but now assistive technology and search engines understand the page.
More than one main
<main>Intro</main>
<main>Articles</main><main>
<section>Intro</section>
<section>Articles</section>
</main>There should be only one visible <main> per page.
HTML Semantic Elements in Real Projects
Semantic HTML and SEO
Search engines use semantic structure to work out which part of the page is the real content (<main>, <article>) and which is repeated boilerplate (header, nav, footer). Clean semantics, combined with good headings, is one of the cheapest SEO wins there is.
HTML Semantic Elements Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Use the right semantic elements.
<>
<h1>Green Thumb Garden Centre</h1>
</header>
<>
<p>Spring bulbs are in stock!</p>
</main>
<>
<p>© 2026 Green Thumb</p>
</footer>A single user comment under a video should be marked up as…
<article> fits.Which element should wrap a "Related products" sidebar?
<aside> is for content related to, but separate from, the main content.Replace the generic divs with semantic elements: the site title area becomes header, the links become nav, the content becomes main, and the copyright becomes footer.
<div class="top">
<h1>Comic Corner</h1>
<div class="links"><a href="#">New</a> <a href="#">Classics</a></div>
</div>
<div class="content"><p>Issue #42 is out now!</p></div>
<div class="bottom"><p>© 2026 Comic Corner</p></div>- There's a header with the h1
- Links are inside a nav
- There's exactly one main
- There's a footer
- No divs left
HTML Semantic Elements Quiz
3 questions to check what you learned.
How many
<main>elements should a page have?- One
- One per section
- As many as you like
- None
Do semantic elements look different from a
<div>by default?- Mostly no. They behave like blocks; the benefit is meaning
- Yes, very different
- They're invisible
- They're always bold
What is the purpose of the
datetimeattribute on<time>?- To show a clock
- To format the date automatically
- To set the page's timezone
- To give a machine-readable date while the visible text stays friendly
HTML Semantic Elements Challenge
Build a recipe page skeleton
Create a semantic page with:
- A
<header>with an<h1> - A
<main>containing one<article>with an<h2>and a paragraph - An
<aside>inside main with a tip - A
<footer>
- header contains an h1
- main contains an article with an h2
- main contains an aside
- There's a footer outside main