La norme pour relier <h> Tag éléments

Question

est:

<a href="#"><h1>text here</h1></a> 

ou

<h1><a href="#">text here</a></h1> 

"correcte". Y at-il un avantage à utiliser le premier, il me semble plus logique. Peut-être d'un point de SEO?

Answer 1

<h1><a href="#">text here</a></h1> 

est exact, comme HTML ne permet pas à un élément de bloc (<h1>) dans un élément en ligne (<a>) (src). votre premier exemple échouera validation.

Généralement, les éléments de niveau bloc peuvent contenir des éléments en ligne et d'autres éléments de niveau bloc. Généralement, les éléments en ligne peuvent contenir uniquement des données et d'autres éléments en ligne. L'idée que les éléments de bloc créent des structures «plus grandes» que les éléments en ligne est inhérente à cette distinction structurelle.

Answer 2

Votre deuxième exemple est la seule structure autorisée. Le premier met un élément de niveau bloc à l'intérieur d'un élément en ligne et HTML ne le permet pas. Les navigateurs peuvent l'autoriser, mais ce n'est pas un code HTML valide.

Answer 3

Il n'y a pas vraiment de différence dans ce cas particulier. Il y a des choses à signaler que:

• <h*> sont des éléments de bloc, <a> est un élément en ligne par défaut. Comme d'autres l'ont souligné, XHTML n'autorise pas les éléments de bloc dans les éléments en ligne, donc si vous n'avez pas redéfini leur style d'affichage en CSS, <a><h1></h1></a> n'est pas valide.
• <a href="#"><h1>text here</h1></a> est un lien qui peut avoir plusieurs nœuds enfants. Dans ce cas, il n'a qu'un nœud enfant <h1>, mais rien ne vous empêche d'en ajouter d'autres.
• D'autre part, <h1><a href="#">text here</a></h1> est un en-tête qui peut gruger plusieurs nœuds. Vous pouvez y ajouter toutes sortes de nœuds enfants, comme des étiquettes, etc.

Il s'agit donc essentiellement d'une différence logique sans aucune différence pratique dans ce cas particulier.

Answer 4

Note supplémentaire, bien que le premier cas fonctionne, c'est purement dû aux navigateurs permissifs. Vous trouverez peut-être par l'inspection de l'arbre dom interne qui

<a><h1>foo</h1></a> 

est cassé en

<a></a> 
<h1><a>foo</a></h1> 
<a></a> 

Et cela peut créer intéressants résultats. ;)