Решения: Изображения, видео и аудио

Кратко

Сравните своё решение с эталоном и проверьте смысл каждого элемента.

Эталонное решение с живым результатом

Сверху — как это выглядит в браузере (фото заменено SVG-заглушкой), ниже — эталонный код.

Галерея курса

Разбор структуры страницы на занятии.

▶ ──●────── аудио (controls)

<main>
  <h1>Галерея курса</h1>
  <figure>
    <img src="images/workshop.jpg"
         alt="Студенты обсуждают HTML-макет на экране"
         width="900" height="600" loading="lazy">
    <figcaption>Разбор структуры страницы на занятии.</figcaption>
  </figure>
  <audio controls>
    <source src="lesson-intro.mp3" type="audio/mpeg">
    Ваш браузер не поддерживает аудио.
  </audio>
</main>

Разбор логики

alt описывает смысл сцены, а не «фото jpg» — это и доступность, и SEO.
width/height резервируют место — текст под картинкой не прыгает.
figcaption внутри figure — видимая всем подпись.
Текст после source — fallback для браузеров без поддержки audio.

Главная проверка: код должен быть понятен без CSS и не зависеть от случайных визуальных эффектов.