Un href vide est-il valide?

179

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.

html href

— Matthieu
source

10

Cela ne fonctionne pas dans IE cependant! Eh bien, cela fonctionne dans IE mais avec un comportement complètement différent, contrairement aux spécifications. Il est donc valide selon les spécifications, mais pas dans la pratique: (((

— ZhongYu

Développant sur ce que bayou.io a dit, IE liens vers le répertoire au-dessus du document: stackoverflow.com/questions/7966791/…

— Nate

1

Oui, un href vide dans les anciennes versions d'IE (7/8, etc.) pourrait avoir de mauvaises conséquences, comme la liste des répertoires. Il y a beaucoup de documents sur le sujet si vous le recherchez sur Google

— Ringo

par exemple: gtmetrix.com/avoid-empty-src-or-href.html . Peu importe les anciens navigateurs, cela affecte les navigateurs IE, Edge et Webkit actuels.

— Ringo

60

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 (/).

— unor
source

184

C'est valable.

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

— SLaks
source

23

Comme indiqué dans la RFC 2396: 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,

— octobre

32

quand je clique href="#", le focus se déplace vers le haut de la page dans IE, donc je pense que href="javascript:;"c'est mieux

— Deckard

32

href = "#" est un anti-motif. Il ajoute une entrée supplémentaire à l'historique du navigateur et, dans certains cas, fait défiler le navigateur vers le haut, vous pouvez simplement omettre l'attribut href si vous ne l'utilisez pas. il sera par défaut "" et rechargera donc la page s'il n'est pas empêché.

— tosh

16

@tosh, non, je suis presque sûr que si vous omettez l'attribut href, l'élément <a> n'est pas stylé comme un lien, n'est pas focalisable et ne crée pas de lien comme <a href = "" > ou <a href> fait. Si cela fonctionne pour vous, pourriez-vous partager un JSFiddle le montrant?

— Gui Prá

6

@tosh, tu sais ce qui est drôle? Apparemment, depuis HTML5, omettre l'attribut devrait fonctionner de cette façon, voir w3.org/TR/html5/text-level-semantics.html#the-a-element (Merci halfdan d'avoir soumis cette réponse ci-dessous.) Apparemment, cela n'a pas été mis en œuvre par les fournisseurs encore, et comme il ne s'agit encore que d'une recommandation de candidat, il est difficile de dire si elle sera conservée dans la norme finale ou si les fournisseurs se conformeront avant cela.

— Gui Prá

115

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?

— Jusqu'à la crique
source

22

Un autre intéressant est href = "//: 0", qui ne fera pas de requête au serveur et ne laissera aucun historique.

— diachedelic

2

Le //: 0 empêche certaines de mes images de se charger dans Chrome. Il semble que Chrome interprète cela comme la réception d'une commande d'annulation.

— David Grenier

5

href: "javascript :;" était juste ce dont j'avais besoin pour que les choses fonctionnent à la fois dans les vues

— Web

2

Liens IE vers le répertoire au-dessus du document: stackoverflow.com/questions/7966791/…

— Nate

1

Je n'ai pas testé cela, mais je soupçonne que href = "javascript :;" enfreindrait la politique de sécurité du contenu qui interdit le JavaScript en ligne. Si vous avez l'intention d'activer cette politique, j'utiliserais l'une des alternatives.

— Mark Good

60

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>

— pseudo
source

1

Merci d'avoir mentionné que l'omission hrefaffectera les interfaces d'accessibilité.

— Daniel Sokolowski le

1

J'ajouterais également - du point de vue de l'accessibilité - que définir la hrefvaleur sur autre chose qu'un chemin relatif / absolu causera des problèmes de lecteur d'écran. Évitez d'utiliser un symbole dièse / dièse comme solution de contournement pour ce problème car il n'est pas destiné à cela. Les lecteurs d'écran peuvent (actuellement le fait VoiceOver) annoncer que votre lien est un identifiant de fragment (lien vers quelque part dans la page en cours) et est également valide d'un point de vue standard. voir w3.org/2001/tag/2011/01/HashInURI-20110115#NakedHash

— Michel Hébert

27

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.

— Halfdan
source

6

oui, MAIS - un <a>élément sans non hrefest stylé directement dans certains navigateurs. Par exemple, les styles ": hover" ne fonctionnent pas dans Chrome (et d'autres choses bizarres)

— Alex

Une <a>balise sans a hrefreprésente autre chose , pas un lien (traditionnellement une ancre). En outre, il existe une différence entre un attribut facultatif et un attribut qui peut être vide.

— Kobi

19

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>

— anroots
source

Bien que: <a href></a>→ Attribut href sans valeur explicite vue. L'attribut peut être supprimé par IE7.

— c24w

1

J'aime aussi cette solution. Connaissez-vous d'autres inconvénients, à l'exception du comportement d'IE7?

— rinat.io

C'est une syntaxe illégale. Selon la spécification «La syntaxe [Attribut vide] n'est autorisée que pour les attributs booléens.»

— Robert Siemer le

9

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>

— James Donnelly
source

En effet. Malheureusement, comme vous l'avez cité, le hreffait de ne pas utiliser le en fait pas un lien hypertexte, ce qui rend la onclickfonctionnalité inaccessible aux utilisateurs de clavier.

— aij

7

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.

— Jason
source

3

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

— Ray Tsai
source

2

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

— elvenbyte
source