Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по 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>. Переходите к изучению таблиц.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
