5553 sujets

Sémantique web et HTML

Modérateur
Salut tout le monde,

Je suis sur un petit projet. Dans mon projet, j'ai placé un <hgroup>. J'ai validé mon html et ça me sort une erreur. La doc de MDN indique qu'on le peut éditer un <Hn> et ensuite placer un <p>. Je n'ai pas bien saisi la sémantique. De mon côté, j'ai fait ceci puisque j'ai un titre et un sous titre :


<hgroup>
    <h2>un titre</h2>
    <h3>un sous-titre</h3>
</hgroup>



Connaissez-vous la raison ?

Bien à vous toutes et tous.
Modifié par niuxe (06 Jul 2024 - 12:56)
Modérateur
Bonjour,

vu comme ça , cela à l'air okay.

Dans la définition on lit : L'élément hgroup permet de regrouper le titre principal d'une section avec du contenu secondaire .
Cela impose peut-être de n'en avoir qu'un par et en début de conteneur(pas de frère)?

Cette élément ne semble pas avoir franchement de sémantique , à peine plus qu'un div a ce que j'en comprend en lisant sa définition.

Je comprend aussi qu'il doit contenir un titre et éventuellement un ou plusieurs paragraphes.
Je dirai que ton exemple a un titre de trop Smiley cligne

cdt
Modifié par gcyrillus (06 Jul 2024 - 13:56)
salut,
w3c nous dit que:
Element h3 not allowed as child of element hgroup
Modifié par drphilgood (06 Jul 2024 - 14:45)
Modérateur
Bien sûr, j'ai un h1 dans la page. J'ai fait les modifs afin que mon <p> dans mon <hgroup> ait le style souhaité. J'ai trouvé bizarre cette règle w3c pour cet élément. Smiley ohwell
@niux
Sur tes propres conseils, j'ai mis un hgroup sur un site, comme ça, et je n'ai pas d'erreur au validateur.
<hgroup>
  <h1>Titre principal de ma page</h1>
  <p>Texte court en rapport avec la page (un petit paragraphe d'accroche de la page)</p>  
</hgroup>
Ah là là, hgroup... Élément implanté dans la spécification, puis retiré, puis à nouveau implanté...

L'exemple de Bongota est le bon : le sous-titre se doit d'être un paragraphe. C'est la balise hgroup qui permet de contextualiser la balise p comme sous-titre.

Il ne peut y avoir qu'un seul titre par hgroup, quel que soit sa hiérarchie, par contre on peut avoir plusieurs sous-titres :

MDN a écrit :
L'élément HTML <hgroup> représente un titre et son contenu associé. Il regroupe un élément <h1>-<h6> avec un ou plusieurs paragraphes <p>.

Modifié par Olivier C (07 Jul 2024 - 09:45)
Bonjour,

Je m'apprêtais à répondre que <hgroup> avait été retiré des spécifications, mais il a été visiblement réintroduit depuis.
J'ai dû rater quelques chapitres sur le grand débat qui entoure cet élément.

C'est effectivement le dernier exemple qui est correct, avec le titre <h2> et le paragraphe.

En fait, il faut voir <hgroup> comme le regroupement d'un titre et d'un court paragraphe associé comme une accroche, un chapeau ou un slogan.

Associer un titre <hn> et un sous-titre <hn+1> (p.ex. <h2> et <h3>) dans un élément de regroupement ne fait pas de sens.
Si le <h3> est vraiment un sous-titre, il n'a pas à être associé à son titre parent dans <hgroup>. Car alors la situation du prochain <h3> est ambigüe.

Si on prend se code par exemple:
ATtention, c'est un code incorrect !


<hgroup>
<h2>Chapitre 1</h2>
<h3>Chapitre 1.1</h3>
</hgroup>
...
<h3>Chapitre 1.2</h3>
...


Si l'idée est de considérer le <hgroup> comme un seul tenant, le prochain <h3> titre-t-il réellement la section 1.2 ? et non pas 1.1 ?
Vous voyez bien que c'est un peu bizarre, ambigü, pas très clair. Voilà pourquoi ce n'est pas valide.

A noter aussi que <hgroup> n'a pas comme vocation de remplacer <section> par exemple. Vouloir regrouper un <h2> avec un gros paragraphe de texte (ou plusieurs) n'est pas non plus l'objectif de <hgroup>.
Le texte du <hgroup> doit rester assez court, tout au plus quelques phrases. D'où la notion d'accroche, chapeau ou slogan, et d'où aussi, certainement, le débat disputé sur l'utilité/nécessité d'un tel élément.
Meilleure solution
Modérateur
QuentinC a écrit :

En fait, il faut voir <hgroup> comme le regroupement d'un titre et d'un court paragraphe associé comme une accroche, un chapeau ou un slogan.


J'ai cette même idée du pourquoi <hgroup> Smiley smile D'ailleurs dans mon petit projet actuel, c'est un titre avec un chapeau d'article.

QuentinC a écrit :



<hgroup>
<h2>Chapitre 1</h2>
<h3>Chapitre 1.1</h3>
</hgroup>
...
<h3>Chapitre 1.2</h3>


Merci QuentinC pour ton exemple. En effet, je comprends maintenant cette ambiguïté. Smiley smile

Sujet résolu. Merci à vous tous pour votre intervention sur ce sujet Smiley smile
Modifié par niuxe (07 Jul 2024 - 12:16)
Modérateur
Salut QuentinC,
Est-ce que tu peux nous dire l'impact pour un lecteur d'écran, stp ? J'imagine que ça ne change rien, je veux juste être sur.

QuentinC a écrit :
Bonjour,

Je m'apprêtais à répondre que &lt;hgroup&gt; avait été retiré des spécifications, mais il a été visiblement réintroduit depuis.
J'ai dû rater quelques chapitres sur le grand débat qui entoure cet élément.

C'est effectivement le dernier exemple qui est correct, avec le titre &lt;h2&gt; et le paragraphe.

En fait, il faut voir &lt;hgroup&gt; comme le regroupement d'un titre et d'un court paragraphe associé comme une accroche, un chapeau ou un slogan.

Associer un titre &lt;hn&gt; et un sous-titre &lt;hn+1&gt; (p.ex. &lt;h2&gt; et &lt;h3&gt;) dans un élément de regroupement ne fait pas de sens.
Si le &lt;h3&gt; est vraiment un sous-titre, il n'a pas à être associé à son titre parent dans &lt;hgroup&gt;. Car alors la situation du prochain &lt;h3&gt; est ambigüe.

Si on prend se code par exemple:
ATtention, c'est un code incorrect !


&lt;hgroup&gt;
&lt;h2&gt;Chapitre 1&lt;/h2&gt;
&lt;h3&gt;Chapitre 1.1&lt;/h3&gt;
&lt;/hgroup&gt;
...
&lt;h3&gt;Chapitre 1.2&lt;/h3&gt;
...


Si l'idée est de considérer le &lt;hgroup&gt; comme un seul tenant, le prochain &lt;h3&gt; titre-t-il réellement la section 1.2 ? et non pas 1.1 ?
Vous voyez bien que c'est un peu bizarre, ambigü, pas très clair. Voilà pourquoi ce n'est pas valide.

A noter aussi que &lt;hgroup&gt; n'a pas comme vocation de remplacer &lt;section&gt; par exemple. Vouloir regrouper un &lt;h2&gt; avec un gros paragraphe de texte (ou plusieurs) n'est pas non plus l'objectif de &lt;hgroup&gt;.
Le texte du &lt;hgroup&gt; doit rester assez court, tout au plus quelques phrases. D'où la notion d'accroche, chapeau ou slogan, et d'où aussi, certainement, le débat disputé sur l'utilité/nécessité d'un tel élément.
a écrit :
Est-ce que tu peux nous dire l'impact pour un lecteur d'écran, stp ? J'imagine que ça ne change rien, je veux juste être sur.


Si par impact tu veux dire par là est-ce qu'il y a une différence de rendu du lecteur d'écran entre la version avec ou sans <hgroup>, la réponse est non, ça ne change rien, ou alors quelque chose de négligeable.