Привет друзья!!! В прошлом уроке мы изучали атрибут src тега img. Как вы помните, в нем мы указывали имя (путь) к источнику картинки. Картинка может лежать в папке или находится на стороннем ресурсе. Но, если вы были внимательны, то вспомните ещё один атрибут тега img - это атрибут alt.
Всё же я немного напомню, что атрибут alt - это alternative text (альтернативный текст, который используется в теге <img> для обеспечения следующего функционала:
✅ 1. Описание изображения для пользователей
Если изображение не может быть загружено (например, из-за ошибки сети или неправильной ссылки), текст из alt будет отображён вместо картинки. Это помогает понять, что должно было быть на изображении.
Пример:
<img src="cat.png" alt="Котёнок сидит на подоконнике"> (то есть src не может дать нам информации о содержании самой картинки, а alt может, конечно, при условии, что он был корректно заполнен разработчиком)
✅ 2. Обеспечение доступности для людей с ограниченными возможностями
Программы "Экранные читалки" для людей с нарушениями зрения используют alt, чтобы озвучить, что изображено на картинке. Это важный аспект доступности веб-контента.
✅ 3. SEO (поисковая оптимизация)
Поисковые системы используют alt для понимания содержания изображений. Это может улучшить видимость страницы в поиске по картинкам.
❗ НО! Есть случаи, когда НЕ стоит использовать атрибут alt:
Если изображение декоративное и не несёт смысловой нагрузки (например, иконка стрелки), можно оставить alt="", чтобы читалки его проигнорировали.
Давайте добавим в наш код атрибут alt и заполним его значение. Пример полного кода файла index.html приведен ниже:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
</head>
<body>
<main>
<h1>Приложение "Котята"</h1>
<h2>Фото котят</h2>
<!-- TODO: Фото берем по этой ссылке D:\Cats foto\ -->
<p>Все любят милых маленьких котят!</p>
<img src="Cats_Image_1.png" alt="Котёнок с зелеными глазами смотрит на вас">
</main>
</body>
</html>
Давайте сохраним файл и откроем его. Вроде бы визуально ничего не изменилось, и это действительно так, но, мы можем симулировать ситуацию, когда наше изображение недоступно. К примеру, сделаем специально ошибку в его имени, давайте поправим строку кода с тегом <img> так:
<img src="Cats_Image_111.png" alt="Котёнок с зелеными глазами смотрит на вас">
Сохраняем наш файл index.html и переоткрываем в браузере. И что мы там видим?
Таким образом мы видим слова вместо картинки, а если быть точными, то браузер показывает нам именно содержание атрибута alt, который соответствует неотображаемой картинке. Как вы поняли, что неотображаемой она стала после того, как мы специально в коде сменили её имя (путь к ней) на несуществующее значение.