The <source> Element
As defined in the HTML Living Standard, the <source> element allows authors to specify multiple alternative media resources for <picture>, <audio>, and <video> elements. It is a void element.
(Resize your window to see different sources take effect.)
<video controls>
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
View HTML Living Standard: The source element
Usage in Different Contexts
The attributes required on a <source> element change based on its parent:
- Inside
<picture>: Usessrcset(to point to images) andmedia(for media queries) ortype(for image formats like AVIF). - Inside
<audio>or<video>: Usessrc(to point to the media file) andtype(to declare the codec/container format).
WCAG Principle: Robustness
Success Criterion 1.1.1 (Level A): All non-text content that is presented to the user has a text alternative.
The <source> tag itself is a technical instruction for the browser and does not have an alt attribute. Accessibility is managed by the parent element. In a <picture>, the alt text must be on the required <img> child. In media elements, you must provide fallback text or transcripts alongside the source list.
Performance and Accessibility
Providing multiple sources is an act of inclusive design. It ensures that:
- Format Support: Users on modern browsers get high-efficiency formats (AVIF, WebP, WebM), while users on older systems still receive content via standard fallbacks.
- Bandwidth Management: Users on mobile connections don't waste data loading 4K video or massive desktop-width images.
- Readability: Using "Art Direction" (different images for different screens) ensures that a complex chart is swapped for a simplified, legible version on small mobile devices, satisfying the spirit of WCAG SC 1.4.10 (Reflow).
A11y Tip: Logical Ordering
Browsers evaluate <source> elements in the order they appear and choose the first one that is compatible. Always place your highest-quality or most efficient formats first, followed by the most compatible ones.