Lecture 5 Demo

HTML Lists & Images

[Classroom Tip] This demo makes all three HTML list types visible, shows nested lists, demonstrates images with and without alt text, and illustrates the <figure>/<figcaption> pattern.

1) The Three HTML List Types

Unordered List (<ul>)

Order doesn't matter. Use for collections.

  • HTML
  • CSS
  • JavaScript
Change bullet style:
  • Apples
  • Bananas
  • Oranges

Ordered List (<ol>)

Sequence matters. Use for steps, instructions.

  1. Open browser
  2. Navigate to site
  3. View page source
Change number type:
  1. Step one
  2. Step two
  3. Step three

Description List (<dl>)

Term/definition pairs. Use for glossaries, FAQs.

HTML
Markup language for web structure
CSS
Style sheet language for visual design
DOM
Document Object Model — tree of elements

2) Nested Lists

Lists can be placed inside other lists using proper parent–child nesting.

Code: 
<ul>
  <li>Front-End
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Back-End
    <ul>
      <li>Node.js</li>
      <li>Databases</li>
    </ul>
  </li>
</ul>
Result:
  • Front-End
    • HTML
    • CSS
  • Back-End
    • Node.js
    • Databases

3) Images & Alt Text

The alt attribute describes the image for screen readers and when images fail to load.

Image with correct alt text

<img src="photo.jpg"
     alt="A landscape photo
          of mountains at sunset"
     width="300">
📷 [Browser renders image here]
Alt: "A landscape photo of mountains at sunset"

Image fails — alt text shown

<img src="broken-path.jpg"
     alt="A landscape photo
          of mountains at sunset">
🖼️
A landscape photo of mountains at sunset

Broken path — browser shows alt text instead.

⚠️ Decorative images: If an image is purely decorative (e.g., a background flourish), use alt="" (empty string). Screen readers will skip it.

4) <figure> & <figcaption>

Wrap images in <figure> to associate a caption semantically.

Code: 
<figure>
  <img
    src="chart.png"
    alt="Bar chart showing
         2026 web tech usage"
    width="300"
  />
  <figcaption>
    Figure 1: Web Technology
    Popularity in 2026
  </figcaption>
</figure>
📊
chart.png
Figure 1: Web Technology Popularity in 2026

5) Build Your Own List

Type an item and choose the list type to add it to the live list below.

Unordered List:
  • (empty)
Ordered List:
  1. (empty)