Laquelle est la plus correcte: <h1> <a> ... </a> </ h1> OR <a> <h1> ... </ h1> </a>
Sont les deux <h1><a ...> ... </a></h1> et <a ...><h1> ... </h1></a> HTML valide ou un seul est-il correct? S'ils sont corrects, ont-ils une signification différente?
Les deux versions sont correctes. La plus grande différence entre eux est que dans le cas de <h1><a>..</a></h1> seul le texte du titre sera cliquable.
Si vous mettez le <a> autour du <h1> et la propriété css display est block (ce qui est par défaut) la totalité du bloc (la hauteur de la <h1> et 100% de la largeur du conteneur, le <h1> réside dans) sera cliquable.
Historiquement, vous ne pouviez pas insérer d'élément de bloc dans un élément en ligne, mais ce n'est plus le cas avec HTML5. Je penserais que le <h1><a>..</a></h1> L’approche est plus conventionnelle cependant.
Dans le cas où vous souhaitez placer une ancre sur l'en-tête, une meilleure approche que <a id="my-anchor"><h1>..</h1></a> serait d'utiliser l'attribut id ou name comme ceci: <h1 id="my-anchor">..</h1> ou <h1 name="my-anchor">..</h1>
En pré HTML 5 celui-ci
<a><h1>..</h1></a>
ne validera pas. Vous pouvez l'utiliser en HTML 5. Cependant, j'utiliserais ceci:
<h1><a>..</a></h1>
sauf si vous devez ajouter plus de <h1> à l'intérieur du <a>
<a><h1></h1></a> n'est pas valide pour le W3C ... En principe, vous ne pouvez pas mettre éléments de bloc à l'intérieur éléments en ligne
<h1><a>..</a></h1> et <a><h1>..</h1></a> se sont toujours comportés presque de la même façon, lorsque les feuilles de style n’affectent pas le rendu. Presque, mais pas tout à fait. Si vous naviguez à l'aide de la touche de tabulation ou si vous vous concentrez sur un lien, un "rectangle de focus" apparaît autour du lien dans la plupart des navigateurs. Pour <h1><a>..</a></h1>, ce rectangle est uniquement autour du texte du lien. Pour <a><h1>..</h1></a>, le rectangle s’étend sur l’espace horizontal disponible, car le balisage fait de l’élément a un élément de bloc dans le rendu, occupant 100% de la largeur par défaut.
Ce qui suit montre comment un <a href=foo><h1>link</h1></a> est rendu par Chrome:
Cela implique que si vous stylisez des éléments, par exemple. en définissant une couleur d'arrière-plan pour les liens, les effets diffèrent de manière similaire.
Historiquement, <a><h1>..</h1></a> a été déclaré invalide dans HTML 2.0 et les spécifications HTML suivantes ont suivi, mais HTML5 le modifie et le déclare comme valide. La définition formelle n'a pas affecté les navigateurs, mais uniquement les validateurs. Cependant, il est possible à distance que certains agents utilisateurs (probablement pas des navigateurs normaux, mais par exemple des moteurs de rendu HTML spécialisés, des extracteurs de données, des convertisseurs, etc.) ne gèrent pas <a><h1>..</h1></a> correctement, car cela n’a pas été autorisé dans les spécifications.
Il y a rarement une bonne raison de faire un lien d'un titre ou d'un texte dans un titre. (C’est surtout illogique et mauvais pour la facilité d’utilisation.) Mais une question similaire s’est souvent posée lorsqu’un titre (ou du texte d’un titre) est un potentiel destination pour un lien, en utilisant par exemple <h2><a name=foo>...</a></h2> contre <a name=foo><h2>...</h2></a>. Des considérations similaires s'appliquent à cela (les deux fonctionnent, il peut y avoir une différence puisque ce dernier fait de l'élément a un bloc, et avant HTML5, seul le premier est formellement autorisé). Mais en plus, les deux méthodes sont obsolètes et il est maintenant recommandé d’utiliser l’attribut id directement sur l’en-tête: <h2 id=foo>...</h2>.
Les éléments H1 sont des éléments de niveau bloc et les ancres sont des éléments en ligne. Vous êtes autorisé à avoir un élément en ligne dans un élément de niveau bloc, mais pas l'inverse. Lorsque vous considérez le modèle de boîte et la spécification HTML, cela a du sens.
Donc, en conclusion, le meilleur moyen est:
<h1><a href="#">Link</a></h1>
En outre, il existe des différences de hiérarchie de style. Si vous l'avez en tant que <h1><a href="#">Heading here</a></h1>, Les styles de l'ancre prévalent sur les styles de l'élément h1. Exemple:
a {color:red;font-size:30px;line-height:30px;}
Va surpasser
h1 {color:blue;font-size:40px;line-height:40px;}
voulez-vous utiliser un lien hypertexte <a href="…">/a:link ou voulez-vous ajouter une ancre à votre rubrique? si vous voulez ajouter une ancre, vous pouvez simplement attribuer un identifiant <h1 id="heading">. vous pouvez alors le lier en tant que page.htm#heading.
si vous voulez rendre l'en-tête cliquable (un lien), utilisez <h1><a></a></h1>/h1 > a - les éléments de niveau bloc en premier et les éléments en ligne à l'intérieur