Semantic HTML
What is Semantic HTML?
Semantic HTML means using elements that describe the meaning of the content, not just how it looks.
Compare these two:
<!-- Non-semantic — what does this mean? -->
<div class="header">
<div class="nav">...</div>
</div>
<div class="main-content">
<div class="article">...</div>
<div class="sidebar">...</div>
</div>
<div class="footer">...</div>
<!-- Semantic — immediately clear -->
<header>
<nav>...</nav>
</header>
<main>
<article>...</article>
<aside>...</aside>
</main>
<footer>...</footer>
Both produce the same visual result. The semantic version is easier to read, better for accessibility, and better for SEO.
Core Semantic Elements
Page structure
| Element | Purpose |
|---|---|
<header> | Introductory content — site logo, navigation, page title |
<nav> | A set of navigation links |
<main> | The primary content of the page (use once per page) |
<aside> | Sidebar content — related articles, adverts, pull quotes |
<footer> | Footer — copyright, links, contact info |
<section> | A thematic grouping of content (has its own heading) |
<article> | Self-contained content that could stand alone — a blog post, a news story, a product card |
Content elements
| Element | Purpose |
|---|---|
<figure> | An image, diagram, or code snippet with a caption |
<figcaption> | The caption for a <figure> |
<time> | A date or time |
<address> | Contact information |
<details> + <summary> | Expandable/collapsible content |
<blockquote> | A long quotation |
<cite> | The title of a work |
<abbr> | An abbreviation |
Building a Semantic Page
Here is how a typical blog post page would be structured:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Blog Post – CareerEx</title>
</head>
<body>
<header>
<a href="/">
<img src="logo.svg" alt="CareerEx" />
</a>
<nav>
<ul>
<li><a href="/courses">Courses</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>How I Got My First Tech Job in 6 Months</h1>
<p>By <address>Amara Okafor</address> — <time datetime="2025-01-15">15 January 2025</time></p>
</header>
<section>
<h2>Starting from Zero</h2>
<p>I had no coding experience at all...</p>
<figure>
<img src="desk.jpg" alt="My home desk setup" />
<figcaption>My home desk where I studied every morning before work.</figcaption>
</figure>
</section>
<section>
<h2>What I Used to Learn</h2>
<p>CareerEx's <abbr title="Frontend Engineering">FE</abbr> track was my main resource.</p>
</section>
</article>
<aside>
<h2>Related Posts</h2>
<ul>
<li><a href="#">5 HTML Tags You're Probably Forgetting</a></li>
<li><a href="#">CSS Flexbox in 10 Minutes</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 CareerEx. All rights reserved.</p>
<nav>
<a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a>
</nav>
</footer>
</body>
</html>
Why Semantic HTML Matters
1. Accessibility
Screen readers use semantic elements to help visually impaired users navigate a page. A user can press a shortcut key to jump to the <main> content, skip the <nav>, or list all <article> elements. A page built entirely with <div> tags does not support any of this.
2. SEO
Search engines like Google read your HTML. Content inside <article>, <main>, and <h1>–<h6> is weighted more heavily than content inside anonymous <div> tags. Good semantic structure helps your page rank higher.
3. Maintainability
A page with clear semantic structure is easier for other developers (and your future self) to understand at a glance.
section vs article vs div
This is the question most beginners struggle with.
<article> — Content that could be published and make sense on its own if you extracted it. A blog post, a news story, a tweet, a product card.
<section> — A thematic chunk of a page that would not make sense on its own. Always has a heading. Use it to group related content within an article or main.
<div> — A generic container with no semantic meaning. Use it only when no other element fits — like a wrapper purely for CSS or JavaScript purposes.
A simple rule: reach for <article> or <section> first. Only use <div> when no semantic element fits.
The details and summary Elements
One underused gem — the native disclosure widget:
<details>
<summary>What is included in the course?</summary>
<p>40+ hours of video, projects, quizzes, and a career support community.</p>
</details>
This creates an expand/collapse FAQ section with zero JavaScript.
Try it yourself
Key Takeaways
- Semantic HTML uses elements that describe the meaning of content, not just its appearance
- Use header, nav, main, article, section, aside, and footer to structure a page meaningfully
- article is for self-contained content that could stand alone; section is for thematic groups within context
- Use div only when no semantic element fits, such as a wrapper needed purely for CSS
- Semantic HTML improves accessibility for screen readers and helps search engines understand your page
- The details and summary elements create native expand/collapse widgets with zero JavaScript
Quick Quiz
1.What is the main advantage of using semantic HTML elements?
2.What is the difference between <section> and <article>?
3.When should you use a <div> element?
4.Which HTML element creates an expand/collapse disclosure widget with no JavaScript?
5.Why does semantic HTML improve SEO?
Ready to go further?
CareerEx gives you structured 12-week training, live classes every Saturday and Sunday, real tutor feedback, and a certificate. Join the next cohort.
Join CareerEx