Рисунок с подписью
Что делаем: добавляем в статью фотографию турки. Рисунок оборачиваем в figure, подпись пишем в figcaption, а смысл картинки передаём в атрибуте alt.
Три вещи, которые нужно уметь
figure— самостоятельное содержимое со своей подписью. Его можно переставить в другое место статьи, и смысл не изменится. Не оборачивайте в него всё подряд: обычную картинку внутри абзацаfigureне нужен.figcaption— подпись к рисунку, первый или последний ребёнокfigure.alt— текстовая замена изображения. Её читает диктор и показывает браузер, если картинка не загрузилась.
Как писать alt
Спросите себя, что потеряет читатель, если картинки не будет:
| Ситуация | Какой alt |
|---|---|
| Картинка несёт информацию | краткое описание: «Медная турка с кофе» |
| Картинка только украшает | пустой alt="": диктор её пропустит |
| Картинка — кнопка или ссылка | что произойдёт при нажатии |
| Подпись уже описывает картинку целиком | не дублировать, описать то, чего нет в подписи |
Атрибут alt нельзя убирать совсем: без него диктор может прочитать имя файла. Для декоративных картинок оставляйте его пустым.
По спецификации
- Элемент figure: самостоятельное содержимое с подписью, которое можно вынести из потока без потери смысла.
- Элемент figcaption: подпись для родительского figure.
- Атрибут alt: как писать альтернативный текст для разных видов изображений.