В печатных изданиях изображения часто сопровождались подписью. В HTML4 не было способа семантически разметить HTML, чтобы сохранить связь между изображением и такого типа подписи. В HTML5 нам дали такую возможность, введя элементы <figure> и <figcaption>.
Давайте для начала определимся с терминами.
alt: альтернативное описания изображения.<figcaption>: заголовок или сводка для содержимого<figure>. Если у<figure>нет дочернего<figcaption>, то нет и заголовка.
Содержимым у <figure> может быть изображение или что угодно ещё, например, таблица или список. В<figcaption> можно указать описательную метку для фрагмента контента: таблицы, фрагмента кода, списка, цитаты, текста и изображения, но это описание не является жизненно важным для его понимания.
<figcaption>необязательный и может отсутствовать.<figcaption>может идти до или после содержимого.<figcaption>может быть всего лишь один у<figure>, но при этом содержимое у<figure>может иметь несколько элементов.<figcaption>не должен описывать изображение и не должен использоваться вместо альтернативного текста.
Пример из спецификации:
<figure>
<img src="castle1423.jpeg" alt="The castle has one tower, and a tall wall around it.">
<img src="castle1858.jpeg" alt="The castle now has two towers and two walls.">
<img src="castle1999.jpeg" alt="The castle lies in ruins, the original tower all that remains in one piece.">
<figcaption>The castle through the ages: 1423, 1858, and 1999 respectively.</figcaption>
</figure>Какими должны быть alt и figcaption для этой картинки с попугаями?
Плохой пример
<figure>
<img src="popug.jpg" width="400" height="200" alt="">
<figcaption>Разноцветный попугай сидит с друзьями на веточке.</figcaption>
</figure>Правильный пример
<img src="popug.jpg" width="400" height="200" alt="Разноцветный попугай сидит с друзьями на веточке.">Есть и более подходящий правильный пример:
<figure>
<img src="sinica-v-rukah.jpg" width="400" height="200" alt="Большая синица.">
<img src="popug.jpg" width="400" height="200" alt="Варакушка.">
<img src="popug.jpg" width="400" height="200" alt="Голубая сорока.">
<figcaption>Птицы России</figcaption>
</figure>Итог
Используйте
altдля функционального описания, такого, которое точно объясняет, что находится на изображении.Используйте в
<figcaption>редакционное или иллюстративное описание. Такое описание передаёт информацию о том, почему изображение используется. Это добавляет контекст для содержимого страницы.
Как понять, что такое функциональное описание, а что редакционное? Посмотрим на пример:
Функциональное описание (alt): мужчина смотрит в монитор и пытается понять, что происходит.
Редакционное: Николай Шабалин, автор профессиональных HTML-курсов в HTML Academy в процессе создания нового курса "HTML и CSS. Профессиональная вёрстка сайтов".
<figure>
<img src="author.jpg" width="400" height="200" alt="Мужчина смотрит в монитор и пытается понять, что происходит.">
<figcaption>Николай Шабалин, автор профессиональных HTML-курсов в HTML Academy в процессе создания нового курса "HTML и CSS. Профессиональная вёрстка сайтов".</figcaption>
</figure>