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 href
cał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?
html
anchor
semantic-markup
htmlbutton
Zacqary
źródło
źródło
Odpowiedzi:
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 alink
i abutton
.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: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ćclick
zdarzenia.<a href>
a<button>
elementy robią to domyślnie, ale elementy niebędące przyciskami nie. Czasami bardziej sensowne jest powiązanieclick
spustu z innym klawiszem. Na przykład przycisk „Pomoc” w aplikacji internetowej może być powiązany z F1.źródło
[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.[href]
, prawdopodobnie powinieneś użyć<span>
przycisku jako przycisku.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:
źródło
javascript:undefined
<a href="javascript:;">text</a>
?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 jakbutton
. W tym samym czasie rzeczy takie jak linki AJAX mogą używać ichhref
do działań awaryjnych, jeśli JS zawiedzie.Tak, użycie tagu kotwicy bez
href
atrybutu jest prawidłowe .Tak, można użyć
class
i inne atrybuty, ale nie można używaćtarget
,download
,rel
,hreflang
, itype
.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>
bezhref
. 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
źródło
To jest ważne. Możesz na przykład użyć go do pokazania modali (lub podobnych rzeczy, na które reagują
data-toggle
idata-target
atrybutów).Coś jak:
Tutaj używam ikony font-awesome, która jest lepsza jako
a
tag niż abutton
, aby pokazać modal. Ponadto ustawienierole="button"
powoduje zmianę wskaźnika na typ akcji. Bez opcjihref
lubrole="button"
wskaźnik kursora nie zmienia się.źródło
aria-hidden
? Być może ikona, ale użytkownicy czytników ekranu nie powinni mieć ograniczonego doświadczenia.