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 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 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>
<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>
<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.