Lecture 5: HTML Lists & Images

BMC201 - Web Technology

Mr. Prashant Kumar Nag

2026-02-02

Lecture 5

HTML Lists & Images

Week 2 | Unit I: HTML Forms & CSS Introduction
BMC201 - Web Technology
Mr. Prashant Kumar Nag, Assistant Professor

Learning Objectives

  • Understand ordered, unordered, and definition lists
  • Learn when to use each list type
  • Insert and optimize images in web pages
  • Implement responsive image techniques

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

Questions?

Next: Lecture 6 - HTML Hyperlinks & Tables