Semantic HTML
Two pages can look identical yet be very different underneath. Semantic HTML uses elements that describe their purpose, which helps screen readers, search engines and other developers.
On this page · 5 min · Intermediate
On this page
- Learning objectives
- Explanation
- Code example
- Step by step
- Real-world use
- Common mistakes
- Best practices
- Remember this
- Practice exercise
- Mini quiz
- Related topics
- My notes
- Reading time
- 5 min
- Difficulty
- Intermediate
- Updated
- Oct 1, 2026
Related tutorials
Learning objectives#
- Explain what “semantic” means
- Use landmark elements: header, nav, main, aside, footer
- Choose between article, section and div
- Understand how semantics help accessibility and SEO
Explanation#
A <div> says nothing about its contents. A <nav> says “this is a group of navigation links”. That extra meaning is semantics.
Screen readers expose landmark elements (header, nav, main, aside, footer) so users can jump straight to the main content or navigation.
Use <article> for self-contained content that makes sense on its own (a blog post, a product card). Use <section> for a themed group of content with its own heading. Use <div> when you only need a styling hook.
Code example: A semantic page layout#
<header>
<h1>Techie Blog</h1>
<nav aria-label="Main">
<a href="/">Home</a> | <a href="/posts">Posts</a>
</nav>
</header>
<main>
<article>
<h2>Understanding Flexbox</h2>
<p><time datetime="2026-10-01">1 October 2026</time></p>
<p>Flexbox lays items out in one dimension…</p>
</article>
</main>
<aside>
<h2>Related</h2>
<a href="/posts/grid">CSS Grid basics</a>
</aside>
<footer>
<p>© 2026 Techie Blog</p>
</footer>
A page with a header and navigation, a blog article in the main area, a related-links sidebar and a footer.
Step-by-step explanation#
- <header> contains introductory content: the site title and navigation.
- <nav aria-label="Main"> marks the primary navigation. The label distinguishes it if the page has more than one nav.
- <main> wraps the unique content of the page. Use it only once per page.
- <article> holds the blog post because it would make sense on its own.
- <time datetime> gives machines an exact date while people see a friendly one.
- <aside> holds content related to, but separate from, the main content.
Real-world use case#
News sites, blogs and documentation (like this page) use semantic landmarks so assistive-technology users can navigate quickly and search engines can understand which part is the main content.
Common mistakes#
Building everything from <div> and <span> works visually but removes all meaning. Reach for a semantic element first.
A <div onclick> is not keyboard-focusable and is not announced as a button. Use <button> for actions and <a href> for navigation.
Only one <main> should be visible per page.
Best practices#
- Use one <main> per page
- Give every <section> a heading
- Label repeated landmarks with aria-label
- Prefer native elements over ARIA roles — the first rule of ARIA
Remember this#
Use elements for meaning: header, nav, main, article, footer.
Semantic HTML helps screen readers and SEO.
Use <button> for actions, <a> for navigation.
Practice exercise#
Your task: Convert this layout to semantic HTML: <div class="top"><div class="menu">…</div></div><div class="content">…</div><div class="bottom">…</div>
Show solution
<header>
<nav aria-label="Main">…</nav>
</header>
<main>…</main>
<footer>…</footer>
Mini quiz#
Which element should wrap the primary, unique content of a page?
Want more? Practise all HTML MCQs · HTML interview questions
My notes#
Saved in this browser.