Ce qui est plus correct: <h1> <a>… </a> </h1> OU <a> <h1>… </h1> </a>

Les deux <h1><a ...> ... </a></h1>et le <a ...><h1> ... </h1></a>HTML sont-ils valides ou un seul est-il correct? S'ils sont tous les deux corrects, ont-ils un sens différent?

Les deux versions sont correctes. La plus grande différence entre eux est que dans le cas où <h1><a>..</a></h1>seul le texte du titre sera cliquable.

Si vous mettez le <a>autour de <h1>et la displaypropriété css is block(ce qui est par défaut), le bloc entier (la hauteur du <h1>et 100% de la largeur du conteneur <h1>dans lequel il réside) sera cliquable.

Historiquement, vous ne pouviez pas mettre un élément de bloc à l'intérieur d'un élément en ligne, mais ce n'est plus le cas avec HTML5. Je pense cependant que l' <h1><a>..</a></h1>approche est plus conventionnelle.

Dans le cas où vous souhaitez placer une ancre sur l'en-tête, une meilleure approche que ce <a id="my-anchor"><h1>..</h1></a>serait d'utiliser idl' nameattribut ou l' attribut comme celui-ci: <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> dans le <a>

<a><h1></h1></a>n'est pas valide pour le W3C ... Fondamentalement, vous ne pouvez pas mettre d' éléments de bloc dans des éléments en ligne

<h1><a>..</a></h1>et se <a><h1>..</h1></a>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 que vous vous concentrez sur un lien, un «rectangle de focus» apparaît autour du lien dans la plupart des navigateurs. Car <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, puisque le balisage rend lea élément un élément de bloc dans le rendu, occupant 100% de largeur par défaut.

Ce qui suit montre comment un focus <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 la même manière.

Historiquement, a <a><h1>..</h1></a>été déclaré invalide dans HTML 2.0, et les spécifications HTML suivantes ont suivi, mais HTML5 change cela et le déclare comme valide. La définition formelle n'a pas affecté les navigateurs, seulement les validateurs. Cependant, il est possible 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 fonctionnent 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 d'un titre ou d'un texte dans un titre un lien. (C'est surtout illogique et mauvais pour la convivialité.) Mais une question similaire s'est souvent posée lors de la création d'un en-tête (ou d'un texte dans un en-tête) comme destination potentielle d'un lien, en utilisant par exemple <h2><a name=foo>...</a></h2>versus <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' aélément un bloc, et avant HTML5, seul le premier est formellement autorisé). Mais en plus, dans les deux sens sont dépassées, et en utilisant l' idattribut directement sur l'élément de cap est maintenant recommandé: <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>

voulez-vous utiliser un lien hypertexte <a href="…">/ a:link, ou voulez-vous ajouter une ancre à votre titre? si vous souhaitez ajouter une ancre, vous pouvez simplement attribuer un identifiant <h1 id="heading">. vous pouvez ensuite le lier en tant que page.htm#heading.

si vous voulez rendre l'en-tête cliquable (un lien), utilisez d' abord les éléments <h1><a></a></h1>/ h1 > a- blocklevel, et les éléments en ligne à l'intérieur

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 remplaceront les styles de l'élément h1. Exemple:

a {color:red;font-size:30px;line-height:30px;}

SERA SUPPRIMÉ

h1 {color:blue;font-size:40px;line-height:40px;}