web-dev-qa-db-fra.com

Pourquoi les balises d'ancrage imbriquées sont-elles illégales?

J'ai appris que l'imbrication des balises d'ancrage n'est pas conforme aux normes HTML.

Depuis W3:

Les liens et les ancres définis par l'élément A ne doivent pas être imbriqués; un élément A ne doit contenir aucun autre élément A.

Étant donné que la DTD définit l'élément LINK comme étant vide, les éléments LINK ne peuvent pas non plus être imbriqués.

Il semblerait que des alternatives telles que celles suggérées dans la réponse sélectionnée dans cette question auraient plus de chances de créer un comportement inattendu que d'imbriquer simplement les ancres!

Il semble également exagéré de faire des gestionnaires d'événements onclick juste pour rediriger la page dans JS. Sans oublier que l'utilisation d'une solution de script entraînerait des problèmes pour les utilisateurs qui naviguent avec les scripts désactivés.

[~ # ~] modifier [~ # ~]

Ce qui est intéressant, c'est que je travaillais sur un violon pour démontrer et j'avais oublié que chrome était en train de restructurer le DOM en tant que tel:

<div id="container">

    <a href="http://yahoo.com"></a>
    <div class="parent">
        <a href="http://yahoo.com">Parent Element</a>
        <a href="http://google.com">
            <div class="child">Child Element</div>
        </a>
        <a href="http://bing.com">
            <div class="child">Other Child</div>
        </a>
    </div>

</div>

J'ai ignoré cela parce que j'ai vu le vol stationnaire fonctionner et que j'avais ma souris sur le texte. Le savoir maintenant ne change pas nécessairement ma question, mais cela illustre bien que cela ne fonctionne même pas comme je le pensais.

htmltagsdtd
32
Doug Morrow

Gardez à l'esprit qu'une ancre n'est pas seulement un lien, c'est aussi quelque chose à laquelle on peut se lier. (Bien que la première utilisation soit loin plus courante que la seconde.) Citation W3C (ancienne, mais pertinente):

Une ancre est un morceau de texte qui marque le début et/ou la fin d'un lien hypertexte.

À cette fin, ne pensez pas à une ancre comme un lien. Considérez-le comme un point du document qui se connecte à (et/ou depuis) ​​un autre point (dans le même document ou un autre document, cela ne fait aucune différence). Deux points dans un espace non physique qui sont connectés par un thread non physique.

Compte tenu de cela, les ancres ne devraient pas contenir beaucoup de contenu. S'il contient beaucoup de contenu, il cesse de devenir un "point" et commence à devenir une "zone". Par exemple, imaginez une ancre qui, une fois rendue, occupe plus d'espace que le navigateur ne peut afficher à la fois. Si quelque chose est lié à cette ancre, où devrait-il aller? Le début? Milieu? Fin? (Intuitivement, vous pourriez penser au début, mais vous avez l'idée.)

De plus, les ancres ne devraient certainement pas contenir d'autres ancres. Les connexions non physiques entre les points non physiques peuvent devenir ambiguës. L'ancre enfant se connecte-t-elle à l'autre point ou l'ancre parent se connecte-t-elle à l'autre point? Cela probablement ne se traduit pas par être un gros problème dans la plupart des cas, car le vaste la majorité des ancres sont aujourd'hui des liens à sens unique de l'ancre vers un autre document. Mais le but de l'ancre est plus qu'un simple lien à sens unique vers un autre document, de sorte que la définition continue d'incarner ce but.

35
David

Le spéc pour <a> a un modèle de contenu de:

Transparent, mais il ne doit pas y avoir contenu interactif descendant.

Donc, la spécification est en fait plus compliquée que vous ne le dites. Cela s'applique également à <button> - vous ne pouvez pas avoir de liens de travail à l'intérieur de liens ou de boutons à l'intérieur de boutons.

Malheureusement, je n'ai pas de réponse solide à votre question pourquoi - je ne peux que spéculer. Une raison claire est l'ambiguïté qu'elle provoque (par exemple, quelle ancre doit être suivie lorsque l'on clique sur l'ancre intérieure?)

Cela crée non seulement une ambiguïté fonctionnelle, mais aussi une ambiguïté sémantique. Le contenu du <a> est une étiquette pour son hyperlien. Cela signifie-t-il donc que le lien hypertexte interne fait partie de l'étiquette du contenu du lien externe?

7
Explosion Pills

L'imbrication des ancres n'est pas recommandée par les normes (bien que tous les navigateurs sur lesquels je l'ai testée semblent conduire à la cible de clics la plus profonde) en raison de l'ambiguïté.

Il n'est pas logique de dire qu'une grande partie devrait mener à une certaine page et dans cette partie une petite section devrait mener ailleurs. Je dois encore voir tout cas d'utilisation pour ce type de comportement. Avec l'évolution des langages de script disponibles, ce type d'itération ou d'héritage peut fonctionner (événements de clic javascript sur divs par exemple), mais jamais un code ne voudra diriger vers une certaine URL puis vers une autre (href des ancres parentales).

Edit: En regardant la question que vous avez référencée dans la vôtre, empiler 2 ancres qui pointent vers le même href exact est complètement inutile. Supprimez simplement celui imbriqué et tout ira bien. Si c'est parce que vous avez créé une règle CSS comme a a{color:red;} utilisez un span! Ou même un div avec display:inline mais s'il vous plaît, très bien, une ancre devrait aller quelque part, ne devrait pas être utilisée uniquement à des fins de style ou quelque chose.

1
Salketer