HTML5, structuration documentaire

Afficher le planAfficher le plan

L'algorithme Outline HTML5

Définition

L'algorithme Outline est une technique permettant la génération du plan de sectionnement de pages web, en fonction de leur balisage HTML.

Fonctionnement

Deux catégories de balises permettent de générer les sections d'un document :

  • balises de titre : h1 à h6 ;

  • balises de section : body (définit la section du document), section, article, aside et nav.

Attention

Les éléments header et footer ne génèrent pas de section !

ComplémentDeux outils en ligne pour tester le plan d'un document HTML5

Exemple

Supposons que l'on veuille le plan suivant :

  1. Horses for sale

    1. Mares

      1. Pink Diva

      2. Ring a Rosies

      3. Chelsea's Fancy

    2. Stallions

      1. Korah's Fury

      2. Sea Pioneer

      3. Brown Biscuit

Il suffit d'écrire le code suivant :

num. | Ligne | texte | copie |
CTRL+C pour copier, CTRL+V pour coller
1
<section>
2
<h1>Horses for sale</h1>
3
4
   <section>
5
   <h2>Mares</h2>
6
      <h3>Pink Diva</h3>
7
      <h3>Ring a Rosies</h3>
8
      <h3>Chelsea's Fancy</h3>
9
   </section>
10
11
   <section>
12
   <h2>Stallions</h2>
13
      <h3>Korah's Fury</h3>
14
      <h3>Sea Pioneer</h3>
15
      <h3>Brown Biscuit</h3>
16
   </section>
17
18
</section>
<section>
<h1>Horses for sale</h1>

   <section>
   <h2>Mares</h2>
      <h3>Pink Diva</h3>
      <h3>Ring a Rosies</h3>
      <h3>Chelsea's Fancy</h3>
   </section>

   <section>
   <h2>Stallions</h2>
      <h3>Korah's Fury</h3>
      <h3>Sea Pioneer</h3>
      <h3>Brown Biscuit</h3>
   </section>

</section>
RemarqueProfondeur des balises de titre
En HTML5, chaque section possède sa propre hiérarchie de titre, on pourra donc trouver plusieurs h1 dans le document (dans plusieurs sections distinctes).
Par ailleurs, <section><h1><h6></h6></h1></section> est équivalent à <section><h2><h3></h3></h2></section>, seule compte la hiérarchie relative entre les titres.
Sectionnement explicite/implicite
Toute balise de section ouvre explicitement une nouvelle section :
  • une sous-section si elles est l'aînée de sa section parente ;
  • de même niveau que la précédente section sinon.
Toute 1re balise de titre h1 ... h6 de sa section définit le titre de celle-ci. Une section sans balise de titre sera donc "Untitled".
Les autres ouvrent/ferment implicitement des sections selon trois règles :
  1. Si la seconde est plus profonde (e.g. h2 dans h1), elle ouvre une nouvelle sous-section.
  2. Si les deux sont de même niveau, la première section (implicite ou explicite) est fermée et une nouvelle section de même niveau est ouverte.
  3. Si la seconde est moins profonde (e.g. h1 dans h2) , la première section (implicite ou explicite) est fermée.
    Une section est ouverte d'un niveau de profondeur supérieur limité par celui de la balise de titre de la section parente explicite.
ExempleIllustration de la règle 3.
Le code suivant dans l'élément body ;
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
1
<section>
2
<h2>Titre de niveau 2</h2>
3
   <h3>Titre de niveau 3</h3>
4
      <h4>Titre de niveau 4</h4>
5
<h1>Titre de niveau 1</h1>
6
</section>
<section>
<h2>Titre de niveau 2</h2>
   <h3>Titre de niveau 3</h3>
      <h4>Titre de niveau 4</h4>
<h1>Titre de niveau 1</h1>
</section>
Produira le plan suivant :
  1.  Document/"Untitled section" (générée par l'élément body).
    1. Titre de niveau 2
      1. Titre de niveau 3
        1. Titre de niveau 4
    2. Titre de niveau 1
La balise h1 ne peut ouvrir une section de niveau supérieur à celle ouverte par la balise h2 (titre de plus haut niveau de la section parente explicite), mais la section ouverte est bien d'un niveau supérieur à la précédente (section ouverte par la balise h4).
Dans le cas suivant :
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
1
<section>
2
<h2>Titre de niveau 2</h2>
3
<h1>Titre de niveau 1</h1>
4
</section>
<section>
<h2>Titre de niveau 2</h2>
<h1>Titre de niveau 1</h1>
</section>
La section ouverte par la balise h1 est bien de même niveau que la précédente (ouverte explicitement par la balise <section>).
Exemple
Le code suivant dans l'élément body :
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
1
<section> <!-- ouvre une section explicite -->
2
<h1>Titre de niveau 1</h1> <!-- titre de la section -->
3
<h2>Titre de niveau 2</h2> <!-- ouvre une section implicite (regle 2) -->
4
</section>
5
6
<section> <!-- ouvre une section explicite de même niveau que la précédente -->
7
<h2>Titre de niveau 2</h2> <!-- titre de la section -->
8
<h1>Titre de niveau 1</h1> <!-- ferme la section précédente et ouvre une section de même niveau que la précédente(regle 3) -->
9
</section>
<section> <!-- ouvre une section explicite -->
<h1>Titre de niveau 1</h1> <!-- titre de la section -->
<h2>Titre de niveau 2</h2> <!-- ouvre une section implicite (regle 2) -->
</section>

<section> <!-- ouvre une section explicite de même niveau que la précédente -->
<h2>Titre de niveau 2</h2> <!-- titre de la section -->
<h1>Titre de niveau 1</h1> <!-- ferme la section précédente et ouvre une section de même niveau que la précédente(regle 3) -->
</section>
Produira le plan suivant :
  1.  Document/"Untitled section" (générée par l'élément body).
    1. Titre de niveau 1
      1. Titre de niveau 2
    2. Titre de niveau 2
    3. Titre de niveau 1
ComplémentRacines de sectionnement
Les racines de sectionnement sont des éléments HTML qui génèrent des sections ayant leur propre sectionnement interne. Le plan de ces éléments n'est donc pas considéré dans le plan général des éléments parents.
Par exemple, l'élément body est une racine de sectionnement sans parent.
Les racines de sectionnement possibles sont les éléments :
  • blockquote ;
  • figure ;
  • details ;
  • fieldset ;
  • td.
Par exemple, le code suivant 
num. | Ligne | texte | copie | 
CTRL+C pour copier, CTRL+V pour coller
1
<section>
2
  <h1>Titre de niveau 1</h1>
3
  <blockquote>
4
     <h1>Titre de niveau 1</h1>
5
  </blockquote>
6
  <h2>Titre de niveau 2</h2>
7
</section>
<section>
  <h1>Titre de niveau 1</h1>
  <blockquote>
     <h1>Titre de niveau 1</h1>
  </blockquote>
  <h2>Titre de niveau 2</h2>
</section>
Produira le plan suivant :
  1. Document/"Untitled section" (générée par l'élément body).
    1. Titre de niveau 1
      1. Titre de niveau 2
AttentionSupport réel de l'algorithme Outline HTML5
  • Pas de support concret actuel implémenté dans les navigateurs récents de l'algorithme Outline HTML5 !
  • Il est donc préférable d'utiliser des balises de titre d'une profondeur cohérente avec le niveau d'imbrication de la section en question
Il n'existe pas à ce jour (vérifié au au moins jusqu'en avril 2014) de support concret implémenté dans les navigateurs récents de l'algorithme Outline HTML5 ! (spécification du W3C mise à jour en avril 2014).
Il est donc fortement recommandé d'utiliser des balises de titre d'une profondeur cohérente avec le niveau d'imbrication de la section en question,
pour que les navigateurs et technologies d'assistance puissent correctement faire part de la structure réelle du document aux utilisateurs.
Chrome ou Firefox par exemple ne font qu'adapter le style visuel CSS par défaut de l'Outline, sans lecture sémantique véritable.
Plus d'informations ici : https://www.paciellogroup.com/blog/2013/10/html5-document-outline/
et là : http://www.anysurfer.be/fr/blog/detail/html5-outline-nest-pas-supporte
PrécédentPrécédentSuivantSuivant
AccueilAccueilImprimerImprimer
								Rihab Hachem, Cindy Pinvin, Baptiste Perraud, 2014-2016 (Contributions : Stéphane Crozat, les étudiants de l'UTC)
								Paternité - Partage des Conditions Initiales à l'IdentiqueRéalisé avec Scenari (nouvelle fenêtre)