Алтернативен текст и надпис за изображения с HTML
Понякога изображенията, които сте вмъкнали в уеб страници, може да не се показват.
Причината за това може да е:
2) Потребителите могат да преглеждат вашия сайт на по-стари мобилни устройства.
4) Посочили сте грешен път към изображението.
Във всички тези случаи изображението няма да се покаже на уеб страницата.
Какво трябва да показва браузърът вместо това?
Може да не извеждате нищо. В този случай на мястото на изображението ще се покаже празно място. Но в HTML е възможно да се покаже алтернативен текст вместо празно пространство, което ще се покаже, ако не е възможно да се покаже самото изображение.
Атрибутът, който отговаря за създаването на такъв алтернативен текст, се нарича:
Ето пример за използването му:
Описанието на изображението с атрибута alt ще изглежда така (всичко ще зависи от конкретния браузър):
Има и друг проблем, който може да възникне при работа с изображения. Понякога трябва да добавите обяснителни надписи за някои от тях, по които да разберете какво представляват.
Обикновено тези етикети се появяват, когато потребителят задържи курсора на мишката върху изображенията, които го интересуват. Изглежда така:
Можете да създадете такъв надпис, като използвате атрибута за етикета img, който се нарича:
Този атрибут указва описанието на изображението, което ще се появи при задържане на курсора на мишката върху него.
Нека вземем пример и да видим как това може да работи на практика.
Задръжте курсора на мишката върху изображението в следния пример.
Обикновено търсачките използват стойността на атрибута title, за да индексиратизображения и да ги показват в резултатите от търсенето в техните секции „Картини“.
Следователно можете да използвате този атрибут, за да можете да класирате в резултатите от търсенето на изображения. Но не прекалявайте и добавете заглавие към всички снимки на вашия сайт. Всичко трябва да е умерено и за това търсачките могат да понижат позицията на вашия сайт в резултатите от търсенето. Познавам човек, който имаше подобно преживяване.
Това е всичко. 2 атрибута, които ви позволяват да добавите описание и алтернативен текст към вашите изображения:
Запомнете ги и ги използвайте, когато е необходимо.
Автор:Дмитрий Ченгаев
Споделям опита си в уеб разработката, за да можете да реализирате вашите идеи и проекти.