Un href vuoto è valido?

Uno dei nostri sviluppatori Web utilizza il seguente codice HTML come segnaposto per la creazione di un elenco a discesa.

<a href="" class="arrow"></a>

Questo tag di ancoraggio è considerato valido?

Poiché non esiste alcun valore href, viene visualizzato come non funzionante in alcuni dei nostri rapporti del controllo link.

Sebbene questa domanda abbia già una risposta ( tl; dr: yes, un hrefvalore vuoto è valido), nessuna delle risposte esistenti fa riferimento alle specifiche pertinenti.

Una stringa vuota non può essere un URI. Tuttavia, l' hrefattributo non accetta solo URI come valore, ma anche riferimenti URI. Una stringa vuota può essere un riferimento URI.

HTML 4.01

HTML 4.01 utilizza RFC 2396 , dove è indicato nella sezione 4.2. Riferimenti dello stesso documento (grassetto enfasi mio):

Un riferimento URI che non contiene un URI è un riferimento al documento corrente. In altre parole, un riferimento URI vuoto all'interno di un documento viene interpretato come riferimento all'inizio di quel documento e un riferimento contenente solo un identificatore di frammento è un riferimento al frammento identificato di quel documento.

RFC 2396 è obsoleto da RFC 3986 (che è attualmente lo standard URI IETF ), che sostanzialmente dice lo stesso .

HTML5

HTML5 utilizza ( URL valido potenzialmente circondato da spazi → URL valido ) le specifiche dell'URL di W3C , che è stata interrotta. Invece dovrebbe essere usato lo standard URL di WHATWG (vedere l'ultima sezione).

HTML 5.1

HTML 5.1 utilizza ( URL valido potenzialmente circondato da spazi → URL valido ) URL di WHATWG Standard (vedere la sezione successiva).

WHATWG HTML

L'HTML di WHATWG utilizza ( URL valido potenzialmente circondato da spazi ) la definizione di stringa URL valida dallo Standard URL di WHATWG , dove afferma che può essere una stringa URL relativo con frammento , che deve almeno essere una stringa URL relativa , che può essere una stringa percorso-relativo-schema-meno-URL , che è una stringa percorso-relativo-URL che non inizia con una stringa di schema seguita da :, e la sua definizione dice (grassetto mio accento):

Una stringa URL relativo al percorso deve essere zero o più stringhe del segmento del percorso URL, separate l'una dall'altra da U + 002F (/) e non iniziare con U + 002F (/).

È valido

Tuttavia, la pratica standard è di usare href="#"o talvolta href="javascript:;".

Come altri hanno già detto, è valido.

Ci sono alcuni aspetti negativi di ogni approccio:

href="#" aggiunge una voce aggiuntiva alla cronologia del browser (il che è fastidioso quando, ad esempio, il back-button).

href="" ricarica la pagina

href="javascript:;" non sembra avere alcun problema (oltre a sembrare disordinato e insignificante) - qualcuno ne conosce qualcuno?

Sebbene possa essere completamente valido HTML per non includere un href, specialmente con un gestore onclick, ci sono alcune cose da considerare: non sarà focalizzabile da tastiera senza avere un valore tabindex impostato. Inoltre, questo sarà inaccessibile al software dello screen reader con Internet Explorer, poiché IE segnalerà attraverso le interfacce di accessibilità che qualsiasi elemento di ancoraggio senza un attributo href non è focalizzabile, indipendentemente dal fatto che il tabindex sia stato impostato.

Quindi, mentre quanto segue può essere completamente valido:

<a class="arrow">Link content</a>

È molto meglio aggiungere esplicitamente un attributo href a effetto nullo

<a href="javascript:void(0);" class="arrow">Link content</a>

Per il pieno supporto di tutti gli utenti, se si utilizza la classe con CSS per il rendering di un'immagine, è necessario includere anche alcuni contenuti di testo, come l'attributo title per fornire una descrizione testuale di ciò che sta accadendo.

<a href="javascript:void(0);" class="arrow" title="Go to linked content">Link content</a>

L'attuale bozza HTML5 consente inoltre di omettere completamente l'attributo href.

Se l'elemento a non ha alcun attributo href, allora l'elemento rappresenta un segnaposto per il quale altrimenti sarebbe stato inserito un collegamento, se fosse stato rilevante.

Per rispondere alla tua domanda: Sì, è valido.

In effetti, puoi lasciarlo vuoto (il validatore W3 non si lamenta).

Fare un ulteriore passo avanti nell'idea: tralasciare = "". Il vantaggio di ciò è che il collegamento non è trattato come un ancoraggio alla pagina corrente.

<a href>sth</a>

Mentre il validatore di W3 potrebbe non lamentarsi di un hrefattributo vuoto , l'attuale progetto di lavoro HTML5 specifica:

L' hrefattributo on ae gli areaelementi devono avere un valore che sia un URL valido potenzialmente circondato da spazi.

Un URL valido è un URL conforme allo Standard URL . Ora l'URL Standard è un po 'confuso per farti andare in giro, tuttavia da nessuna parte si afferma che un URL può essere una stringa vuota.

... il che significa che una stringa vuota non è un URL valido.

La bozza di lavoro HTML5 prosegue, tuttavia, affermando:

Nota: l' hrefattributo on ae gli areaelementi non sono richiesti ; quando quegli elementi non hanno hrefattributi non creano collegamenti ipertestuali.

Ciò significa che possiamo semplicemente omettere del hreftutto l' attributo:

<a class="arrow"></a>

Se la tua intenzione è che questi elementi senza bisogno debbano ancora richiedere l' hrefinterazione della atastiera, dovrai seguire la normale strada dell'assegnazione di un rolee tabindexaccanto ai soliti gestori di clic / keydown:

<a class="arrow" role="button" tab-index="0"></a>

Un avvertimento:

Nella mia esperienza, omettere l' hrefattributo causa problemi di accessibilità in quanto la navigazione da tastiera lo ignorerà e non gli darà mai la concentrazione come quando sarà presente href. Includere manualmente il tuo elemento nel tabindex è un modo per aggirare questo.

è valido ma come ha detto UpTheCreek "Ci sono alcuni aspetti negativi di ogni approccio"

se chiami ajax tramite un tag lascia href = "" in questo modo manterrà la pagina ricaricata e il codice ajax non verrà mai chiamato ...

Ho appena pensato che sarebbe bello condividere

Prova <a href="#" class="arrow">invece a fare . (Nota il #carattere nitido ).