Sémantiquement, qui est plus correct: a en h2, ou h2 en a?
Je suis coincé à décider lequel utiliser car les deux semblent fonctionner.
Dois-je placer des liens <a> à l'intérieur de <h2> éléments?
Ou l'inverse?
Quelle est la bonne norme?
Vous ne pouvez placer que <h2> éléments dans <a> éléments si vous travaillez avec HTML5, ce qui autorise tout autre élément dans <a> éléments . Les spécifications précédentes (ou celles que vous souhaitez consulter actuellement) ne l'ont jamais autorisé.
La manière habituelle de procéder consiste à placer <a> dans <h2>. Cela fonctionne, a toujours fonctionné et a été le seul moyen valide de le faire avant HTML5, pour les liens de titre, car le lien fait référence au texte de ce titre. Vous devez rarement placer <h2> dans <a> à moins que <h2> fait partie d'une structure plus complexe qui fonctionne comme un hyperlien dans son ensemble.
De plus, cela ne fonctionne pas de la même manière, il y a une grande différence.
Si vous mettez <h2> en <a> tout le bloc (par exemple la ligne) de l'en-tête fonctionnera comme un lien.
Cependant, si vous mettez <a> en <h2>, seul le texte visible fonctionnera comme lien. (vous pouvez le tester avec un changement de curseur)
<h2> est au niveau du bloc et <a> est pas <h2> peut contenir <a> mais pas l'inverse
Le HTML permet les choses à l'intérieur <a> Mots clés
J'ai ceci...
<header>
<a href="/home">
<h1>Main heading</h1>
<h2>Sub heading</h2>
</a>
</header>
Et ça fonctionne pour moi.
Le texte de l'intégralité du titre, y compris le sous-titre, est cliquable à ma guise. Je ne connais pas de meilleure façon de le faire avec html 5.
La réponse est que cela dépend ...
Sur le site Web du W3C, plus précisément dans la page sémantique HTML5 , il est clair que les éléments h2 (comme toutes les autres balises de titre) ont pour modèle de contenu "Contenu de phrasé".
Maintenant, en suivant le lien de contenu Phrasing , vous obtenez la description suivante:
Le contenu de la formulation est le texte du document, ainsi que les éléments qui marquent ce texte au niveau intra-paragraphe. Des séquences de contenu de phrasé forment des paragraphes.
et dans la liste suivante, vous avez le contenu de la formulation:
a (if it contains only phrasing content)
Donc, si la balise a ne comprend que du contenu de phrasé, HTML5 permet qu'elle soit contenue dans un h2 tag.
Viceversa, la page de sémantique au niveau du texte décrit le modèle de contenu de l'élément a comme suit:
Transparent, mais il ne doit pas y avoir de descendant de contenu interactif.
Après Lien transparent , à la fin de la description se trouve ce qui suit:
Lorsqu'un élément transparent n'a pas de parent, la partie de son modèle de contenu qui est "transparente" doit plutôt être traitée comme acceptant tout contenu de flux.
Puisque dans le h2 description de la balise il est dit:
Contextes dans lesquels cet élément peut être utilisé: où le contenu du flux est attendu.
un h2 tag peut être considéré comme contenu de flux.
Donc, si la balise a n'a pas de parent, en HTML5, elle doit être traitée comme acceptant tout contenu de flux, y compris les balises h2.
Le W3C spécifications pour h2 dit que ses éléments parents autorisés sont tout ce qui peut contenir des éléments de flux ou des hgroups. Les spécifications pour a autorisent les éléments parents qui peuvent contenir des éléments de flux de phrasé ou . h2 peut contenir du contenu de phrasé, et a peut contenir du contenu de phrasé ou de flux, donc d'après la spécification, il semble que l'un ou l'autre soit autorisé.
Puisque vous avez inclus la balise sémantique, je suppose que vous vous intéressez également à ce qui "semble" mieux. Pour ma part, puisque je ne peux pas penser à quand je voudrais qu'une ancre couvre un en-tête plus un autre contenu, mais je peux penser à beaucoup de fois où un en-tête devrait contenir une ancre plus un autre contenu, un h2 intérieur semble le meilleur itinéraire à parcourir.