Valable pour utiliser <a> (balise d'ancrage) sans attribut href?

J'utilise Twitter Bootstrap pour créer un site, et une grande partie de ses fonctionnalités dépend de l'encapsulation des choses <a>, même si elles vont simplement exécuter Javascript. J'ai eu des problèmes avec la href="#"tactique recommandée par la documentation de Bootstrap, alors j'essayais de trouver une solution différente.

Mais ensuite, j'ai essayé de supprimer hrefcomplètement l' attribut. J'utilise et j'ai <a class='bunch of classes' data-whatever='data'>Javascript pour gérer le reste. Et il fonctionne.

Pourtant, quelque chose me dit que je ne devrais pas faire ça. Droite? Je veux dire, techniquement, <a>c'est censé être un lien vers quelque chose, mais je ne suis pas tout à fait sûr de savoir pourquoi c'est un problème. Ou est-ce?

L' <a>élément nchor est simplement une ancre vers ou depuis un contenu. À l'origine, la spécification HTML autorisait les ancres nommées ( <a name="foo">) et les ancres liées ( <a href="#foo">).

Le format d'ancrage nommé est moins couramment utilisé, car l'identificateur de fragment est maintenant utilisé pour spécifier un [id]attribut (bien que pour la compatibilité ascendante, vous puissiez toujours spécifier des [name]attributs). Un <a>élément sans [href]attribut est toujours valide .

En ce qui concerne la sémantique et le style, l' <a>élément n'est pas un lien ( :link) à moins qu'il n'ait un [href]attribut. Un effet secondaire de ceci est qu'un <a>élément sans [href]ne sera pas dans l'ordre de tabulation par défaut.

La vraie question est de savoir si l' <a>élément seul est une représentation appropriée de a <button>. Sur le plan sémantique, il existe une nette différence entre a linket a button.

Un bouton est quelque chose qui, lorsqu'il est cliqué, provoque une action.

Un lien est un bouton qui provoque une modification de la navigation dans le document courant. La navigation qui se produit peut être le déplacement dans le document dans le cas des identificateurs de fragment ( #foo) ou le déplacement vers un nouveau document dans le cas des urls ( /bar).

Les liens étant un type spécial de bouton, leurs actions ont souvent été remplacées pour exécuter des fonctions alternatives. Continuer à utiliser une ancre comme bouton est acceptable du point de vue de la cohérence, bien que ce ne soit pas tout à fait précis sémantiquement.

Si vous êtes préoccupé par la sémantique et l'accessibilité de l'utilisation d'un <a>élément (ou <span>, ou <div>) comme bouton, vous devez ajouter les attributs suivants:

<a role="button" tabindex="0" ...>...</a>

Le rôle de bouton indique à l'utilisateur que l'élément particulier est traité comme un bouton comme un remplacement pour la sémantique que l'élément sous-jacent peut avoir.

Pour les éléments <span>et <div>, vous pouvez ajouter des écouteurs de clé JavaScript pour Spaceou Enterpour déclencher l' clickévénement. <a href>et les <button>éléments le font par défaut, mais pas les éléments sans bouton. Parfois, il est plus logique de lier le clickdéclencheur à une clé différente. Par exemple, un bouton "Aide" dans une application Web peut être lié à F1.

Je pense que vous pouvez trouver votre réponse ici: une balise d'ancrage sans l'attribut href est-elle sûre?

De plus, si vous ne voulez pas d'opération de lien avec href, vous pouvez l'utiliser comme:

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

Oui, il est valide d'utiliser la balise d'ancrage sans hrefattribut.

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

Oui, vous pouvez utiliser classet d' autres attributs, mais vous ne pouvez pas utiliser target, download, rel, hreflangettype .

Le target, download, rel, hreflang, et les typeattributs doivent être supprimés si l'attribut href est pas présent.

Quant à la partie « Dois-je? », Voir la première citation: « où un lien aurait pu autrement être placé s'il avait été pertinent ». Je demanderais donc " Si je n'avais pas de JavaScript, est-ce que j'utiliserais cette balise comme lien? " Si la réponse est oui, alors oui, vous devriez utiliser <a>sans href. Si non, je l'utiliserais toujours, car la productivité est plus importante pour moi que la sémantique des cas de pointe, mais ce n'est que mon opinion personnelle.

De plus, vous devez faire attention aux différents comportements et styles (par exemple, pas de soulignement, pas de pointeur, pas de a :link).

Source: recommandation HTML5 du W3C

C'est valable. Vous pouvez, par exemple, l'utiliser pour afficher des modaux (ou des éléments similaires qui répondent à data-toggleet des data-targetattributs).

Quelque chose comme:

<a role="button" data-toggle="modal" data-target=".bs-example-modal-sm" aria-hidden="true"><i class="fa fa-phone"></i></a>

Ici, j'utilise l'icône font-awesome, qui est mieux comme une abalise que comme un button, pour afficher un modal. En outre, le paramètre role="button"transforme le pointeur en un type d'action. Sans l'un hrefou l' autre role="button", le pointeur du curseur ne change pas.