comment mélanger les liens (balise <a>) et les en-têtes (balise <h1>) en standard web?

95

Quel est le code correct pour créer un lien avec l'en-tête 1 selon les standards du Web?

est-ce

<h1><a href="http://stackoverflow.com"> stackoverflow </a></h1>

ou

<a href="http://stackoverflow.com"><h1> stackoverflow </h1></a>

Merci

html web-standards ahmed
la source

Réponses:

143

Selon les normes Web, vous n'êtes pas autorisé à placer des éléments de bloc dans des éléments en ligne.

Comme h1c'est un élément de bloc et aest un élément en ligne, la manière correcte est:

<h1><a href="#">This is a title</a></h1>

Voici un lien pour en savoir plus: w3 Modèle de formatage visuel

Cependant, il existe une exception selon laquelle en HTML5, il est valide d'encapsuler des éléments de niveau bloc (comme div, pou h*) dans des balises d'ancrage. L'emballage d'éléments de niveau bloc dans des éléments en ligne autres que des ancres va toujours à l'encontre des normes.

Darko Z
la source
19
Dans HTLM5, cela a changé. Les deux exemples valideront - validator.w3.org .
Atadj
joli. c'est une erreur facile à faire, et bien que les deux valideront sa logique selon laquelle les éléments naturellement en ligne devraient être des descendants d'éléments de niveau bloc.
bigmadwolf
@pushplaybang - Je dirais qu'il est plus sémantique d'envelopper l'en-tête dans un lien à moins que seule une partie de l'en-tête soit censée être cliquable (je ne peux pas penser à un cas d'utilisation pour cela). Quoi qu'il en soit, c'est bien que les deux soient pris en charge en html5.
aaaaaa
48

HTML5 met à jour ce sujet: il est maintenant possible d'encapsuler les éléments de niveau bloc avec des A, comme indiqué sous une autre question: https://stackoverflow.com/a/9782054/674965 et ici: http://davidwalsh.name/html5- éléments-liens

f055
la source
8
Cette réponse est maintenant beaucoup plus pertinente que la réponse acceptée
Josh Davenport
@JoshDavenport La réponse acceptée a été mise à jour pour refléter cela
dan-klasson
2

Autant que je sache, HTML5 vous permet d'encapsuler des éléments de niveau bloc dans des balises de lien. Cependant, des bogues peuvent apparaître dans les anciens navigateurs. J'ai rencontré cela avec Firefox 3.6.18 et j'ai inséré moz-rs-header = "" dans mon code. Ainsi mes styles se sont cassés. Si vous vous souciez d'une solution, vous pouvez ensuite envelopper les balises de lien dans des divs. Ce qui suit fournit une meilleure explication de la raison pour laquelle le code supplémentaire fonctionne http://oli.jp/2009/html5-block-level-links/

Actes de Kip
la source
1

a > h1 causera des difficultés dans la sélection du texte

Problèmes de sélection de texte

Étant donné que les deux sont complètement valides en HTML5, il est préférable d'utiliser h1 > a

Abhishek
la source