Valido per usare <a> (tag anchor) senza attributo href?


153

Ho usato Twitter Bootstrap per costruire un sito, e molte delle sue funzionalità dipendono dall'involucro delle cose <a>, anche se eseguiranno solo Javascript. Ho avuto problemi con la href="#"tattica raccomandata dalla documentazione di Bootstrap, quindi stavo cercando di trovare una soluzione diversa.

Ma poi ho provato a rimuovere del hreftutto l' attributo. Sto usando <a class='bunch of classes' data-whatever='data'>e avendo Javascript gestire il resto. E funziona

Eppure qualcosa mi sta dicendo che non dovrei farlo. Destra? Voglio dire, tecnicamente <a>dovrebbe essere un collegamento a qualcosa, ma non sono del tutto sicuro del perché questo sia un problema. O è?


Risposte:


245

L' <a>elemento nchor è semplicemente un'ancora verso o da alcuni contenuti. Originariamente la specifica HTML consentiva per anchors con nome ( <a name="foo">) e anchor collegati ( <a href="#foo">).

Il formato di ancoraggio denominato viene utilizzato meno comunemente, poiché l'identificatore di frammento viene ora utilizzato per specificare un [id]attributo (anche se per la compatibilità con le versioni precedenti è ancora possibile specificare gli [name]attributi). Un <a>elemento senza [href]attributo è ancora valido .

Per quanto riguarda la semantica e lo stile, l' <a>elemento non è un link ( :link) a meno che non abbia un [href]attributo. Un effetto collaterale di ciò è che un <a>elemento senza [href]non sarà nell'ordine di tabulazione di default.

La vera domanda è se l' <a>elemento da solo è una rappresentazione appropriata di a <button>. A livello semantico, esiste una netta differenza tra a linke a button.

Un pulsante è qualcosa che quando si fa clic provoca un'azione.

Un collegamento è un pulsante che provoca una modifica nella navigazione nel documento corrente. La navigazione che si verifica potrebbe spostarsi all'interno del documento nel caso di identificatori di frammenti ( #foo) o passare a un nuovo documento nel caso di urls ( /bar).

Poiché i collegamenti sono un tipo speciale di pulsante, spesso hanno avuto la precedenza sulle loro azioni per eseguire funzioni alternative. Continuare a usare un'ancora come pulsante è ok dal punto di vista della coerenza, sebbene non sia abbastanza accurato semanticamente.

Se sei preoccupato per la semantica e l'accessibilità dell'uso di un <a>elemento (o <span>, o <div>) come pulsante, devi aggiungere i seguenti attributi:

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

Il ruolo del pulsante indica all'utente che l'elemento particolare viene trattato come un pulsante come una sostituzione per qualsiasi semantica che l'elemento sottostante potrebbe aver avuto.

Per <span>e gli <div>elementi, potresti voler aggiungere listener di chiavi JavaScript Spaceo Enterattivare l' clickevento. <a href>e gli <button>elementi lo fanno per impostazione predefinita, ma gli elementi senza pulsante no. A volte ha più senso associare il clickgrilletto a una chiave diversa. Ad esempio, potrebbe essere associato un pulsante "guida" in un'app Web F1.


1
@Zacqary, [role="button"]non fa nulla di concreto, devi comunque ascoltare l'evento click (ma lo faresti comunque per creare un pulsante JS). È pensato per essere utilizzato per la navigazione assistita (aka screen reader) in modo che lo screen reader sappia rappresentare l'elemento come un pulsante anziché il suo valore semantico originale. L'aggiunta [tabindex]aggiunge l'elemento all'ordine di tabulazione. In circostanze speciali potresti non volere / avere bisogno del pulsante navigabile nell'ordine di tabulazione, quindi è un attributo opzionale. Gli elementi che sono già pulsanti non sono necessari [role="button"]in quanto ridondanti.
zzzzBov,

È HTML valido avere un tag di ancoraggio senza href e senza nome? Nella nostra app abbiamo alcuni link di eliminazione che sono disabilitati (quindi nessun attributo href), ma comunque mostrati all'utente.
Joshua Muheim,

1
@JoshuaMuheim, spero che non ti dispiaccia, ma ho pubblicato la tua domanda come domanda separata .
zzzzBov,

Volevo solo aggiungere una nota che se lo stai usando per creare "pulsanti" per azioni javascript ... rimuovendo completamente l'attributo href, Chrome (e probabilmente altri browser) smetteranno di cambiare il cursore al passaggio del mouse. Ovviamente è facile aggiungere di nuovo con CSS - ma solo un avvertimento.
Mir,

@Mir, se non hai intenzione di usare [href], probabilmente dovresti usare a <span>per il pulsante.
zzzzBov,

45

Penso che puoi trovare la tua risposta qui: un tag anchor senza l'attributo href è sicuro?

Inoltre, se non si desidera eseguire alcuna operazione di collegamento con href, è possibile utilizzarlo come:

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

3
In realtà dovrebbe esserejavascript:undefined
rybo111

2
@ rybo111 hai ragione ma preferisco ancora void (0); fondamentalmente perché sembra migliore. Non mi piace che i miei clienti vedano le cose come "indefinite" ;-)
Alex

9
<a href="javascript:;">text</a>?
Diynevala,

javascript:;usato per rompere cose come effetti di rollover e persino animazioni gif in IE6. E per nessuna operazione di collegamento ci sono elementi HTML dedicati come button. Allo stesso tempo, cose come i collegamenti AJAX possono usare le loro hrefazioni di fallback se JS fallisce.
Ilya Streltsyn,

14

Sì, è valido utilizzare il tag anchor senza un hrefattributo.

Se l' aelemento non ha alcun hrefattributo, l'elemento rappresenta un segnaposto per il quale altrimenti sarebbe stato inserito un collegamento, se fosse stato rilevante, costituito solo dal contenuto dell'elemento.

Sì, è possibile utilizzare classe altri attributi, ma non è possibile utilizzare target, download, rel, hreflang, etype .

La target, download, rel, hreflang, e typegli attributi devono essere omesse se l'attributo href non è presente.

Per quanto riguarda la parte " Dovrei? ", Vedere la prima citazione: " dove altrimenti sarebbe stato inserito un collegamento se fosse stato rilevante ". Quindi chiederei " Se non avessi JavaScript, utilizzerei questo tag come link? ". Se la risposta è sì, allora sì, dovresti usare <a>senzahref . Se no, lo userei comunque, perché la produttività è più importante per me della semantica del caso limite, ma questa è solo la mia opinione personale.

Inoltre, dovresti stare attento a diversi comportamenti e stili (ad es. Nessuna sottolineatura, nessun cursore del puntatore, non a:link ).

Fonte: raccomandazione W3C HTML5


Non si tratta tanto della "semantica del caso limite", ma dell'accessibilità, che si assicura che le persone con disabilità possano usare e comprendere il contenuto di un sito Web
neiya,

3

È valido Ad esempio, puoi usarlo per mostrare modali (o cose simili che rispondono a data-toggleedata-target attributi).

Qualcosa di simile a:

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

Qui uso l'icona font-awesome, che è meglio come atag piuttosto che a button, per mostrare un modale. Inoltre, l'impostazione role="button"modifica il puntatore in un tipo di azione. Senza uno dei due hrefo role="button", il puntatore del cursore non cambia.


2
In questo caso dovresti usare un pulsante. È più appropriato sia dal punto di vista semantico che da quello dell'accessibilità. Le ancore dovrebbero portarti da qualche parte, non eseguire un'azione. Inoltre, perché nascondi l'intera ancora aria-hidden? L'icona, forse, ma gli utenti di screen reader non dovrebbero avere un'esperienza ridotta.
Isherwood,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.