10 Multimedia · 2026
Week 2 · Lesson 03

HTML Essentials — Lists, Links, Images

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

IND5-3IND5-4IND5-5

Learning intentions

  • I can create ordered (numbered) and unordered (bulleted) lists in HTML.
  • I can link to another webpage using the anchor tag.
  • I can embed an image with descriptive alt text.

Success criteria

  • My page has at least one ordered list and one unordered list.
  • My page has at least two clickable external links.
  • Every image I add has alt text that describes what it shows.

Do Now · 5 min

Open your favourite website. Count:

  1. How many lists you can see (any bulleted or numbered content)
  2. How many images
  3. How many links in the main navigation

Share your numbers with a partner. Surprised?

I Do · ~10 min Teacher demonstration

Teacher builds a "My Favourites" page live, using these tags:

<h2>My 3 favourite games</h2>
<ol>
  <li>Stardew Valley</li>
  <li>Minecraft</li>
  <li>Celeste</li>
</ol>

<h2>Things I need to pack for school</h2>
<ul>
  <li>Laptop</li>
  <li>Water bottle</li>
  <li>Textbook</li>
</ul>

<p>Check out <a href="https://www.stardewvalley.net/" target="_blank">Stardew Valley</a> to see why.</p>

<img src="stardew.jpg" alt="Screenshot of a farm in Stardew Valley">
Key rules:
  • <ol> when order matters (steps, rankings). <ul> when order doesn't.
  • <a href="..."> for links. Add target="_blank" to open in a new tab.
  • Every <img> needs an alt attribute. Screen readers rely on it. Describe what the image shows, don't start with "image of".

We Do · ~15 min Guided build

Together, we nest a list inside a list:

<h2>Subjects I'm studying this year</h2>
<ul>
  <li>English</li>
  <li>Maths</li>
  <li>Multimedia
    <ol>
      <li>Term 1: App Design</li>
      <li>Term 2: Web Design</li>
    </ol>
  </li>
</ul>

Note how the nested <ol> goes inside a <li>, not between li elements.

You Do · ~35 min Independent practice

Create a new file: about-my-hobby.html. Build a page about one of your hobbies. Requirements:

  1. A meaningful title in the head
  2. One <h1>
  3. Three lists total (mix of ol and ul)
  4. At least three images with good alt text (your own photos, or Unsplash)
  5. At least two external links to related websites
  6. At least one nested list
Careful with file paths: if your image is in the same folder, just use src="photo.jpg". If it's in a folder called images, use src="images/photo.jpg".

Differentiation

Support

Fill-in-the-blank HTML template provided. Student types only list items, link text, and image alt text into placeholders.

Core

Build the whole file as described.

Extension

Also include a description list using <dl><dt><dd> tags. Research on MDN what each one is for.

Exit Ticket · 5 min

Exit ticket

1. Which tag creates a bulleted list? a) ol   b) ul   c) li   d) dl

2. What does the alt attribute do? ____________________________________________

3. Write an anchor tag that links to google.com and opens in a new tab:

________________________________________________________________

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.