Альтернативний текст та підпис для зображень за допомогою HTML
Іноді зображення, які ви вставили на веб-сторінки, можуть не відображатися.
Причиною цього можуть бути:
2) Користувачі можуть переглядати ваш сайт на старих мобільних пристроях.
4) Ви вказали помилковий шлях до зображення.
У всіх цих випадках зображення не відображатиметься на веб-сторінці.
Що тоді замість нього виводити браузеру?
Можна взагалі нічого не виводити. У цьому випадку на місці зображення буде відображено порожній простір. Але, в HTML є можливість замість порожнього простору показувати альтернативний текст, який буде виводитися, якщо неможливо відобразити саме зображення.
Атрибут, який відповідає за створення такого альтернативного тексту, називається:
Ось приклад його використання:
Вигляд опису зображення з атрибутом alt буде приблизно ось так (все залежатиме від конкретного браузера):
Є ще одна проблема, з якою можна зіткнутися під час роботи із зображеннями. Іноді потрібно для деяких з них додати написи, що пояснюють, за якими можна зрозуміти, що вони собою являють.
Зазвичай ці написи з'являються, коли користувач наводить курсор миші на зображення, що їх цікавлять. Виглядає це так:
Створити такий напис можна за допомогою атрибуту для тега img, який називається:
Цей атрибут визначає опис зображення, яке з'являтиметься при наведенні на нього курсора миші.
Давайте розглянемо приклад і подивимося, як це може працювати практично.
Наведіть зображення в наступному прикладі курсор миші.
Як правило, пошукові системи використовують значення атрибуту title для того, щоб індексуватизображення та видавати їх у результатах пошуку у своїх розділах "Малюнки".
Тому ви можете використовувати цей атрибут, щоб мати можливість просуватися в результатах пошуку в картинках. Але не варто занадто переборщувати і всім картинкам на вашому сайті додавати title. Все має бути в міру, і за це пошукові системи можуть знизити позиції вашого сайту у видачі. Знаю одного хлопця, який мав подібний досвід.
На цьому все. 2 атрибути, які дозволяють додавати опис та альтернативний текст вашим зображенням:
Запам'ятайте їх та використовуйте там, де це необхідно.
Автор:Дмитро Ченгаєв
Ділюсь своїм досвідом у веб-розробці, щоб ви реалізували свої ідеї та проекти.