Each media section has its own detailed reference. Start here to pick the right medium, then jump to the cheatsheet for the format you need.
Section cheatsheets
Media HTML elements at a glance
The elements you use to put media on a page, and where to learn each one.
| Element | What it's for | Learn more |
|---|---|---|
<img> |
A single raster or vector image (photos, icons, illustrations). | The img element |
<picture> / <source> |
Choose between image formats or art-directed crops by type or media query. | picture & art direction |
<svg> |
Inline vector graphics: shapes, icons, logos, charts — scalable and styleable. | SVG section |
<audio> |
Native sound playback with built-in or scripted controls. | The audio element |
<video> |
Native video playback; also the modern replacement for animated GIFs. | The video element |
<track> |
Captions, subtitles, and descriptions for audio/video via WebVTT. | Captions & tracks |
<iframe> |
Embed externally hosted video (YouTube, Vimeo) with their player and streaming. | Embedding external video |
Which media type should I use?
- Icons, logos, line art, diagrams, charts
- Use SVG — it stays crisp at any size and is tiny for flat art. See the SVG section.
- Photographs and complex raster images
- Use a raster format (AVIF or WebP, with a JPEG fallback; PNG for transparency). See Choosing a format.
- Short silent motion (the "animated GIF" use case)
- Use a muted, looping
<video>— far smaller than a GIF. See video instead of GIF. - Sound (music, narration, effects)
- Use
<audio>; reach for the Web Audio API for processing or visualization. - Long-form or third-party-hosted video
- Self-host with
<video>for control and privacy, or embed YouTube/Vimeo for free hosting and adaptive streaming. See Embedding external video.