HTML5 Images Practice Questions with Solutions

Images make websites more attractive, engaging, and easier to understand. HTML5 uses the <img> tag to display images on a webpage.

Every modern website uses images for:

Logos
Product photos
Blog featured images
Team members
Banners
Icons
Advertisements
Portfolio galleries

Besides displaying images, HTML5 also allows developers to improve SEO and accessibility by using attributes like alt and title. HTML5 Images practice questions with solutions help to understand the concepts.

In this chapter, you’ll learn how to add images correctly and follow best practices used by professional web developers.

Why Learn HTML Images?

HTML images are important because they help:

Improve website design
Increase user engagement
Explain concepts visually
Improve SEO with descriptive alt text
Support visually impaired users through screen readers
Build professional-looking websites

Basic Syntax

<img src="image.jpg" alt="Sample Image">

Important Attributes

src → Specifies the image file location.
alt → Describes the image if it cannot be displayed.
title → Shows a tooltip when the user hovers over the image.
width → Sets image width.
height → Sets image height.

1. Display an Image Using the `<img>` Tag

Problem Statement

Create a webpage that displays an image named nature.jpg.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Display Image</title>

</head>

<body>

    <h1>Beautiful Nature</h1>

    <img src="nature.jpg" alt="Beautiful Nature">

</body>

</html>

Expected Output

The browser displays:

Heading Beautiful Nature
The image nature.jpg

Explanation

The <img> element displays an image on the webpage.

The src attribute tells the browser where the image file is located.

Concepts Covered

<img> Tag
src Attribute
Image Display

2. Add Alternative Text Using the `alt` Attribute

Problem Statement

Display an image with meaningful alternative text.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Alternative Text</title>

</head>

<body>

    <img src="student.jpg" alt="Student studying on a laptop">

</body>

</html>

Expected Output

If the image loads successfully, the student image appears.

If the image is missing, the browser displays:

Student studying on a laptop

Explanation

The alt attribute provides a text description of the image.

Benefits:

Improves accessibility.
Helps screen readers describe images.
Improves image SEO.
Displays text if the image cannot load.

Concepts Covered

alt Attribute
Accessibility
Image SEO

3. Display an Image with Custom Width and Height

Problem Statement

Display an image named computer.jpg with:

Width = 300 pixels
Height = 200 pixels

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Image Size</title>

</head>

<body>

    <img
        src="computer.jpg"
        alt="Computer"
        width="300"
        height="200">

</body>

</html>

Expected Output

The browser displays the image resized to:

Width: 300 pixels
Height: 200 pixels

Explanation

The width and height attributes control the displayed size of an image.

Using fixed dimensions helps browsers reserve space before the image loads, improving page stability.

Concepts Covered

Image Width
Image Height
Image Scaling

4. Display an Image Tooltip Using the `title` Attribute

Problem Statement

Create a webpage that displays an image with a tooltip.

When the user hovers over the image, the tooltip should display:

Beautiful Mountain View

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Image Tooltip</title>

</head>

<body>

    <img
        src="mountain.jpg"
        alt="Mountain"
        title="Beautiful Mountain View">

</body>

</html>

Expected Output

The browser displays the image.

When the mouse pointer is placed over the image, a tooltip appears:

Beautiful Mountain View

Explanation

The title attribute provides additional information about an image.

Unlike alt, it appears only when users hover the mouse over the image.

Concepts Covered

title Attribute
Image Tooltip
User Experience

5. Display an Image Using a Relative Path

Problem Statement

Suppose your project structure is:

project/

│── index.html

│── images/

      │── logo.png

Display logo.png using a relative path.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Relative Path</title>

</head>

<body>

    <img
        src="images/logo.png"
        alt="Company Logo">

</body>

</html>

Expected Output

The browser displays logo.png located inside the images folder.

Explanation

A relative path points to files inside your project.

Advantages:

Easier to manage
Works without an internet connection
Recommended for local projects

Concepts Covered

Relative Image Path
Project Folder Structure

6. Display an Image from an External Website

Problem Statement

Display an image using its complete URL.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>External Image</title>

</head>

<body>

    <img
        src="https://via.placeholder.com/300x200"
        alt="Sample Image">

</body>

</html>

Expected Output

A placeholder image appears on the webpage.

Explanation

Images can also be loaded directly from external servers.

These are called absolute image paths.

Example:

https://example.com/image.jpg

Concepts Covered

External Images
Absolute URL
Image Hosting

7. Create a Clickable Image

Problem Statement

Create an image that opens another webpage when clicked.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Clickable Image</title>

</head>

<body>

    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">

        <img
            src="html-logo.png"
            alt="HTML Logo">

    </a>

</body>

</html>

Expected Output

The HTML logo appears.

Clicking the image opens the MDN HTML documentation.

Explanation

The image is placed inside the <a> element, making the entire image behave like a hyperlink.

This technique is commonly used for:

Website logos
Product banners
Promotional graphics
Portfolio thumbnails

Concepts Covered

Image Hyperlink
Anchor Tag
Clickable Images

8. Display Multiple Images on One Page

Problem Statement

Create a webpage displaying three images.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Multiple Images</title>

</head>

<body>

    <img src="nature.jpg" alt="Nature">

    <img src="computer.jpg" alt="Computer">

    <img src="student.jpg" alt="Student">

</body>

</html>

Expected Output

The browser displays:

Nature image
Computer image
Student image

Explanation

Multiple <img> elements can be added to the same webpage.

Browsers display each image in the order it appears in the HTML code.

Concepts Covered

Multiple Images
Image Display
HTML Layout

Mini Practice Challenge

Create a webpage that includes:

One company logo
One banner image
One clickable image
One external image
One image with tooltip
One image with custom width and height

Try completing it yourself before checking the solutions.

9. Create a Responsive Image

Problem Statement

Display an image that automatically adjusts its width according to the browser window.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Responsive Image</title>

</head>

<body>

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

</body>

</html>

Expected Output

The image automatically resizes based on the screen size.

Desktop → Large image
Tablet → Medium image
Mobile → Smaller image

Explanation

The CSS:

max-width:100%;

height:auto;

makes the image responsive.

This is the most common technique used in modern websites.

Concepts Covered

Responsive Images
Image Scaling
Mobile-Friendly Design

10. Display an Image Using the `<figure>` Element

Problem Statement

Display an image inside the <figure> element.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Figure Example</title>

</head>

<body>

    <figure>

        <img
            src="mountain.jpg"
            alt="Mountain">

    </figure>

</body>

</html>

Expected Output

The browser displays the image inside a semantic <figure> container.

Explanation

The <figure> element groups media content such as:

Images
Diagrams
Charts
Illustrations
Code snippets

It improves semantic structure and accessibility.

Concepts Covered

<figure>
Semantic HTML
Image Containers

11. Add an Image Caption Using `<figcaption>`

Problem Statement

Display an image with a caption underneath.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Image Caption</title>

</head>

<body>

    <figure>

        <img
            src="nature.jpg"
            alt="Nature">

        <figcaption>

            Beautiful Nature Landscape

        </figcaption>

    </figure>

</body>

</html>

Expected Output

[Nature Image]

Beautiful Nature Landscape

Explanation

<figcaption> provides a caption describing the image.

It is useful for:

Blog posts
Educational content
Photography websites
News articles

Concepts Covered

<figcaption>
Image Caption
HTML5 Semantic Elements

12. Display Images with Different Sizes

Problem Statement

Display the same image in three different sizes.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Image Sizes</title>

</head>

<body>

    <img
        src="logo.png"
        alt="Logo"
        width="100">

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

    <img
        src="logo.png"
        alt="Logo"
        width="300">

</body>

</html>

Expected Output

Three versions of the same image appear:

Small (100px)
Medium (200px)
Large (300px)

Explanation

The width attribute changes only the displayed size of the image.

The original image file remains unchanged.

Concepts Covered

Image Width
Image Resizing
HTML Images

13. Build a Simple Image Gallery

Problem Statement

Create a simple gallery displaying four images.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Image Gallery</title>

</head>

<body>

    <h1>My Gallery</h1>

    <img src="image1.jpg" alt="Image 1">

    <img src="image2.jpg" alt="Image 2">

    <br><br>

    <img src="image3.jpg" alt="Image 3">

    <img src="image4.jpg" alt="Image 4">

</body>

</html>

Expected Output

Image1    Image2

Image3    Image4

(Four images displayed in a simple gallery layout.)

Explanation

Multiple <img> elements can be combined to create a basic image gallery.

Later, CSS Grid and Flexbox can be used to create responsive galleries.

Concepts Covered

Image Gallery
Multiple Images
HTML Layout

Mini Practice Challenge

Create an image gallery that contains:

One logo
One banner
One profile picture
One product image
One caption below each image
All images responsive

This exercise combines everything you’ve learned about HTML5 images so far.

14. Build a Complete Portfolio Gallery

Problem Statement

Create a simple portfolio webpage displaying three project images.

Each image should include:

Project Image
Project Title
Image Caption

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Portfolio Gallery</title>

</head>

<body>

    <h1>My Portfolio</h1>

    <figure>

        <img
            src="project1.jpg"
            alt="Portfolio Website"
            width="300">

        <figcaption>

            Portfolio Website

        </figcaption>

    </figure>

    <figure>

        <img
            src="project2.jpg"
            alt="E-Commerce Website"
            width="300">

        <figcaption>

            E-Commerce Website

        </figcaption>

    </figure>

    <figure>

        <img
            src="project3.jpg"
            alt="Dashboard Design"
            width="300">

        <figcaption>

            Dashboard Design

        </figcaption>

    </figure>

</body>

</html>

Expected Output

My Portfolio

[Project Image]

Portfolio Website

[Project Image]

E-Commerce Website

[Project Image]

Dashboard Design

Explanation

Portfolio websites usually display projects using:

Images
Captions
Figure elements

This structure is clean, semantic, and SEO-friendly.

Concepts Covered

Portfolio Layout
<figure>
<figcaption>
Image Gallery

15. Create a Professional Webpage Using Images

Problem Statement

Build a webpage containing:

Company Logo
Banner Image
About Section
Clickable Image
Responsive Image
Figure & Figcaption
Footer Logo

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Professional Image Layout</title>

</head>

<body>

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

    <h1>ABC Technologies</h1>

    <img
        src="banner.jpg"
        alt="Company Banner"
        style="max-width:100%; height:auto;">

    <h2>About Us</h2>

    <p>

        ABC Technologies develops modern software solutions.

    </p>

    <figure>

        <a href="https://www.example.com">

            <img
                src="office.jpg"
                alt="Office"
                width="400">

        </a>

        <figcaption>

            Our Corporate Office

        </figcaption>

    </figure>

    <hr>

    <img
        src="footer-logo.png"
        alt="Footer Logo"
        width="120">

</body>

</html>

Expected Output

The webpage displays:

Company logo
Banner image
About section
Clickable office image
Caption below the image
Footer logo

Explanation

This exercise combines the most commonly used image techniques found on professional websites.

It demonstrates:

Logo
Banner
Responsive image
Clickable image
Figure
Figcaption
Footer image

Concepts Covered

Responsive Images
Clickable Images
Figure
Figcaption
Professional Layout

Chapter Summary

In this chapter, you learned how to display and manage images in HTML5 using the <img> element and related attributes. Images play an important role in improving website appearance, user engagement, accessibility, and SEO.

You practiced displaying images using local files and external URLs, resizing images, creating responsive images, making images clickable, and organizing images with semantic HTML elements like <figure> and <figcaption>.

Throughout this chapter, you covered:

<img> Tag
src Attribute
alt Attribute
title Attribute
width and height
Relative Image Paths
Absolute Image Paths
External Images
Responsive Images
Clickable Images
<figure>
<figcaption>
Image Galleries
Portfolio Layouts

These concepts are essential for creating modern, visually appealing, and SEO-friendly websites.

Key Takeaways

The <img> tag is used to display images in HTML.
The src attribute specifies the image location.
Always include meaningful alt text for accessibility and SEO.
The title attribute displays a tooltip when hovering over an image.
Use width and height to control image dimensions.
Responsive images improve the user experience on mobile devices.
Images can be wrapped inside an <a> tag to create clickable images.
<figure> groups images and other media.
<figcaption> provides captions for images.
Well-optimized images improve page speed and search engine rankings.

Frequently Asked Questions (FAQs)

1. What is the purpose of the `<img>` tag?

The <img> tag is used to display images on a webpage.

Example:

<img src="nature.jpg" alt="Beautiful Nature">

2. Why is the `alt` attribute important?

The alt attribute:

Describes the image if it cannot load.
Helps visually impaired users using screen readers.
Improves image SEO.
Provides context to search engines.

Example:

<img src="student.jpg" alt="Student studying on a laptop">

3. What is the difference between `alt` and `title`?

`alt`	`title`
Describes the image	Shows a tooltip on hover
Used by screen readers	Used mainly for user hints
Important for SEO	Not a replacement for `alt`

4. What is a responsive image?

A responsive image automatically adjusts to different screen sizes.

Example:

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

This ensures the image looks good on desktops, tablets, and mobile devices.

5. What is the purpose of `<figure>`?

The <figure> element groups media content such as:

Images
Charts
Diagrams
Illustrations
Code snippets

It provides better semantic structure.

6. Why do we use `<figcaption>`?

<figcaption> provides a caption or description for an image.

Example:

<figure>
    <img src="nature.jpg" alt="Nature">
    <figcaption>Beautiful Nature Landscape</figcaption>
</figure>

7. Can an image be used as a hyperlink?

Yes.

Place the <img> tag inside an <a> tag.

Example:

<a href="https://example.com">
    <img src="logo.png" alt="Company Logo">
</a>

Clicking the image opens the linked webpage.

8. How can images improve SEO?

Images improve SEO when you:

Use descriptive file names (e.g., html5-tutorial-banner.jpg)
Add meaningful alt text
Optimize image file size
Use responsive images
Provide captions when necessary

These practices help search engines understand and index your images.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar

Why Learn HTML Images?

Basic Syntax

Important Attributes

1. Display an Image Using the <img> Tag

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

2. Add Alternative Text Using the alt Attribute

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

3. Display an Image with Custom Width and Height

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

4. Display an Image Tooltip Using the title Attribute

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

5. Display an Image Using a Relative Path

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

6. Display an Image from an External Website

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

7. Create a Clickable Image

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

8. Display Multiple Images on One Page

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

Mini Practice Challenge

9. Create a Responsive Image

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

10. Display an Image Using the <figure> Element

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

11. Add an Image Caption Using <figcaption>

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

12. Display Images with Different Sizes

Problem Statement

HTML Solution

Expected Output

Explanation

Concepts Covered

13. Build a Simple Image Gallery

Problem Statement

HTML Solution

Expected Output

1. Display an Image Using the `<img>` Tag

2. Add Alternative Text Using the `alt` Attribute

4. Display an Image Tooltip Using the `title` Attribute

10. Display an Image Using the `<figure>` Element

11. Add an Image Caption Using `<figcaption>`

1. What is the purpose of the `<img>` tag?

2. Why is the `alt` attribute important?

3. What is the difference between `alt` and `title`?

5. What is the purpose of `<figure>`?

6. Why do we use `<figcaption>`?