HTMLの <source> タグ

<source> は画像、音声および動画等のメディアリソースを指定するHTMLタグです。<picture>、<audio>、<video>要素の子要素として使います。source要素の使い方をご紹介します。

構文

HTML要素のタグ名、属性名および属性値は、大文字と小文字のどちらでもよい。source要素の終了タグは省略できる。

<source></source>

<source>

XML形式で終了タグを省略することもできる。

<source />

コンテンツモデル

source要素の開始タグと終了タグの間には何も含めることができない。

属性

以下に示す属性をsource要素に指定できる。

type

組み込みリソースの種類をMIMEタイプで指定する。

type

値	説明
image/avif	AVIF 形式の画像
image/gif	GIF 形式の画像
image/jpeg	JPEG 形式の画像
image/png	PNG 形式の画像
image/svg+xml	SVG 形式の画像
image/webp	WebP 形式の画像

src

リソースのアドレス

<audio controls>
  <source src="/media/example.mp3">
</audio>

srcset

高解像度ディスプレイ、小型モニターなど、状況に応じて使い分ける画像

ウェブブラウザが複数の画像形式に対応している場合、先に出現する source 要素が優先される。

<picture>
  <!-- AVIFに対応しているブラウザではAVIF画像を表示する -->
  <source srcset="/images/example.avif" type="image/avif">
  <!-- AVIFに対応していないブラウザではWebP画像を表示する -->
  <source srcset="/images/example.webp" type="image/webp">
  <!-- どちらにも対応していないブラウザではJPEG画像を表示する -->
  <img src="/images/example.jpg">
</picture>

sizes

ページレイアウトに応じた画像サイズ

media

対応メディア

width

水平方向の寸法

height

垂直方向の寸法

JavaScript

JavaScriptからは HTMLSourceElement インタフェースを通じてsource要素へアクセスできる。

関連記事

AMPの <amp-img> タグ

HTMLの <img> タグ

HTMLの <picture> タグ

参考文献

Web Hypertext Application Technology Working Group (2022) "Embedded content" HTML Living Standard