43. Альтернативный текст и группировка элементов тегом figure в HTML

В предыдущем уроке познакомились с атрибутами height, width и border, которые за пределами этого курса вы вряд ли будете использовать. В этом уроке изучим повсеместно используемый атрибут alt. Заодно научимся группировать изображения и подписи к ним с помощью тегов <figure> и <figcaption>.

Альтернативный текст для изображений. Атрибут alt

Атрибут alt добавляет альтернативный текст изображения. Например, если пользователь отключил загрузку изображений, то ему будет показан альтернативный текст. Далее пример:

<img src = "/img/site/logo.png" alt = "Логотип сайта Codebra"> 

Изображение может не загрузиться из-за медленного соединения или неправильного пути до него (например, если изображение было удалено с ресурса). В таком случае пользователь увидит следующее:

Альтернативный текст, как и весь контент на сайте, должен быть тщательно выверен:

• Описание должно быть кратким и в тоже время отвечать на вопрос «Что изображено на картинке?»
• Описание не должно повторять окружающий текст. Если текст статьи описывает изображение, то нет смысла еще раз упоминать это в атрибуте alt.

Подводя итог, всегда пишите альтернативный текст для изображений с помощью атрибута alt.

Группировка медиаконтента и подписей к нему (тег <figure>)

С помощью тега <figure> можно группировать изображения, видео, аудио с их подписями. Подпись должна быть помещена в тег <figcaption>. На примере будет понятнее:

<figure>
    <img src = "/img/site/logo.png" alt = "Логотип сайта Codebra">
    <figcaption>Логотип сайта Codebra</figcaption>
</figure> 

Обратите внимание, тег <figcaption> должен быть первым или последним в контейнере <figure>. Так же тег <figcaption> не заменяет атрибут alt, поэтому мы по-прежнему используем последний.

Тег <figure> полезно использовать для улучшения поисковой оптимизации (SEO). А еще тег <figure> помогает скринридерам более точно разделять контент страницы и описание изображений.

В этом уроке мы познакомились с обязательным атрибутом alt и выяснили преимущества использования тегов <figure> и <figcaption>. Проходите тест по разделу «Изображения в HTML» и переходите к изучению таблиц.

Похожие уроки Codebra

1. Для изображения, которое вам дано, напишите любой альтернативный текст

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.