Chapter 2.4☕ 12 min read

Semantic HTML

Charminar ka structure — har hisse ka ek kaam hai.

01What is Semantic HTML?

Look at Charminar. Each part has a purpose — the minarets for the call to prayer, the central arch for entry, the museum for artifacts. Every section has its own meaning.

Semantic HTML works the same way. Instead of generic <div> everywhere, you use tags that describe their content: <header> says "this is the top section," <nav> says "this is navigation," <main> says "this is the main content."

🏛️

Building Analogy: A <div> is like a plain room — could be anything. Semantic tags are like labeled rooms — Kitchen, Bedroom, Bathroom. You know exactly what each is for.

02The Semantic Elements — Meaningful Tags

Here are the most important semantic HTML5 elements:

<header> — Top of the page. Logo, tagline, navigation.
<nav> — Navigation links. Like the menu at Paradise.
<main> — Main content. The biryani itself — what the page is about.
<article> — Self-contained piece. A blog post, a review, a news story.
<section> — Group of related content. Like "History" section and "Menu" section.
<aside> — Related but not essential. Sidebar, ads, "did you know?"
<footer> — Bottom of page. Copyright, contact, links.

<body>
  <header>
    <h1>Hyderabad Food Blog</h1>
    <nav>
      <a href="/">Home</a>
      <a href="/biryani">Biryani Guides</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Best Biryani in Hyderabad</h2>
      <p>Paradise, Bawarchi, Shah Ghouse...</p>
    </article>

    <aside>
      <h3>Did You Know?</h3>
      <p>Hyderabad biryani has 200+ years of history!</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 Hyderabad Food Blog</p>
  </footer>
</body>

03Types of Semantic Concepts

Semantic HTML is like having a well-organized restaurant menu — you know exactly what each section is.

ElementPurpose

🏠 Header & NavTop section + navigation linksLearn →📄 Main & ArticlePrimary content + reusable content blocksLearn →📂 Section & AsideGroup related content + complementary infoLearn →♿ WAI-ARIA Rolesrole="navigation", role="banner"Learn →

04Semantic vs Non-Semantic — Flow

Choose semantic tagThink about what the content IS, not how it LOOKS

→

Add contentHeadings, paragraphs, images inside the tag

→

Style with CSSSemantic tags can be styled exactly like divs

Golden Rule: Non-semantic <div>s are like empty biryani plates — could be anything. Semantic tags are like labeled menus — you know exactly what you're getting. Use <div> only when no semantic tag fits.

05Exercise — Build a Blog Layout

Build a Hyderabad food blog layout using semantic HTML5 elements.

Open VS Code. Create file food-blog.html

Use the starter code:

<!-- header: Blog title + tagline -->
<!-- nav: Links to sections -->
<!-- main: Blog posts -->
<!-- article: Individual post -->
<!-- aside: Sidebar info -->
<!-- footer: Copyright -->

Complete these:

Use <header> for the blog title and tagline Use <nav> for navigation links Use <main> to wrap all articles Use <article> for at least 2 blog posts Use <aside> for a sidebar fact Use <footer> for copyright info

Done — Key Points:

✅ Semantic tags describe CONTENT, not appearance
✅ <div> = generic container, semantic tags = meaningful
✅ Screen readers announce semantic tags as landmarks
✅ Use proper heading hierarchy inside semantic sections
✅ CSS works exactly the same on semantic tags as divs

Previous2.3 — Forms 📋 All Chapters Next Chapter2.5 — Audio & Video →