HTML provides several ways to embed external content such as audio, video, images, and other web pages into your documents. This guide covers the various embedding methods and best practices for using them.
The <audio> element is used to embed sound content in documents:
| Attribute | Value | Description |
|---|---|---|
controls |
controls | Displays audio controls (play/pause, volume, etc.) |
autoplay |
autoplay | Starts playing the audio automatically (often blocked by browsers) |
loop |
loop | Repeats the audio when it ends |
muted |
muted | Mutes the audio output |
preload |
auto, metadata, none | Specifies if/how the audio should be loaded when the page loads |
src |
URL | Specifies the URL of the audio file (alternative to using <source> elements) |
controls attribute to give users control over the audio playback<audio> element for browsers that don't support it<source> elements with different audio formats for better browser compatibilitytype attribute with the correct MIME type to help the browser determine if it can play the fileautoplay for audio with sound, as it can be disruptive and is often blocked by browsersmuted if using autoplayThe <video> element is used to embed video content in documents:
| Attribute | Value | Description |
|---|---|---|
controls |
controls | Displays video controls (play/pause, volume, etc.) |
width, height |
pixels | Sets the dimensions of the video player |
autoplay |
autoplay | Starts playing the video automatically (often blocked by browsers) |
loop |
loop | Repeats the video when it ends |
muted |
muted | Mutes the video output |
poster |
URL | Specifies an image to be shown while the video is downloading or until the user plays it |
preload |
auto, metadata, none | Specifies if/how the video should be loaded when the page loads |
playsinline |
playsinline | Indicates that the video should play inline on iOS devices, rather than automatically entering fullscreen mode |
| Track Kind | Description |
|---|---|
subtitles |
Translations of the dialogue when audio is available but not understood |
captions |
Transcription or translation of the dialogue, suitable for users who are deaf or when audio is not available |
descriptions |
Text descriptions of the visual content, suitable for users who are blind or when video is not available |
chapters |
Chapter titles intended to be used for navigating the media resource |
metadata |
Tracks intended for use by scripts and not visible to the user |
controls attribute to give users control over the video playbackwidth and height attributes to help the browser allocate space for the video during page loadingposter image to display before the video loads or plays<source> elements with different video formats for better browser compatibility<track> elements for subtitles, captions, or descriptions to improve accessibilityautoplay as it can be irritating to users and is often blocked in modern browserspreload="none" or preload="metadata" to reduce bandwidth usage on initial page loadThe <iframe> (Inline Frame) element allows you to embed another HTML document within the current document:
Iframes are used to embed external content like videos, maps, and other web pages. Most embedding codes provided by services like YouTube, Google Maps, or Twitter use iframes.
| Attribute | Value | Description |
|---|---|---|
src |
URL | Specifies the URL of the document to embed |
width, height |
pixels or % | Sets the dimensions of the iframe |
loading |
eager, lazy | Specifies whether the iframe should be loaded immediately (eager) or deferred (lazy) |
sandbox |
allow-forms, allow-scripts, etc. | Enables extra restrictions on the content in the iframe for security |
allow |
feature policy | Specifies a feature policy for the iframe (e.g., camera, microphone access) |
allowfullscreen |
true, false | Allows the iframe content to be viewed in fullscreen mode |
referrerpolicy |
no-referrer, origin, etc. | Controls what referrer information is passed when requesting the iframe |
sandbox attribute to restrict the capabilities of the embedded contenttitle attribute for accessibilityloading="lazy" for iframes that are below the fold to improve page load performanceframe-ancestors in your Content Security Policy (CSP) to control which sites can embed your contentThe <object> and <embed> elements are used to embed external resources like PDFs, Flash content (deprecated), Java applets (deprecated), and other media types:
| Feature | Object | Embed |
|---|---|---|
| Fallback content | Supports fallback content inside the element | No fallback content support |
| Parameters | Supports <param> elements for passing parameters | Parameters are passed as attributes |
| Standards compliance | HTML standard | Originally non-standard, now in HTML5 |
| Use case | Preferred for most embedded content | Legacy support; simple embeds |
<object> instead of <embed> when possible for better standards compliance and fallback support<object> for browsers that don't support the embedded contenttype attributes to help browsers identify the content type<video>, <audio>, or <img>) when they are suitable for the content typeThe <canvas> element is used to draw graphics via JavaScript. It provides a drawing surface that you can use to create and manipulate images, graphs, animations, and other visual elements:
The Canvas API provides methods for drawing paths, boxes, circles, text, and other shapes. It's commonly used for games, data visualization, photo manipulation, and real-time video processing.
<canvas> element itself is just a container; you need to use JavaScript to draw on it. For more detailed information on using Canvas, see the HTML5 APIs section.
Scalable Vector Graphics (SVG) is an XML-based markup language for describing two-dimensional vector graphics. SVG can be embedded directly in HTML or included via the <img> or <object> elements:
| Feature | Inline SVG | External SVG |
|---|---|---|
| DOM Access | Can be manipulated with JavaScript and styled with CSS | Limited access when used with <img>; accessible with <object> |
| Caching | Not cached separately (part of HTML) | Can be cached by the browser |
| HTTP Requests | No additional request | Requires an additional HTTP request |
| File Size | Increases HTML file size | Keeps HTML smaller; asset is loaded separately |
| Reusability | Limited to the current page | Can be reused across multiple pages |
The <picture> element provides a container for multiple image sources, allowing you to specify different images for different screen sizes, device resolutions, or file formats:
The <source> elements specify the image sources with the srcset attribute, and the browser will use the first matching source. The <img> element is required as the last child of the <picture> element, providing a fallback for browsers that don't support the <picture> element.
| Feature | Picture Element | Img with srcset/sizes |
|---|---|---|
| Use Case | Art direction (different crops for different screens); format selection | Resolution switching (same image, different sizes) |
| Media Queries | Supports full media queries | Limited to width descriptors |
| Format Support | Can specify different formats with type attribute | No native format selection |
| Complexity | More HTML markup required | More concise syntax |
The <link> element in the <head> section can be used to reference various external resources:
| Relation (rel) | Description |
|---|---|
stylesheet |
Links to an external CSS stylesheet |
icon |
Specifies an icon for the document (favicon) |
apple-touch-icon |
Icon for iOS devices |
preconnect |
Initiates an early connection to the target resource's origin |
preload |
Tells the browser to download and cache a resource for current navigation |
prefetch |
Tells the browser to download and cache a resource for future navigations |
manifest |
Links to a Web App Manifest file for PWAs |
alternate |
Provides alternative versions of the document (e.g., different language, RSS feed) |
canonical |
Indicates the preferred URL for the current document (for SEO) |
preconnect for domains you know you'll need resources from soonpreload for critical resources needed for the current pageprefetch for resources likely needed for the next pageasync or defer attributes to avoid blocking page renderingloading="lazy" to iframes when they're below the fold to improve page load performancetitle and fallback content for accessibilityloading="lazy"alt attributes for images