HTML Media Elements: Audio, Video, and Images

HTML Media Elements

HTML5 introduced native media elements that eliminated the need for browser plugins like Flash. Modern browsers support embedded audio, video, and responsive images natively.

Images

Basic image:

<img src="photo.jpg" alt="Description of the photo" width="800" height="600" loading="lazy">

Responsive images with <picture>:

<picture>
  <source media="(min-width: 1200px)" srcset="large.webp" type="image/webp">
  <source media="(min-width: 800px)" srcset="medium.webp" type="image/webp">
  <source media="(min-width: 800px)" srcset="medium.jpg" type="image/jpeg">
  <img src="small.jpg" alt="Responsive image" loading="lazy">
</picture>

Video

<video controls width="640" poster="thumbnail.jpg" preload="metadata">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <track kind="subtitles" src="captions_en.vtt" srclang="en" label="English" default>
  <track kind="subtitles" src="captions_ja.vtt" srclang="ja" label="Japanese">
  <p>Your browser does not support HTML5 video.</p>
</video>

Audio

<audio controls preload="metadata">
  <source src="podcast.opus" type="audio/opus">
  <source src="podcast.mp3" type="audio/mpeg">
  <p>Your browser does not support HTML5 audio.</p>
</audio>

Best Practices

• Always provide alt text for images
• Use loading="lazy" for below-the-fold images and iframes
• Provide multiple source formats for cross-browser compatibility
• Include captions and subtitles using <track> for video accessibility
• Specify width and height to prevent layout shifts
• Use preload="metadata" for media elements to reduce initial bandwidth