10 Multimedia · 2026
Week 2 · Lesson 04

Semantic HTML — Writing HTML That Means Something

Week 2 · 75 minutes · Year 10 Industrial Technology — Multimedia

IND5-2IND5-5IND5-10

Learning intentions

  • I can explain the difference between 'div soup' and semantic HTML.
  • I can use header, nav, main, section, article, and footer correctly.
  • I can explain why semantic HTML matters for accessibility and search engines.

Success criteria

  • My page uses at least 5 semantic elements instead of plain divs.
  • I can name one real person who benefits from semantic HTML (someone using a screen reader).
  • I have converted my L03 hobby page to use semantic tags.

Do Now · 5 min

Compare these two snippets. Both produce the same visual result. Which one is easier to understand?

<div class="top">
  <div class="bar">
    <div class="item">Home</div>
  </div>
</div>
<div class="middle">
  <div class="post">...</div>
</div>
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>
<main>
  <article>...</article>
</main>

Discuss: which would be easier for a computer to understand? Which for a person reading code for the first time?

I Do · ~10 min Teacher demonstration

The semantic elements form the skeleton of a good webpage:

<body>
  <header>
    <h1>My Portfolio</h1>
    <nav>
      <a href="/">Home</a>
      <a href="about.html">About</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Latest projects</h2>
      <article>
        <h3>Project One</h3>
        <p>Description...</p>
      </article>
    </section>

    <aside>
      <p>Quick facts about me</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2026 My Name</p>
  </footer>
</body>
When to use each:
  • <header> — introduces the page (logo, site title, main nav)
  • <nav> — a block of navigation links
  • <main> — the unique main content of this page (one per page)
  • <section> — a thematic grouping of related content
  • <article> — a self-contained piece (blog post, card, product)
  • <aside> — related but secondary content
  • <footer> — credits, copyright, secondary nav
Why this matters: a person using a screen reader can press a single key to jump to <main>, skip the nav. If your site is all divs, they can't. Semantic HTML is accessibility. It is also how Google works out what your page is about.

We Do · ~15 min Guided build

Together, take this div-heavy sample and rewrite it as semantic HTML:

<div class="top">
  <div class="logo">Bakery Co</div>
  <div class="menu">
    <div class="item">Home</div>
    <div class="item">Cakes</div>
  </div>
</div>
<div class="content">
  <div class="post">
    <div class="title">Our chocolate cake</div>
    <div class="body">Made fresh daily...</div>
  </div>
</div>
<div class="bottom">Contact: 0400 000 000</div>

Class answer: header/nav, main/article, footer.

You Do · ~35 min Independent practice

Open your about-my-hobby.html from L03. Refactor it to use semantic HTML. Requirements:

  1. Wrap the intro and navigation (if any) in <header>
  2. Wrap the main content in <main>
  3. Use at least two <section> elements to group related content
  4. If you talk about specific items (books, games, projects), wrap each in <article>
  5. Add a <footer> with your name and the year

Save as about-my-hobby-v2.html so your L03 version stays as evidence of your progress.

Differentiation

Support

Side-by-side comparison template provided: left column is the old divs, right column has labelled blanks for semantic tags.

Core

Complete refactor independently.

Extension

Research on MDN the difference between <section> and <article>. Write a short note in a code comment explaining when to use each. Also add <aside> for a 'fun fact' about your hobby.

Exit Ticket · 5 min

Exit ticket

1. Name 4 semantic HTML elements and when to use each:

a) _____________ — use when _____________________

b) _____________ — use when _____________________

c) _____________ — use when _____________________

d) _____________ — use when _____________________

2. Name one group of people who benefit from semantic HTML:

____________________________________________________

Resources for this lesson

📚 Deeper Reading

External references drawn from Shay Howe's "Learn to Code HTML & CSS" and University of Michigan's "Web Design for Everybody" Coursera specialization. All credit to original authors.