5568 sujets

Sémantique web et HTML

Sémantique des balises de titres

Bonjour,
Au fil des années, les intégrateurs web (moi le premier) ont eu tendance à utiliser les balises de titres (H1 à H6) un peu à l'aveuglette, en ayant en tête l'optimisation des moteurs de recherche (on en arrive généralement à un H1 unique = titre/logo du site et le reste en H2-H6). Mais de quelle façon ont-elles été prévues pour être utilisées ?
Je sais bien qu'elles sont censée indiquer des titres de manière hiérarchique pour marquer des sections au sein d'un document, mais qu'en est-il de l'utilisation de sous-titres, par exemple ?
Mettons que je veuille mettre en forme le document qui a la structure suivante :
MON SUPER TEXTE
un texte génial écrit par moi

1. Introduction
Du bla bla.

2. La deuxième partie
Encore du bla bla.

3. En conclusion
Toujours du bla bla

On identifie facilement les titres principaux "MON SUPER TEXTE", "Introduction", "La deuxième partie" et "En conclusion" mais quid du sous-titre "un texte génial écrit par moi" ? est-ce que c'est un titre au sens des balises H1 à H6 ? est-ce qu'il devrait plutôt être traité en emphase ou mis en valeur ? à l'intérieur du titre qui le précède ?
Qu'est-ce qui vous semble le plus logique :
H1 : MON SUPER TEXTE
H2 : un texte génial écrit par moi

H3 : 1. Introduction
P : Du bla bla.

H3 : 2. La deuxième partie
P : Encore du bla bla.

H3 : 3. En conclusion
P : Toujours du bla bla

ou
H1 : MON SUPER TEXTE
EM/STRONG/autre : un texte génial écrit par moi

H2 : 1. Introduction
P : Du bla bla.

H2 : 2. La deuxième partie
P : Encore du bla bla.

H2 : 3. En conclusion
P : Toujours du bla bla
Bonjour,

Ce que tu considère comme un sous-titre, n'en est pas un, c'est plis une tagline.

La seconde solution est pour moi la bonne.
Bonjour,

La première solution proposée est fausse.
La deuxième est juste.

Si ton «un texte génial écrit par moi» est une baseline courte que tu considères comme faisant partie du titre principal, tu peux coder ainsi en HTML4:
<h1>
  <span>MON SUPER TEXTE</span>
  <span>un texte génial écrit par moi</span>
</h1>
<h2>1. Introduction</h2>
...

et ainsi en HTML5:
<hgroup>
  <h1>MON SUPER TEXTE</h1>
  <h2>un texte génial écrit par moi</h2>
</hgroup>
<h2>1. Introduction</h2>
...
(dans ce cas le H2 dans le HGROUP n'est pas compté dans le plan du document).
Si la baseline est courte et pertinente pour le SEO, la première solution (qui est toujours possible en HTML5 aussi bien sûr) est peut-être la plus adaptée.

S'il s'agit d'un texte d'introduction ou de description relativement long (paragraphe) plutôt que d'une baseline, on préfèrera un simple paragraphe.
Merci pour vos avis.

Je trouve quand même curieux qu'une sémantique soit perçue comme incorrecte en HTML4 et correcte en HTML5 (le coup des baselines avec un h2 dans le hgroup). Tu mettrais quand même un h2 simplement parce que ça ne casse pas la structure du document lorsque c'est dans un groupe ?
Logiquement, les différents éléments devraient avoir la même valeur sémantique quelle que soit la version de HTML...

Pour préciser un peu mon interrogation initiale, je bosse sur un site pour une manifestation culturelle : dans l'entête, on a le titre du site et des précisions qui vont avec (FESTIVAL MACHIN / du 12 juillet au 3 août, à Petaouchnok), avant de passer au contenu du site. Je considérais ces précisions comme un sous-titre, un complément qui va directement avec le titre. Mais après tout, ça pourrait tout aussi être une liste...

En tout cas, je connaissais pas le hgroup. Faudra quand même que je me mette sérieusement à regarder les nouveautés de HTML5 un jour. Smiley smile
Modifié par terzag (05 Jul 2011 - 16:59)
terzag a écrit :
Je trouve quand même curieux qu'une sémantique soit perçue comme incorrecte en HTML4 et correcte en HTML5 (le coup des baselines avec un h2 dans le hgroup).

Rien de curieux à ça: l'élément HGROUP n'existe pas en HTML4, c'est un ajout de HTML5.

terzag a écrit :
Logiquement, les différents éléments devraient avoir la même valeur sémantique quelle que soit la version de HTML...

HTML5 a un algorithme particulier pour le calcul du plan du document. Des éléments comme SECTION, ARTICLE, BLOCKQUOTE ou HGROUP ont une influence sur la "valeur" des éléments HN.

Là comme ça je te conseillerais de prendre l'une de ces deux structures:
<h1>
  <span>Festival Machin</span>
  <span>du 12 juillet au 3 août, à Petaouchnok</span>
</h1>

<h1>Festival Machin</h1>
<p>du 12 juillet au 3 août, à Petaouchnok</p>

Les deux fonctionnent.
fvsch a écrit :
Rien de curieux à ça: l'élément HGROUP n'existe pas en HTML4, c'est un ajout de HTML5.

Oui, bien sûr. Ce que je voulais dire c'est que ça m'étonne que l'ajout d'une option de structure permette d'envisager différemment la sémantique d'un élément.

Smiley qote HTML5 a un algorithme particulier pour le calcul du plan du document. Des éléments comme SECTION, ARTICLE, BLOCKQUOTE ou HGROUP ont une influence sur la &quot;valeur&quot; des éléments HN.
Ok.

a écrit :
Là comme ça je te conseillerais de prendre l'une de ces deux structures:
<h1>
  <span>Festival Machin</span>
  <span>du 12 juillet au 3 août, à Petaouchnok</span>
</h1>

<h1>Festival Machin</h1>
<p>du 12 juillet au 3 août, à Petaouchnok</p>

Les deux fonctionnent.

J'ai finalement opté pour des balises strong dans mon H1.
Modifié par terzag (06 Jul 2011 - 19:16)
En même temps, un STRONG dans un H1, c'est pas forcément pertinent mais ya pas mort d'homme. Smiley lol
Laurie-Anne a écrit :
Pourquoi strong ? Smiley eek Rien ne le justifie...

Parce qu'il me semble que ce sont des éléments qui doivent être mis en avant.
terzag a écrit :
Parce qu'il me semble que ce sont des éléments qui doivent être mis en avant.

Tu es déjà dans un H1. Le STRONG ne fait pas grand mal mais il est clairement redondant.
(Si tu veux aller jusqu'au bout de cette logique tu peux aussi écrire <h1><strong><em>Hop</em></strong></h1>. Smiley cligne )
fvsch a écrit :

Tu es déjà dans un H1. Le STRONG ne fait pas grand mal mais il est clairement redondant.

Le H1 correspond à mon "bloc" titre, dans lequel je considère qu'il y a plusieurs éléments de nature et d'importance différente. Smiley cligne
Sujet clos
Aller à