Valable pour utiliser <a> (balise d'ancrage) sans l'attribut href?
J'utilise Twitter Bootstrap _ pour créer un site, et une grande partie de ses fonctionnalités dépend de l'intégration de éléments dans <a>, même s'ils vont exécuter du code Javascript. J'ai eu des problèmes avec la tactique href="#" recommandée par la documentation de Bootstrap. J'essayais donc de trouver une solution différente.
Mais ensuite, j'ai essayé de supprimer l'attribut href. J'utilise <a class='bunch of classes' data-whatever='data'>, et javascript est chargé du reste. Et il fonctionne.
Pourtant, quelque chose me dit que je ne devrais pas faire ça. Droite? Je veux dire, techniquement <a> est supposé être un lien vers quelque chose, mais je ne suis pas tout à fait sûr pourquoi c'est un problème. Ou est-ce?
L'élément <a>nchor est simplement une ancre vers ou depuis un contenu. À l'origine, la spécification HTML permettait les ancres nommées (<a name="foo">) et les ancres liées (<a href="#foo">).
Le format d'ancrage nommé est moins utilisé car l'identifiant de fragment est maintenant utilisé pour spécifier un attribut [id] (bien que pour la compatibilité avec les versions antérieures, vous puissiez toujours spécifier les attributs [name].). n élément <a> sans attribut [href] est toujours valide .
En ce qui concerne la sémantique et le style, l'élément <a> n'est pas un lien (:link) à moins d'avoir un attribut [href]. Un effet secondaire de cela est qu'un élément <a> sans [href] ne sera pas dans l'ordre de tabulation par défaut.
La vraie question est de savoir si l'élément <a> est à lui seul une représentation appropriée d'un <button>. Sur le plan sémantique, il existe une différence nette entre un link et un 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 actuel. La navigation effectuée peut se déplacer dans le document dans le cas d’identificateurs de fragment (#foo) ou dans un nouveau document dans le cas d’URL (/bar).
Les liens étant un type de bouton spécial, leurs actions ont souvent été remplacées par des fonctions alternatives. Continuer à utiliser une ancre en tant que bouton est acceptable du point de vue de la cohérence, bien que ce ne soit pas assez précis sur le plan sémantique.
Si vous êtes préoccupé par la sémantique et l'accessibilité de l'utilisation d'un élément <a> (ou <span>, ou <div>) comme bouton, vous devez ajouter les attributs suivants:
<a role="button" tabindex="0" ...>...</a>
Le rôle du bouton indique à l'utilisateur que l'élément en question est traité comme un bouton comme une substitution pour la sémantique de l'élément sous-jacent.
Pour les éléments <span> et <div>, vous pouvez ajouter des écouteurs de clé JavaScript pour Space ou Enter pour déclencher l'événement click. Les éléments <a href> et <button> le font par défaut, mais pas les éléments non-boutons. Parfois, il est plus logique de lier le déclencheur click à 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: ne balise anchor 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, c'est valide d'utiliser la balise d'ancrage sans un attribut href.
Si l'élément
an'a pas d'attributhref, l'élément représente un espace réservé pour l'emplacement où un lien aurait autrement été placé, s'il avait été pertinent, constitué uniquement du contenu de l'élément.
Oui, vous pouvez utiliser class et d'autres attributs, mais vous ne pouvez pas utiliser target, download, rel, hreflang et type.
Les attributs
target,download,rel,hreflangettypedoivent être omis si l'attribut href n'est pas présent.
En ce qui concerne la partie " Devrais-je?? ", voir la première citation: " où un lien aurait autrement été placé s'il avait été pertinent ". Donc je demanderais " Si je n'avais pas de JavaScript, utiliserais-je cette balise comme lien? ". Si la réponse est oui, alors oui, vous devriez utiliser <a> sans href. Si non, je l'utiliserais quand même, car la productivité est plus importante pour moi que la sémantique de l'affaire Edge, mais ce n'est que mon opinion personnelle.
En outre, vous devez surveiller pour différents comportement et style (par exemple, aucun soulignement, aucun curseur de pointeur, pas un :link).
Source: Recommandation HTML5 du W3C
C'est valide. Vous pouvez, par exemple, l'utiliser pour afficher des modaux (ou des éléments similaires répondant aux attributs data-toggle et data-target).
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 préférable en tant que balise a plutôt que button, pour afficher un modal. De plus, si vous définissez role="button", le pointeur passe à un type d'action. Sans href ou role="button", le pointeur du curseur ne change pas.