HTML Images and Multimedia

Introduction

Modern websites are more than text and links. Images, audio and video can make
websites more informative, engaging and useful.

“HTML” provides several elements that allow developers to add multimedia content
to webpages. The most common are:

• <img> for images
• <audio> for audio
• <video> for video
• <figure> and <figcaption> for meaningful media and captions

In this lesson, you will learn how to use these elements correctly and how to
make multimedia content accessible and user-friendly.

1. Adding an Image to a Webpage

The HTML element used to display an image is the <img> element.

A basic image looks like this:

<img src="photo.jpg" alt="A student using a computer">

The src attribute tells the browser where the image is located.
The alt attribute provides alternative text describing the image.

2. Understanding the img Element

The <img> element is a void element. This means it does not
need a closing tag.

Correct:

<img src="student.jpg" alt="Student learning web development">

You do not write:

<img src="student.jpg" alt="Student learning web development"></img>

The second form is unnecessary and should not be used.

3. The src Attribute

The src attribute means source. It tells the browser where to find
the image file.

Example:

<img src="images/logo.png" alt="Dwallnet Technologies logo">

In this example, the browser looks inside an images folder for a
file called logo.png.

4. Using a Relative Image Path

When an image is stored inside your project, you can use a relative path.

Example project:

website/
│
├── index.html
│
└── images/
    └── student.jpg

The image can be displayed using:

<img src="images/student.jpg"
     alt="Student learning web development">

5. Using an Image in the Same Folder

If the image is stored in the same folder as the HTML file, you can reference it
directly.

<img src="logo.png" alt="Company logo">

6. Moving Up a Folder

The ../ notation can be used to move up one directory.

Suppose your structure is:

website/
│
├── images/
│   └── logo.png
│
└── pages/
    └── about.html

From about.html, you can access the image using:

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

7. The Importance of the alt Attribute

The alt attribute provides alternative text for an image.

Example:

<img src="student.jpg"
     alt="A student practicing HTML coding">

Alternative text is important because it can be used by screen readers and is
also displayed when an image cannot be loaded.

Good alternative text should describe the important meaning or purpose of the
image.

8. Good and Bad Alt Text

Weak example:

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

The word “image” provides very little useful information.

Better:

<img src="student.jpg"
     alt="Student writing HTML code on a laptop">

The second example gives meaningful information.

9. Decorative Images

Some images are purely decorative and do not provide meaningful information.
For such images, an empty alt attribute can be appropriate.

<img src="decorative-line.png" alt="">

An empty alt attribute tells assistive technologies that the image does not need
to be announced as meaningful content.

10. Setting Image Width and Height

The width and height attributes can specify an image’s
display dimensions.

<img src="student.jpg"
     alt="Student learning"
     width="600"
     height="400">

The values are normally specified in pixels when using HTML attributes.

11. Why Image Dimensions Matter

Providing image dimensions can help the browser reserve the correct amount of
space while the page loads.

However, modern responsive websites commonly use CSS to control image sizing
rather than relying only on fixed HTML dimensions.

12. Responsive Images

A responsive image should adapt to the available screen width.

A common CSS approach is:

img {
    max-width: 100%;
    height: auto;
}

This allows an image to shrink when necessary while maintaining its aspect ratio.

13. Combining HTML and CSS

“HTML” provides the image while CSS controls its appearance.

HTML:

<img src="student.jpg"
     alt="Student learning web development"
     class="student-image">

CSS:

.student-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

14. Image Titles

The title attribute can provide additional information when a user
hovers over an element.

<img src="course.jpg"
     alt="Web development course"
     title="Web Development Training">

The title attribute should not be used as a replacement for
alt.

15. Using Figure and Figcaption

The <figure> element is useful when an image or other media
forms a self-contained piece of content.

The <figcaption> element provides a visible caption.

<figure>

    <img src="classroom.jpg"
         alt="Students attending a technology class">

    <figcaption>
        Students participating in a web development class.
    </figcaption>

</figure>

16. Why Use Figure?

Using <figure> gives semantic meaning to the relationship
between the media and its caption.

It is especially useful for:

• Photographs
• Charts
• Diagrams
• Illustrations
• Code examples
• Other self-contained media

17. Creating a Clickable Image

An image can be placed inside an anchor element to make the image clickable.

<a href="courses.html">

    <img src="courses.jpg"
         alt="Explore Dwallnet courses">

</a>

When the user clicks the image, the browser navigates to
courses.html.

18. Linking an Image to an External Website

You can also make an image link to another website.

<a href="https://www.dwallnet.com"
   target="_blank"
   rel="noopener">

    <img src="logo.png"
         alt="Visit Dwallnet Technologies">

</a>

19. Common Image File Formats

Different image formats are suitable for different purposes.

• JPEG/JPG — commonly used for photographs.
• PNG — useful when transparency or lossless quality is important.
• GIF — supports simple animation and limited colors.
• SVG — useful for scalable vector graphics such as logos and icons.
• WebP — a modern format that can provide efficient image compression.

20. Adding Audio to a Webpage

“HTML” provides the <audio> element for playing audio.

<audio controls>
    <source src="lesson.mp3" type="audio/mpeg">
</audio>

The controls attribute displays browser controls such as play,
pause and volume.

21. Using Multiple Audio Formats

Different browsers and environments may support different media formats.
You can provide multiple sources.

<audio controls>

    <source src="lesson.mp3" type="audio/mpeg">

    <source src="lesson.ogg" type="audio/ogg">

    Your browser does not support the audio element.

</audio>

The browser can choose a supported source.

22. Important Audio Attributes

The audio element supports several useful attributes.

• controls — displays playback controls.
• autoplay — requests automatic playback.
• loop — repeats the audio.
• muted — starts the audio muted.
• preload — provides a hint about how the browser should load the audio.

Example:

<audio controls loop>
    <source src="lesson.mp3" type="audio/mpeg">
</audio>

23. Adding Video to a Webpage

The <video> element allows you to display video directly on a
webpage.

<video controls width="640">

    <source src="training.mp4" type="video/mp4">

    Your browser does not support the video element.

</video>

24. The controls Attribute

The controls attribute allows the browser to display playback
controls.

<video controls>
    <source src="training.mp4" type="video/mp4">
</video>

Without controls, users may not have an obvious way to play or pause the video.

25. Video Width and Height

You can specify the dimensions of a video.

<video controls width="800" height="450">

    <source src="training.mp4" type="video/mp4">

</video>

CSS is often preferred for responsive sizing.

26. Responsive Video

A responsive video should adapt to smaller screens.

video {
    max-width: 100%;
    height: auto;
}

This helps prevent the video from overflowing its container on mobile devices.

27. Useful Video Attributes

Common video attributes include:

• controls — displays playback controls.
• autoplay — requests automatic playback.
• muted — starts the video without sound.
• loop — repeats the video.
• poster — displays an image before the video starts.
• preload — provides loading instructions to the browser.

Example:

<video controls
       poster="course-thumbnail.jpg"
       width="800">

    <source src="web-development.mp4"
            type="video/mp4">

    Your browser does not support the video element.

</video>

28. Video Poster Images

The poster attribute specifies an image that can be displayed before
the video starts playing.

<video controls
       poster="thumbnail.jpg">

    <source src="lesson.mp4"
            type="video/mp4">

</video>

This can make a video section more visually attractive and informative.

29. Embedding YouTube Videos

Videos hosted on platforms such as YouTube can be embedded into webpages using
an <iframe>.

Example structure:

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="Web Development Training Video"
    allowfullscreen>
</iframe>

Replace VIDEO_ID with the appropriate video identifier.

30. Why Use iframe for External Videos?

An iframe allows external content to be displayed inside your webpage.
It is commonly used for:

• YouTube videos
• Maps
• Embedded documents
• Other trusted external resources

31. Accessible Multimedia

Accessibility should be considered whenever multimedia is added to a webpage.

For images, provide meaningful alternative text where appropriate.

<img src="teacher.jpg"
     alt="Instructor teaching a web development class">

For video and audio, captions or transcripts can help users who cannot hear the
content or who prefer reading.

32. Image Performance

Large images can slow down a webpage.
Developers should optimize images before uploading them whenever possible.

Important considerations include:

• Image dimensions
• File size
• Image format
• Compression
• Responsive delivery

A high-quality image does not always need to be an extremely large file.

33. Lazy Loading Images

The loading="lazy" attribute can tell the browser that an image may
be loaded when it is close to entering the user’s viewport.

<img src="student.jpg"
     alt="Student learning web development"
     loading="lazy">

Lazy loading can help improve the initial loading performance of pages containing
many images.

34. A Complete Multimedia Example

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">

    <title>Dwallnet Multimedia Page</title>

    <style>

        img,
        video {
            max-width: 100%;
            height: auto;
        }

        figure {
            margin: 20px 0;
        }

    </style>

</head>

<body>

    <header>

        <h1>Dwallnet Technologies</h1>

    </header>

    <main>

        <h2>Web Development Training</h2>

        <figure>

            <img
                src="classroom.jpg"
                alt="Students attending a web development class"
                loading="lazy">

            <figcaption>
                Students during a practical web development session.
            </figcaption>

        </figure>

        <h2>Audio Lesson</h2>

        <audio controls>

            <source
                src="lesson.mp3"
                type="audio/mpeg">

            Your browser does not support audio playback.

        </audio>

        <h2>Video Lesson</h2>

        <video
            controls
            poster="lesson-thumbnail.jpg">

            <source
                src="lesson.mp4"
                type="video/mp4">

            Your browser does not support video playback.

        </video>

    </main>

</body>

</html>

35. Common Mistakes

Mistake 1: Incorrect Image Path

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

If the image is not actually inside the images folder, the browser
will not find it.

Mistake 2: Missing alt Text

<img src="student.jpg">

For meaningful images, provide appropriate alternative text.

Mistake 3: Incorrect File Extension

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

If the actual file is student.jpg, the image will not load.

Mistake 4: Oversized Media

Using extremely large image or video files can negatively affect page loading
performance.

Mistake 5: Forgetting Video Controls

<video>
    <source src="lesson.mp4" type="video/mp4">
</video>

Users may not have an obvious way to control playback. Add
controls when appropriate.

36. Practical Exercise

Create a webpage for a technology training center.
Your webpage should contain:

1. A page heading.
2. A training center image.
3. Meaningful alternative text for the image.
4. A figure caption.
5. An audio lesson.
6. A video lesson.
7. A link to the course page.
8. Responsive CSS for images and video.

37. Student Code Challenge

The following code contains several errors. Identify and correct them.

<figure>

    <img src="images/student.png"
         alt="image">

    <figcaption>
        Student learning web development
    </figure>

</figure>

<video width="800">

    <source src="lesson.mp3"
            type="video/mp4">

</video>

Your task:

• Check the image path and file format.
• Improve the alt text.
• Correct the figure structure.
• Correct the video source.
• Add the appropriate video controls.

38. Corrected Version

<figure>

    <img
        src="images/student.jpg"
        alt="Student learning web development">

    <figcaption>
        Student learning web development.
    </figcaption>

</figure>

<video
    controls
    width="800">

    <source
        src="lesson.mp4"
        type="video/mp4">

    Your browser does not support video playback.

</video>

Lesson Summary

Images and multimedia make webpages more useful and engaging. HTML provides
specialized elements for displaying images, audio and video.

The <img> element displays images. Its src
attribute identifies the image source, while alt provides useful
alternative text.

The <figure> and <figcaption> elements can
be used to organize meaningful media with captions.

The <audio> and <video> elements allow
developers to add media directly to webpages.

External video services can also be embedded using an <iframe>.

Good multimedia development should consider accessibility, performance,
responsiveness and user experience.

Key Principle

“HTML” provides the structure for multimedia, while CSS and other web technologies
can control its appearance, behavior and presentation.

Always make your multimedia meaningful, accessible, responsive and optimized for
the users who will experience your website.