Stop 03 · HTML, CSS & JavaScript EssentialsTopics · 1/11

Semantic HTML

Part of the Full Stack Developer Roadmap

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.

Using HTML elements that describe their meaning (`<header>`, `<nav>`, `<article>`) rather than generic `<div>`s everywhere — improves accessibility, SEO, and how maintainable your markup is.

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>`-heavy page using proper semantic tags.
2Check how a screen reader interprets semantic vs non-semantic markup.
3Learn when to use `<section>` vs `<article>` vs a plain `<div>`.