Valid to use (Anchor tag) without href attribute?

Question

Valid to use (Anchor tag) without href attribute?

Używałem Twittera Bootstrap do budowy strony, a wiele jego funkcjonalności zależy od zawijania rzeczy w <a>, nawet jeśli po prostu będą uruchamiać Javascript. Miałem problemy z taktyką href="#", którą zaleca dokumentacja Bootstrapa, więc próbowałem znaleźć inne rozwiązanie.

Ale potem próbowałem całkowicie usunąć atrybut href. Używam <a class='bunch of classes' data-whatever='data'>, a Javascript zajmuje się resztą. I to działa.

Jeszcze coś mi mówi, że nie powinnam tego robić. Prawda? Technicznie <a> ma być linkiem do czegoś, ale nie jestem do końca pewien dlaczego to jest problem. A może jest?

167

html anchor htmlbutton semantic-markup

Author: Wil Moore III, 2012-05-09

Source

4 answers

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

Również jeśli chcesz nie działać link z href, możesz użyć go w następujący sposób:

<a href="javascript:void(0);">something</a>

51

Author: swati,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:58

Tak, poprawne jest używanie znacznika kotwicy bez atrybutu href.

Jeśli element a nie ma atrybutu href, to element reprezentuje placeholder dla miejsca, w którym link mógłby zostać umieszczony, jeśli były istotne, składały się tylko z treści elementu.

Tak, możesz używać class i innych atrybutów, ale nie możesz używać target, download, rel, hreflang, Oraz type.

The target, download, rel, hreflang, i type atrybuty muszą być pominięte, jeśli atrybut href nie jest obecny.

Co do " powinienem? "część, patrz pierwszy cytat:" gdzie link mógłby zostać umieszczony, gdyby był istotny". Więc zapytałbym " 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 i tak bym go używał, bo produktywność jest bardziej ważna dla mnie niż semantyka edge case, ale to tylko moja osobista opinia.

Dodatkowo powinieneś uważać na inne zachowanie i stylowanie (np. brak podkreślenia, brak kursora, Nie :link).

Źródło: rekomendacja W3C HTML5

17

Author: Tamás Bolvári,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:55:02

Jest ważne. Możesz na przykład użyć go do pokazania modali(lub podobnych rzeczy, które odpowiadają atrybutom data-toggle i data-target).

Coś w stylu:

<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 znacznik a, a nie button, aby pokazać modal. Ponadto ustawienie role="button" powoduje zmianę wskaźnika na typ akcji. Bez href lub role="button" wskaźnik kursora nie zmienia się.

4

Author: vedant,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-20 10:19:03

score 267 · Accepted Answer

Element <a>nchor jest po prostu kotwicą do lub z jakiejś zawartości. Pierwotnie Specyfikacja HTML pozwalała na nazwane kotwice (<a name="foo">) i połączone kotwice (<a href="#foo">).

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

Jeśli chodzi o semantykę i stylizację jeśli chodzi o element <a> nie jest łączem (:link), chyba że posiada atrybut [href]. Efektem ubocznym jest to, że element <a> Bez [href] nie będzie domyślnie w kolejności tabulacji.

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

Przycisk jest czymś, co po kliknięciu powoduje wystąpienie akcji.

Link to przycisk powoduje to zmianę nawigacji w bieżącym dokumencie. W przypadku identyfikatorów fragmentów (#foo) występuje nawigacja, która może być przenoszona wewnątrz dokumentu lub przenoszona do nowego dokumentu w przypadku adresów URL (/bar).

Ponieważ linki są specjalnym rodzajem przycisków, często ich działania były zastępowane w celu wykonywania alternatywnych funkcji. Kontynuowanie używania kotwicy jako przycisku jest ok z punktu widzenia spójności, chociaż nie jest to dość dokładne semantycznie.

Jeśli jeśli chodzi o semantykę i dostępność użycia elementu <a> (lub <span>, lub <div>) jako przycisku, należy dodać następujące atrybuty:

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

Rola przycisku mówi użytkownikowi, że dany element jest traktowany jako przycisk jako nadpisanie dowolnej semantyki, jaką mógł mieć element bazowy.

Dla elementów <span> i <div> możesz dodać słuchacze kluczy JavaScript dla Space lub Enter aby wyzwalać Zdarzenie click. <a href> i <button> elementy robią to domyślnie, ale nie Elementy przycisków. Czasami bardziej sensowne jest powiązanie wyzwalacza click z innym kluczem. Na przykład przycisk "Pomoc" w aplikacji internetowej może być związany z F1 .