HTML / Element / Initial coverage

<source>要素

状態: 初期Coverage 対象: HTML Living Standard・HTML-AAM・WPT 仕様確認: 2026-09-26

Technical Summary

sourceは、親がpictureなら画像のsource setを、audioまたはvideoならmedia resource候補を指定します。要素自体は何も表しません。名前が同じでも、親要素によって必要・禁止される属性と選択処理が異なります。

pictureではsrcsetが必須で、srcは禁止です。media elementでは有効な非空URLを持つsrcが必須で、srcsetとsizesは禁止です。条件不一致・typeの非対応・取得後の失敗は、同じ「fallback」としてまとめず、選択段階を分けて扱います。

Definition / Categories

項目	定義
意味	`img`またはmedia elementが選ぶsource set / media resource候補を指定する。`source`自身は何も表さない
Categories	なし
配置	`picture`の子では`img`より前。`audio` / `video`の子では、flow contentや`track`より前
Content model	Nothing
終了タグ	なし。void element
DOM interface	`HTMLSourceElement`。`src`、`type`、`srcset`、`sizes`、`media`、`width`、`height`を反映するIDL属性を持つ

親要素で変わるcontent modelと属性

親	配置・必須属性	利用可能な属性	禁止・条件
`picture`	`img`より前。`srcset`必須	`media`、`type`、`sizes`、`width`、`height`	`src`は禁止。width descriptorを使い、後続`img`がauto-sizesを許さない場合、`sizes`が必要。後続source / imgにも`srcset`があるとき、各sourceには非空・非`all`の`media`か`type`が必要
`audio` / `video`	親に`src`がないcontent modelでは、`track`とflow contentより前。有効な非空URLの`src`必須	`type`、`media`	`srcset`と`sizes`は禁止。`type`は再生可能性を取得前に判定する手がかりで、必要に応じてMIME `codecs` parameterを含める

media elementに自身のsrc属性がある場合は、子sourceの候補選択とは異なるcontent modelになります。親にsrcを設定したまま、子sourceが代替候補になると仮定してはいけません。

`picture`内の画像source selection

<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="山と湖の風景"
       width="640" height="360">
</picture>

ブラウザーはpictureの子を順に確認し、mediaが環境に一致し、typeをサポートする候補を選びます。どのsourceも選ばれないと、後続のimg自身のsrc / srcsetが使われます。画像のリクエストやデコード失敗は、候補条件に一致しなかった場合と同一のfallback条件ではありません。

pictureでは、画面などの環境が変化した場合にsource selectionが再評価されます。mediaは有効なmedia query listであり、typeはsource setに含まれる画像形式のMIME typeを示します。形式の実際の取得・デコード成功までは保証しません。

`audio` / `video`内のmedia resource selection

<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.ja.vtt"
         srclang="ja" label="日本語のキャプション">
</video>

media elementの候補は、親要素のresource selection algorithmで評価されます。typeはMIME typeで形式を示し、MIME typeによってはcodecsparameterが必要です。mediaも使えますが、media elementではresource selection時に一度評価されます。pictureのmedia条件が環境変化に反応する点と区別してください。

sourceはtrackより前に置きます。sourceのsrcまたはtypeを、要素がすでにmedia elementへ挿入された後に変更しても、その変更だけで現在の再生候補は切り替わりません。切替には親media elementのsrcなど、media要素側のresource selectionを操作します。

選択・非対応・fallbackを分ける

段階	`picture`	`audio` / `video`
候補条件が一致しない	`media`に合わないsourceを飛ばし、次を評価する	`media`に合わないsourceを候補から除外する
形式をサポートしない	`type`が示す画像形式をサポートしないsourceを飛ばす	`type`を再生可否の事前判断に使う。MIME typeやcodecの記述だけで実際の再生を保証しない
候補なし	後続`img`の画像候補を使う	最後の`source`の`error` eventを使った独自fallbackは可能。media elementのfallback contentは、再生に失敗したすべての場合に表示されるものではない
選択済みresourceの取得・処理失敗	未選択候補へ切り替わるとは限らず、画像element側のrequest状態を確認する	resource selectionとmedia errorの仕様・実装状態を別に確認する

Accessibility boundary

sourceはそれ自体では何も表さないため、画像のaccessible nameやalternative textを持たせる要素ではありません。pictureで表示される画像のテキスト代替はimgのaltで定義します。音声・動画の意味、native controls、字幕などは親media elementと子trackを含むコンテンツ全体で評価します。

仕様上のmappingと、ブラウザーが公開するAccessibility Treeは別Evidenceです。Chromeのfixture snapshotでは4個のsource nodeは個別に公開されませんでした。platform APIや支援技術の挙動は未観測です。今回の観測範囲はImplementation Evidenceを参照してください。

Fact / Evidence（主張 / 根拠）

種別	主張	条件・範囲	状態	根拠
SPEC	`source`は何も表さず、content modelはNothing、親要素に応じて`HTMLSourceElement`属性を使う。	`picture`またはmedia elementの子要素としてのHTML仕様。要素単独の表示・accessibility semanticsとは扱わない。	確認済み	HTML Standard: source
SPEC	`picture`の`source`は`srcset`必須・`src`禁止であり、後続`img`が画像表示とfallbackを担う。	`picture`の子の順序、`media` / `type`選択、`sizes`条件を含む。	確認済み	HTML Standard: source attributes · picture
SPEC	media element配下の`source`は`src`必須で、`srcset`と`sizes`を指定できない。	`audio` / `video`のresource selection。`type`のMIME / codecs情報、親`src`と子sourceの境界を含む。	確認済み	HTML Standard: source in media elements
SPEC	`media`は、pictureの環境変化による再選択と、media elementでのresource selection時の一回評価で異なる。	親要素固有のsource selection。実装挙動・network requestは別途観測する。	確認済み	HTML Standard: media attribute
SPEC	挿入済みmedia element内の`source`の`src` / `type`変更だけでは、再生候補は切り替わらない。	DOM mutationとmedia element resource selectionの境界。実ブラウザー比較は未実施。	確認済み	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

専用fixtureでのChrome観測、選定WPT、Chrome Accessibility Tree snapshotの結果を記録します。1 browser環境と選定範囲に限り、platform API・支援技術やbrowser間比較は未観測です。

source implementation evidence registry
種別	観測範囲	記録する条件	状態
IMPL	`picture`とmedia parentのsource選択、`currentSrc`、network request、media / image viewport change、error状態	2026-09-26 / Chrome UA `154.0.0.0` / Windows 11 Pro build 26200 / viewport `1280×720` / DPR `1.25` / local `source-v1`。`picture`は`(min-width: 640px)`で`wide.svg`を選択、sourceの`media`を`(max-width: 0px)`に変更すると`img`の`fallback.svg`へ切替。初回navigationではfallback / wide双方がHTTP 200、次の初期loadではwideのみ取得、media変更でfallbackをHTTP 200取得。unsupported image/audio MIME候補のrequestなし（404を記録するserverでも確認）。media parentはunsupported MIMEを飛ばし`sample.wav`をHTTP 206 `audio/wav`から選択、networkState=1 / readyState=4 / duration=3秒。viewport resize、decode / network failure、他browserは未実施。	部分観測（Chrome 154 / 1環境）
WPT	picture responsive-image selection、media parentの`source.media`、resource selection・DOM mutation tests。選定WPTはmedia MIME type filteringを含まない	2026-09-26 / Chrome UA `154.0.0.0` / Windows 11 Pro build 26200 / `wpt.live`。選定6ファイルで23/24 assertions pass。`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`は1/1 failを2回確認（expected `#a`, got `#b`）。GitHub master source review SHA `bdadba91cf68adbfe90eaf264117218d02a3d94b`。wpt.live deployed SHAは非公開。他test・browser未実施。実測時のテスト版は未記録です。リンク先の内容は変わることがあり、当時と同じテストで再確認できるとは限りません。	部分実行（23/24 assertions pass）
AAM	`source`単体、選択後の`img`、media controls / text trackのAccessibility Treeと支援技術公開	2026-09-26 / Chrome UA `154.0.0.0` / Windows 11 Pro build 26200 / local fixture。Chrome Accessibility Treeはalt `A blue field with a white circle`のimageと、Description `Source fixture low tone`付きmedia container、button `再生`、slider `オーディオ再生バー`等を公開。DOM上の4個の`source`要素はsnapshot内に個別nodeなし。text trackは未fixture。Windows platform API・Narrator / NVDA等は未観測。	部分観測（Chrome AX Tree）

Coverage / Open Issues

仕様確認済み要素の意味、配置、content model、void要素、HTMLSourceElement
仕様確認済みpictureとmedia elementで異なる属性要件、source selection、type / media / fallbackの境界
仕様確認済みsource単体の意味と、img・media parentのAccessibility境界
部分観測IMPL: Chrome 154 / 1環境でsource選択・取得とmedia属性変更を測定。viewport resize、error、browser間比較は未実施
部分実行WPT: 選定6 filesで23/24 assertions pass。media source挿入時の1 assertion failを2回観測
部分観測AAM: Chrome Accessibility Tree snapshotを測定。platform API、支援技術、text trackは未観測

これらの実測は1 browser環境、選定WPT、Chrome Accessibility Treeに限ります。未実施範囲についてbrowser間の互換性や適合性を主張しません。

Related surface

初心者向けの例はYugienのsource要素ページを参照してください。画像のresource selectionはpictureとimg、media resourceと再生stateはaudio・video、外部text trackはtrackで確認できます。