Semantic HTML means using tags that describe the meaning of their content, not just its appearance. It makes pages more accessible, easier to maintain, and better understood by search engines.
Before HTML5, developers built entire page layouts out of <div> tags. The result was “div soup” — structurally valid but meaningless to anyone reading the code or using a screen reader.
<!-- Old approach — no meaning -->
<div class="header">...</div>
<div class="nav">...</div>
<div class="main">...</div>
<div class="footer">...</div>
HTML5 introduced dedicated tags for these roles. A screen reader encountering <nav> knows it’s a navigation region and can offer to skip to it. A search engine encountering <article> knows it’s the main content worth indexing.
<!-- Semantic approach — meaningful -->
<header>...</header>
<nav>...</nav>
<main>...</main>
<footer>...</footer>
These tags define the major regions of a page. Most pages use all of them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My page</title>
</head>
<body>
<header>
<h1>My website</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<h2>Welcome</h2>
<p>Main page content goes here.</p>
</main>
<footer>
<p>© 2026 My website. All rights reserved.</p>
</footer>
</body>
</html>
| Tag | Purpose |
|---|---|
<header> | Introductory content — site title, logo, top nav |
<nav> | A group of navigation links |
<main> | The primary content of the page — only one per page |
<footer> | Closing content — copyright, links, contact info |
These tags organise content within <main> or other regions.
<main>
<article>
<h2>How to bake sourdough</h2>
<p>Published 1 June 2026.</p>
<p>Sourdough begins with a starter...</p>
</article>
<section>
<h2>Related recipes</h2>
<p>You might also enjoy these...</p>
</section>
<aside>
<h2>About the author</h2>
<p>A short bio goes here.</p>
</aside>
</main>
| Tag | Purpose |
|---|---|
<article> | Self-contained content that makes sense on its own (blog post, news story, comment) |
<section> | A thematic grouping of content with a heading |
<aside> | Content tangentially related to the main content (sidebar, callout, related links) |
Beyond layout, HTML5 provides inline tags that add meaning to runs of text.
<p>
The event takes place on <time datetime="2026-07-04">4 July 2026</time>.
</p>
<p>
Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.
</p>
<p>
The result was <mark>statistically significant</mark>.
</p>
<p>
<abbr title="HyperText Markup Language">HTML</abbr> was created in 1991.
</p>
| Tag | Purpose |
|---|---|
<time> | A date or time value, machine-readable via datetime |
<kbd> | Keyboard input or key names |
<mark> | Highlighted or search-result text |
<abbr> | An abbreviation or acronym with its expansion |
<address> | Contact information for a person or organisation |
A simple rule: if a meaningful tag exists that fits the content, use it. Fall back to <div> or <span> only when nothing semantic fits.
<!-- Use article for a self-contained post -->
<article>
<h2>Post title</h2>
<p>Post content.</p>
</article>
<!-- Use div when it's just a layout container with no semantic role -->
<div class="two-column-grid">
<article>...</article>
<aside>...</aside>
</div>
Restructure your index.html from Unit 1 using semantic tags:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My semantic page</title>
</head>
<body>
<header>
<h1>My learning journal</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
<main>
<article>
<h2>What I learned today</h2>
<time datetime="2026-06-07">7 June 2026</time>
<p>Today I studied semantic HTML and why it matters.</p>
</article>
<aside>
<h2>Resources</h2>
<p><a href="https://developer.mozilla.org">MDN Web Docs</a></p>
</aside>
</main>
<footer>
<p>© 2026 My learning journal.</p>
</footer>
</body>
</html>
| Tag | Type | Purpose |
|---|---|---|
<header> | Block | Site or section header |
<nav> | Block | Navigation links |
<main> | Block | Primary page content (one per page) |
<footer> | Block | Closing content |
<article> | Block | Self-contained content |
<section> | Block | Thematic content grouping |
<aside> | Block | Supplementary content |
<time> | Inline | Date or time |
<mark> | Inline | Highlighted text |
<abbr> | Inline | Abbreviation with expansion |
<kbd> | Inline | Keyboard key label |