目次に戻る

source要素:HTML Living Standard各要素別メモ

概要

カテゴリー
  • なし。
配置できる場所
内容モデル
属性
  • Media elementである場合は、
  • picture要素である場合は、
    • グローバル属性
    • srcset→画像のURLと「非負整数+小文字のw」(例:200w)又は「非負浮動小数点数+小文字のx」(例:1.5x)とを半角スペース区切りでセットとして指定(後者は必須ではない)。カンマ区切りで複数セットの指定可能。レスポンシブイメージのための設定。必須
    • sizes→妥当なメディアクエリCSSlength値として許容される値とを半角スペース区切りでセットとして指定(前者は必須ではない)。カンマ区切りで複数セットの指定可能。
    • media→妥当なメディアクエリ
    • typeリソースMIME type
    • sizes属性が指定されている場合は、「非負整数+小文字のw」を指定するsrcset属性が必須。
    • 非負整数+小文字のw」を指定するsrcset属性が指定されている場合は、sizes属性が必須。
    • 同一の親picture要素内に他のsource要素又はsrcset属性img要素がある場合は、type又はmedia(その属性値又はallであってはならない)のいずれかの属性が必須。
HTML構文におけるタグの省略
  • Void elementなので、終了タグはなし。ただし、開始タグの末尾をスラッシュで閉じてもよい(/>)。
WAI-ARIA
  • すべてのrole及びすべてのaria-*属性は指定不可。
視覚系ブラウザデフォルトとして期待されるCSS

  source {display: none;}
  
意味・用法

Media element子要素である場合は、複数の代替メディアリソースの指定を著者に許す。最初から順番に検証され、再生可能な形式のものがあればそれが再生される。この場合、レンダリングされたあとに、当該要素スクリプト等で操作しても効果はない(操作するなら、Media element)。

picture要素子要素である場合は、(レスポンシブイメージのための)画像(アニメーション画像を含む)の複数の代替リソースセットの指定を著者に許す。

私見・補足

Media elementについては、object要素のように、単純にMedia elementを多重に入れ子にするという方法もありえたような気がするが、HTML Living Standardではそれを選択しなかったようだ。

表示確認

picture要素video要素を参照。