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.

<div class="pagetitle">A propos de AnySurfer</div>
<p>AnySurfer est un label de qualité qui atteste de l'accessibilité des sites internet.</p>
<div class="subtitle">Histoire</div>
<p>AnySurfer a démarré en 2001.</p>
<div class="subtitle">Mission</div>
<p>AnySurfer veut rendre l’Internet plus accessible aux personnes handicapées.</p>

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.

<h1>A propos de AnySurfer</h1>
<p>AnySurfer est un label de qualité qui atteste de l'accessibilité des sites internet.</p>
<h2>Histoire</h2>
<p>AnySurfer a démarré en 2001.</p>
<h2>Mission</h2>
<p>AnySurfer veut rendre l’Internet plus accessible aux personnes handicapées.</p>

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

h1 {
  font-size: 1.4em;
  font-weight: bold;
  margin-bottom: 0.2em; }
h2 {
  font-size: 1.2em;
  font-weight: normal;
  margin-bottom: 0.2em; }
p { margin-top: 0; }

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)

.nav { margin-left: 20px; }

<ul class="nav">
<li>Accueil</li>
<li>Qui sommes-nous</li>
<li>Produits</li>
<li>Contact</li>
</ul>