Un tag anchor senza l'attributo href è sicuro?

232

È corretto utilizzare un tag anchor senza includere l' hrefattributo e invece utilizzare un gestore eventi click JavaScript? Quindi ometterei hrefcompletamente, senza nemmeno averlo vuoto ( href="").

— John
fonte

1

L'evento onclick si attiva comunque? Voglio usare i tag anchor anziché span / div perché è l'unico tag ragionevole che supporta CSS: hover in IE

— john

3

È possibile accedere e attivare @Martin ANCHORS tramite la tastiera. Gli elementi SPAN regolari non possono. Vedi qui: jsfiddle.net/simevidas/4DTxv/2

— Šime Vidas

3

@ ŠimeVidas, gli <span>elementi possono sicuramente essere navigati tramite la tastiera . Potresti anche farlo in modo che gli <a>elementi non siano navigabili tramite tastiera .

— zzzzBov

2

In HTML5, le ancore senza attributo href sono collegamenti ipertestuali segnaposto: dev.w3.org/html5/markup/a.html

— Ignacio Lago

1

Sei sicuro di non voler un pulsante invece? Ciò significherebbe che la tabulazione ecc funziona e che, se necessario, puoi modellare i tuoi pulsanti in modo che appaiano come collegamenti. Devo ammettere che non conosco l'hover in IE.

— robbie_c,

217

In HTML5, l'utilizzo di un aelemento senza hrefattributo è valido. È considerato un "collegamento ipertestuale segnaposto".

Esempio:

<a>previous</a>

Cerca "hyperlink segnaposto" nella pagina di riferimento del tag di ancoraggio w3c: https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element .

Ed è anche menzionato sul wiki qui: https://www.w3.org/wiki/Elements/a

Un collegamento segnaposto è per i casi in cui si desidera utilizzare un elemento di ancoraggio, ma non farlo navigare ovunque. Questo è utile per contrassegnare la pagina corrente in un menu di navigazione o una traccia breadcrumb. (Il vecchio approccio sarebbe stato quello di utilizzare un tag span o un tag anchor con una classe denominata "active" o "current" per modellarlo e JavaScript per annullare la navigazione.)

Un collegamento segnaposto è utile anche nei casi in cui si desidera impostare dinamicamente la destinazione del collegamento tramite JavaScript in fase di esecuzione. Devi semplicemente impostare il valore dell'attributo href e il tag anchor diventa cliccabile.

Guarda anche:

— dthrasher
fonte

3

Qual è la definizione di "collegamento segnaposto"?

— Gyum Fox,

14

Prendere atto che senza una hrefl' cursor: pointerstile non verrà aggiunto automaticamente all'elemento.

— Luca,

38

Va bene, ma allo stesso tempo può rallentare alcuni browser.

http://webdesignfan.com/yslow-tutorial-part-2-of-3-reducing-server-calls/

Il mio consiglio è utilizzare <a href="#"> </a>

Se stai usando JQuery ricordati di usare anche:

.click(function(event){
    event.preventDefault();
    // Click code here...
});

— Gunnar Hoffman
fonte

7

Non riesco a utilizzare href = "#" perché sto utilizzando il bookmarking Ajax che comporta la modifica dell'hash, cosa posso fare?

— Giovanni

5

Invece di usare javascript: void (0); all'interno dell'href uso javascript :; è più breve scrivere.

— Alleato il

16

La penalità di prestazione si applica solo se si specifica effettivamente un attributo href vuoto. La domanda afferma che non esiste alcun attributo href.

— Pete B,

18

In realtà, secondo l'articolo (e ha senso) la potenziale penalità di prestazione si applica solo agli attributi src vuoti . Non dice nulla riguardo alle prestazioni riguardo agli attributi href vuoti.

— Bergie3000,

1

Ciao @Gunnar, il link sembra essere andato ora. Hai un altro riferimento per il reclamo?

— user31782

25

Risposta breve: No.

Risposta lunga:

Innanzitutto, senza un attributo href, non sarà un collegamento. Se non è un collegamento, non sarà accessibile da tastiera (o interruttore di respiro o vari altri dispositivi di input non basati su puntatore) (a meno che non si utilizzino funzionalità HTML 5 di tabindexcui non sono universalmente supportate). È molto raro che un controllo non abbia accesso alla tastiera.

Secondo. Dovresti avere un'alternativa per quando JavaScript non viene eseguito (poiché il caricamento dal server è stato lento, è stata interrotta una connessione Internet (ad es. Segnale mobile su un treno in movimento), JS è disattivato, ecc. Ecc.).

Sfrutta il miglioramento progressivo di JS discreto.

— Quentin
fonte

Il problema è che voglio qualcosa a cui posso associare un evento click con il metodo "click" di jQuery, che viene anche evidenziato e sottolineato come un collegamento quando il mouse vi scorre sopra. Cos'altro, oltre a un tag di ancoraggio senza href, può farlo senza CSS? (vale a dire così com'è senza l'aggiunta manuale di tale interazione di base, pur mantenendo la semplicità di un'assegnazione della funzione clic diretto tramite jQuery).

— Triynko,

@Triynko: utilizza un collegamento, ma fallo correttamente. Vedi l'ultima riga della risposta.

— Quentin,

5

Tabindex sui tag "a" è valido dal HTML4 (almeno) w3schools.com/tags/att_global_tabindex.asp

— technoTarek,

@technoTarek - Sì, ma hrefera obbligatorio (a meno che non fosse un'ancora con nome, nel qual caso tabindex non aveva senso). L'uso di tabindexaggiungere elementi sfocabili all'ordine di tabulazione è una nuova innovazione in HTML 5.

— Quentin,

4

Questo è semplicemente sbagliato. Se al momento facessi riferimento a una specifica precedente per HTML, non posso dire, ma secondo la specifica HTML5 è davvero perfettamente valido avere un atag senza un hrefattributo.

— michael

23

Se devi usare href per la compatibilità all'indietro, puoi anche usare

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

anziché #, se non si desidera utilizzare l'attributo

— Rasive
fonte

1

Avevo bisogno di un tag <a> che si comportava come un collegamento in tutte le funzioni tranne. Questo ha fatto il trucco per me.

— Jad S,

13

Il tag va bene da usare senza un attributo href. Contrariamente a molte delle risposte qui, ci sono in realtà ragioni standard per creare un'ancora quando non c'è href. Semanticamente, "a" significa un'ancora o un collegamento. Se lo usi per qualcosa che segue quel significato, allora stai bene.

Un uso standard del tag a senza href è la creazione di collegamenti denominati. Ciò consente di utilizzare un'ancora con nome = blah e in seguito è possibile creare un'ancora con href = # blah per collegarsi alla sezione denominata della pagina corrente. Tuttavia, questo è stato deprecato perché è anche possibile utilizzare gli ID nello stesso modo. Ad esempio, potresti usare un tag header con id = header e in seguito potresti avere un anchor che punta a href = # header.

Il mio punto, tuttavia, non è quello di suggerire di usare la proprietà name. Fornire solo un caso d'uso in cui non è necessario un href e quindi ragionare sul motivo per cui non è necessario.

— monokrome
fonte

2

Penso che la domanda che stava cercando di porre e quali siano le altre risposte indirizzate, è se è sicuro omettere l' hrefattributo per un <a>elemento che viene utilizzato come elemento interattivo (cioè un collegamento). Come hai detto, senza un hrefattributo è semplicemente ... non un collegamento, solo un'ancora, che è una cosa completamente diversa.

— BoltClock

1

Sì, ma - solo per sottolineare - il tag <a> è ancora valido in questi casi d'uso.

— monocromo

9

Dal punto di vista dell'accessibilità <a>senza un href non è tab-tab, tutti i collegamenti dovrebbero essere tab-tab quindi aggiungi un tabindex = '0 "se non hai un href.

— user3862605
fonte

1

Oppure utilizza un pulsante se eseguirà un'azione in-page anziché un reindirizzamento.

— SimonDever,

8

Il <a>tag senza "href" può essere utile quando si utilizzano menu a più livelli ed è necessario espandere il livello successivo ma non si desidera che l'etichetta di menu sia un collegamento attivo. Non ho mai avuto problemi ad usarlo in quel modo.

— Jon
fonte

1

Hai provato ad accedere a quel menu con la tastiera?

— aij

Ho appena scoperto che su IE, se passi con il mouse su alcuni link e uno è un'ancora senza href, il piccolo popup con l'URL sottostante rimane lì, mostrando l'URL precedente, invece di scomparire. L'ancoraggio non è comunque selezionabile, quindi non è un grosso problema, ma è sufficiente per me andare con un div.

— Andrew,

1

In alcuni browser incontrerai problemi se non stai dando un attributo href. Ti suggerisco di scrivere il tuo codice in questo modo:

<a href="#" onclick="yourcode();return false;">Link</a>

puoi sostituire yourcode () con la tua funzione o logica, ma ricorda di aggiungere return false; dichiarazione alla fine.

— shashwat13
fonte

Sto usando Backbone.js con Backbone.Router e ho #per la pagina dell'indice. Per alcuni dei miei collegamenti della barra di navigazione non voglio innescare un percorso verso il #quale è ciò che accade se lo usi a href="#"da solo. L'utilizzo <a href="#" onclick="return false;"interrompe l'attivazione del percorso, ma l'evento click fa ancora bolle nel mio gestore (che utilizza gli eventi DOM collegati tramite jQuery e Backbone.Radio). Grazie @ shashwat13 :)

— David Williamson,