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

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.


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


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/


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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.