Une balise d'ancrage sans l'attribut href est-elle sûre?

232

Est-il correct d'utiliser une balise d'ancrage sans inclure l' hrefattribut et à la place à l'aide d'un gestionnaire d'événements de clic JavaScript? Je voudrais donc omettre hrefcomplètement, même pas l'avoir vide ( href="").

— John
source

1

L'événement onclick se déclenche toujours? Je veux utiliser des balises d'ancrage au lieu de span / div car c'est la seule balise raisonnable qui prend en charge CSS: hover dans IE

— john

3

@Martin ANCHORS est accessible et activé via le clavier. Les éléments SPAN réguliers ne le peuvent pas. Voir ici: jsfiddle.net/simevidas/4DTxv/2

— Šime Vidas

3

@ ŠimeVidas, les <span>éléments peuvent très certainement être parcourus via le clavier . Vous pouvez également faire en sorte que les <a>éléments ne soient pas navigables via le clavier .

— zzzzBov

2

En HTML5, les ancres sans attribut href sont des hyperliens d'espace réservé: dev.w3.org/html5/markup/a.html

— Ignacio Lago

1

Êtes-vous sûr de ne pas vouloir de bouton à la place? Cela signifierait que la tabulation, etc. fonctionne, et vous pouvez styliser vos boutons pour ressembler à des liens si nécessaire. Certes, je ne connais pas le survol dans IE.

— robbie_c

217

En HTML5, l'utilisation d'un aélément sans hrefattribut est valide. Il est considéré comme un «hyperlien d'espace réservé».

Exemple:

<a>previous</a>

Recherchez «hyperlien d'espace réservé» sur la page de référence de la balise 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 d'espace réservé est destiné aux cas où vous souhaitez utiliser un élément d'ancrage, mais ne le faites naviguer nulle part. Cela est pratique pour baliser la page actuelle dans un menu de navigation ou un fil d'Ariane. (L'ancienne approche aurait consisté à utiliser une balise span ou une balise d'ancrage avec une classe nommée "active" ou "courante" pour la styliser et JavaScript pour annuler la navigation.)

Un lien d'espace réservé est également utile dans les cas où vous souhaitez définir dynamiquement la destination du lien via JavaScript lors de l'exécution. Vous définissez simplement la valeur de l'attribut href et la balise d'ancrage devient cliquable.

Voir également:

— dthrasher
source

3

Quelle est la définition d'un "lien d'espace réservé"?

— Gyum Fox

14

Notez que sans un, hrefle cursor: pointerstyle ne sera pas automatiquement ajouté à l'élément.

— Luke

38

C'est OK, mais en même temps, cela peut ralentir certains navigateurs.

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...
});

— Gunnar Hoffman
source

7

Je ne peux pas utiliser href = "#" car j'utilise le bookmarking ajax qui implique de changer le hachage, que puis-je faire?

— john

5

Au lieu d'utiliser javascript: void (0); à l'intérieur du href j'utilise javascript :; c'est plus court à écrire.

— Ally

16

La pénalité de performance s'applique uniquement si vous spécifiez réellement un attribut href vide. La question indique qu'il n'y a aucun attribut href.

— Pete B

18

En fait, selon l'article (et cela a du sens), la pénalité de performance potentielle ne s'applique qu'aux attributs src vides . Il ne dit rien sur les performances des attributs href vides.

— bergie3000

1

Bonjour @Gunnar, le lien semble avoir disparu maintenant. Avez-vous une autre référence pour la réclamation?

— user31782

25

Réponse courte: Non.

Longue réponse:

Tout d'abord, sans attribut href, ce ne sera pas un lien. S'il ne s'agit pas d'un lien, il ne sera pas accessible par clavier (ou interrupteur respiratoire, ou par tout autre périphérique d'entrée non basé sur un pointeur) (sauf si vous utilisez des fonctionnalités HTML 5 tabindexqui ne sont pas universellement prises en charge). Il est très rare qu'il soit approprié qu'un contrôle n'ait pas accès au clavier.

Seconde. Vous devriez avoir une alternative pour quand le JavaScript ne s'exécute pas (parce qu'il a été lent à charger depuis le serveur, une connexion Internet a été interrompue (par exemple, un signal mobile dans un train en mouvement), JS est désactivé, etc.).

Utilisez l' amélioration progressive par un JS discret.

— Quentin
source

Le problème est que je veux quelque chose auquel je peux attacher un événement click avec la méthode "click" de jQuery, qui est également mise en évidence et soulignée comme un lien lorsque la souris la survole. Quoi d'autre, à part une balise d'ancrage sans référence, peut accomplir cela sans CSS? (c'est-à-dire tel quel sans ajouter manuellement cette interaction de base, tout en conservant la simplicité d'une affectation de fonction de clic direct via jQuery).

— Triynko

@Triynko - Utilisez un lien, mais faites-le correctement. Voir la dernière ligne de la réponse.

— Quentin

5

Tabindex sur les balises 'a' est valide depuis HTML4 (au moins) w3schools.com/tags/att_global_tabindex.asp

— technoTarek

@technoTarek - Oui, mais hrefétait obligatoire (sauf s'il s'agissait d'une ancre nommée, auquel cas tabindex n'avait pas de sens). L'utilisation de tabindexpour ajouter des éléments flous à l'ordre de tabulation est une nouvelle innovation dans HTML 5.

— Quentin

4

C'est tout simplement faux. Que vous fassiez référence à une ancienne spécification HTML à l'époque, je ne peux pas le dire, mais selon la spécification HTML5, il est en effet parfaitement valide d'avoir une abalise sans hrefattribut.

— michael

23

Si vous devez utiliser href pour une compatibilité descendante, vous pouvez également utiliser

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

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

— Rasive
source

1

J'avais besoin d'une balise <a> qui se comportait comme un lien dans tout sauf la fonction. Cela a fait l'affaire pour moi.

— Jad S

13

La balise est très bien à utiliser sans attribut href. Contrairement à de nombreuses réponses ici, il existe en fait des raisons standard pour créer une ancre lorsqu'il n'y a pas de href. Sémantiquement, "a" signifie une ancre ou un lien. Si vous l'utilisez pour tout ce qui suit ce sens, alors tout va bien.

Une utilisation standard de la balise a sans href est de créer des liens nommés. Cela vous permet d'utiliser une ancre avec name = 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. Cependant, cela est obsolète car vous pouvez également utiliser les ID de la même manière. Par exemple, vous pouvez utiliser une balise d'en-tête avec id = header et plus tard, vous pouvez avoir une ancre pointant vers href = # header.

Mon point, 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 donc pourquoi il n'est pas nécessaire.

— monokrome
source

2

Je pense que ce que la question essayait de demander et ce que les autres réponses abordent, est de savoir s'il est sûr d'omettre l' hrefattribut d'un <a>élément qui est utilisé comme élément interactif (c'est-à-dire un lien). Comme vous le mentionnez, sans hrefattribut, c'est tout simplement ... pas un lien, juste une ancre, ce qui est tout à fait différent.

— BoltClock

1

Oui, mais - pour souligner - la balise <a> est toujours valide dans ces cas d'utilisation.

— monokrome

9

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

— user3862605
source

1

Ou utilisez un bouton pour effectuer une action sur la page au lieu d'une redirection.

— SimonDever

8

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

— Jon
source

1

Avez-vous essayé d'accéder à ce menu avec le clavier?

— aij

Je viens de découvrir que sur IE, si vous survolez certains liens et que l'un est une ancre sans href, la petite fenêtre contextuelle avec l'URL ci-dessous reste là, montrant l'url précédente, au lieu de disparaître. L'ancre n'est pas cliquable, donc ce n'est pas un gros problème, mais assez pour moi d'aller avec un div à la place.

— Andrew

1

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

<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.

— shashwat13
source

J'utilise Backbone.js avec Backbone.Router et je l'ai #pour la page d'index. Pour certains de mes liens de barre de navigation, je ne veux pas déclencher un itinéraire vers #lequel se produit si vous l'utilisez a href="#"seul. L'utilisation <a href="#" onclick="return false;"arrête la route en cours de déclenchement mais l'événement click continue de bouillonner jusqu'à mon gestionnaire (qui utilise les événements DOM connectés via jQuery et Backbone.Radio). Merci @ shashwat13 :)

— David Williamson