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

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?

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.

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>

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

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ę.