2.2.2 Les pages sont structurées par la sémantique

Utilisez les balises html structurantes pour identifier les titres (ou sous-titres) (h1-h6), les listes (ul, ol, li) et les paragraphes. Il ne suffit pas de les différencier visuellement.

Pourquoi?

Les avantages des éléments structurants pour les développeurs web:

  • La position dans les pages de résultats des moteurs de recherche est améliorée.
  • En combinant les balises structurantes avec des feuilles de style, la mise en forme est plus précise et adaptable indépendamment du code html.
  • Le code html est plus compact et plus clair.
  • Vous garantissez une bonne lecture aux utilisateurs d'anciens navigateurs ou de technologies mobiles puisque les balises html de base y seront reconnues.

Les avantages des éléments structurants pour les visiteurs du site:

  • Grâce aux éléments structurants, un lecteur d'écran peut générer automatiquement des tables de matière et faciliter la navigation dans les listes à plusieurs niveaux.
  • Les pages structurées par la sémantique s'adaptent également mieux aux feuilles de style personnelles. Grâce à celles-ci les personnes malvoyantes peuvent définir avec plus de précision la couleur, la police de caractère, la taille et la position des parties de page et de texte.

En pratique

Titres

Pour les titres de premier niveau, utilisez la balise h1. Les sous-titres sont encadrés par la balise h2, et pour les titres de troisième niveau et inférieurs, utilisez les balises de h3 à h6. Respectez toujours cette hiérarchie.

Exemple de titres sans balises structurantes (pratique incorrecte)

Dans ce mauvais exemple les titres et sous-titres de la page sont affichés grâce à des balises div.

Une classe CSS leur donne visuellement l'apparence d'un titre mais la sémantique n'est pas présente.

.pagetitle {
 font-size: 1.4em;
 font-weight: bold;
 margin-bottom: 0.2em; 
}
 
.subtitle {
 font-size: 1.2em;
 margin-bottom: 0.2em; 
}

p { 
 margin-top: 0;
}

Exemple de titres construits avec des balises structurantes (pratique correcte)

Dans ce bon exemple, le titre est encadré par une balise h1 et les sous-titres par des balises h2.

Une mise en page identique est obtenue en associant des styles aux balises structurantes.

Algorithme d'outline HTML5

HTML5 a introduit plusieurs nouveaux élements comme section, nav, aside et article. On les appelle "éléments sectionnants". En théorie il est permis de commencer chacun de ces éléments sectionnants par un h1.. L'algorithme d'outline déterminera le niveau de titre en fonction du niveau d'imbrication des éléments sectionnants. Les lecteurs d'écran n'offrent pas encore de support suffisant pour cette fonctionnalité.

  • Continuez donc à utiliser une structure hiérarchique de titres h1, h2, h3 pour structurer les pages. Ne vous appuyez pas encore sur le nouvel algorithme qui permet de calculer l'outline en fonction de l'imbrication des éléments sectionnants.
  • Utilisez role="heading" et aria-level="x" pour que tous les lecteurs d'écran communiquent correctement les niveaux de titre.

Plus d'explications sur l'outline HTML5.

Listes

Pour les listes de plus d'un niveau utilisez les éléments ol (pour les listes numérotées) et ul (pour les listes non ordonnées). La combinaison des deux est tout à fait possible.

Exemple de liste construite sans balises structurantes (pratique incorrecte)

<p>
  1. Accueil<br /> 
  2. Services<br />
    * Audit<br />
    * Validation<br />
  3. Contact
</p>

Exemple de liste construite au moyen de balises structurantes (pratique correcte)

<ol>
 <li>Accueil</li>
 <li>Services
  <ul>
   <li>Audit</li>
   <li>Validation</li>
  </ul>
 </li>
 <li>Contact</li>
</ol>

Notez que le menu de votre site web est également une liste et doit être construit avec ul même si c'est un menu horizontal.

Les paragraphes

Il faut utiliser les balises p pour différencier clairement les paragraphes au sein d'un même texte.

Attention

  • N'utilisez pas d'éléments de liste s'il n'y a qu'un seul élément dans la liste.
  • Un fil d'Ariane ne doit pas être marqué comme une liste. Un symbole "plus grand que" (>) comme séparateur indique la hiérarchie entre les liens mieux que ul.
  • Ne clôturez pas la liste après chaque élément.

Exemple de liste clôturée après chaque élément (pratique incorrecte)

<ul>
 <li>Accueil</li>
</ul>
<ul>
 <li>Qui sommes-nous?</li>
</ul>
<ul>
 <li>Nos produits</li>
</ul>
<ul>
 <li>etc.</li>
</ul>

Exemple de liste correcte

<ul>
 <li>Accueil</li>
 <li>Qui sommes-nous?</li>
 <li>Nos produits</li>
 <li>etc.</li>
</ul>

Remarques

Si l'aspect standard des éléments structurants ne vous convient pas vous pouvez facilement l'adapter dans la feuille de style. Par exemple si vous voulez que le titre principal soit plus petit et pas en caractères gras vous ne devez pas créer de nouvelle classe. Vous procédez comme suit :

h1 { 
 font-size: 1.4em; 
 font-weight: normal 
}

Les éléments structurants ne doivent pas être utilisés uniquement pour obtenir un effet visuel. Si vous avez besoin d'un petit lettrage pour du texte qui n'est pas un sous-titre, n'utilisez pas de balise h5 ou h6. Si vous voulez indenter votre texte n'utilisez pas de blockquote (à moins qu'il ne s'agisse d'une citation) ou de liste à plusieurs niveaux.

Exemple de liste à plusieurs niveaux utilisée pour indenter plus (incorrect)

<ul><ul><ul>
 <li>Accueil</li>
 <li>Qui sommes-nous</li>
 <li>Produits</li>
 <li>Contact</li>
</ul></ul></ul>

Exemple d'utilisation de classe CSS pour indenter plus (correct)

<ul class="nav">
 <li>Accueil</li>
 <li>Qui sommes-nous</li>
 <li>Produits</li>
 <li>Contact</li>
</ul>
.nav {
 margin-left: 20px; 
}

comment tester

Titres

  • Dans la barre d'outils Web Developer de Firefox: cliquez sur entourer > entourer les titres (H1-H6)
  • Vérifiez si chaque titre est entouré et si la structure est correcte (d'abord h1, puis h2,...)
  • La barre d'outils Wave peut également être utilisée pour exécuter ce test. Utilisez le bouton "entourer".

Listes

  • Dans la barre d'outils Web Developer de Firefox: cliquez sur entourer > entourer un élément personnalisé > ol/ul/li
  • Ou bien: désactivez les feuilles de style pour voir le style par défaut
  • Ou bien utilisez la barre d'outils Wave: cliquez sur structure/order