Урок 07. Изображения, видео и аудио
Кратко: суть урока
Медиа делает страницу наглядной, но требует аккуратной разметки: изображениям нужен alt, размерам — явные width и height, а видео и аудио — fallback-текст и понятные элементы управления.
- img показывает изображение и обязательно требует осмысленного alt.
- figure и figcaption связывают медиа с подписью.
- video, audio, source позволяют дать браузеру несколько форматов.
О чём этот урок
Медиа делает страницу наглядной, но требует аккуратной разметки: изображениям нужен alt, размерам — явные width и height, а видео и аудио — fallback-текст и понятные элементы управления.
Изображения
img использует src для пути к файлу и alt для текстовой альтернативы. Если изображение декоративное, alt можно оставить пустым, но атрибут всё равно нужен.
Размеры
Задавайте width и height, чтобы браузер заранее резервировал место и страница не прыгала во время загрузки.
Подписи
figure подходит для самостоятельного медиа-блока, а figcaption объясняет, что на нём показано.
Видео и аудио
video и audio лучше использовать с controls, несколькими source и fallback-текстом для неподдерживаемых браузеров.
Практика
- Добавьте изображение с корректным alt, width и height.
- Оберните изображение в figure и добавьте figcaption.
- Добавьте видео или аудио с controls и fallback-текстом.
Домашнее задание
Сделайте медиа-блок для страницы-резюме: фотография или иллюстрация с alt, подпись через figcaption, дополнительный аудио- или видеофрагмент с fallback.