ancre enfant dans un bogue d'élément parent ancre - html, browser, html-rendering

Ai-je trouvé le bug de rendu html le plus ridicule? Si vous placez un élément d'ancrage dans un autre élément d'ancrage, il rendra l'enfant à l'extérieur de son parent: jsfiddle

 <a id="parent" href="#">
<a class="child" href="#">Child</a>
</a>

Si vous changez l'élément en une étendue, cela fonctionne très bien. Même exemple avec span.

<span id="parent">
<span class="child" href="#">Child</span>
</span>

Puisque c'est la même chose dans Chrome, Firefox, IE, Safari, sur Linux, Mac, Windows, Android, j'ai tendance à penser qu'il y a une règle cachée pour les éléments d'ancrage qui me manquent.

Réponses:

Étant donné que les éléments d'ancrage imbriqués sont HTML non valide, la plupart des navigateurs essaieront d'être utiles et de corriger cela automatiquement pour vous, ce qui se traduira par:

<a id="parent" href="#"></a><a class="child" href="#">Child</a>

La même chose ne se produit pas avec les éléments span, car ils peuvent être imbriqués et le navigateur n'interférera pas.