One-sentence summary
Semantic HTML means marking each part of a page with a tag that matches its meaning, so the code tells the browser, screen readers and search engines what each part is for.
Why does it matter?
In the previous lesson we built the skeleton of a page with <!DOCTYPE html>, <head> and <body>. That skeleton was the outer shell of the page. Now it is time to organise the parts inside <body> according to their meaning.
You could write everything with the <div> tag. A <div> works and can look however you want on screen, but it carries no meaning. It does not answer the question, “Is this a menu, or is this the main content?” A <div> is like an empty box with no name on it.
Semantic tags answer that question. The word semantic means “related to meaning.” So the <nav> tag is not just a box; it carries the meaning “this is a navigation menu.” The tag's name tells you what the part inside is for.
This meaning matters for three groups:
- Screen readers: Users who cannot see the screen browse with software that reads the page aloud. When this software sees
<nav>, it announces “navigation region” and lets the user jump straight to the menu. That would not be possible with plain<div>tags. - Search engines: Engines such as Google look at
<main>and<article>to understand the real content of a page. - Other developers: Whoever reads the code later (maybe future you) can tell from the tag name what each part is.
Structure tags that carry meaning
A web page is usually made of the same big parts: a top area, a menu, the main content, side information and a bottom area. There is a separate semantic tag for each one.
The most common tags
<header>: The top of a page or a section. The title and logo often go here.<nav>: A navigation menu. The region that holds the links.<main>: The main content of the page. A page should have only one<main>.<section>: A part with its own heading that forms one topic.<article>: Content that makes sense on its own, like a blog post, a news item or a comment.<aside>: Extra information beside the main content. A sidebar, related links, small boxes.<footer>: The bottom of a page or a section. Contact details, copyright notes and so on.
Two small examples
Let us write the same part first without meaning, then semantically.
Without meaning:
<div class="top">
<div class="title">Robotics Journal</div>
</div>
<div class="menu">
<a href="/">Home</a>
<a href="/lessons">Lessons</a>
</div>Semantic version:
<header>
<h1>Robotics Journal</h1>
</header>
<nav>
<a href="/">Home</a>
<a href="/lessons">Lessons</a>
</nav>Both look similar on screen. The difference is that the second version also states its meaning: this is a heading, that is a menu. When a screen reader reads the first version it just sees two boxes; when it reads the second, it says “navigation menu” and guides the user.
An image and its caption: figure and figcaption
When you want to add a caption to an image, two more tags help.
<figure>: A container that wraps an image, a diagram or a code snippet.<figcaption>: The caption for that image, that is, its description.
<figure>
<img src="robot.jpg" alt="A two-wheeled robot with a cardboard body">
<figcaption>Our first line-following robot attempt.</figcaption>
</figure>Do not forget the alt text here. alt is the description read out when the image does not load or the user cannot see it. For accessibility, every meaningful image should have an alt.
Choosing the right tag
The biggest question for beginners is this: “When do I use <div>, and when do I use a semantic tag?”
A simple rule: first check whether a tag with meaning exists. If it does, use it. If the part is really just a “box” whose only purpose is styling, then <div> is fine. So <div> is not forbidden; it is simply the last choice.
You can find the right tag quickly by asking yourself these questions:
- A menu? →
<nav> - A standalone piece of writing? →
<article> - The main content? →
<main> - Just a wrapper for colour or spacing? →
<div>
<section> and <div> are often confused. A <section> is a topic area with its own heading; a <div> is a grouping with no meaning. If you are going to give a part a heading (such as <h2>), <section> is probably the right choice.
These choices can feel hard at first. Over time, just as you learned to split a piece of writing into paragraphs, you will naturally split a page into meaningful parts.
Hands-on practice
Build the skeleton of a blog post using semantic tags. The piece below goes inside the <body> from the previous lesson.
<body>
<header>
<h1>Robotics Journal</h1>
<nav>
<a href="/">Home</a>
<a href="/posts">Posts</a>
</nav>
</header>Next comes the main content and the side information:
<main>
<article>
<h2>How I Built My First Robot</h2>
<p>In this post I describe my first attempt.</p>
<figure>
<img src="robot.jpg" alt="A small two-wheeled robot">
<figcaption>The first design I tried.</figcaption>
</figure>
</article>
<aside>
<h2>Related Posts</h2>
<p>Notes on choosing a motor.</p>
</aside>
</main>Finally, add the bottom area:
<footer>
<p>This is a learning project.</p>
</footer>
</body>When you join the three pieces in order, you get a fully semantic page skeleton. Task: rewrite the same skeleton for a blog post about your own interest (for example cycling, space or games).
Common mistakes
Writing everything with div
A page that uses only <div> works, but its meaning is lost. To a screen reader or a search engine, the page becomes a pile of “meaningless boxes.” Do not choose <div> when a meaningful tag exists.
Using more than one main
A page should have only one <main>. Keep the real content inside a single <main>.
Choosing a tag by how it looks
Choose between <section>, <article> and <div> by asking “what does this part mean,” not “how should it look.” You will set the appearance separately with CSS.
Forgetting the alt text on images
Without alt, an image disappears completely for a user who cannot see it. Write a short, descriptive alt for every meaningful image.
Safety note
This lesson uses a blog example, but the pages you write can really be published on the internet. So do not put real personal information in your examples: do not write a full address, phone number, school name or date of birth on the page. Every example in this academy is for learning; it is not a real sign-up form or a real contact section. Before you publish a page for real, always check it together with an adult.
Lesson summary
- Semantic HTML means marking each part with a tag that matches its meaning.
<header>,<nav>,<main>,<section>,<article>,<aside>and<footer>define the big parts of a page.- Semantic tags make the page understandable to screen readers, search engines and other developers.
- Prefer a meaningful tag over
<div>when one exists;<div>is only for meaningless groupings. - The
alttext on images is required for accessibility.
Review questions
- What does the word “semantic” mean?
- How many
<main>tags should a page have? - Which tag do you use for a navigation menu?
- What do
<figure>and<figcaption>do together? - Why is writing everything with
<div>not a good idea?
Answers
- It means “related to meaning.” A semantic tag carries the meaning of what a part is for.
- Only one. The main content is kept inside a single
<main>. - We use the
<nav>tag. <figure>wraps an image, and<figcaption>gives that image its caption.- Because
<div>carries no meaning; screen readers, search engines and other developers cannot tell what the parts are.
Source and verification note
For “Semantic HTML”, verification focuses on whether the relationship between Structure tags that carry meaning and Two small examples remains consistent across examples. Examples use standards-oriented HTML, CSS and browser JavaScript. A page should be checked not only visually but also for keyboard use, focus order, mobile layout and meaningful heading structure.
Next lesson
Visual Layout with CSS: You will start styling the page you organised semantically by adding colour, spacing and layout to make it look the way you want.