Un href vide est-il valide?

Un de nos développeurs Web utilise le code HTML suivant comme espace réservé pour styliser une liste déroulante.

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

Est-ce considéré comme une balise d'ancrage valide?

Puisqu'il n'y a pas de valeur href, il apparaît comme cassé sur certains de nos rapports de vérificateur de liens.

Bien que cette question soit déjà répondue ( tl; dr: oui, une hrefvaleur vide est valide), aucune des réponses existantes ne fait référence aux spécifications pertinentes.

Une chaîne vide ne peut pas être un URI. Cependant, l' hrefattribut ne prend pas seulement les URI comme valeur, mais également les références URI. Une chaîne vide peut être une référence URI.

HTML 4.01

HTML 4.01 utilise la RFC 2396 , où il est indiqué dans la section 4.2. Références dans le même document (je souligne en gras):

Une référence URI qui ne contient pas d'URI est une référence au document actuel. En d'autres termes, une référence URI vide dans un document est interprétée comme une référence au début de ce document , et une référence contenant uniquement un identifiant de fragment est une référence au fragment identifié de ce document.

La RFC 2396 est obsolète par la RFC 3986 (qui est actuellement la norme URI de l'IETF ), qui dit essentiellement la même chose .

HTML5

HTML5 utilise ( URL valide potentiellement entourée d'espaces → URL valide ) la spécification d'URL du W3C , qui a été abandonnée. Le standard d'URL de WHATWG doit être utilisé à la place (voir la dernière section).

HTML 5.1

HTML 5.1 utilise ( URL valide potentiellement entourée d'espaces → URL valide ) Norme d'URL de WHATWG (voir la section suivante).

WHATWG HTML

Le HTML de WHATWG utilise ( URL valide potentiellement entourée d'espaces ) la définition de la chaîne d'URL valide de la norme d'URL de WHATWG , où il indique qu'il peut s'agir d'une chaîne d'URL relative avec fragment , qui doit au moins être une chaîne d'URL relative , qui peut être une chaîne d'URL relative au chemin d'accès sans schéma , qui est une chaîne d'URL relative au chemin qui ne commence pas par une chaîne de schéma suivie de :, et sa définition dit (mise en évidence en gras):

Une chaîne d'URL relative au chemin doit contenir zéro ou plusieurs chaînes de segment de chemin d'URL, séparées les unes des autres par U + 002F (/), et ne pas commencer par U + 002F (/).

C'est valable.

Cependant, la pratique courante consiste à utiliser href="#"ou parfois href="javascript:;".

Comme d'autres l'ont dit, c'est valable.

Il y a cependant quelques inconvénients à chaque approche:

href="#" ajoute une entrée supplémentaire à l'historique du navigateur (ce qui est ennuyeux par exemple lors d'un retour en arrière).

href="" recharge la page

href="javascript:;" ne semble pas avoir de problèmes (à part avoir l'air désordonné et dénué de sens) - quelqu'un en sait-il?

Bien qu'il puisse être tout à fait valide de ne pas inclure de href, en particulier avec un gestionnaire onclick, il y a certaines choses à considérer: il ne sera pas focalisable sur le clavier sans avoir une valeur tabindex définie. En outre, cela sera inaccessible aux logiciels de lecture d'écran utilisant Internet Explorer, car IE signalera via les interfaces d'accessibilité que tout élément d'ancrage sans attribut href comme non focalisable, que le tabindex ait été défini ou non.

Ainsi, alors que ce qui suit peut être tout à fait valable:

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

Il est préférable d'ajouter explicitement un attribut href à effet nul

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

Pour une prise en charge complète de tous les utilisateurs, si vous utilisez la classe avec CSS pour rendre une image, vous devez également inclure du contenu textuel, tel que l'attribut title pour fournir une description textuelle de ce qui se passe.

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

Le brouillon HTML5 actuel permet également d'omettre complètement l'attribut href.

Si l'élément a n'a pas d'attribut href, alors l'élément représente un espace réservé pour l'endroit où un lien aurait pu être placé autrement, s'il avait été pertinent.

Pour répondre à votre question: Oui, c'est valide.

En effet, vous pouvez le laisser vide (le validateur W3 ne se plaint pas).

Prenant l'idée un peu plus loin: laissez de côté le = "". L'avantage de ceci est que le lien n'est pas traité comme une ancre vers la page actuelle.

<a href>sth</a>

Alors que le validateur de W3 ne peut pas se plaindre d'un hrefattribut vide , le brouillon de travail HTML5 actuel spécifie:

L' hrefattribut sur aet les areaéléments doivent avoir une valeur qui est une URL valide potentiellement entourée d'espaces.

Une URL valide est une URL conforme à la norme URL . Maintenant, la norme URL est un peu déroutante à comprendre, mais nulle part elle n'indique qu'une URL peut être une chaîne vide.

... ce qui signifie qu'une chaîne vide n'est pas une URL valide.

Le brouillon de travail HTML5 continue, cependant, à déclarer:

Remarque: L' hrefattribut sur les éléments aet arean'est pas obligatoire ; lorsque ces éléments n'ont pas d' hrefattributs, ils ne créent pas d'hyperliens.

Cela signifie que nous pouvons simplement omettre hrefcomplètement l' attribut:

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

Si votre intention est que ces éléments href-less anécessitent toujours une interaction du clavier, vous devrez suivre la voie normale d'attribution d'un roleet tabindexaux côtés de vos gestionnaires habituels de clic / touche:

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

Un mot d'avertissement:

D'après mon expérience, l'omission de l' hrefattribut pose des problèmes d'accessibilité car la navigation au clavier l'ignorera et ne lui donnera jamais le focus comme elle le fera lorsque href est présent. Inclure manuellement votre élément dans le tabindex est un moyen de contourner cela.

c'est valide mais comme UpTheCreek a dit: `` Il y a des inconvénients à chaque approche ''

si vous appelez ajax via une balise, laissez le href = "" comme cela maintiendra le rechargement de la page et le code ajax ne sera jamais appelé ...

juste avoir cette pensée serait bon à partager

Essayez de faire à la <a href="#" class="arrow">place. (Notez le #caractère pointu ).