Атрибут alt тега <img> — текстова заміна зображення
Атрибут alt вказує альтернативний текст для зображення, якщо зображення не може бути відображено.
HTML атрибут alt обов'язково повинен бути вказаний.
Атрибут alt додає альтернативну інформацію до зображення, якщо користувач з якихось причин не може його побачити (через повільне з'єднання, помилка в атрибуті src чи показ зображень вимкнено).
Також атрибут alt допомагає пошуковим системам визначити вміст зображення.
Загальний опис
автор: NagarD
- Порада
-
Щоб створити підказку для зображення, використовуйте атрибут title!
автор: с3с
Синтаксис
<img alt="text">Атрибут alt може отримувати єдине значення:
-
text -
Визначає альтернативний текст для зображення. Рекомендації для альтернативного тексту:
- Текст повинен описати зображення, якщо зображення містить інформацію.
- Текст повинен пояснити, куди направляє посилання, якщо зображення знаходиться всередині елемента
<a>. - Використовуйте alt = "", якщо зображення тільки для прикраси.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Що видно, коли зображення не завантажилось: перше має alt, друге — ні
HTML
<p>Файл на місці — <code>alt</code> не показується нікому, крім читалки екрана:</p>
<img width="200" height="90" alt="Синій прямокутник із написом 200x90"
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='90'%3E%3Crect width='200' height='90' fill='%230172ad'/%3E%3Ctext x='100' y='52' fill='%23fff' text-anchor='middle' font-family='sans-serif' font-size='18'%3E200x90%3C/text%3E%3C/svg%3E">
<p>Той самий блок, але файл не знайшовся — і місце зайняв текст із <code>alt</code>:</p>
<img src="ryukzak.png" width="200" height="90" alt="Синій рюкзак із бічною кишенею">
<p>А тут <code>alt</code> не написали взагалі — показувати нічого:</p>
<img src="ryukzak.png" width="200" height="90">CSS
img {
border: 1px dashed #b0b0b0;
background: #f6f6f6;
vertical-align: top;
}
p {
margin: 0 0 6px;
}
p + img {
margin-bottom: 18px;
}HTML
<div class="block1">
<p>Приклад коли вдалось завантажити зображення</p>
<img id="image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Альтернативний текст"/>
<div class = "text">
<br>
Марія Познанська
<br><br>
ВИПАВ СНІГ
<br><br>
Ой у лісі лист зів'яв! <br>
Білий сніг у лісі впав<br>
На дубочки молоденькі,<br>
На ялинки зелененькі.<br>
<br>
Притрусив сніг доріжки, <br>
Всі горбочки, моріжки. <br>
Біло-біло в лісі стало —<br>
Так багато снігу впало!<br>
</div>
</div>
<div class="block2">
<p> Приклад коли не вдалось завантажити зображення
</p>
<img id="image" src="data:image/png;base64,ZЗЛАМАНО" alt="Альтернативний текст"/>
<br>
Марія Познанська
<br><br>
ВИПАВ СНІГ
<br><br>
Ой у лісі лист зів'яв! <br>
Білий сніг у лісі впав<br>
На дубочки молоденькі,<br>
На ялинки зелененькі.<br>
<br>
Притрусив сніг доріжки, <br>
Всі горбочки, моріжки. <br>
Біло-біло в лісі стало —<br>
Так багато снігу впало!<br>
</div>CSS
*{
text-align:center;
}
.block1{
float:left;
border-right:1px solid;
}
.block2{
width:50%;
float:left;
}
img{
Width:50%;
}Різниця між HTML 4.01 та HTML5
Немає
Коментарі
Коментарів ще немає — будьте першим!