HTML-тег <source>

Характеристики

• Тип: медиа, статичный, семантический
• Назначение: Определяет альтернативные медиа-ресурсы для элементов <picture>, <audio> или <video>.
• Родители: Внутри <picture>, <audio>, <video>.
• Потомки: Не содержит содержимого (самозакрывающийся тег).
• Глобальные атрибуты: все
• Атрибуты событий: нет

Атрибуты

• src — URL медиа-ресурса.
• type — MIME-тип медиа-ресурса.
• srcset — Набор изображений для разных разрешений экрана (только внутри <picture>).
• sizes — Размеры изображений для разных условий отображения (только внутри <picture>).
• media — Медиа-запрос для определения, когда использовать данный ресурс.

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

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Описание изображения">
</picture>

Использование в JavaScript

// Получение всех элементов <source>
const sources = document.querySelectorAll('source');

// Изменение атрибута src первого <source>
sources[0].src = 'new-image.webp';

Рекомендации по обеспечению доступности (a11y)

• Убедитесь, что элемент <img> внутри <picture> содержит атрибут alt.
• Используйте правильные MIME-типы в атрибуте type для обеспечения совместимости.

Полезные ссылки