web-dev-qa-db-fra.com

Une balise d'ancrage sans l'attribut href est-elle sécurisée?

Peut-on utiliser une balise d'ancrage sans inclure l'attribut href et utiliser plutôt un gestionnaire d'événements de clic JavaScript? Donc, je voudrais omettre la href complètement, même pas l'avoir vide (href="").

htmlhyperlinkstandardsanchor
212
john

En HTML5, l'utilisation d'un élément a sans attribut href est valide. Il est considéré comme un "lien hypertexte fictif" 

Exemple:

<a>previous</a>

Recherchez "lien hypertexte" sur la page de référence du tag d'ancrage w3c: https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html#the-a-element . 

Et il est également mentionné sur le wiki ici: https://www.w3.org/wiki/Elements/a

Un lien fictif est destiné aux cas où vous souhaitez utiliser un élément d'ancrage sans le laisser naviguer nulle part. Cela est pratique pour marquer la page actuelle dans un menu de navigation ou un fil d'Ariane. (L'ancienne approche aurait été d'utiliser une balise span ou une balise d'ancrage avec une classe nommée "active" ou "actuelle" pour la styliser et JavaScript pour annuler la navigation.) 

Un lien fictif est également utile dans les cas où vous souhaitez définir de manière dynamique la destination du lien via JavaScript au moment de l'exécution. Vous définissez simplement la valeur de l'attribut href et la balise d'ancrage devient cliquable.

Voir également: 

190
dthrasher

C'est OK, mais en même temps, certains navigateurs peuvent devenir lents.

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

Mon conseil est d'utiliser <a href="#"> </a>

Si vous utilisez JQuery, n'oubliez pas d'utiliser également:

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

Réponse courte: non.

Longue réponse:

Premièrement, sans attribut href, ce ne sera pas un lien. S'il ne s'agit pas d'un lien, il ne sera pas accessible au clavier (ou au commutateur de souffle, ou à un autre périphérique d'entrée non basé sur un pointeur) (à moins que vous n'utilisiez les fonctionnalités HTML 5 de tabindex qui ne sont pas universellement prises en charge). Il est très rare qu'il soit approprié qu'un contrôle ne dispose pas d'un accès au clavier.

Seconde. Vous devriez avoir une alternative pour le moment où le JavaScript ne s'exécute pas (parce que le chargement du serveur était lent, une connexion Internet a été coupée (par exemple, le signal mobile sur un train en mouvement), JS est désactivé, etc., etc. 

Utilisez/ amélioration progressive by JS.

25
Quentin

La balise convient parfaitement sans attribut href. Contrairement à beaucoup de réponses, il existe en réalité des raisons standard pour créer une ancre quand il n'y a pas de href. Sémantiquement, "un" signifie une ancre ou un lien. Si vous l'utilisez pour tout ce qui suit ce sens, tout va bien.

Une utilisation standard de la balise a sans href consiste à créer des liens nommés. Cela vous permet d'utiliser une ancre avec le nom = blah et plus tard, vous pouvez créer une ancre avec href = # blah pour créer un lien vers la section nommée de la page en cours. Toutefois, cela est obsolète car vous pouvez également utiliser des identifiants de la même manière. Par exemple, vous pouvez utiliser une balise d’en-tête avec id = header et, ultérieurement, une ancre pointant sur href = # header.

Mon but, cependant, n'est pas de suggérer d'utiliser la propriété name. Seulement pour fournir un cas d'utilisation où vous n'avez pas besoin d'un href, et par conséquent, pourquoi vous n'en avez pas besoin.

12
monokrome

Si vous devez utiliser href pour assurer la compatibilité ascendante, vous pouvez également utiliser

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

au lieu de #, si vous ne voulez pas utiliser l'attribut

12
Rasive

Du point de vue de l'accessibilité, <a> sans href n'est pas tabulable, tous les liens doivent être tabulables. Ajoutez donc tabindex = '0 "si vous n'avez pas de href. 

8
user3862605

La balise <a> sans le "href" peut être pratique lorsque vous utilisez des menus à plusieurs niveaux et vous devez développer le niveau suivant, mais ne souhaitez pas que cette étiquette de menu soit un lien actif. Je n'ai jamais eu de problèmes à l'utiliser de cette façon.

7
Jon

Dans certains navigateurs, vous rencontrerez des problèmes si vous ne donnez pas de balise href. Je vous suggère d'écrire votre code quelque chose comme ça:

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

vous pouvez remplacer yourcode () par votre propre fonction ou logique, mais n'oubliez pas d'ajouter return false; déclaration à la fin.

1
shashwat13

J'ai pu faire ce travail:

<a id="dumb-button" href="#" onclick="return false;">Link</a>

et il ignore le clic. Ensuite, j'utilise jQuery pour attraper le "bouton stupide" et pour déclencher mon code (masquer certains divs/show a div).

0
Ron Richardson