Атрибут alt в HTML
Атрибут alt в HTML используется в документах HTML и XHTML. Он указывает альтернативный текст, который должен отображаться, если элемент не может быть показан по какой-либо причине. Атрибут alt также может использоваться программами чтения с экрана, чтобы позволить пользователям с нарушениями зрения взаимодействовать с веб-страницей. Для обеспечения доступности изображение должно иметь атрибут alt. Однако его можно оставить пустым (alt="") для декоративных изображений, где альтернативный текст не требуется.
Вы можете использовать атрибут alt для следующих элементов: <area>, <img>, <input>.
DANGER
Для элемента <img> обязательно использование атрибута alt. Для элементов <input> атрибут alt можно использовать только с <input type="image">.
Синтаксис
Синтаксис атрибута "alt"
<img alt="alternative text">
<area alt="alternative text">Пример использования атрибута HTML alt для элемента <area>:
Атрибут HTML alt
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Click on the logo or on one of the logo item to watch it closer:</p>
<img src="https://ru.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="block" usemap="#blockmap" />
<map name="blockmap">
<area shape="circle" coords="50,32,25" alt="html" href="https://ru.w3docs.com/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
<area shape="circle" coords="218,115,25" alt="css" href="https://ru.w3docs.com/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
<area shape="circle" coords="195,32,28" alt="php" href="https://ru.w3docs.com/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
<area class="homepage" shape="rect" coords="90,90,35,55" alt="php" href="https://www.w3docs.com/" />
</map>
</body>
</html>Пример использования атрибута HTML alt для элемента <img>:
Атрибут HTML alt
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<img src="https://ru.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Пример использования атрибута HTML alt для элемента <input>:
Пример использования атрибута HTML "alt" для элемента <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
vertical-align: middle;
}
</style>
</head>
<body>
<form action="/form/submit">
Email:
<input type="email" name="Email" />
<input type="image" src="https://i7.pngguru.com/preview/278/823/594/computer-icons-button-clip-art-green-submit-button-png.jpg" alt="Submit button" width="60" height="60" />
</form>
</body>
</html>Практика
Какова цель атрибута 'alt' в HTML?