<source>

Тег <source> используется для указания медиа-ресурсов, таких, как изображение, аудио и видео в тегах <picture>,<audio>,<video>.

Синтаксис тега <source>

<source src="url" type="media_type">

Спецификация HTML

Тег является частью спецификации HTML Living Standard.

Семантический или нет

Тег <source> считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.

Примеры использования

Добавление аудио на веб-страницу:

<audio>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  Ваш браузер не поддерживает аудиоэлемент.
</audio>

Добавление видео на веб-страницу:

<video>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
  Ваш браузер не поддерживает элемент видео.
</video>

Добавление изображения на веб-страницу:

<picture>
  <source media=""(min-width: 650px)" srcset="large-image.jpg">
  <source media=""(min-width: 465px)" srcset="medium-image.jpg">
  <img src="small-image.jpg" alt="Изображение">
</picture>

Для чего использовать тег <source>

• отображение различных версий одного и того же медиафайла в зависимости от устройства пользователя или размера экрана;
• предоставление альтернативных медиаисточников для веб-страниц с медленным интернет-соединением;
• воспроизведение видео или аудио с различными типами файлов для обеспечения максимальной совместимости с браузером;
• предоставление резервного контента для браузеров, которые не поддерживают определенные типы медиа;
• воспроизведение нескольких видео- или аудиофайлов в виде списка воспроизведения;
• предоставление изображений с высоким разрешением для устройств с дисплеями с высокой плотностью пикселей.

Атрибуты тега <source>

type — тип внедренного ресурса.

src — адрес ресурса.

srcset — ссылки на набор изображений.

sizes — размеры изображений для различных макетов страниц.

media — используемые медиа.

width — размер по горизонтали.

height — размер по вертикали.

Глобальные атрибуты

Глобальных атрибутов для тега не существует.

Ограничения

Тег <source> не может использоваться как отдельный тег. Он должен использоваться внутри тега <picture>, <video> или <audio>.

Нюансы

Если ни один тег не может быть успешно воспроизведен, то будет отображено резервное содержимое, предоставленное внутри элемента.

Поддержка браузеров

Тег поддерживается всеми современными браузерами.

Актуальная информация — на сaniuse.

Альтернативные теги

Альтернативных тегов для тега <source> не существует.

Способы замены тега

Прямой замены тегу <source> не существует.

Устарел или нет

Тег не является устаревшим и по-прежнему входит в спецификацию HTML.

Хотите узнать больше об HTML-тегах?

Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.