HTML Media

Web pages aren't just text — images, audio, and video make content richer. <img>, <audio>, and <video> are the three core HTML5 tags for embedding multimedia resources.

The Image Tag

<img> is an empty tag — use src to specify the image path and alt to provide alternative text:

HTML

<img src="photo.jpg" alt="Scenic landscape photo" width="400" height="300">
<img src="logo.png" alt="Company Logo" title="Click to return home">

▶ Try It Yourself

📌 The alt Attribute: Displayed when the image fails to load; read aloud by screen readers to assist visually impaired users; helps search engines understand image content. Never omit it.

The Audio Tag

The <audio> tag embeds music, podcasts, and sound effects. Adding the controls attribute displays playback controls:

HTML

<audio src="music.mp3" controls>
  Your browser does not support audio playback.
</audio>

<!-- Multi-format compatibility -->
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support audio playback.
</audio>

▶ Try It Yourself

The Video Tag

The <video> tag embeds video, also supporting controls and width/height dimensions:

HTML

<video src="video.mp4" controls width="400">
  Your browser does not support video playback.
</video>

<!-- Multi-format + poster image -->
<video controls width="400" poster="cover.jpg">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support video playback.
</video>

▶ Try It Yourself

💡 Media Format Tips: MP3 and MP4 offer the best compatibility — nearly all browsers support them. WebM is Google's open format with smaller file sizes. Using <source> with multiple formats lets the browser automatically pick the one it supports.

📖 Summary

<img> embeds images; src specifies the path; alt provides alternative text
<audio> embeds audio; controls displays playback controls
<video> embeds video; supports width/height and poster cover image
Use <source> to provide multiple media formats for browser compatibility

📝 Exercises

Image practice: Insert an image with alt and title attributes, then change src to an invalid path and observe how the browser handles it.
Media player embedding: Use <audio> and <video> to embed an audio file and a video file (you can use publicly available online resources).

← Previous: HTML Links Next: HTML Character Entities →