Skip to main content

Practical Exercise 5: Implementing Images in HTML

In this practical exercise, you'll learn to insert and configure images in HTML, using the <img> tag and essential attributes like src, alt, width, and height to improve accessibility and visual presentation.

Activity​

Create an HTML document that includes an image using the <img> tag and its alt, width, and height attributes. The image can be from an external source to your website.

Interactive Solution​

DivZone ad link Logo
AI PlatformTurn Code into Customers.Try it free

Solution with Complete HTML Code​

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Images</title>
  </head>
  <body>
    <h1>Image</h1>
    <img
      src="https://docs.div.zone/img/divzone-social-card.jpg"
      alt="Description of the image"
      width="360"
      height="200"
    />
  </body>
</html>

🧪 Exercise Variants​

Variant 1: Image with <figure> and <figcaption>​

For images with context or captions, HTML5 introduced the semantic tags <figure> and <figcaption>.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image with Figure</title>
  </head>
  <body>
    <h1>Example Gallery</h1>

    <figure>
      <img
        src="https://docs.div.zone/img/divzone-social-card.jpg"
        alt="DivZone Docs social card showing logo and branding"
        width="360"
        height="200"
      />
      <figcaption>Fig. 1 - DivZone Docs showcase card</figcaption>
    </figure>

    <figure>
      <img
        src="https://docs.div.zone/img/divzone-social-card.jpg"
        alt="Second view of the DivZone social card"
        width="300"
        height="167"
      />
      <figcaption>Fig. 2 - Reduced version of the same image</figcaption>
    </figure>
  </body>
</html>

<figure> groups the image with its description, and <figcaption> provides the caption text. This improves semantics and accessibility.

Variant 2: Performance Optimization with loading="lazy"​

For pages with many images, the loading="lazy" attribute delays loading of off-screen images, speeding up the initial page load.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Lazy Images</title>
  </head>
  <body>
    <h1>Page with Many Images</h1>

    <!-- The first image loads normally (it's visible) -->
    <img
      src="https://docs.div.zone/img/divzone-social-card.jpg"
      alt="Image visible on load"
      width="360"
      height="200"
    />

    <!-- Images with lazy loading: only load on scroll -->
    <img
      src="https://docs.div.zone/img/divzone-social-card.jpg"
      alt="Image that loads on scroll"
      width="360"
      height="200"
      loading="lazy"
    />
    <img
      src="https://docs.div.zone/img/divzone-social-card.jpg"
      alt="Another deferred image"
      width="360"
      height="200"
      loading="lazy"
      decoding="async"
    />
  </body>
</html>
  • loading="lazy": loads the image only when it's about to enter the viewport.
  • decoding="async": allows the image to be decoded in the background without blocking page rendering.

Variant 3: Responsive Images with srcset and sizes​

To make images look good on any device without downloading huge files on mobile, use srcset and sizes.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Responsive Images</title>
  </head>
  <body>
    <h1>Adaptive Image</h1>

    <!-- The image changes based on screen width -->
    <img
      src="https://docs.div.zone/img/divzone-social-card.jpg"
      srcset="
        https://docs.div.zone/img/divzone-social-card.jpg   360w,
        https://docs.div.zone/img/divzone-social-card.jpg   720w,
        https://docs.div.zone/img/divzone-social-card.jpg  1200w
      "
      sizes="
        (max-width: 600px) 100vw,
        (max-width: 900px) 50vw,
        33vw
      "
      alt="Responsive image that adapts to screen size"
      width="360"
      height="200"
    />
  </body>
</html>
  • srcset: list of images with their actual widths (360w, 720w, 1200w).
  • sizes: tells the browser how much space the image will occupy at different breakpoints.
  • The browser automatically selects the best resolution based on the device and pixel density.

Variant 4: Broken Image — The Power of alt​

The alt attribute isn't just for SEO: it's what's displayed when the image fails to load.

HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Broken Image</title>
  </head>
  <body>
    <h1>What Happens When an Image Doesn't Load</h1>

    <!-- Image that loads correctly -->
    <figure>
      <img
        src="https://docs.div.zone/img/divzone-social-card.jpg"
        alt="DivZone Docs logo on a dark background with white text"
        width="360"
        height="200"
      />
      <figcaption>✓ Image loaded successfully</figcaption>
    </figure>

    <!-- Image with incorrect path: shows the alternative text -->
    <figure>
      <img
        src="https://non-existent-site.com/broken-image.jpg"
        alt="DivZone Docs logo on a dark background with white text"
        width="360"
        height="200"
      />
      <figcaption>✗ Broken image — notice the alternative text is displayed</figcaption>
    </figure>
  </body>
</html>

Good alt text describes the image clearly and concisely, allowing screen reader users to understand what it contains.

🎯 Mini-Challenge: Put It to the Test​

Create an HTML page containing:

  • An <h1> with the title "My Gallery"
  • Two images inside <figure> tags with their respective <figcaption>
  • Add loading="lazy" to the second image
  • A third image intentionally with an incorrect URL to see how alt behaves
  • All images must have descriptive alt, width, and height

Write the code from scratch. If you get stuck, go back to variants 1 and 4.

Common Mistakes with HTML Images​

MistakeWhy It's a Problem
Forgetting the alt attributeScreen readers can't describe the image and SEO loses context. It's mandatory per WCAG accessibility guidelines
Not defining width and heightThe page "jumps" when images finish loading (layout shift). Defining dimensions reserves space beforehand
Using huge unoptimized imagesA 4000px photo in a 400px space makes the page weigh unnecessary megabytes. Resize and compress before uploading
Incorrect paths in srcIf the URL is invalid or the relative path is misspelled, the image won't display. Always verify paths
Putting long text in altalt should be descriptive but concise (recommended max 125 characters). It's not an extended figcaption

Frequently Asked Questions​

Is the alt attribute mandatory?​

Yes, the HTML5 specification and WCAG accessibility guidelines require the alt attribute on all <img> images. If the image is purely decorative, you can use alt="" (empty) so screen readers ignore it. But if the image contributes content, it must always have a meaningful description.

How do I prevent an image from distorting when resizing?​

Define width and height with the actual image values, and use CSS max-width: 100% and height: auto to scale proportionally. If you only change one of the two attributes without maintaining the aspect ratio, the image stretches or squashes. The CSS properties object-fit: cover or object-fit: contain also help control how the image fits its container.

🚀 Practice with DivZone AI

Do you know how to insert images? Create an image gallery with DivZone AI and analyze how the src, alt, width, and height attributes are used in an automatically generated project. Seeing real code is the best way to learn!