Chapter 3: Images and Multimedia

A web page without visuals is rarely engaging. In this chapter, we will learn how to integrate images, audio, and video directly into your HTML documents. These elements are not "inserted" into the page in the way text is; rather, they are "embedded" by linking to external source files. This distinction is vital for maintaining fast loading times and manageable file structures.

1. Embedding Images

The <img> tag is used to embed images. Unlike many other tags, it is a "self-closing" tag—it does not have a separate closing tag. It requires two main attributes: src (the path to the image file) and alt (alternative text).

<img src="photo.jpg" alt="A description of the image" width="500">

The Importance of Alt Text: The alt attribute is not optional. It is essential for web accessibility, allowing screen readers to describe the image to visually impaired users. Additionally, if the image fails to load, the alt text will be displayed in its place.

2. Modern Video and Audio

Before HTML5, embedding media was a nightmare, often requiring third-party plugins like Flash. HTML5 introduced the <video> and <audio> tags, making media integration native and easy.

<video width="640" controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

The controls attribute is crucial; without it, the user will see a static image of the video but will have no way to play, pause, or adjust the volume.

3. Understanding File Paths

As with hyperlinks, using correct file paths is vital. If your images are in a folder named images and your HTML file is in the root directory, your source should look like src="images/myphoto.jpg". Always use lowercase filenames and avoid spaces to prevent issues when hosting your site on different operating systems.

4. Responsive Media

In modern web design, your media must adapt to the user's screen size. By setting the CSS property max-width: 100%; on your images, you ensure they never overflow their container, regardless of whether the user is on a desktop or a smartphone.

Common Beginner Mistakes

• Broken Image Links: Often caused by incorrect relative paths or case-sensitivity (e.g., calling photo.JPG when the file is named photo.jpg).
• Oversized Files: Uploading a 10MB photograph is a major mistake. Always optimize your images for the web to keep your site fast.
• Forgetting Controls: Omitting the controls attribute on audio or video tags renders the media unusable for most visitors.

Try It Yourself

1. Find an image online (or on your computer) and embed it into your page using the <img> tag.
2. Add a descriptive alt tag to the image.
3. Embed a short video clip using the <video> tag and ensure you include the controls attribute.

Making Images Accessible

Every <img> tag should include an alt attribute describing the image. This helps screen readers for visually impaired users, improves SEO, and displays as fallback text if the image fails to load.

<img src="dog.jpg" alt="A golden retriever playing in a park" width="400">

Embedding Video and Audio

HTML5 made embedding media straightforward, without relying on third-party plugins like Flash.

<video controls width="400">
  <source src="clip.mp4" type="video/mp4">
</video>

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