Path // www.yourhtmlsource.com → Reference → <SOURCE> ELEMENT

<source> element

The <source> element specifies multiple media resources for <audio>, <video>, and <picture> elements. It is a void element (self-closing) that allows browsers to choose the most appropriate source based on format support, device capabilities, and media queries.

Page Navigation:
Syntax | Attributes | Examples | When to Use | Related Elements

This page was last updated on 2025-11-17

Syntax

The <source> element is a void element that must be a child of a media element:

Key Attributes

src — The URL of the media resource. Required for <audio> and <video> elements, but not allowed for <picture> (use srcset instead).
type — The MIME type of the media resource, optionally with a codecs parameter. Helps the browser quickly skip unsupported formats.
srcset — For <picture> elements only. Specifies one or more image sources with descriptors.
sizes — For <picture> elements only. Specifies the intended display sizes for the image sources.
media — A media query that the browser evaluates to select this source. Often used with <picture> for art direction.
width — The intrinsic width of the image in pixels (for <picture> only).
height — The intrinsic height of the image in pixels (for <picture> only).

Examples

Video with Multiple Formats

<video controls width="640" height="360">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video element.
</video>

The browser tries each source in order and uses the first one it can play.

Audio with Codec Information

<audio controls>
<source src="song.ogg" type="audio/ogg; codecs=vorbis">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Including codec information in the type attribute helps the browser make faster decisions about format support.

Picture Element with Art Direction

The media attribute allows serving different images based on viewport size for art direction purposes.

When to Use

Best Practices:

Always include the type attribute to help browsers quickly skip unsupported formats
Order sources from most preferred to least preferred (browsers use the first supported source)
Include fallback content after all <source> elements for older browsers
Use the codecs parameter in the type attribute for more precise format matching
For <picture>, always include an <img> element as the final fallback

Common MIME Types: