Overview

Visual and auditory content significantly enhance user experience on the web. This lesson focuses on how to embed images, audio, and video into your HTML documents. You'll learn the essential tags and attributes required to display graphics, play sound, and present video content, making your web pages more engaging and informative. Correctly integrating media is key to rich web design.

Key Points

• Images (<img>): The <img> tag is used to embed an image. It's a self-closing tag (does not have a separate closing tag).

• src Attribute: The src (source) attribute is mandatory for <img> and specifies the path to the image file.

• alt Attribute: The alt (alternative text) attribute provides a textual description of the image. It's crucial for accessibility (screen readers) and displayed if the image fails to load.

• width and height Attributes: These attributes can define the dimensions of an image. While useful, it's often better to control image sizing with CSS for responsive design.

• Audio (<audio>): The <audio> tag embeds sound content. Use the src attribute for the audio file and controls attribute to display browser's default playback controls.

• Video (<video>): Similar to audio, the <video> tag embeds video content. It also uses src and controls, and can include autoplay, loop, and poster (for a thumbnail image).

Quick Example

Embedding an image and a video with basic controls:

html
<img src="images/nature.jpg" alt="A beautiful landscape" width="500" height="300">

<p>Listen to a calming melody:</p>
<audio controls>
    <source src="audio/melody.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<p>Watch a short demo:</p>
<video controls width="640" height="360">
    <source src="video/demo.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Summary

This lesson demonstrated how to integrate diverse media types into your HTML documents. You now understand how to use the <img> tag with its src and alt attributes for images, and the <audio> and <video> tags with their src and controls attributes for embedding sound and moving pictures. Effectively using these elements makes your web pages dynamic and visually appealing.