Справочник: Изображения, видео и аудио

Теги и атрибуты этого урока

• <img src alt width height loading> — изображение. src — путь, alt — описание, width/height — размеры, loading="lazy" — отложенная загрузка.
• <picture> — обёртка для адаптивного изображения.
• <source media srcset type> — вариант файла; media — условие по ширине, srcset — путь, type — MIME-тип.
• <figure> — самостоятельный медиа-блок.
• <figcaption> — видимая подпись внутри figure.
• <video controls width poster> — видеоплеер.
• <audio controls> — аудиоплеер.

Шпаргалка-синтаксис

<img src="photo.jpg" alt="Описание смысла" width="800" height="450" loading="lazy">

<figure>
  <img src="photo.jpg" alt="…">
  <figcaption>Подпись</figcaption>
</figure>

<picture>
  <source media="(max-width: 600px)" srcset="small.jpg">
  <img src="large.jpg" alt="…">
</picture>

<video controls width="640">
  <source src="clip.webm" type="video/webm">
  <source src="clip.mp4"  type="video/mp4">
  Видео не поддерживается.
</video>