Stop 02 · HTML5Topics · 1/12

Semantic tags

In short

A page made only of divs looks fine to you but is a blur to Google and screen readers. Semantic tags tell everyone what each part of the page actually is.

HTML elements like `<header>`, `<nav>`, `<main>`, `<article>` and `<footer>` that describe their meaning, not just their appearance — improving accessibility and SEO. Semantics communicate document structure to browsers, search engines, assistive technologies, and other tools, making the page easier to understand without relying on visual styling.

The jaadu mascot as a dabbawala holds open a stacked tiffin with rice, dal, roti and a sweet in separate boxes.

Think of it like this

Labelled sections of a tiffin

A dabbawala doesn't need to open your tiffin to know where the dal is, because every box has its place. Semantic tags do that for a page: header on top, nav for links, main for the real food, footer at the bottom.

Watch it happen

The page as labelled boxes

<body>

<h1>

<nav>

<main>

<aside>

1/5Everything visible lives inside <body>. Its children are the big labelled sections.

The big ideas

What you need to know

Tags with meaning

<header>, <nav>, <main>, <article>, <section>, <aside> and <footer> say what the content is, not how it looks.

Screen readers use them

A blind user can jump straight to <main> or the <nav> links. With only divs, they have to listen to everything.

Search engines read them

Google understands your page structure better when the main article sits inside <article> and headings go in order.

One h1, then go in order

Use one <h1> for the page title, then <h2>, <h3> in order. Don't pick a heading just because its size looks right.

See it in code

Walk through the code

html

1<body>2  <header>3    <h1>Riya's Food Blog</h1>4    <nav><a href="/">Home</a> <a href="/recipes">Recipes</a></nav>5  </header>6  <main>7    <article>8      <h2>Perfect Cutting Chai</h2>9      <p>Boil the water with ginger first...</p>10    </article>11    <aside>Popular: Poha in 10 minutes</aside>12  </main>13  <footer>© 2026 Riya</footer>14</body>

1/4The header groups the site title and nav links, so everyone knows this is the top of the site.

Same layout you'd build with divs, but now every block says what it is. CSS can still style it any way you like.

Save yourself the pain

Common mistakes

Oops

Wrapping everything in <div class="header">, <div class="nav"> and so on.

Do this instead

Use the real <header> and <nav> tags. Keep <div> for boxes that exist only for styling.

Oops

Using <h4> for a small title because the default size looks nice.

Do this instead

Pick the heading level by its place in the outline, then change its size with CSS.

Your mission

De-div a page

~20 min

Quick check

A blog post with its own title, date and text should usually go inside which tag?

Go deeper

1Rebuild a `<div>`-only page using proper semantic tags. Validate your understanding by applying it in a small practical example.
2Check how screen readers interpret semantic vs non-semantic markup. Validate your understanding by applying it in a small practical example.
3Learn when to use `<section>` vs `<article>` vs `<div>`.