Atrybut alt znacznika HTML <img>

Definicja i użycie

alt Atrybut jest atrybutem obowiązkowym, który określa tekst zastępczy, który jest wyświetlany, gdy obraz nie może być wyświetlony.

Jeśli użytkownik nie może zobaczyć obrazu z powodu następujących przyczyn, atrybut alt może dostarczyć alternatywnej informacji dla obrazu:

  • Prędkość połączenia jest zbyt wolna
  • Błąd w atrybucie src
  • Przeglądarka wyłączyła obrazy
  • Użytkownik używa czytnika ekranowego

Atrybut alt znacznika <img> określa tekst zastępczy, który jest wyświetlany w przeglądarce zamiast obrazu, gdy obraz nie może być wyświetlony lub gdy użytkownik wyłączył wyświetlanie obrazów.

Polecamy, abyście używali tej atrybutu dla każdej obrazu w dokumencie. W ten sposób, nawet jeśli obraz nie może być wyświetlony, użytkownik może zobaczyć jakie informacje stracił. Ponadto, dla osób niepełnosprawnych, atrybut alt通常是 jedynym sposobem, aby zrozumieć zawartość obrazu.

Podpowiedź:Jeśli chcesz utworzyć podpowiedź dla obrazu, użyj Atrybut title!

Podpowiedzi i komentarze

Komentarz:alt Wartość atrybutu to ciąg znaków, który może zawierać maksymalnie 1024 znaków, w tym spacje i znaki interpunkcyjne. Ten ciąg znaków musi być zawarty w cudzysłowie. Tekst alt może zawierać odniesienia do specjalnych znaków, ale nie pozwala na zawieranie innych kategorii znaczników, zwłaszcza nie pozwala na style znaczników.

Komentarz:Gdy użytkownik przeniesie mysz nad element img, Internet Explorer wyświetli wartość atrybutu alt. To zachowanie nie jest poprawne. Wszystkie inne przeglądarki zbliżają się do normy, wyświetlając tekst zastępczy tylko w przypadku, gdy obraz nie może być wyświetlony.

Podpowiedź:Jeśli chcesz utworzyć podpowiedź dla obrazu, użyj Atrybut title

Przykład

Przykład 1

<img src="/i/eg_tulip.jpg" alt="Shanghai Flower Port - Tulip" />

Spróbuj sam

Jeśli obraz nie może być wyświetlony, przeglądarka wyświetli tekst zastępczy, tak jak tutaj:

Szklarnia Kwiatów Szanghaj - Tulipany

Ponadto, gdy użytkownik przeniesie mysz nad obrazem, najnowsze przeglądarki wyświetlają opisujący tekst w polu tekstowym. Poniższy kod dodaje opisujący tekst do atrybutu alt obrazu:

Przenieś mysz nad poniższe zdjęcie, aby zobaczyć odpowiedni efekt:

Szklarnia Kwiatów Szanghaj - Tulipany

Tekst w czerwonym okręgu jest efektem, który jest wyświetlany, gdy użytkownik przeniesie mysz nad obrazem w przeglądarce IE7:

Szklarnia Kwiatów Szanghaj - Tulipany

Przykład 2

Zdefiniowano obraz z alternatywnym tekstem:

<img src="img_girl.jpg" alt="Dziewczyna w kurtce" width="500" height="600">

Spróbuj sam

Gramatyka

<img alt="text">

Wartość atrybutu

Wartość Opis
text

Określa alternatywny tekst obrazu.

Zasady użycia tekstu alt:

  • Jeśli obraz zawiera informacje - użyj opisu alt dla obrazu
  • Jeśli obraz znajduje się w elemencie a - użyj opisu alt dla celu linku
  • Jeśli obraz jest wyłącznie ozdobny - użyj alt=""

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie