Czy poprawne jest użycie tagu alt dla linku do zakotwiczenia?

124

Czy poprawne jest użycie tagu alt dla linku do kotwicy, na przykład

<a href="#" class="test" alt="Something" src="sfasfs" ></a>
user2067736
źródło

Odpowiedzi:

130

Na takie rzeczy najlepiej odpowiedzieć patrząc na oficjalną specyfikację:

  1. przejdź do specyfikacji: https://www.w3.org/TR/html5/

  2. wyszukaj „ aelement”: https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element

  3. zaznacz „Atrybuty treści”, które zawiera listę wszystkich dozwolonych atrybutów aelementu:

    • Atrybuty globalne
    • href
    • target
    • download
    • rel
    • hreflang
    • type
  4. sprawdź link „Atrybuty globalne”: https://www.w3.org/TR/html5/dom.html#global-attributes

Jak zobaczysz, altatrybut nie jest dozwolony w aelemencie.
Można również zauważyć, że srcatrybut też nie jest dozwolony.

Po zweryfikowaniu kodu HTML zostaną Ci zgłoszone takie błędy.


Zauważ, że powyższe dotyczy HTML5 , który jest standardem HTML W3C od 2014 roku . W 2016 roku HTML 5.1 stał się kolejnym standardem HTML . Znajdowanie dozwolonych atrybutów działa w ten sam sposób. Zobaczysz, że aelement może mieć inny atrybut w HTML 5.1: rev.

Możesz znaleźć wszystkie specyfikacje HTML (w tym najnowszy standard) w aktualnym stanie HTML W3C .

unor
źródło
2
Nie widzę titleatrybutu w atrybutach aglobalnych. Czy używanie takiego titleatrybutu w atrybucie jest słuszne, aczy nie?
Yousef Altaf
1
@YousefAltaf: Na której stronie patrzysz? Połączony, atrybuty globalne , listy title.
unor
Rozumiem, więc jest wymieniony w atrybutach globalnych, ale czy wpływa na jakość strony, jeśli go używam, czy nie?
Yousef Altaf
@YousefAltaf: To inna kwestia, której lepiej nie omawiać tutaj. Zapoznaj się z jego definicją . Jeśli nadal masz pytania na ten temat, możesz utworzyć osobne pytanie (ale lepiej przeszukaj wcześniej, jeśli nie zostało jeszcze zadane).
unor
4
Odpowiedź oznaczona zakładką „Jak wyszukać atrybuty HTML”. Dzięki.
Codebling
59

W przypadku kotwic powinieneś zamiast tego użyć tytułu. alt nie jest prawidłowym atrybutem pliku. Zobacz http://w3schools.com/tags/tag_a.asp

Tom jest
źródło
@FabioPoloni Dzięki, spodziewałem się, że każdy może znaleźć link poniżej na stronie :-)
tomis
Myślałem, że jak ktoś nie wie zbyt wiele na ten temat, to by go nie znalazł ;-)
Fabio Poloni
8
Ta informacja jest poprawna w w3schools, ale w3schools nie jest oficjalna i nie jest wiarygodna, patrz w3fools.com
Jukka K. Korpela.
thx Guys ... poza tym moja potrzeba była oparta wyłącznie na standardach dostępności, jak również na zanegowaniu narzutu wydajności. Użyłem obrazu spiralnego, jednocześnie chciałem nadać atrybut alt, którego nie można zrobić przy użyciu obrazów tła. Zamiast tego mam obejście, które pomogło ...
user2067736
1
Przy okazji "tytuł" nie występuje już w w3schools. Możesz jednak użyć tytułu, ponieważ jest to atrybut globalny: w3.org/TR/html5/dom.html#global-attributes
rosell.dk
28

„tytuł” ​​jest szeroko stosowany w przeglądarkach. Próbować:

<a href="#" title="hello">asf</a>
Pablo Pazos
źródło
3
Tak powinna wyglądać odpowiedź zamiast 10-minutowej odpowiedzi powyżej. Ale ta odpowiedź powinna mieć również link: w3schools.com/tags/att_global_title.asp
mikael1000
Zgadzam się, że powyższe nie odpowiada na pytanie, jednak według niego titlejest niepoprawne zgodnie ze specyfikacją HTML5 (mimo że większość przeglądarek to zaimplementuje).
felwithe
6

Nie, altatrybut (byłby to atrybut, a nie znacznik) nie jest dozwolony dla aelementu w żadnej specyfikacji HTML ani wersji roboczej. I wydaje się, że żadna przeglądarka nie rozpoznaje tego jako mającego jakiekolwiek znaczenie.

To trochę tajemnicze, dlaczego ludzie próbują go używać, ale prawdopodobnym wyjaśnieniem jest to, że robią to analogicznie z altatrybutem imgelementów, spodziewając się, że po najechaniu kursorem myszy zobaczysz „podpowiedź”. Są w tym dwie rzeczy. Po pierwsze, każdy element ma swoje własne atrybuty, zdefiniowane w specyfikacjach każdego elementu. Po drugie, renderowanie altatrybutów „podpowiedzi” w niektórych starożytnych przeglądarkach jest / było dziwactwem lub nawet błędem, a nie czymś, czego można się spodziewać; altatrybut ma być prezentowane użytkownikowi wtedy i tylko wtedy, gdy sam obraz nie jest prezentowany, niezależnie od przyczyny.

Aby utworzyć „podpowiedź”, użyj titleatrybutu lub, znacznie lepiej, Google dla "podpowiedzi CSS" i użyj podpowiedzi CSS według własnych preferencji (można je scharakteryzować jako ukryte "warstwy", które stają się widoczne po najechaniu kursorem myszy).

Jukka K. Korpela
źródło
Jak używać linków utworzonych programowo za pomocą podpowiedzi opartych na CSS?
Salvador Valencia,
6

Powinieneś użyć atrybutu title dla tagów kotwicy, jeśli chcesz zastosować informacje opisowe, podobnie jak w przypadku atrybutu alt. Atrybut tytułu jest prawidłowy w tagach kotwicy i nie służy wyłącznie do dostarczania informacji o połączonej stronie.

W3C zaleca, aby wartość atrybutu tytułu odpowiadała wartości tytułu powiązanego dokumentu, ale nie jest to obowiązkowe.

http://www.w3.org/MarkUp/1995-archive/Elements/A.html


Alternatywnie, i prawdopodobnie będzie to bardziej korzystne, możesz użyć atrybutu dostępności ARIA aria-label(nie mylić z aria-labeledby). aria-labelpełni tę samą funkcję, co atrybut alt dla obrazów, ale dla elementów niebędących obrazami i zawiera pewną miarę optymalizacji od czasu optymalizacji pod kątem czytników ekranu.

http://www.w3.org/WAI/GL/wiki/Using_aria-label_to_provide_labels_for_objects


Jeśli jednak chcesz opisać tag kotwicy, zwykle dobrze jest użyć tagu rel lub rev, ale ograniczając się do określonych wartości, nie należy ich używać w opisach czytelnych dla człowieka.

Rel służy do opisu relacji strony, do której prowadzi łącze, z bieżącą stroną. (np. jeśli połączona strona jest następna w serii logicznej, będzie to rel = next)

Atrybut rev jest zasadniczo odwrotną zależnością atrybutu rel. Wersja Rev opisuje związek bieżącej strony ze stroną, do której prowadzi łącze.

Listę prawidłowych wartości można znaleźć tutaj: http://microformats.org/wiki/existing-rel-values

davidcondrey
źródło
5

Użyłem tytułu i zadziałało!

Atrybut tytułu podaje tytuł łącza. Z jednym wyjątkiem ma charakter czysto doradczy. Wartość to tekst. Wyjątkiem są łącza arkuszy stylów, gdzie atrybut tytułu definiuje alternatywne zestawy arkuszy stylów.

<a class="navbar-brand" href="http://www.alberghierocastelnuovocilento.gov.it/sito/index.php" title="sito dell'Istituto Ancel Keys">A.K.</a>
Giovanni G. PY
źródło
1

Jestem zaskoczony, widząc wszystkie odpowiedzi stwierdzające, że użycie altatrybutu w atagu jest nieprawidłowe . To jest całkowicie błędne.

Html nie blokuje używania żadnych atrybutów:

<a your-custom-attribute="value">Any attribute can be used</a>

Jeśli zapytasz, czy użycie altatrybutu w jest poprawne semantycznie, apowiem:

NIE. Służy do ustawienia opisu obrazu <img alt="image description" />.

To kwestia tego, co zrobisz z atrybutami. Oto przykład:

a::after {
  content: attr(color); /* attr can be used as content */
  display: block;
  color: white;
  background-color: blue;
  background-color: attr(color); /* This won't work */
  display: none;
}
a:hover::after {
  display: block;
}
[hidden] {
  display: none;
}
<a href="#" color="red">Hover me!</a>
<a href="#" color="red" hidden>In some cases, it can be used to hide it!</a>

Ponownie, jeśli zapytasz, czy użycie atrybutu niestandardowego jest semantycznie poprawne, powiem:

Nie. Używaj data-*atrybutów do celów semantycznych.


Ups, pytanie zadano w 2013 roku.

Bhojendra Rauniyar
źródło