Lesson 16 • Advanced Track
Advanced HTML5 Semantic Architecture
By the end of this lesson you'll be able to replace generic <div> soup with meaningful HTML5 elements that give your page a real document outline — making it easier for search engines to index and for screen-reader users to navigate.
What You'll Learn
h1–h6) and the difference between block and inline elements. If accessibility is new to you, the Web Accessibility lesson pairs perfectly with this one.💡 Think of It Like This
A web page is like a newspaper. It has a masthead at the top (<header>), a table of contents linking sections (<nav>), the main story area (<main>) full of individual articles (<article>), a sidebar of related snippets (<aside>), and the fine print at the bottom (<footer>).
Now imagine a newspaper printed entirely in one font, with no headlines, columns, or boxes — just an undifferentiated wall of text. That is what a page of nothing but <div>s looks like to a screen reader or a search engine: every box says "I am a box" and nothing more. Semantic elements are the headlines and column rules that let a machine read your page the way a person reads a paper.
1. The Landmark Elements
A semantic element is a tag whose name describes the meaning of its content, not how it looks. Most of them render as a plain block box — visually identical to a <div> — but each one carries a built-in landmark role that browsers, search engines, and screen readers can act on. Here is the core set you will reach for on almost every page.
| Element | Meaning / when to use | Screen-reader role |
|---|---|---|
<header> | Intro area for a page or section (logo, title) | banner |
<nav> | A block of major navigation links | navigation |
<main> | The unique primary content (exactly one!) | main |
<article> | Self-contained, syndicatable content | article |
<section> | A thematic grouping with a heading | region |
<aside> | Tangential content: sidebar, related links, ads | complementary |
<footer> | Closing info: copyright, links, byline | contentinfo |
Run the worked example below. Notice that every landmark is just a labelled box — but a screen-reader user can jump straight to "main" or "navigation" because of those labels, something impossible with bare <div>s.
Worked example: a full semantic page
header, nav, main, article, section, aside, footer in one layout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic Page</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; }
/* Every rule below targets a SEMANTIC element directly --
no .header or .sidebar classes needed. */
header { background: #1e293b; padding: 20px 30px; border-bottom: 2px solid #3b82f6; }
header h1 { color: #3b82f6; font-size: 1.5re
...2. <article> vs <section> — the one test
This is the pairing that trips everyone up. The deciding question is simple: would this content still make sense lifted out of the page and published on its own? If yes — a blog post, a news item, a product card, a comment — it is an <article>. If it is just one labelled part of a bigger whole — a chapter, a "Features" block, a tab panel — it is a <section>.
A second rule helps too: a <section> should always have a heading (h2–h6). If a chunk has no natural heading and is only there for layout, you probably want a plain <div> instead. They can also nest: an <article> can contain <section>s, and a <section> can contain <article>s.
Worked example: nesting articles inside a section
A 'Latest posts' section containing self-contained articles
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>article vs section</title>
<style>
body { background:#0f172a; color:#e5e7eb; font-family: system-ui, sans-serif; padding:24px; }
section { border:1px solid #334155; border-radius:10px; padding:20px; max-width:560px; }
section > h2 { color:#8b5cf6; margin-bottom:14px; } /* the section's own heading */
article { background:#1e293b; padding:16px; border-radius:8px; margin-bottom:14px; }
article:last-ch
...3. Content-level semantics: <figure>, <time>, <mark>
Semantics are not only about page-level landmarks; smaller elements add meaning inside your content too:
<figure>wraps a self-contained illustration — an image, chart, code block, or quote — and<figcaption>gives it a caption that is programmatically linked to it (better than a loose paragraph underneath).<time datetime="...">marks up a date or time in a machine-readable format. The visible text can read "last Tuesday" whiledatetime="2026-06-09"tells machines the exact value.<mark>highlights text for relevance — like the yellow highlighting of your search term in results. It means "noteworthy here", not just "make it yellow".
Worked example: figure, time and mark
A captioned figure, a machine-readable date, and a highlighted term
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>figure / time / mark</title>
<style>
body { background:#0f172a; color:#e5e7eb; font-family: system-ui, sans-serif; padding:24px; line-height:1.7; }
article { max-width:560px; }
h2 { color:#3b82f6; margin-bottom:6px; }
time { color:#64748b; font-size:13px; }
/* <figure> has default left/right margins -- reset them. */
figure { margin: 20px 0; background:#1e293b; padding:16px; border-radius:10px; }
...4. Div Soup vs Semantic HTML
"Div soup" is markup where every region is a <div> with a class — <div class="header">, <div class="nav"> — that looks right but means nothing to a machine. The classes are for you; the elements should be for everyone else. Swapping each wrapper for the matching landmark is usually a one-for-one rename, and it instantly gives you the document outline below.
Worked example: before & after the refactor
The same layout as div soup and as semantic HTML, side by side
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Div Soup Fix</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background:#0f172a; color:#e5e7eb; font-family: system-ui, sans-serif; padding:20px; }
h1 { margin-bottom:16px; }
.comparison { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.bad, .good { padding:20px; border-radius:8px; }
.bad { background:#7f1d1d; border:2px solid #ef4444; }
.good { background
...🎯 Your Turn #1 — Refactor div soup into landmarks
The page below works visually but is pure div soup. Replace each labelled <div> with the matching semantic element. Fill in the blanks marked ___, then run it and check the comments.
Your Turn #1: swap divs for semantic tags
Turn header/nav/main/footer divs into real landmarks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Turn 1</title>
<style>
body { background:#0f172a; color:#e5e7eb; font-family: system-ui, sans-serif; }
header { background:#1e293b; padding:18px 24px; border-bottom:2px solid #3b82f6; }
header h1 { color:#3b82f6; font-size:1.3rem; }
nav { background:#1e293b; padding:10px 24px; display:flex; gap:18px; }
nav a { color:#94a3b8; text-decoration:none; font-size:14px; }
main { padding:24px; }
m
...🎯 Your Turn #2 — article, figure, time and mark
Finish this blog post so it uses content-level semantics: wrap it in an <article>, add a machine-readable date, highlight a key term, and caption the image. Fill in the blanks and verify against the comments.
Your Turn #2: content-level semantics
Add article, time, mark, figure and figcaption
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Turn 2</title>
<style>
body { background:#0f172a; color:#e5e7eb; font-family: system-ui, sans-serif; padding:24px; line-height:1.7; }
article { max-width:560px; }
h2 { color:#3b82f6; margin-bottom:6px; }
time { color:#64748b; font-size:13px; }
figure { margin:18px 0; background:#1e293b; padding:14px; border-radius:10px; }
figure div { height:110px; border-radius:8px; background:linear-gradien
...🧩 Mini-Challenge — Build a semantic page from scratch
Support is faded now — only an outline is given. Build a small but complete semantic page. Use the worked examples in sections 1 and 2 as your reference if you get stuck.
Mini-Challenge: a complete semantic layout
header, nav, main with two articles, aside, and footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mini-Challenge</title>
<style>
/* Optional: style the semantic elements however you like.
(Targeting header, nav, main, article, aside, footer by name.) */
body { background:#0f172a; color:#e5e7eb; font-family: system-ui, sans-serif; padding:20px; line-height:1.6; }
</style>
</head>
<body>
<!-- 🧩 MINI-CHALLENGE: a complete semantic page for a "Recipes" blog
1. A <header> containing an <h1> sit
...⚠️ Common Errors (and the fix)
- More than one
<main>. A page must have exactly one main landmark; a second one confuses assistive tech and is invalid HTML. Fix: keep a single<main>and use<section>s inside it for sub-areas. <section>with no heading. A section is meant to be a titled region; one with noh2–h6adds an empty entry to the outline. Fix: give it a heading, or use a plain<div>if it is only a styling wrapper.- Wrapping everything in
<article>. Article is for self-contained, syndicatable content — not a generic box. Fix: apply the "would it make sense published alone?" test; if no, use<section>or<div>. <time>withoutdatetime. If the visible text is not a valid machine format ("last Tuesday"), machines get nothing. Fix: adddatetime="2026-06-09"in ISO format.- Using
<mark>just to colour text. Mark means "relevant / noteworthy here", and screen readers may announce it. Fix: for purely visual styling with no meaning, use a<span>with a class instead.
📋 Quick Reference
| Element | What it means |
|---|---|
<header> | Intro area for a page or section (banner landmark at page level) |
<nav> | A block of major navigation links (navigation landmark) |
<main> | The unique primary content — exactly one per page (main landmark) |
<article> | Self-contained, syndicatable content (blog post, card, comment) |
<section> | A thematic grouping that has a heading (region landmark) |
<aside> | Tangential content: sidebar, related links (complementary landmark) |
<footer> | Closing info: copyright, byline (contentinfo landmark) |
<figure> | A self-contained illustration, chart, code, or quote |
<figcaption> | A caption tied to its parent <figure> |
<time datetime> | A machine-readable date or time |
<mark> | Text highlighted for relevance / noteworthiness |
❓ Frequently Asked Questions
What is the difference between <article> and <section>?
An <article> is self-contained: it would still make sense if you pulled it out of the page and published it on its own — a blog post, a news story, a product card, a forum comment. A <section> is a thematic grouping inside a page that is not independently distributable, like a chapter, a tabbed panel, or a 'Related products' block. The quick test: if it could be syndicated to an RSS feed on its own, use <article>; if it is just one labelled part of a larger whole, use <section>. Either way, give it a heading.
Does using semantic HTML actually improve my Google ranking?
Semantics do not give you a direct ranking boost the way good content or fast load times do, but they help indirectly and reliably. Search engines parse <main>, <article>, <nav>, and headings to understand which part of the page is the real content versus boilerplate, which improves how your page is indexed and how rich results (like article cards) are generated. Clean structure also tends to correlate with the accessible, well-built pages Google rewards. Treat semantics as the foundation that lets the rest of your SEO work, not a trick on its own.
Can I have more than one <header>, <footer>, or <nav> on a page?
Yes for <header>, <footer>, and <nav>; no for <main>. <header> and <footer> are scoped to their nearest sectioning ancestor, so an <article> can have its own <header> (title and byline) and its own <footer> (tags, share links) in addition to the page-level ones. You can also have several <nav> elements — a primary menu, a breadcrumb trail, a footer menu — and you should label them (aria-label) so they are distinguishable. <main>, however, must appear only once per page because it marks the single primary content region.
Do semantic elements come with any built-in styling?
Almost none. <header>, <main>, <section>, <article>, <aside>, <nav>, and <footer> all render as plain block-level boxes — visually identical to a <div>. Their value is entirely in meaning, not appearance: browsers, screen readers, and search engines treat them differently even though they look the same. You still apply all your own CSS (Grid, Flexbox, colours, spacing). The only common surprise is that <figure> has default left and right margins you may want to reset.
Is it ever okay to just use a <div>?
Absolutely — <div> is not banned, it is simply meaningless, which makes it the correct choice when you need a wrapper purely for styling or layout and the content has no semantic role. A Grid container, a card you are positioning, a flex row of buttons — those are legitimately <div> jobs. The rule of thumb: reach for the semantic element when one describes the content's purpose (it is navigation, it is the main content, it is a standalone article); reach for <div> when you just need a generic box.
How do screen readers actually use these elements?
Each landmark element exposes a role (banner for <header>, navigation for <nav>, main for <main>, complementary for <aside>, contentinfo for <footer>). Screen reader users can pull up a list of these landmarks and jump straight to, say, the main content or the navigation, instead of listening to the whole page top to bottom. <article> and <section> with headings also feed the heading outline that lets users skim by structure. Replace those landmarks with bare <div>s and that entire navigation shortcut disappears.
🎉 Lesson Complete
You can now architect pages with semantic HTML5 instead of div soup. The essentials:
- ✅ Use
<header>,<nav>,<main>(just one),<aside>, and<footer>for page-level landmarks - ✅ Use
<article>for syndicatable content and<section>for titled thematic groups - ✅ Add meaning inside content with
<figure>/<figcaption>,<time>, and<mark> - ✅ Every landmark builds the document outline screen readers and search engines rely on
- ✅ Refactoring div soup is usually a one-for-one rename — and a free accessibility and SEO win
Next up: Accessibility Deep Dive & ARIA, where you'll extend these landmarks with ARIA roles and attributes for richer, more dynamic interfaces.
Sign up for free to track which lessons you've completed and get learning reminders.