The <source> HTML Element

Overview

The <source> element is used to define multiple media resources for elements like <picture>, <audio>, and <video>. Its primary role is to ensure content is displayed optimally, adapting both to browser capabilities and varying viewport conditions.

Examples and Usage

Being an empty(void) element, <source> does not contain any content and does not require a closing tag. Its common purpose is to offer multiple media formats for elements, addressing broader compatibility across browsers with varying support for media file types.

Below, we'll observe illustrative examples that highlight some of its capabilities.

<video controls>
    <source src="sample-video.webm" type="video/webm">
    <source src="sample-video.mp4" type="video/mp4">
    <p>Your browser doesn't support the given video file.</p>
</video>

In the provided example, a video player is created using the <video> element with the controls attribute to allow user interaction. Within the video player, two <source> elements are specified, each with a src and type attribute. The first <source> element, which points to sample-video.webm, has its type attribute set to video/webm, indicating the WebM format.

If the browser supports this format, it will display the video from the mentioned URL. If not, it moves to the next <source> with the MP4 format specified by type="video/mp4". Should both formats be unsupported by the browser, a descriptive message wrapped in a <p> tag alerts the user.

Next, let's explore its potential usage when working with images.

<picture>
  <source srcset="landscape-image.png" media="(min-width: 800px)">
  <source srcset="medium-width-image.png" media="(min-width: 600px)">
  <img src="portrait-image.png" alt="A landscape view.">
</picture>

Here, the <picture> element encapsulates a set of <source> elements and an <img> tag. Each <source> element uses the srcset attribute to specify the image's URL and the media attribute to define the condition under which that image should be displayed.

The first <source> targets viewports wider than 800 pixels with its media="(min-width: 800px)" attribute, suggesting larger screens. The second <source> targets viewports between 600 and 800 pixels in width. If none of the conditions from the media attributes are met, the browser defaults to the <img> tag, rendering the portrait-image.png with its alternative text description, "A landscape view".

The intricacies of media formats can be challenging, especially given the diverse nature of browser support and the nuances of each format. While we've touched upon some primary considerations, the broader context of media formats is vast and complex. For an in-depth understanding, consult this comprehensive guide on media formats.

Attribute Breakdown

In addition to global attributes, the <source> element comes with a set of specific attributes to customize its behavior.

Attribute	Description
`media`	Specifies the intended media type of the resource using a media query. Used only when the parent is a `<picture>` element.
`type`	Indicates the MIME type of the resource, optionally with a codecs parameter. Determines if the user agent can present the resource.
`src`	Specifies the address of the media resource. It's required when the parent element is either `<audio>` or `<video>`, but isn't permitted if the parent is `<picture>`.
`srcset`	A list of possible images for the browser to use, separated by commas. Each string specifies an image's URL and a width or pixel density descriptor. Used only when the parent is a `<picture>` element.
`sizes`	Describes the expected display width of the image. Effective only when width descriptors are provided with `srcset` and exclusively for the `<picture>` element.
`width`	Denotes the image's inherent width in pixels. It's mandatory to provide the value as an integer without any associated units. Used only when the parent is a `<picture>` element.
`height`	Denotes the image's inherent height in pixels. It's mandatory to provide the value as an integer without any associated units. Used only when the parent is a `<picture>` element.

Accessibility Aspects

The <source> element does not inherently possess specific accessibility roles or properties. Given its primary function to specify media resources, its impact is largely behind-the-scenes, and its semantic meaning might not be explicitly recognized by assistive technologies.

As a result, the element doesn't directly interact with ARIA roles or aria-* attributes. When implementing media elements like <audio>, <video>, or <picture>, it's crucial that the main elements are made accessible, as the <source> element serves to support them.

Associated Elements

<audio>
<picture>
<video>

Additional Notes

Using the <source> element provides considerable benefits, especially in mobile contexts. By allowing browsers to prioritize among multiple media formats, we can reduce load times. Furthermore, by specifying the media format through the type attribute, we can improve browser performance; this is because browsers can quickly decide on the suitable format without needing to sample or preliminarily download any media content.
The srcset attribute can specify multiple images for the browser to choose from. Each entry consists of a URL and a width (300w) or pixel density descriptor (2x). It's important not to mix width and pixel density descriptors within the same srcset.
When using the sizes attribute, width descriptors must be specified in srcset. The sizes attribute essentially tells the browser how wide the image will be rendered on the page, based on different viewport sizes.
The type attribute is beneficial for performance. If specified, the browser will only query the server for the media resource if it can handle the given type. If not recognized, the browser skips to the next <source> without making unnecessary requests.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes	Yes*	Yes	Yes*	Yes*	Yes*

Useful Resources

Can I use HTML element: source

The HTML Living Standard Specification: source