[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"question-osnovy-html-obyazatelno-li-pisat-atribut-alt-v-tege-img":3},{"id":4,"slug":5,"topicId":6,"topicSlug":7,"topicName":8,"topicEmoji":9,"question":10,"answer":11,"codeLang":12,"codeSrc":12,"important":12,"commonMistakes":12,"modernUsage":12,"difficulty":13,"tags":14,"related":19,"progress":20,"seo":21},1247,"obyazatelno-li-pisat-atribut-alt-v-tege-img",39,"osnovy-html","Основы HTML","📄","Обязательно ли писать атрибут alt в теге img","Да, атрибут `alt` в теге `\u003Cimg>` обязателен по спецификации HTML. Он задаёт альтернативный текст, который отображается вместо изображения, когда оно недоступно, и озвучивается экранными читалками.\n\n### Зачем нужен alt\n\n- Доступность (accessibility): экранные читалки озвучивают `alt`-текст для незрячих пользователей\n- Отображение при отключённых изображениях или ошибке загрузки\n- SEO: поисковые системы используют `alt` для понимания содержимого изображения\n- Индексация в Google Images\n\n### Правила написания alt\n\n| Ситуация | Что писать | Пример |\n|----------|-----------|--------|\n| Информативное изображение | Описание содержимого | `alt=\"Диаграмма классов паттерна Observer\"` |\n| Декоративное изображение | Пустая строка | `alt=\"\"` |\n| Кнопка\u002Fссылка с изображением | Действие кнопки | `alt=\"Отправить форму\"` |\n| График\u002Fдиаграмма | Краткое описание данных | `alt=\"Рост продаж на 25% в Q3\"` |\n\n### Пример\n\n```html\n\u003C!-- Информативное -->\n\u003Cimg src=\"architecture.png\" alt=\"Микросервисная архитектура приложения\">\n\n\u003C!-- Декоративное (не несёт смысла) -->\n\u003Cimg src=\"divider.png\" alt=\"\">\n\n\u003C!-- Без alt — нарушение стандарта -->\n\u003Cimg src=\"photo.jpg\">  \u003C!-- Не делайте так! -->\n```\n\n### Валидация\n\nHTML-валидаторы (W3C Validator) и аудиты доступности (Lighthouse, axe) отмечают отсутствие `alt` как ошибку. В Thymeleaf `alt` задаётся аналогично:\n\n```html\n\u003Cimg th:src=\"@{\u002Fimages\u002Flogo.png}\" alt=\"Логотип компании\">\n```\n\n> **На собеседовании:** да, `alt` обязателен по спецификации. Он нужен для доступности (screen readers), SEO и отображения при ошибке загрузки. Для декоративных изображений используйте пустой `alt=\"\"`, а не отсутствие атрибута.","","junior",[15,16,17,18],"основы","html","атрибуты","frontend",[],null,{"title":22,"description":23,"ogTitle":24,"ogDescription":25,"keywords":26,"schemaAnswer":36,"featuredSnippetReady":37},"Обязательно ли писать атрибут alt в теге img — Gymterview","Атрибут alt в теге img: обязательность по спецификации, правила написания. Доступность, SEO, декоративные изображения. Валидация W3C и Lighthouse.","Атрибут alt в теге img: обязательность и правила — Gymterview","Атрибут alt обязателен по спецификации HTML. Нужен для доступности, SEO и отображения при ошибке загрузки. Для декоративных — alt=''.",[27,28,29,30,31,32,33,34,35],"alt","img","атрибут alt","accessibility","доступность","SEO","декоративное изображение","alt пустой","собеседование","Да, атрибут alt обязателен по спецификации HTML. Он задаёт альтернативный текст для доступности (screen readers), SEO (индексация изображений) и отображения при ошибке загрузки. Для информативных изображений — описание содержимого, для декоративных — пустая строка alt=''.",true]