<source>
- 25 января 2023
Тег <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.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Глобальные атрибуты HTML
Список основных атрибутов, которые подойдут ко всему.
- 29 марта 2023
Как добавить раздел на страницу. Тег <div>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Список описаний. Тег <dl>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Пункт выпадающего списка. Тег <option>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023
Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023