Lecture 5: HTML Lists, Images & Hyperlinks

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-02

Lecture 5

HTML Lists, Images & Hyperlinks

Week 2 | Unit I: Web Page Designing
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Outcomes

After this lecture, students will be able to:

  • explain ordered, unordered, and description lists
  • choose appropriate list type for specific content
  • insert and optimize images in web pages
  • apply responsive image techniques

Prerequisites

  • Basic HTML tags and structure
  • Understanding of grouping elements and attributes
  • Familiarity with browser preview and DevTools basics

Syllabus Mapping

Syllabus mapping:

  • HTML lists (ordered, unordered, description)
  • image elements and attributes
  • semantic figure and figcaption usage

Prerequisites used:

  • HTML semantic structure from Lectures 3-4
  • understanding of attributes

Agenda

  • Types of HTML lists
  • List syntax and use cases
  • Image tags and attributes
  • Paths, responsive images, and best practices
  • Summary and exam preparation

Introduction and Motivation

  • Lists and images are the two most frequent content patterns on real websites everywhere.
  • Navigation menus, recipe steps, feature lists, photo galleries - all built with HTML lists and images.
  • Incorrect image handling causes broken layouts, slow pages, and accessibility failures.
  • Semantic list markup improves screen reader support and search engine indexing significantly.
  • This lecture gives you the tools to add rich, organized, visual content to any web page.

Think About It - Interactive Questions

Before we dive into details, think about these:

  • Look at any cooking recipe website - which HTML list type would you use for ingredients vs steps?
  • What happens to a page when an image file is missing or the path is wrong?
  • Why would you use <figure> and <figcaption> instead of just <img> alone?
  • How does a screen reader know what an image is about if a user cannot see it?

HTML List Types at a Glance

flowchart LR
  Lists["HTML Lists"]
  UL["ul - Unordered\nBullet Points"]
  OL["ol - Ordered\nNumbered Steps"]
  DL["dl - Description\nTerm + Definition"]
  Lists --> UL
  Lists --> OL
  Lists --> DL
  UL --> EX1["Shopping list\nNavigation menu"]
  OL --> EX2["Recipe steps\nRanking"]
  DL --> EX3["Glossary\nFAQ pairs"]

HTML List Types

Unordered List

  • Use <ul>
  • Bullet points
  • No order

Ordered List

  • Use <ol>
  • Numbered
  • Sequence matters

Description List

  • Use <dl>
  • Term + definition
  • Pairs of items

Unordered Lists <ul>

Best for items with no specific order:

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
</ul>

Renders as: - First item - Second item - Third item - Fourth item

Each <li> is one bullet point

Ordered Lists <ol>

Use when sequence or ranking matters:

<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
    <li>Fourth step</li>
</ol>

Renders as: 1. First step 2. Second step 3. Third step 4. Fourth step

Automatically numbered by browser

Nested Lists

You can put lists inside other lists:

<ul>
    <li>Frontend Skills
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>Backend Skills</li>
</ul>

Indentation shows hierarchy

Definition/Description Lists

Perfect for term-definition pairs:

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language - structure</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets - styling</dd>
</dl>
  • <dt> = term
  • <dd> = definition (indented)

Images in HTML

The <img> tag embeds images in web pages:

<img src="logo.png" alt="Company Logo" width="200" height="150">

Key attributes: - src: Path to image file - alt: Alternative text (for accessibility) - width, height: Size in pixels - title: Tooltip on hover

Image File Formats

PNG - Lossless, supports transparency, good for graphics

JPEG - Lossy, smaller file size, best for photos

GIF - Animated, limited colors, mostly for simple images

WebP - Modern format, smaller files, better quality

SVG - Vector format, scales infinitely, perfect for logos

Image File Paths

Relative paths (recommended):

<img src="images/photo.jpg" alt="Description">
<img src="../images/logo.png" alt="Logo">
<img src="./images/icon.png" alt="Icon">

Absolute paths (not recommended):

<img src="https://example.com/images/photo.jpg" alt="Photo">
<img src="C:/Users/Name/Pictures/photo.jpg" alt="Photo">

Use relative paths - they work when you move files!

Responsive Images

Make images adapt to screen size:

<img src="photo.jpg" alt="Description" 
     style="max-width: 100%; height: auto;">

Or using attributes:

<img src="photo.jpg" alt="Description"
     width="100%" height="auto">

Image shrinks on mobile, stays fixed on desktop

Best Practices for Images

  1. Always use alt text - Helps accessibility & SEO
  2. Optimize file size - Use compression tools
  3. Choose right format - JPEG for photos, PNG for graphics
  4. Use relative paths - Makes sites portable
  5. Provide dimensions - Prevents layout shift
  6. Responsive design - Use width: 100% where appropriate
  7. Keep organized - Store in images/ folder

Complete Image Example

<figure>
    <img src="images/portrait.jpg" 
         alt="Portrait of John Doe"
         width="300" 
         height="400"
         style="max-width: 100%; height: auto;">
    <figcaption>John Doe - 2026</figcaption>
</figure>
  • <figure>: Container for image + caption
  • <figcaption>: Image description
  • Responsive sizing with max-width

Resources & References

Structured Debug Checklist for Lists & Images

Investigation order when images don’t display:

  1. verify image file path is correct
  2. check file extension matches (jpg, png, webp)
  3. test absolute vs relative paths
  4. inspect alt text attribute presence
  5. check file permissions and accessibility
  6. validate image format using browser DevTools
  7. test image in new browser tab directly

For lists not displaying correctly:

  • check list type (ul, ol, dl) matches intent
  • verify all items wrapped in li tags
  • inspect CSS list-style-type properties

Memory Booster: Real World Connections

HTML list types match their real-world counterparts:

  • <ul> = Shopping bag - items tossed in, no particular order (groceries, features, links)
  • <ol> = Step-by-step manual - sequence matters, skipping a step causes errors (recipes, instructions)
  • <dl> = Dictionary entry - term followed by its definition (glossaries, FAQs, metadata)
  • <img> = Picture frame - the frame (tag) holds the picture (src) and the caption (alt) explains it
  • alt text = Audio description for people who cannot see the image

Choose the list that matches the real-world meaning of your content!

Live Demo: Lists & Images in Action

Interactive demonstration showing HTML lists, images, and figure elements:

?? Open Interactive Demo: HTML Lists & Images

What you’ll see:

  • All three list types rendered side by side
  • Nested list example with visual indentation
  • Image tags with correct and missing alt text
  • Figure/figcaption semantic usage
  • Responsive image sizing demonstration

?? Key insight: Always write alt text as if you were describing the image to someone on the phone!

Summary

After this lecture, you should understand:

  • Three list types and their semantic meaning
  • Image element attributes and accessibility
  • Responsive image techniques
  • Figure/figcaption semantic grouping
  • List styling preparation for CSS

Exam Preparation Questions: Short

  • What is an unordered list?
  • What is an ordered list?
  • What is a description list?
  • Which tag is used for list items?
  • Why is alt text required for images?
  • What is the purpose of <figure>?
  • What is the purpose of <figcaption>?
  • What does responsive image sizing mean?

Exam Preparation Questions: Long

  • Differentiate <ul>, <ol>, and <dl> with examples.
  • Explain image element attributes and accessibility requirements.
  • Explain figure and figcaption with suitable use case.
  • Explain responsive image strategies for modern websites.
  • Design a sample HTML page using multiple list types and images.

Practice Task

  • create one page with <ul>, <ol>, and <dl>
  • insert at least two images with meaningful alt text
  • use <figure> and <figcaption> for one image
  • test image responsiveness on different viewport widths
  • validate HTML in browser and DevTools

Checklist

Can you:

  • choose correct list type for content?
  • use image tags with proper attributes?
  • explain accessibility importance of alt text?
  • answer short and long exam questions?

Next Lecture

  • Topic: HTML Hyperlinks and Tables
  • Preparation required: revise list/image structure and path handling

HTML Lists, Images & Hyperlinks

Next: Lecture 6 - HTML Hyperlinks & Tables