🏗 Phase 6 · Semantic HTML🟢 BeginnerModule 07

Semantic HTML

⏱ 18 min read📖 4 sections🧩 5-question quiz

Course Progress63% complete

You could build an entire website using only <div> and <span>. Browsers would render it fine. But screen readers would see an unintelligible wall of boxes, search engines would struggle to identify what's important, and your team would have to read every CSS class name to understand the document structure. Semantic HTML fixes all three — for free.

Section 1

What "Semantic" Means

A semantic element clearly describes its meaning to both the browser and the developer. <nav> means navigation. <article> means a self-contained piece of content. <footer> means a footer. Compare this to <div class="nav"> — that's just a box with a label a human wrote; it means nothing to machines.

✗ Non-semantic (div soup)

<div class="header">
  <div class="logo">...</div>
  <div class="nav">...</div>
</div>
<div class="content">
  <div class="article">...</div>
</div>
<div class="footer">...</div>

✓ Semantic HTML

<header>
  <div class="logo">...</div>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

♿

Three audiences benefit from semantic HTML

Screen readers — use semantic landmarks to let users jump between sections. Search engines — use the structure to understand what content is primary, what's navigation, what's supplementary. Developers — spend less time deciphering mystery divs and more time shipping features.

Section 2

The Semantic Element Landscape

HTML5 introduced a set of elements that map directly to common page regions and content types:

Introductory content for a page or section — logo, title, navigation

<nav>

A set of navigation links — main menu, breadcrumbs, pagination

<main>

The primary unique content of the page — only one per page

Self-contained content that makes sense on its own — blog post, news item, comment

A thematic grouping of content with a heading — chapters, tabs, sections of a page

<aside>

Tangentially related content — sidebar, pull quote, related links

Closing content for a page or section — copyright, links, contact info

Self-contained media (image, chart, code) referenced from the main content

Caption for a figure element

<time>

A specific time or date — datetime attribute for machine-readable format

Contact information for the nearest article or body ancestor

<mark>

Highlighted/relevant text — search results highlighting

Section 3

A Typical Page Layout

Here's how semantic elements typically map to the regions of a real web page:

<header> — Logo, site title, primary nav

<nav> — Main navigation links

<main>

<article> — Main content
<section> — Section of article

<aside>
Sidebar / related links

HTMLFull semantic page skeleton

<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Site Name"></a>
    <nav>
      <ul>
        <li><a href="/courses">Courses</a></li>
        <li><a href="/blog">Blog</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>Getting Started with HTML</h1>
      <section>
        <h2>What is HTML?</h2>
        <p>...</p>
      </section>
    </article>
    <aside>
      <h2>Related Lessons</h2>
      <ul>...</ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 BitWithBite</p>
  </footer>
</body>

Section 4

When to Use div and span

<div> and <span> are still needed — but only when no semantic element fits. Use them as styling hooks and layout containers when there is no meaningful element to choose.

🎯

The decision rule

Ask: "Does this element represent a meaningful piece of page structure or content?" If yes, find the right semantic element. If no (pure layout, styling wrapper, JS hook), reach for <div> (block) or <span> (inline).

⚠️

Overusing section is a common mistake

<section> should have a heading and represent a distinct thematic chunk. If you're wrapping content just for styling, use <div>. If the content is self-contained, use <article>. <section> sits between those two.

🧩 Quick Check — Lesson 22

5 questions · instant feedback

1. What is the primary benefit of using semantic HTML elements over generic divs?

2. How many <main> elements should a page have?

3. Which element is best for a self-contained piece of content that could be republished independently (like a blog post)?

4. When should you still use a <div> instead of a semantic element?

5. Which element represents content that is tangentially related to the main content — like a sidebar?

🏆

Quiz Complete!

Semantic HTML foundations solid! Next: header and footer in depth.

🏆

Lesson 22 Challenge

Refactor exercise · 15 min

Convert a "div soup" page to fully semantic HTML.

Take the following div-based structure and rewrite it using the correct semantic elements:

<div class="header"><div class="logo">...</div><div class="menu">...</div></div>
<div class="hero"><div class="hero-text">...</div></div>
<div class="main"><div class="post"><div class="post-title">...</div><div class="post-body"><div class="chapter">...</div></div></div><div class="sidebar">...</div></div>
<div class="footer"><div class="copyright">...</div></div>

Also add a <time datetime="2025-06-21"> element in the article and a <figure> with <figcaption> wrapping an image.

Show hints

header → <header>, menu → <nav>, hero section → <section> or stay as div
main div → <main>, post → <article>, chapter → <section>
sidebar → <aside>, footer → <footer>, copyright → keep as <p>
time element: <time datetime="2025-06-21">June 21, 2025</time>

← Select & Textarea

Lesson 22 of 35

Header & Footer →