Embed images, audio, video, and iframes in HTML. Learn which attributes prevent layout shift, improve accessibility, and control how media loads.
Why alt: screen readers read it aloud for visually impaired users, and it is shown when the image fails to load. Why width and height: the browser reserves the exact space before the image downloads, preventing layout shift — a Core Web Vitals metric. When loading="lazy": for images below the fold so they only load when the user scrolls near them.
src required — URL of the image file to display.alt required — Text description read by screen readers and shown when the image fails to load. Use empty alt="" for purely decorative images.width — Intrinsic width in pixels. Set alongside height to reserve space and prevent layout shift while loading.height — Intrinsic height in pixels. Together with width, lets the browser calculate the aspect ratio before the image downloads.loading — "lazy" defers loading until the image is near the viewport. "eager" (default) loads immediately.srcset — Comma-separated list of image URLs with width descriptors. The browser picks the best one for the screen.sizes — Media conditions describing how wide the image will render. Used together with srcset.<!-- Always include alt for accessibility -->
<img src="/photo.svg" alt="A mountain at sunset" width="800" height="600" />
<!-- Lazy-load images below the fold -->
<img src="/photo.svg" alt="Team photo" loading="lazy" />
<!-- <figure> + <figcaption> -->
<figure>
<img src="/photo.svg" alt="Bar chart showing Q1 sales" />
<figcaption>Figure 1 — Q1 2025 Sales by Region</figcaption>
</figure>Why multiple <source> elements: different browsers support different audio formats — listing mp3 and ogg ensures the browser picks one it can play. When autoplay: only with muted, because browsers block autoplaying audio with sound by default.
src — URL of the audio file. Alternatively, use child <source> elements for multiple format fallbacks.controls — Boolean. Shows the browser's built-in play/pause, volume, and timeline UI.autoplay — Boolean. Starts playing as soon as possible. Browsers block this unless muted is also set.loop — Boolean. Restarts the audio from the beginning when it ends.muted — Boolean. Starts the audio silenced. Required for autoplay to work in most browsers.preload — "none" — don't load until played. "metadata" — load duration/dimensions only. "auto" — load the whole file.<audio controls>
<source src="audio.mp3" type="audio/mpeg" />
<source src="audio.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>
<!-- Autoplay background music (must be muted) -->
<audio src="background.mp3" autoplay loop muted></audio>Why poster: shows a meaningful thumbnail instead of a black box while the video loads. Why mp4 + webm: no single format is universally supported — providing both covers all modern browsers. Why width and height: prevents layout shift while the video file metadata is being fetched.
src — URL of the video file. Alternatively use child <source> elements for multiple format fallbacks.controls — Boolean. Shows the browser's built-in playback UI.width — Display width in pixels. Set to prevent layout shift while the video metadata loads.height — Display height in pixels. Used with width to reserve space before the file loads.poster — URL of an image shown before the video plays. Prevents a blank or black frame.autoplay — Boolean. Plays immediately. Requires muted in most browsers.loop — Boolean. Restarts the video when it ends.muted — Boolean. Starts the video silenced. Required for autoplay to work.preload — "none", "metadata", or "auto". Controls how much data is loaded before the user presses play.<video controls width="640" height="360" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
Your browser does not support the video element.
</video>Why title: screen readers announce it so users know what the frame contains before entering it. Why sandbox: by default an embedded page can run scripts, submit forms, and navigate the parent — sandbox blocks all of that unless you explicitly allow each capability.
src required — URL of the page to embed.title required — Accessible description of the frame's content. Read by screen readers before the user enters the frame.width — Display width in pixels.height — Display height in pixels.sandbox — Restricts what the embedded page can do. Add "allow-scripts", "allow-forms", or "allow-same-origin" only when needed.allowfullscreen — Boolean. Allows the embedded content to request fullscreen mode (needed for video players).loading — "lazy" defers loading until the iframe is near the viewport.<!-- Embed a YouTube video -->
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="Video title"
allowfullscreen
></iframe>
<!-- sandbox restricts what the embedded page can do -->
<iframe
src="https://example.com"
sandbox="allow-scripts allow-same-origin"
title="Example site"
></iframe>