Kurs HTML - atrybuty alt i tittle

Atrybuty alt oraz title, często pomijane podczas tworzenia treści stron WWW, a tym czasem nadal cieszące sporym znaczeniem, w kontekście nie tylko pozycjonowania, ale także prezentacji treści oraz pomocy, np. osobom niewidomym korzystającym z czytników ekranu.

Czym są te dwa atrybuty?

Atrybut alt - pochodzi od słowa alternatywny i dotyczy tekstu. Stosowany najczęściej przy dodawaniu obrazów na stronie WWW. Użycie atrybutu alt, pozwala przeglądarce wyświetlić dodatkowy tekst, alternatywny, np. w sytuacji kiedy publikowany przez nas obraz jest niedostępny. Dzięki takiemu rozwiązaniu, zamiast pola/obrazu symbolizującego uszkodzony plik/brak dostępu, pojawia się komunikat tekstu. To jednak nie wszystko!

Przykład 1. Brak atrybutu alt.


Rozwiązanie to nie tylko zabezpiecza nas, przed ewentualnym ograniczeniem dostępu do zasobów, ale także rozwiązuje kwestie wolnych łącz i wczytywania obrazów. Coraz częściej możemy spotkać się z sytuacją, w której użytkownicy celowo wyłączają na urządzeniach mobilnych, wczytywanie obrazów. Użytkownik zawsze ma możliwość identyfikacji, co znajduje się w danym miejscu na stronie.

Przykład 2. Zastosowanie atrybutu alt.


Uwaga! Powyższy parametr ma nie tylko znaczenie dla stron WWW, ale także wiadomości e-mail. Tu także istnieje możliwość blokowania wyświetlanych obrazów, celem np. zmniejszenia transferu danych.

Atrybut alt jest także atrybutem odczytywanym przez wszelkiego rodzaju czytniki ekranów. Osoby niewidome, mogą dzięki jego zastosowaniu otrzymać informacje o umieszczonych obrazach.

Skoro mowa o czytnikach ekranu, to nie inaczej zachowują się także roboty wyszukiwarek. Sam obraz jest tylko plikiem, ale to atrybut alt definiuje robotom wyszukiwarek definicję pliku. Warto zawrzeć w nim np. słowa kluczowe opisujące dany obraz. Pamiętaj o tym przy pozycjonowaniu.

Oczywiście atrybut ten, można stosować zarówno w tekście jak i przy obrazie, jednak większe zastosowanie znajdzie zdecydowanie przy tym drugim.

Google także przygotowało na ten temat prezentację, zapraszamy do materiału video: kliknij tutaj

Atrybut title - stanowi dodatkową informację, test pomocniczy, nadawany wybranemu przez nas elementowi, np. fragmentowi tekstu, hiperłączu lub obrazowi. Nadaje mu tytuł. Wartość atrybutu wyświetlana jest zazwyczaj po najechaniu kursorem myszki na wybrany obszar w formie dymku/chmury. Jest atrybutem o dowolnym zastosowaniu.

Przykład 3. Zastosowanie atrybutu title w linku do zewnętrznej strony WWW.


Nie jest jednoznacznie potwierdzone, aby jego stosowanie miało jakikolwiek większy wpływ na pozycjonowanie. Warto pamiętać o jego uzupełnieniu, zwracając uwagę, aby umieszczone w nim informacje, składały się w logiczny tekst.

Atrybut title zaleca się używać wszędzie tam, gdzie umieszczamy linki lub obrazy bez podpisu, a także skróty i skrótowce, np. ASAP. Dzięki temu, po najechaniu kursorem myszy na link lub obraz, użytkownik otrzyma więcej informacji np. o przekierowaniu lub informacje o prezentowanej grafice, rozwinięciu skrótu.

Gdzie i kiedy stosować atrybuty alt i title?

Nie ma ograniczeń, ale jest wiele zaleceń. Przede wszystkim tam gdzie znajduje się dla nas ważny tekst, linkt lub obraz. Wszędzie tam, gdzie istnieje ryzyko, że obraz zostanie zablokowany przed wyświetleniem (urządzenia mobilne) oraz tam, gdzie liczy się dostępność strony, wiadomości e-mail dla każdego.

Jak stosować atrybut alt i title?

Przykład 4: Dodanie atrybutu alt do linku lub obrazu (patrz przykład 1 i 2).

alt="W tym miejscu powinno być zdjęcie kota w butach"

Atrybut alt wstawiamy w znaczniku, np.
<a href="https://pomoc.home.pl alt="pomoc linki">Kliknij tutaj</a>, aby przejść do dokumentacji.
<img src="http://pomoc.home.pl/kotek.jpg" alt="Tu powinien znajdować się kot w butach" />

Przykład 5. Dodanie atrybutu title do linku lub obrazu (patrz przykład 3).

title="To jest kot w butach. Kot jest w butach. Pije mleko."

<a href="https://pomoc.home.pl title="Kliknięcie w ten link, przekieruje Cie dalej.">Kliknij tutaj</a>, aby przejść do dokumentacji.
<img src="http://pomoc.home.pl/kotek.jpg" title="To jest kot w butach. Kot pije mleko." />

Jeśli chcesz dowiedzieć się więcej o edycji znaczników odsyłaczy (hiperłączy) przejdź do kursu: https://forum.home.pl/threads/kurs-html-odsylacze-do-stron-internetowych.99/