Czy można używać <a> (znacznik kotwicy) bez atrybutu href?

152

Używałem Twittera Bootstrap do budowy witryny, a wiele z jego funkcji zależy od zawijania elementów <a>, nawet jeśli mają one po prostu wykonywać JavaScript. Miałem problemy z href="#"taktyką zalecaną w dokumentacji Bootstrap, więc próbowałem znaleźć inne rozwiązanie.

Ale potem spróbowałem po prostu hrefcałkowicie usunąć atrybut. Używałem <a class='bunch of classes' data-whatever='data'>i resztą zajmie się Javascript. I to działa.

Jednak coś mi mówi, że nie powinienem tego robić. Dobrze? Mam na myśli, technicznie <a>ma to być link do czegoś, ale nie jestem do końca pewien, dlaczego jest to problem. Albo to jest?

Zacqary
źródło

Odpowiedzi:

245

Element <a>nchor jest po prostu kotwicą do lub z jakiejś treści. Oryginalnie specyfikacja HTML dopuszczalna dla nazwanych kotwic ( <a name="foo">) i połączonych kotwic ( <a href="#foo">).

Nazwany format kotwicy jest rzadziej używany, ponieważ identyfikator fragmentu jest teraz używany do określenia [id]atrybutu (chociaż w celu zapewnienia zgodności wstecznej nadal można określić [name]atrybuty). Elementem bez atrybutu jest nadal ważna .<a>[href]

Jeśli chodzi o semantykę i stylizację, <a>element nie jest linkiem ( :link), chyba że ma [href]atrybut. Efektem ubocznym jest to, że <a>element bez tego elementu [href]domyślnie nie będzie w kolejności tabulacji.

Prawdziwe pytanie brzmi, czy <a>sam element jest odpowiednią reprezentacją a <button>. Na poziomie semantycznym istnieje wyraźna różnica między a linki a button.

Przycisk to coś, co po kliknięciu powoduje wykonanie akcji.

Łącze to przycisk, który powoduje zmianę nawigacji w bieżącym dokumencie. Nawigacja, która ma miejsce, może polegać na poruszaniu się w dokumencie w przypadku identyfikatorów fragmentów ( #foo) lub przechodzeniu do nowego dokumentu w przypadku adresów URL ( /bar).

Ponieważ łącza są specjalnym typem przycisków, często ich działania były zastępowane, aby wykonywać alternatywne funkcje. Dalsze używanie kotwicy jako przycisku jest w porządku z punktu widzenia spójności, chociaż nie jest całkiem dokładne semantycznie.

Jeśli obawiasz się semantyki i dostępności używania <a>elementu (lub <span>, lub <div>) jako przycisku, powinieneś dodać następujące atrybuty:

<a role="button" tabindex="0" ...>...</a>

Rola przycisku informuje użytkownika, że dany element jest traktowany jako przycisk jako nadpisania niezależnie semantyka elementu bazowego może mieli.

Dla <span>i <div>elementy, może chcesz dodać słuchaczy kluczowych JavaScript Spacelub Enteraby wywołać clickzdarzenia. <a href>a <button>elementy robią to domyślnie, ale elementy niebędące przyciskami nie. Czasami bardziej sensowne jest powiązanie clickspustu z innym klawiszem. Na przykład przycisk „Pomoc” w aplikacji internetowej może być powiązany z F1.

zzzzBov
źródło
1
@Zacqary, [role="button"]nie robi nic konkretnego, nadal musisz nasłuchiwać zdarzenia kliknięcia (ale i tak zrobiłbyś to, aby utworzyć przycisk JS). Ma być używany do wspomaganej nawigacji (tzw. Czytników ekranu), aby czytnik ekranu wiedział, że reprezentuje element jako przycisk, a nie jego oryginalną wartość semantyczną. Dodanie [tabindex]dodaje element do kolejności tabulacji. W szczególnych okolicznościach możesz nie chcieć / potrzebować przycisku, po którym można nawigować w kolejności tabulacji, więc jest to atrybut opcjonalny. Elementy, które są już przyciskami, nie potrzebują, [role="button"]ponieważ są zbędne.
zzzzBov
Czy prawidłowy HTML ma tag kotwicy bez href i bez nazwy? W naszej aplikacji mamy kilka linków do usuwania, które są wyłączone (stąd brak atrybutu href), ale nadal widoczne dla użytkownika.
Joshua Muheim
1
@JoshuaMuheim, mam nadzieję, że nie masz nic przeciwko, ale opublikowałem Twoje pytanie jako oddzielne, samodzielne pytanie .
zzzzBov
Chciałem tylko dodać uwagę, że jeśli używasz tego do tworzenia „przycisków” dla akcji javascript ... całkowite usunięcie atrybutu href spowoduje również, że Chrome (i prawdopodobnie inne przeglądarki) przestanie zmieniać kursor po najechaniu myszą. Oczywiście łatwo jest to dodać z powrotem za pomocą CSS - ale tylko głowa do góry.
Mir
@Mir, jeśli nie zamierzasz używać [href], prawdopodobnie powinieneś użyć <span>przycisku jako przycisku.
zzzzBov
45

Myślę, że możesz znaleźć odpowiedź tutaj: Czy tag kotwicy bez atrybutu href jest bezpieczny?

Również jeśli nie chcesz wykonywać operacji linkowania z href, możesz go użyć w następujący sposób:

<a href="javascript:void(0);">something</a>
swati
źródło
3
Powinien byćjavascript:undefined
rybo111
2
@ rybo111 masz rację, ale ja nadal wolę void (0); po prostu dlatego, że wygląda lepiej. Nie podoba mi się, że moi klienci postrzegają rzeczy jako „nieokreślone” ;-)
Alex
9
<a href="javascript:;">text</a>?
diynevala
javascript:;służył do niszczenia takich rzeczy, jak efekty przewijania, a nawet animacje gif w IE6. W przypadku braku operacji na linkach istnieją dedykowane elementy HTML, takie jak button. W tym samym czasie rzeczy takie jak linki AJAX mogą używać ich hrefdo działań awaryjnych, jeśli JS zawiedzie.
Ilya Streltsyn
14

Tak, użycie tagu kotwicy bez hrefatrybutu jest prawidłowe .

Jeśli aelement nie ma hrefatrybutu, to element reprezentuje symbol zastępczy, w którym w innym przypadku mógłby zostać umieszczony link, gdyby był istotny, składający się tylko z treści elementu.

Tak, można użyć classi inne atrybuty, ale nie można używać target, download, rel, hreflang, itype .

target, download, rel, hreflang, I typeatrybuty muszą być pominięte, jeżeli atrybut href nie jest obecny.

Jeśli chodzi o część „ Powinienem? ”, Zobacz pierwszy cytat: „ gdzie w przeciwnym razie mógłby zostać umieszczony link, gdyby był istotny ”. Zapytałem więc „ Gdybym nie miał JavaScript, czy użyłbym tego tagu jako linku? ”. Jeśli odpowiedź brzmi tak, to tak, powinieneś używać <a>bez href. Jeśli nie, to nadal bym go używał, ponieważ produktywność jest dla mnie ważniejsza niż semantyka skrajnych przypadków, ale to tylko moja osobista opinia.

Dodatkowo należy zwrócić uwagę na różne zachowania i style (np. Bez podkreślenia, bez kursora, nie a :link).

Źródło: Zalecenie W3C HTML5

Tamás Bolvári
źródło
Nie chodzi tu tyle o „semantykę
skrajnych
3

To jest ważne. Możesz na przykład użyć go do pokazania modali (lub podobnych rzeczy, na które reagują data-togglei data-targetatrybutów).

Coś jak:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

Tutaj używam ikony font-awesome, która jest lepsza jako atag niż a button, aby pokazać modal. Ponadto ustawienie role="button"powoduje zmianę wskaźnika na typ akcji. Bez opcji hreflub role="button"wskaźnik kursora nie zmienia się.

vedant
źródło
2
W takim przypadku powinieneś używać przycisku. Jest to bardziej odpowiednie zarówno z semantycznego, jak i z punktu widzenia dostępności. Kotwice powinny cię gdzieś zabrać, a nie wykonywać akcji. Poza tym, dlaczego ukrywasz całą kotwicę aria-hidden? Być może ikona, ale użytkownicy czytników ekranu nie powinni mieć ograniczonego doświadczenia.
isherwood