junior

Обязательно ли писать атрибут alt в теге img

Да, атрибут alt в теге <img> обязателен по спецификации HTML. Он задаёт альтернативный текст, который отображается вместо изображения, когда оно недоступно, и озвучивается экранными читалками.

Зачем нужен alt

Доступность (accessibility): экранные читалки озвучивают alt-текст для незрячих пользователей
Отображение при отключённых изображениях или ошибке загрузки
SEO: поисковые системы используют alt для понимания содержимого изображения
Индексация в Google Images

Правила написания alt

Ситуация	Что писать	Пример
Информативное изображение	Описание содержимого	`alt="Диаграмма классов паттерна Observer"`
Декоративное изображение	Пустая строка	`alt=""`
Кнопка/ссылка с изображением	Действие кнопки	`alt="Отправить форму"`
График/диаграмма	Краткое описание данных	`alt="Рост продаж на 25% в Q3"`

Пример

<!-- Информативное -->
<img src="architecture.png" alt="Микросервисная архитектура приложения">

<!-- Декоративное (не несёт смысла) -->
<img src="divider.png" alt="">

<!-- Без alt — нарушение стандарта -->
<img src="photo.jpg">  <!-- Не делайте так! -->

Валидация

HTML-валидаторы (W3C Validator) и аудиты доступности (Lighthouse, axe) отмечают отсутствие alt как ошибку. В Thymeleaf alt задаётся аналогично:

Пример

<img th:src="@{/images/logo.png}" alt="Логотип компании">

На собеседовании: да, alt обязателен по спецификации. Он нужен для доступности (screen readers), SEO и отображения при ошибке загрузки. Для декоративных изображений используйте пустой alt="", а не отсутствие атрибута.

#основы #html #атрибуты #frontend