The web is highly visual and dynamic, requiring more than just text. HTML5 provides dedicated, semantic tags for embedding media content directly into the page.
1. Images (<img>)
The <img> tag is a void element used to embed an image into the document. It requires two essential attributes:
| Attribute | Purpose | Description |
src | Source | Specifies the path or URL to the image file (e.g., logo.png, https://example.com/pic.jpg). |
alt | Alternative Text | Provides a text description of the image. Crucial for accessibility and SEO. |
<img src="images/sunset.jpg" alt="A beautiful sunset over the mountains" width="500">
A. The Importance of alt Text
- Accessibility: Screen readers rely on
alttext to describe images to visually impaired users. - SEO: Search engines use
alttext to understand the content of the image. - Failure: If the image file fails to load (due to a bad path or network error), the
alttext is displayed in its place.
B. Display Size (width and height)
You can set the image’s display dimensions using the width and height attributes (measured in pixels by default). While you can use HTML for this, CSS is the preferred method for controlling styling and responsiveness.
2. Audio (<audio>)
The <audio> tag allows you to embed sound content directly into the web page without requiring browser plugins.
| Attribute | Purpose |
src | Specifies the path to the audio file (e.g., .mp3, .wav). |
controls | Mandatory to display the browser’s default play/pause and volume controls to the user. |
autoplay | Starts playing the audio as soon as the page loads (often blocked by modern browsers). |
loop | Repeats the audio file continuously. |
<audio controls loop>
<source src="audio/background_music.mp3" type="audio/mp3">
<source src="audio/background_music.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Cross-Browser Compatibility: It is best practice to include multiple
<source>tags with different audio formats. The browser will automatically load the first format it supports.
3. Video (<video>)
The <video> tag is similar to the <audio> tag and is used to embed video content.
| Attribute | Purpose |
src | Specifies the path to the video file (e.g., .mp4, .webm). |
controls | Mandatory to display the browser’s default playback controls. |
poster | Specifies an image that is displayed while the video is downloading or until the user hits play. |
preload | Hints to the browser whether to load the entire file, just metadata, or nothing at all before playback starts. |
<video controls poster="images/video_poster.jpg" width="640">
<source src="videos/my_tutorial.mp4" type="video/mp4">
<source src="videos/my_tutorial.webm" type="video/webm">
Your browser does not support the video element.
</video>
Note: For videos hosted on platforms like YouTube or Vimeo, it is often easier and better for performance to use their provided
<iframe>embed code rather than hosting the video file yourself.
4. Figures and Captions (<figure> and <figcaption>)
HTML5 introduced the <figure> element to semantically group media content (like an image, video, or block of code) with its <figcaption> (a descriptive caption).
<figure>
<img src="images/chart.png" alt="Bar chart showing sales trends.">
<figcaption>Figure 1: Quarterly Sales Performance.</figcaption>
</figure>
