Chapter 7 — Semantic HTML5
Learning Outcome
Build meaningful, SEO-friendly page layouts using HTML5 semantic elements instead of generic <div> soup.
← 06 - Lists | Next → 08 - Images & Media
7.1 What is Semantic HTML?
Semantic HTML uses tags that describe their meaning and purpose, not just their visual appearance.
Why Semantic HTML Matters
4 Key Benefits
- Accessibility — Screen readers navigate by landmarks (
<nav>, <main>) and announce element roles to blind users - SEO — Search engines understand content hierarchy and index it correctly
- Readability — Other developers understand your code structure at a glance
- Maintainability — Easier to update, debug, and style
7.2 Page Layout Semantic Tags
<!DOCTYPE html>
<html lang="en">
<body>
<header>
<!-- Site logo, name, main navigation -->
</header>
<nav>
<!-- Primary navigation links -->
</nav>
<main>
<!-- The unique main content of this page (one per page) -->
<section>
<!-- A themed grouping of content -->
</section>
<article>
<!-- Self-contained content: blog post, news article -->
</article>
<aside>
<!-- Sidebar: related links, ads, author bio -->
</aside>
</main>
<footer>
<!-- Copyright, social links, contact info -->
</footer>
</body>
</html>
7.3 Semantic Tags — Detailed Reference
<header>
Top of the page or a section. Contains logo, site title, or primary nav.
<header>
<h1>My Portfolio</h1>
<nav>...</nav>
</header>
<nav>
Navigation links — internal or external. Should contain <a> tags or a <ul> of links.
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
<main>
The dominant content of the <body>. Use only once per page. Skip links target this.
<main id="main-content">
<!-- Everything important goes here -->
</main>
<section>
A thematic grouping of content with its own heading. Use when content forms a distinct part of the page.
<section>
<h2>About Us</h2>
<p>We are a design studio...</p>
</section>
<article>
Self-contained, independently distributable content. Would still make sense if copied elsewhere.
<article>
<h2>How to Learn HTML in 4 Weeks</h2>
<time datetime="2025-04-24">April 24, 2025</time>
<p>Start with the basics...</p>
</article>
<aside>
Content tangentially related to the main content — sidebars, pull quotes, ad panels.
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">CSS Basics</a></li>
</ul>
</aside>
<footer>
Bottom of page or section — copyright, links, contact info.
<footer>
<p>© 2025 My Website. All rights reserved.</p>
<a href="/privacy">Privacy Policy</a>
</footer>
<figure> and <figcaption>
Used for images, diagrams, code blocks with a caption.
<figure>
<img src="chart.png" alt="Sales grew 40% in Q4">
<figcaption>Figure 1: Q4 2024 Sales Growth</figcaption>
</figure>
<time>
Machine-readable date/time. datetime attribute provides the standardised format.
<p>Published on <time datetime="2025-04-24">April 24, 2025</time></p>
<p>Class starts at <time datetime="09:00">9:00 AM</time></p>
<address>
Contact information for the nearest <article> or <body>.
<address>
Written by <a href="mailto:arjun@example.com">Arjun Kumar</a><br>
Trivandrum, Kerala, India
</address>
7.4 <article> vs <section>
The "Would it make sense alone?" Test
<article> — remove it from the page and it still makes sense? Use <article>. (A blog post, a news story, a product review)<section> — it's part of a whole, needs context? Use <section>. (An "About Us" section, a "Skills" section of a portfolio)
7.5 Full Semantic Page Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>News Blog</title>
</head>
<body>
<header>
<h1>The Daily HTML</h1>
<nav>
<a href="/">Home</a>
<a href="/tech">Tech</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<section id="featured">
<h2>Featured Articles</h2>
<article>
<h3>HTML5 Turns 10</h3>
<time datetime="2025-04-24">April 24, 2025</time>
<p>A decade of semantic web...</p>
</article>
<article>
<h3>Why Accessibility Matters</h3>
<time datetime="2025-04-20">April 20, 2025</time>
<p>Over 1 billion people have disabilities...</p>
</article>
</section>
<aside>
<h2>Trending Topics</h2>
<ul>
<li><a href="#">CSS Grid</a></li>
<li><a href="#">Web Performance</a></li>
</ul>
</aside>
</main>
<footer>
<address>
Contact: <a href="mailto:editor@dailyhtml.com">editor@dailyhtml.com</a>
</address>
<p>© 2025 The Daily HTML</p>
</footer>
</body>
</html>
🚀 Recommended Projects
Project 1 — News Website Layout
Build a semantic news homepage with:
<header> with site title + <nav><main> containing 3 <article> cards<aside> with trending topics<footer> with copyright and contact
Project 2 — Div-to-Semantic Refactor
Take this div-heavy code and rewrite it semantically:
<div class="header"><div class="logo">...</div></div>
<div class="nav">...</div>
<div class="content"><div class="post">...</div></div>
<div class="sidebar">...</div>
<div class="footer">...</div>
📌 Quick Recall
- Semantic = tags that describe their meaning, not just their look
<header> = top | <nav> = navigation | <main> = main content (once per page)<section> = themed group | <article> = standalone content | <aside> = sidebar<footer> = bottom | <figure> + <figcaption> = image with caption<time datetime="..."> = machine-readable date- Article test: "Would it make sense alone?" → yes =
<article>, no = <section>
Recommended Projects
