HTML5, structuration documentaire

Cours

La balise hgroup

Une balise devenue obsolète

Le but de cet exercice est de manipuler la balise hgroup pour ensuite comprendre pourquoi elle est devenue obsolète et ne fait plus partie de la spécification HTML5.

La balise <hgroup> contient plusieurs éléments h1 à h6, qu'elle regroupe ensemble en un seul bloc titre :

<hgroup></hgroup>

En particulier, l'algorithme Outline HTML5 ne gardera que la balise de titre "supérieure" (la moins profonde) du groupe dans le sectionnement d'un document.

Cette balise a été créée pour permettre d'adjoindre facilement des sous-titres à une section.

Question

On dispose du code HTML4 suivant :

<body>
<div class="article">
   <div class="header">
      <div class="title">Un titre</div>
      <div class="subtitle">Un sous-titre</div>
      <p class="author">Tom B.</p>
   </div>
   ...
</div>
</body>

<body>
<div class="article">
   <div class="header">
      <div class="title">Un titre</div>
      <div class="subtitle">Un sous-titre</div>
      <p class="author">Tom B.</p>
   </div>

   ...

</div>
</body>

Transformer ce code en HTML5 en utilisant la balise <hgroup>.

Indice

<hgroup>
   <h1>...</h1>
   <h2>...</h2>
</hgroup>

<hgroup>
   <h1>...</h1>
   <h2>...</h2>
</hgroup>

Solution

<body>
<article>
   <header>
      <hgroup>
         <h1>Un titre</h1>
         <h2>Un sous-titre</h2>
      </hgroup>
      <p class="author">Tom B.</p>
   </header>
   ...
</article>
</body>

<body>
<article>
   <header>
      <hgroup>
         <h1>Un titre</h1>
         <h2>Un sous-titre</h2>
      </hgroup>
      <p class="author">Tom B.</p>
   </header>

   ...

</article>
</body>

Question

Vérifier à l'aide d'un Outliner HTML5 en ligne (ici par exemple) les résultats conformes aux attentes, avec ou sans hgroup.

Solution

Résultat de l'algorithme Ouline
Sans <hgroup>	Avec <hgroup>
Document/Untitled Section Un titre Un sous-titre	Document/Untitled Section Un titre

Remarque : l'élément body est responsable de la section racine de la hiérarchie.

Question

h1–h6 elements must not be used to markup subheadings, subtitles, alternative titles and taglines unless intended to be the heading for a new section or subsection.

Source : recommandation HTML5 du W3C (octobre 2014)

Avancer une explication quant à la suppression de la balise <hgroup>, en s'appuyant sur la logique de structuration documentaire apportée par HTML5.

Indice

Quel est le rôle des balises h1 ... h6 ? Quel est l'apport concret de hgroup par rapport à un div ?

Solution

Les balises h1 ... h6 ont un rôle sémantique précis : désigner les titres de chaque section du document de manière à générer le plan de ce dernier (algorithme Outline).

Ainsi, le simple fait de les encapsuler dans une balise <hgroup> ne communique en rien que l'une ou plusieurs d'entre elles devienne un sous-titre.

Plus problématique, si c'était le cas, alors cela voudrait dire qu'une balise de titre peut perdre sa valeur sémantique habituelle lorsqu'intégrée à un <hgroup>...

Enfin, la balise n'apporte finalement rien de plus au niveau sémantique qu'un <div> qui grouperait plusieurs éléments ensemble.

Question

Reprendre le code précédent et proposer une alternative à hgroup.

Indice

3 alternatives proposées par le W3C :

le sous-titre est encapsulé dans une balise <p> appartenant au <header> ;
le sous-titre appartient à la balise de titre, séparée du titre par ":" ;
le sous-titre appartient à la balise de titre, encapsulé dans un <span> pour permettre un CSS spécifique.

Solution

<body>
<article>
   <header>
      <h1>Un titre</h1>
      <p class="subtitle">Un sous-titre</p>
      <p class="author">Tom B.</p>
   </header>
   ...
</article>
</body>

<body>
<article>
   <header>
      <h1>Un titre</h1>
      <p class="subtitle">Un sous-titre</p>
      <p class="author">Tom B.</p>
   </header>

   ...

</article>
</body>

Accueil

Imprimer Rihab Hachem, Cindy Pinvin, Baptiste Perraud, 2014-2016 (Contributions : Stéphane Crozat, les étudiants de l'UTC)