HTML & CSS

HTML 5 Outline — Quelques notes sur la structure des pages Web avec h1 et section

Après l’article Quelques notes sur la balise h1 avec HTML5 dans lequel j’ai abordé l’utilisation des niveaux d’en-tête `h1 — h6` pour savoir dans quelle mesure il est judicieux d’utiliser une ou plusieurs balises `h1` dans une même page Web, je continue sur ma lancée avec la notion d’Outline. Cette dernière fournit la liste des sections imbriquées impliquant les éléments de type Sectioning Content ou Sectioning Root. Chaque section peut être associée à un niveau d’en-tête et peut contenir autant de sections imbriquées que l’on veut. Notez que les sections dont on parle ne sont pas nécessairement l’élément `section` lui-même (même si ce dernier fait partie des éléments ayant une portée de Sectioning Content).

Balises h1, avec ou sans section ?

HTML5 Outliner est un outil qui permet de souligner la structure hiérarchique d’un document HTML en mettant en évidence les différents niveaux d’en-tête et de sections. En HTML5, les sections sont déterminées de deux manières :

  1. Explicite, avec les éléments ayant une portée de Sectioning Content (`article`, `aside`, `nav` ou `section`).
  2. Implicite, avec les élements d’en-tête (Headings) (`h1`, `h2`, `h3`, `h4`, `h5`, `h6` et `hgroup`).

Pour s’en convaincre, il suffit de jeter un oeil sur les deux exemples mis en ligne par @futomi qui tient un blog consacré à HTML5 (oui, c’est en japonais, mais le code n’a pas de frontière et Google Translate est toujours ton ami) :

Section implicite

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>outline1</title>
    </head>
    <body>
        <article>
            <h1>a</h1>
            <h1>b</h1>
            <h1>c</h1>
        </article>
    </body>
</html>

Source : http://www.html5.jp/test/outline1.html

Section explicite

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>outline2</title>
    </head>
    <body>
        <section>
            <h1>a</h1>
        </section>
        <section>
            <h1>b</h1>
        </section>
        <section>
            <h1>c</h1>
        </section>
    </body>
</html>

Source : http://www.html5.jp/test/outline2.html

La vérification avec HTML5 Outliner montre une hiérarchie similaire, même si le maquage HTML est différent. La section Untitled qui apparait au début n’est autre que la section introduite par la balise `body` qui a une portée de Sectioning Roots avec `blockquote`, `details`, `fieldset`, `figure` et `td`. Ce n’est pas très gênant dans la mesure où un document HTML5 reste valide sans `body` lorsqu’il n’est pas nécessaire, ce qui est le cas ici.

Outline, au pied !

Si l’on raisonne en terme de page Web et non plus uniquement en terme de document, on peut se trouver face à quelques problèmes de structure, notamment, si l’on désire que les en-têtes contenus dans une balise `aside` suivent la hiérarchie initiée plus haut dans la page. Par exemple :

<!DOCTYPE html>
<html>
    <head><title>Test</title></head>
    <body>
        <article>
            <h1>Title 1</h1>
                <h2>Title 2</h2>
        <aside>Aside</aside>
            <h3>Title 3</h3>
        </article>
    </body>
</html>

Est compris comme :

article
    h1
        h2
        aside
        h3

Alors que l’on voudrais que le `h3` contenu dans la balise `aside` descende de `h2` au lieu que la balise `aside` (suivant logiquement son statut de Sectioning Content) ne remette la hiérarchie des en-têtes `h1 — h6` à zéro, pour obtenir :

article
    h1
        h2
            aside
            h3

Pour cela, il est nécessaire d’utiliser des sections explicites, comme :

<!DOCTYPE html>
<html>
    <head><title>Test</title></head>
    <body>
        <article>
            <h1>Title 1</h1>
            <section>
                <h2>Title 2</h2>
                <aside>Aside</aside>
                <section>
                    <h3>Title 3</h3>
                </section>
            </section>
        </article>
    </body>
</html>

Titre h1 et sous-titre h2 informatif

Il peut arriver que l’on désire utiliser envelopper un titre avec la balise `h1` et un sous-titre dans une balise `h2`. Si on utilise :

<section>
    <h1>Section and outlines of a document</h1>
    <h2>HTML, HTML5, Sections, Outlines</h2>
</section>

On va se retrouver avec une structure qui risque de «décaler» la hiérarchie de notre document, comme :

1. Section and outlines of a document
    1.1 HTML, HTML5, Sections, Outlines

Pour éviter que notre balise `h2` n’apparaisse dans l’outine, il suffit d’utiliser l’élément `hgroup` :

<section>
    <hgroup>
        <h1>Justine</h1>
        <h2>Les Malheurs de la vertu</h2>
    </hgroup>
</section>

Qui nous donnera l’outline suivant :

1. Justine

Pour finir

Je vous laisse avec quelques liens triés sur le volet à propos de l’Outline des documents Web. N’hésitez pas à partager vos expériences heureuses ou non concernant le balisage des pages Web avec les nouvelles balises HTML5.

Linkographie

Publié le par Bruno Bichet