Module 2: Semantic HTML & Structure — Web Foundations

🏗️ Why Meaning Matters

In Module 1, you learned that HTML describes structure — not appearance. Now we take the next step: the tags you choose should describe what your content means, not just how it's organized.

A <div> says "I'm a box." A <nav> says "I contain navigation links." Both are containers — but only one tells the browser, screen readers, and search engines what's inside.

📦

The Moving Boxes Analogy: Imagine moving to a new apartment. You pack everything in identical brown boxes with no labels. When you arrive — chaos. You open 20 boxes looking for the coffee maker. Now imagine every box is labeled: "Kitchen", "Bedroom", "Bathroom". Semantic HTML is labeling your boxes. Same contents, but everyone — you, your helpers, and even a robot — knows exactly what's inside.

🎯 By the end of this module, you will:

Understand why semantic tags are better than generic divs
Use the 7 structural semantic tags correctly
Build a proper document outline with headings h1–h6
Know which text-level tags carry meaning vs just styling
Understand how semantic HTML enables accessibility
See how search engines use semantic HTML for SEO

🍜 The Div Soup Problem

When beginners build web pages, they tend to use <div> for everything. The result is what developers call "div soup" — a page full of meaningless containers. It works visually, but it's a disaster for everything else.

❌ Div Soup

<div class="header">
  <div class="logo">My Site</div>
  <div class="nav">
    <div class="link">Home</div>
    <div class="link">About</div>
  </div>
</div>
<div class="main">
  <div class="title">Welcome</div>
  <div class="text">Hello world</div>
</div>
<div class="footer">© 2026</div>

✅ Semantic HTML

<header>
  <h1>My Site</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
  </nav>
</header>
<main>
  <h2>Welcome</h2>
  <p>Hello world</p>
</main>
<footer>© 2026</footer>

Both versions look exactly the same in a browser. But only the semantic version communicates meaning.

What Div Soup Breaks

🔍 SEO

Search engines can't tell your heading from your paragraph. They see a flat wall of content with no structure to index.

🔧 Maintenance

Another developer opens your code and sees 200 divs. Which one is the header? Which one is the sidebar? Reading becomes guessing.

🎨 CSS Targeting

You need extra classes for everything because all your tags are the same. With semantic tags, you can style nav a directly — no class needed.

⚠️

The Div Test: Every time you write <div>, pause and ask: "Is there a semantic tag that describes what this content IS?" If yes — use it. <div> should be your last resort, not your default.

🏛️ The 7 Structural Tags

HTML5 gives you 7 semantic tags to describe the major regions of any web page. Each one tells the browser, screen readers, and search engines exactly what role that area plays.

Page Anatomy

<header>

🌐 MySite

<nav> Home · About · Contact

<main>

<section>

<article> Post 1

<article> Post 2

<aside> Sidebar

<header> banner

The introductory content of a page or section. Typically contains the logo, site title, and navigation. A page can have multiple headers (one per section), but only the top-level one acts as the site banner.

<nav> navigation

A section containing navigation links — to other pages, to sections within the page, or to external resources. Not every group of links is a nav — only the major navigation blocks.

<main> main

The primary content of the page — the content that is unique to this page. There must be only one <main> per page. It excludes repeated content like headers, footers, and sidebars.

<section> region

A thematic grouping of content, usually with a heading. Use it when you'd put a heading above a group of related content. Think of it as a chapter in a book.

<article> article

A self-contained piece of content that makes sense on its own — a blog post, a news article, a product card, a comment. Ask: "Could I syndicate this content independently?" If yes → <article>.

<aside> complementary

Content that is tangentially related to the surrounding content — sidebars, pull quotes, ads, related links, author bios. It can be removed without affecting the main content.

<footer> contentinfo

The closing content of a page or section — copyright, contact info, sitemap links, legal notices. Like <header>, a page can have multiple footers (one per section).

📝

And <div>? A <div> is a generic container with no semantic meaning. It's not wrong to use it — but it should be your last resort. Use it only when no semantic tag fits, typically for layout purposes (grouping elements for CSS Flexbox or Grid).

🤔 Choosing the Right Tag

Not sure which tag to use? Walk through this decision tree. Start at the top and follow the questions.

The Decision Tree

1

Is it the site's main navigation?

Yes → <nav>. No → continue ↓

2

Is it the unique, primary content of the page?

Yes → <main> (only one per page). No → continue ↓

3

Is it introductory content (logo, title, nav)?

Yes → <header>. No → continue ↓

4

Is it closing content (copyright, links, contact)?

Yes → <footer>. No → continue ↓

5

Could this content stand alone? (blog post, card, comment)

Yes → <article>. No → continue ↓

6

Is it a thematic group with a heading?

Yes → <section>. No → continue ↓

7

Is it tangential/side content? (sidebar, related links)

Yes → <aside>. No → continue ↓

■

None of the above?

Use <div> — but only for layout/styling purposes. It has no semantic meaning.

📰 Headings & Document Outline

Headings (<h1> to <h6>) are not just big text — they create the document outline, a table of contents that screen readers and search engines use to navigate your page.

📰

The Newspaper Analogy: Think of headings like a newspaper. The headline (h1) is the main story. Section titles (h2) divide the paper: Sports, Politics, Culture. Sub-sections (h3) divide those: Champions League, Transfer Rumors. You never put a sub-section before its section — the hierarchy must make sense.

❌ Wrong: Headings for Size

<h1>My Recipes</h1>
<h4>Pasta Carbonara</h4>   <!-- h4 because "h2 looks too big" -->
<h6>Ingredients</h6>      <!-- h6 to get small text -->
<h6>Steps</h6>             <!-- skipped h2, h3, h4, h5! -->
<h2>A small tip</h2>      <!-- h2 after h6?! chaos -->

✅ Right: Logical Hierarchy

<h1>My Recipes</h1>
<h2>Pasta Carbonara</h2>
<h3>Ingredients</h3>
<h3>Steps</h3>
<h2>Chocolate Cake</h2>
<h3>Ingredients</h3>
<h3>Steps</h3>

The Heading Rules

1 One h1 per page — it's the main title (like a book cover).

2 Never skip levels — go h1 → h2 → h3. Never h1 → h3.

3 Headings are for hierarchy, not size. If you want smaller text, use CSS — not a lower heading level.

4 Every section should have a heading. It tells users and screen readers what this section is about.

⚠️

Common mistake: Students often use <h4> or <h5> because they want "smaller text." That's using HTML for appearance — which violates our core principle. Choose headings for hierarchy, then style them with CSS.

✍️ Text-Level Semantics

Beyond structure, some tags add meaning within text. The key question is always the same: does this tag carry meaning, or does it just change appearance?

✅ Tags with Meaning (Use These)

<strong> Strong importance. Screen readers change their voice tone. Appears bold — but the meaning is "this is important".

<em> Stress emphasis. Screen readers emphasize this word. Appears italic — but the meaning is "emphasize this".

<time> Machine-readable date/time. Browsers and search engines can parse it. <time datetime="2026-01-15">Jan 15</time>

<abbr> Abbreviation with expansion. <abbr title="HyperText Markup Language">HTML</abbr> — hover to see the full form.

<code> Inline code. Tells the browser this is a fragment of computer code, not regular text.

<cite> The title of a creative work — a book, film, song, or paper. Not for the person's name.

<mark> Highlighted text — relevant in a search context. The meaning is "pay attention to this", not "make it yellow".

⛔ Tags That Only Style (Avoid These)

These tags exist in HTML, but they carry no semantic meaning. They only change appearance — which is CSS's job.

<b> Bold text with no importance. Use <strong> if the text is important, or CSS font-weight: bold if it's purely visual.

<i> Italic text with no emphasis. Use <em> if you want emphasis, or CSS font-style: italic if it's purely visual.

<u> Underlined text. Often confused with links. Use CSS text-decoration: underline if truly needed (rarely is).

<s> Strikethrough text. Use <del> if content was deleted (semantic), or CSS text-decoration: line-through for visual effect.

⛔

The Core Principle: If a tag's only purpose is to change how text looks — it's CSS's job, not HTML's. <b>, <i>, <u>, <s>, <br>, <hr> are all presentation. We don't use them. Exception: <strong> and <em> are fine because they carry semantic meaning — screen readers change their voice to convey importance and emphasis.

📎 Grouping Elements

Some semantic tags group content in meaningful ways — adding context that plain <div> containers can't provide.

<figure> + <figcaption>

Wraps self-contained media (image, diagram, code block) with its caption. The browser and screen readers know the caption belongs to that specific content.

<figure>
  <img src="chart.png" alt="Sales by quarter">
  <figcaption>Q1-Q4 sales data for 2025</figcaption>
</figure>

<blockquote> + <cite>

A quotation from another source, with proper attribution. Notice how <cite> wraps the work title, not the person's name — consistent with what we learned in Section 6.

<blockquote cite="https://example.com/book">
  <p>The web is for everyone.</p>
  <footer>— Tim Berners-Lee, <cite>Weaving the Web</cite></footer>
</blockquote>

<details> + <summary>

An interactive disclosure widget. The user clicks the summary to expand/collapse content — no JavaScript needed. Perfect for FAQs, extra info, and progressive disclosure.

Click me — I'm a <details> element!

This content was hidden until you clicked. All done with pure HTML — no JavaScript. The browser handles the open/close interaction natively.

<dl> + <dt> + <dd>

Description list — a list of term/description pairs. Perfect for glossaries, metadata, key-value data. Much more meaningful than a regular list for this pattern.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

♿ Accessibility: Free for Semantic HTML

When you use semantic HTML, screen readers automatically map your tags to ARIA landmark roles. This means blind users can jump directly to the navigation, main content, or footer — just like sighted users scan a page visually.

Semantic Tags → ARIA Landmarks

<header> banner "Banner landmark"

<nav> navigation "Navigation landmark"

<main> main "Main landmark"

<aside> complementary "Complementary landmark"

<footer> contentinfo "Content info landmark"

<div> (none) (silence — invisible to screen readers)

💡

Key insight: Semantic HTML gives you accessibility for free. Using <div> for everything means you'd have to manually add role="navigation", role="main", etc. — and most developers forget. Use the right tag, and the browser does the work for you.

🔇 Screen Reader with Div Soup

🔊 Screen Reader with Semantic HTML

"Banner landmark. Navigation: Home, About. Main landmark: heading level 2 Welcome. Paragraph: Hello world. Content info landmark: © 2026."
(User can jump directly to any landmark!)

🔍 SEO: Helping Search Engines Understand You

Search engines like Google use your HTML structure to understand your content. Semantic HTML tells them: "Here's the main content, here are the navigation links, here's a blog article." This directly affects how (and whether) your page appears in search results.

📰 Better Indexing

Google prioritizes <main> content over <header> and <footer>. It knows what's core and what's boilerplate.

⭐ Rich Results

Semantic tags like <article>, <time>, and proper headings enable rich snippets, featured answers, and news carousels.

📊 Document Outline

A clean h1 → h2 → h3 hierarchy tells Google your content structure. This helps it generate sitelinks and table-of-contents snippets.

🏆 Competitive Edge

Most sites still use div soup. Using semantic HTML correctly gives you an advantage in rankings, accessibility compliance, and code quality.

📝

Remember: SEO is not about tricks — it's about communicating clearly with machines. Semantic HTML is the most fundamental way to do that. If a search engine can understand your page structure, it can represent your content better in search results.

✏️ Practice: Semantic Refactoring

Look at each piece of HTML below. Identify the semantic problems, then reveal the correct version.

Exercise 1: Fix the Structure

This page uses only divs. Rewrite it mentally with semantic tags, then reveal the answer.

<div class="header">
  <div class="title">My Portfolio</div>
  <div class="links">
    <div>Home</div>
    <div>Projects</div>
    <div>Contact</div>
  </div>
</div>
<div class="content">
  <div class="project">
    <div class="project-title">Weather App</div>
    <div class="desc">A simple weather app</div>
  </div>
</div>
<div class="bottom">© 2026</div>

<header>
  <h1>My Portfolio</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/projects">Projects</a>
    <a href="/contact">Contact</a>
  </nav>
</header>
<main>
  <article>
    <h2>Weather App</h2>
    <p>A simple weather app</p>
  </article>
</main>
<footer>© 2026</footer>

Exercise 2: Spot the Errors

This code uses semantic tags, but makes several mistakes. Find them all, then reveal the answer.

<main>
  <h3>Welcome to My Blog</h3>  <!-- ?? -->
  <main>  <!-- ?? -->
    <article>
      <h5>My First Post</h5>  <!-- ?? -->
      <b>Important!</b>  <!-- ?? -->
      <div>This is my content...</div>  <!-- ?? -->
    </article>
  </main>
</main>

Exercise 3: Choose the Right Tag

For each description, which semantic tag should you use?

1. A sidebar with related links and author bio.

→ <aside>

2. A product card in an e-commerce grid.

→ <article> (self-contained, could be syndicated)

3. A "Features" section with three feature cards.

→ <section> (thematic grouping with a heading)

4. A breadcrumb trail at the top of the page.

→ <nav> (it's a navigation aid)

5. An image with a caption explaining it.

→ <figure> + <figcaption>

📋 Module Summary

🏗️

Meaning over Appearance

Choose tags that describe what content IS, not how it looks. HTML = meaning, CSS = presentation.

🍜

No Div Soup

<div> is a last resort. Always ask: "Is there a semantic tag for this?" Use the Decision Tree.

🏛️

7 Structural Tags

header, nav, main, section, article, aside, footer — they define the anatomy of every page.

📰

Headings = Outline

One h1, never skip levels, use for hierarchy not size. Headings create a table of contents.

♿

Free Accessibility

Semantic tags = ARIA landmarks for free. Screen readers navigate by landmarks — divs are invisible.

⛔

No Styling Tags

<b>, <i>, <u>, <s>, <br>, <hr> are presentation — use CSS. Exception: <strong> and <em> carry semantic meaning.

Next Module →

Module 3: Forms & Interactive HTML

Build forms that work: input types, labels, validation, fieldsets. Collect data the right way with accessible, user-friendly forms.

→