HTML Media

Audio, video, images, SVG, and media accessibility.

Overview

HTML media elements embed audio, video, and graphics.

Key Concepts

• Video — <video> with controls, sources, and tracks
• Audio — <audio> with multiple sources
• Images — <img> with responsive and lazy loading
• SVG — Inline and external SVG graphics
• Accessibility — Captions, transcripts, and alt text

Code Examples

<!-- Video with multiple sources and captions -->
<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <track src="captions.vtt" kind="captions" srclang="en" label="English">
  <track src="transcript.vtt" kind="descriptions" srclang="en" label="Transcript">
  <p>Your browser doesn't support HTML video. <a href="video.mp4">Download</a></p>
</video>

<!-- Audio player -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML audio. <a href="audio.mp3">Download</a></p>
</audio>

<!-- Responsive image with art direction -->
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Description of image" loading="lazy">
</picture>

<!-- Inline SVG -->
<svg width="100" height="100" viewBox="0 0 100 100" aria-hidden="true">
  <circle cx="50" cy="50" r="40" fill="#007bff"/>
  <text x="50" y="55" text-anchor="middle" fill="white">42</text>
</svg>

Practice

Create a responsive media gallery with video, audio, and images.