HTML / Element / Initial coverage

The <source> Element

Status: Initial coverage Scope: HTML Living Standard · HTML-AAM · WPT Specification review: 2026-09-26

Technical Summary

A source element specifies an image source set when its parent is picture, or a media resource candidate when its parent is audio or video. The element represents nothing by itself. Although the tag name is the same, its required and forbidden attributes and its selection process depend on the parent.

Under picture, srcset is required and src is forbidden. Under a media element, a valid non-empty src URL is required, while srcset and sizes are forbidden. A condition mismatch, unsupported type, and post-selection fetch failure are distinct stages and should not be collapsed into one fallback rule.

Definition / Categories

Property	Definition
Meaning	Specifies a source set for `img` or a media resource candidate for a media element; it represents nothing on its own
Categories	None
Context	Child of `picture`, before `img`; or child of `audio` / `video`, before flow content or `track`
Content model	Nothing
End tag	None; it is a void element
DOM interface	`HTMLSourceElement`, with reflected IDL attributes for `src`, `type`, `srcset`, `sizes`, `media`, `width`, and `height`

Parent-specific content and attributes

Parent	Context and required attribute	Available attributes	Forbidden or conditional
`picture`	Before `img`; `srcset` is required	`media`, `type`, `sizes`, `width`, `height`	`src` is forbidden. With width descriptors, `sizes` is required when the following `img` does not allow auto-sizes. If a following source or img has `srcset`, each source must specify a non-empty, non-`all` `media` value or a `type`
`audio` / `video`	In the no-parent-`src` content model, before `track` and flow content; a valid non-empty URL in `src` is required	`type`, `media`	`srcset` and `sizes` are forbidden. `type` helps determine playability before fetching; MIME `codecs` parameters may be needed

When a media element has its own src, it has a different content model from the child-source selection model. Do not assume child source elements act as alternatives while the parent src is set.

Image source selection inside `picture`

<picture>
  <source media="(min-width: 48rem)" type="image/avif"
          srcset="/images/landscape-wide.avif">
  <source media="(min-width: 48rem)" type="image/jpeg"
          srcset="/images/landscape-wide.jpg">
  <img src="/images/landscape-narrow.jpg" alt="A mountain and lake"
       width="640" height="360">
</picture>

The browser examines children in order and selects a source whose media matches the environment and whose type it supports. If no source is selected, the following img element's own src / srcset is used. A fetch or decode failure after an image source has been selected is not the same condition as no source matching.

For picture, source selection is reevaluated when the environment changes. media is a valid media query list, and type identifies the image format as a MIME type. Neither format declaration nor candidate selection guarantees that fetching and decoding the resource will succeed.

Media resource selection inside `audio` / `video`

<video controls>
  <source src="/media/lesson.webm" type="video/webm">
  <source src="/media/lesson.mp4"
          type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
  <track kind="captions" src="/media/lesson.en.vtt"
         srclang="en" label="English captions">
</video>

Media candidates are evaluated by the parent element's resource selection algorithm. The type value identifies the format by MIME type; some MIME types need a codecs parameter. media is also allowed, but media elements evaluate it once during resource selection. This differs from picture, which responds to changes in the environment.

Place source before track. Changing a child source's src or type after it has been inserted into a media element does not by itself switch the active candidate. To change playback, use the parent media element's src and its resource selection behavior.

Separate selection, unsupported types, and fallback

Stage	`picture`	`audio` / `video`
Condition does not match	Skip a source whose `media` does not match and evaluate the next	Exclude a source whose `media` does not match
Type is unsupported	Skip a source whose declared image format is unsupported	Use `type` as an advance playability hint; a MIME / codec declaration does not guarantee playback
No candidate	Use the following `img` image candidate	Authors can use an `error` event on the last `source` for custom fallback. Media fallback content is not shown in every case where a resource cannot be played
Selected resource fails	Do not assume an unselected candidate will be tried; inspect the image element's request state	Check resource selection and media error behavior as separate stages

Accessibility boundary

source represents nothing by itself, so it is not the element that carries an image's accessible name or alternative text. In picture, the displayed image's text alternative belongs on img. The meaning of audio or video, native controls, and captions must be evaluated across the parent media element and its content, including any track elements.

Normative mappings and browser Accessibility Tree output are separate evidence. In the Chrome fixture snapshot, none of its four source nodes appeared as individual entries. Platform API and assistive-technology behavior remain unobserved; see Implementation Evidence for the measured scope.

Fact / Evidence

Type	Claim	Conditions and scope	Status	Evidence
SPEC	`source` represents nothing, has the Nothing content model, and uses `HTMLSourceElement` attributes.	HTML requirements when used as a child of `picture` or a media element; no independent rendering or accessibility semantics are claimed.	Reviewed	HTML Standard: source
SPEC	Inside `picture`, `source` requires `srcset` and forbids `src`; the following `img` displays the image and supplies fallback content.	Child order, `media` / `type` selection, and the conditional `sizes` requirement.	Reviewed	HTML Standard: source attributes · picture
SPEC	A media-element `source` requires `src` and forbids `srcset` and `sizes`.	Audio / video resource selection, MIME and codec information in `type`, and the boundary from a parent `src`.	Reviewed	HTML Standard: source in media elements
SPEC	`media` differs between environment-driven reevaluation for picture and one-time evaluation during media-element resource selection.	Parent-specific source selection; implementation behavior and network requests require separate observation.	Reviewed	HTML Standard: media attribute
SPEC	Changing an inserted media child source's `src` / `type` alone does not switch the playback candidate.	Boundary between DOM mutation and media resource selection; no cross-browser observation is claimed.	Reviewed	HTML Standard: source mutation

Evidence

HTML Living Standard: The source element — categories, contexts, attributes, parent-specific constraints, DOM interface, and insertion / mutation steps
HTML Living Standard: The picture element and Images — image source selection and fallback
HTML Living Standard: Media elements — audio / video resource selection and media state
HTML Accessibility API Mappings — reference for normative HTML-to-platform mappings, separate from measured browser Accessibility Trees
Web Platform Tests: embedded content — test discovery entry point; selected WPT results are recorded under Implementation Evidence

Implementation Evidence

These records summarize a dedicated Chrome fixture, selected WPTs, and a Chrome Accessibility Tree snapshot. Coverage is limited to one browser environment and the selected tests; platform APIs, assistive technologies, and cross-browser comparisons were not observed.

source implementation evidence registry
Type	Observation scope	Conditions to record	Status
IMPL	Source selection under `picture` and media parents, `currentSrc`, network requests, media / image viewport changes, and error states	2026-09-26 / Chrome UA `154.0.0.0` / Windows 11 Pro build 26200 / viewport `1280×720` / DPR `1.25` / local `source-v1`. `picture` selected `wide.svg` at `(min-width: 640px)`; changing the source's `media` to `(max-width: 0px)` switched `currentSrc` to the `img` fallback `fallback.svg`. The first navigation requested both fallback and wide SVG with HTTP 200; a later initial load requested only wide, and changing `media` fetched fallback with HTTP 200. The unsupported image/audio MIME candidate paths were not requested (confirmed with 404 logging enabled). The media parent skipped the unsupported MIME and selected `sample.wav` from HTTP 206 `audio/wav`; networkState=1 / readyState=4 / duration=3 s. Viewport resize, decode / network failures, and other browsers remain untested.	Partial observation (Chrome 154 / one environment)
WPT	Picture responsive-image selection, media-parent `source.media`, resource-selection and DOM-mutation tests. Selected WPTs do not cover media MIME type filtering.	2026-09-26 / Chrome UA `154.0.0.0` / Windows 11 Pro build 26200 / `wpt.live`. 23/24 assertions passed across six selected files. `source-relevant-mutations.html` 14/14; `update-media.html` 1/1; `source-media-outside-doc.html` 3/3; `resource-selection-source-media.html` 2/2; `resource-selection-source-media-env-change.html` 3/3. `resource-selection-candidate-insert-before.html` failed its 1/1 assertion in two separate runs (expected `#a`, got `#b`). GitHub master source review SHA: `bdadba91cf68adbfe90eaf264117218d02a3d94b`; the deployed wpt.live SHA is not exposed. Other tests and browsers remain untested. The test version used was not recorded. The linked test may change, so this result cannot be repeated with certainty against the same version.	Partial (23/24 assertions passed)
AAM	Accessibility-tree and assistive-technology exposure for `source`, selected `img`, media controls, and text tracks	2026-09-26 / Chrome UA `154.0.0.0` / Windows 11 Pro build 26200 / local fixture. Chrome Accessibility Tree exposed an image with alt `A blue field with a white circle` and a media container described as `Source fixture low tone`, with a `再生` button, `オーディオ再生バー` slider, and other native-control nodes. The four DOM `source` elements had no individual nodes in the snapshot. No text track was in the fixture. Windows platform APIs and assistive technologies such as Narrator / NVDA were not observed.	Partial observation (Chrome AX Tree)

Coverage / Open Issues

ReviewedMeaning, context, content model, void-element status, and HTMLSourceElement
ReviewedParent-specific attribute requirements, selection, and type / media / fallback boundaries for picture and media elements
ReviewedAccessibility boundary between source, img, and media parents
Partial observationIMPL: source selection, fetching, and media-attribute mutation in Chrome 154 / one environment. Viewport resize, errors, and browser comparisons remain untested.
Partial runWPT: 23/24 assertions passed across six selected files. One media source-insertion assertion failed in two runs.
Partial observationAAM: Chrome Accessibility Tree snapshot observed; platform APIs, assistive technology, and text tracks were not observed.

These observations are limited to one browser environment, selected WPTs, and a Chrome Accessibility Tree snapshot. No interoperability or conformance claim is made for untested scope.

Related surface

For a beginner-friendly guide, see source in Yugien. Image-resource selection is covered by picture and img; media resources and playback state by audio and video; external text tracks by track.