{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет друзья!!! В прошлом уроке мы изучали атрибут src тега img. Как вы помните, в нем мы указывали имя (путь) к источнику картинки. Картинка может лежать в папке или находится на стороннем ресурсе. Но, если вы были внимательны, то вспомните ещё один атрибут тега img - это атрибут alt.","type":"unstyled","key":"fkhhl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всё же я немного напомню, что атрибут alt - это alternative text (альтернативный текст, который используется в теге для обеспечения следующего функционала:","type":"unstyled","key":"ejogc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ 1. Описание изображения для пользователей","type":"unstyled","key":"48fk9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если изображение не может быть загружено (например, из-за ошибки сети или неправильной ссылки), текст из alt будет отображён вместо картинки. Это помогает понять, что должно было быть на изображении.","type":"unstyled","key":"djl78"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример:","type":"unstyled","key":"ec1ti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"Котёнок$ (то есть src не может дать нам информации о содержании самой картинки, а alt может, конечно, при условии, что он был корректно заполнен разработчиком)","type":"unstyled","key":"cppap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ 2. Обеспечение доступности для людей с ограниченными возможностями","type":"unstyled","key":"8ikk5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Программы \"Экранные читалки\" для людей с нарушениями зрения используют alt, чтобы озвучить, что изображено на картинке. Это важный аспект доступности веб-контента.","type":"unstyled","key":"bjtmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"✅ 3. SEO (поисковая оптимизация)","type":"unstyled","key":"d763j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поисковые системы используют alt для понимания содержания изображений. Это может улучшить видимость страницы в поиске по картинкам.","type":"unstyled","key":"30h48"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"❗ НО! Есть случаи, когда НЕ стоит использовать атрибут alt:","type":"unstyled","key":"6jgev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если изображение декоративное и не несёт смысловой нагрузки (например, иконка стрелки), можно оставить alt=\"\", чтобы читалки его проигнорировали.","type":"unstyled","key":"cn0q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте добавим в наш код атрибут alt и заполним его значение. Пример полного кода файла index.html приведен ниже:","type":"unstyled","key":"4mtus"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6a1dg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"ff3il"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"4414u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6llbr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"8ah8h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"findm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"bqpvl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Приложение \"Котята\"

","type":"blockquote","key":"811nv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Фото котят

","type":"blockquote","key":"a8tqf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"2u47k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

Все любят милых маленьких котят!

","type":"blockquote","key":"99sea"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"Котёнок$ ","type":"blockquote","key":"6a6i7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"80sbm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"efmlo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"hbmg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Давайте сохраним файл и откроем его. Вроде бы визуально ничего не изменилось, и это действительно так, но, мы можем симулировать ситуацию, когда наше изображение недоступно. К примеру, сделаем специально ошибку в его имени, давайте поправим строку кода с тегом так:","type":"unstyled","key":"4li0q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" $\"Котёнок$ ","type":"unstyled","key":"c01rh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сохраняем наш файл index.html и переоткрываем в браузере. И что мы там видим?","type":"unstyled","key":"c4kmn"},{"data":{"image":{"id":"68208f6af7867f188650cdeb"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа веб-страницы, когда изображение недоступно","type":"atomic:image","key":"e2a78"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1v28m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таким образом мы видим слова вместо картинки, а если быть точными, то браузер показывает нам именно содержание атрибута alt, который соответствует неотображаемой картинке. Как вы поняли, что неотображаемой она стала после того, как мы специально в коде сменили её имя (путь к ней) на несуществующее значение.","type":"unstyled","key":"8k04b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"wDEB3IVJzHvX92xsvJeM"}],"entityMap":{}},"mentions":[]}