HTML Mastery · Chapter 7
Media — Images, Audio & Video
HTML5 provides native elements for embedding images, audio, and video without any plugins. This chapter covers every attribute for each media tag.
<img> — All Attributes
The <img> tag embeds images. It is self-closing and has no content inside. The alt attribute is mandatory for accessibility.
| Attribute | Values | Purpose |
|---|---|---|
| src | URL or path | Required. The path or URL to the image file. |
| alt | Text string | Required. Alternative text for screen readers and when image fails to load. Use alt="" for decorative images. |
| width / height | Pixels (number, no "px") | Reserves layout space before image loads, preventing Cumulative Layout Shift (CLS). Always specify both for performance. |
| loading | eager (default), lazy | lazy defers loading until the image is near the viewport. Use for images below the fold. |
| decoding | sync, async, auto | async allows the browser to decode the image asynchronously, improving performance. |
| fetchpriority | high, low, auto | Hints at the priority of the image download. Use high for hero images, low for below-fold images. |
| srcset | URL + width descriptors | Provides multiple image sources for different screen densities. E.g., "img-800.jpg 800w, img-1200.jpg 1200w". |
| sizes | Media condition + size | Works with srcset to tell the browser which size to use at each breakpoint. E.g., "(max-width: 768px) 100vw, 50vw". |
| crossorigin | anonymous, use-credentials | Enables CORS for the image (needed for canvas operations on external images). |
| ismap | Boolean | If the image is inside an <a> tag, clicking sends the coordinates to the server. Server-side image map. |
| usemap | #mapname | Links to a <map> element for a client-side image map (clickable areas). |
| referrerpolicy | same as <a> | Controls Referer header when fetching the image. |
<!-- Modern responsive image with lazy loading -->
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="A scenic mountain landscape at sunset"
width="800" height="450"
loading="lazy"
decoding="async">
<picture>, <source> — Responsive & Art Direction
The <picture> element wraps multiple <source> tags plus a fallback <img>. The browser picks the first matching source.
<picture>
<!-- Serve AVIF format if supported -->
<source type="image/avif" srcset="photo.avif">
<!-- WebP for browsers that support it -->
<source type="image/webp" srcset="photo.webp">
<!-- Different crop for mobile (art direction) -->
<source media="(max-width: 600px)" srcset="photo-mobile.jpg">
<!-- Fallback -->
<img src="photo.jpg" alt="Description" loading="lazy">
</picture>
| Attribute on <source> | Purpose |
|---|---|
| srcset | One or more image URLs (with optional width descriptors) for this source. |
| type | MIME type of the images: image/webp, image/avif, image/jpeg, etc. |
| media | CSS media query. The source is only used if this condition is true. |
| sizes | Same as on <img>. Which size to load at each viewport width. |
| width / height | Intrinsic dimensions of the image resource. |
Image Formats — When to Use Which
AVIF
Best compression, newest
WebP
Great compression, wide support
SVG
Icons, logos (vector)
PNG
Transparency, screenshots
JPEG
Photos, wide compatibility
GIF
Simple animations (prefer WebP)
<figure> & <figcaption>
Semantically groups an image (or code block, chart) with its caption.
<figure>
<img src="chart.png" alt="Sales chart Q4 2026" width="600" height="400">
<figcaption>Fig 1: Q4 2026 Sales by Region</figcaption>
</figure>
<audio> — All Attributes
| Attribute | Values | Purpose |
|---|---|---|
| src | URL | The audio file URL. Alternatively, use <source> children for format fallback. |
| controls | Boolean | Displays the browser's built-in play/pause/volume controls. Without this, audio is completely hidden. |
| autoplay | Boolean | Starts playing automatically. Blocked by most browsers without muted. Avoid for accessibility. |
| loop | Boolean | Repeats the audio when it ends. |
| muted | Boolean | Starts muted. Required for autoplay to work in most browsers. |
| preload | none, metadata, auto | How much to preload: nothing, just duration/artist info, or the full file. |
| crossorigin | anonymous, use-credentials | CORS setting for the audio resource. |
<audio controls preload="metadata">
<source src="podcast.ogg" type="audio/ogg">
<source src="podcast.mp3" type="audio/mpeg">
<p>Your browser doesn't support audio. <a href="podcast.mp3">Download</a></p>
</audio>
<video> — All Attributes
| Attribute | Values | Purpose |
|---|---|---|
| src | URL | Video source URL. Use <source> children for multiple formats. |
| controls | Boolean | Shows playback controls (play, pause, volume, fullscreen). |
| autoplay | Boolean | Auto-plays when loaded. Requires muted in most browsers. |
| muted | Boolean | Starts muted. Required for autoplay in most browsers. Good for background/hero videos. |
| loop | Boolean | Repeats the video continuously. |
| poster | URL | Thumbnail image shown before the video plays or while it's loading. |
| preload | none, metadata, auto | How much to preload. none is best for user data savings. |
| width / height | Pixels | Dimensions of the video player. Use CSS for responsive sizing. |
| playsinline | Boolean | On iOS, plays video inline (not fullscreen). Required for background autoplay videos on iPhone. |
| crossorigin | anonymous, use-credentials | CORS setting for the video resource. |
<track> — Subtitles & Captions
The <track> element adds text tracks (subtitles, captions, chapters) to <audio> and <video>.
| Attribute | Values | Purpose |
|---|---|---|
| src | URL to .vtt file | Path to the WebVTT subtitle/caption file. |
| kind | subtitles, captions, descriptions, chapters, metadata | Type of text track. captions includes sound descriptions; subtitles only transcribes speech. |
| srclang | Language code (e.g., "en") | Language of the track. Required when kind="subtitles". |
| label | String | Human-readable title shown in the browser's track selector (e.g., "English", "Español"). |
| default | Boolean | This track is enabled by default. Only one track per type can have this. |
<iframe> — Embedding External Content
| Attribute | Values | Purpose |
|---|---|---|
| src | URL | The URL to embed. |
| title | String | Accessibility required. Describes what the iframe contains. Read by screen readers. |
| width / height | Pixels | Dimensions of the iframe. |
| loading | eager, lazy | Defer loading until near viewport. Use lazy for YouTube embeds. |
| allowfullscreen | Boolean | Allows the iframe content to enter fullscreen mode. Required for YouTube embeds. |
| allow | Feature policies | Enables/restricts browser features. E.g., "accelerometer; autoplay; camera; microphone". |
| sandbox | Token list or empty | Restricts capabilities of the embedded content. Empty = maximum restriction. Tokens allow specific features back: allow-scripts, allow-same-origin, allow-forms. |
| referrerpolicy | Same as <a> | Controls Referer header sent with requests from the iframe. |
| srcdoc | HTML string | Inline HTML to display instead of loading from src. |
Security: Always use
sandbox on iframes loading untrusted content. Without it, the iframe can access cookies, run scripts, and navigate the top-level window.
Chapter Summary
- Always include
alton<img>— usealt=""for decorative images - Add
widthandheightto prevent Cumulative Layout Shift (CLS) - Use
loading="lazy"for below-fold images and iframes <picture>+<source>enables modern formats (AVIF, WebP) with JPEG fallback- Add
<track>with subtitles/captions to all<video>for accessibility