Sémantique

Pour chaque type de contenu, utilisez les balises HTML sémantiques appropriées. Par exemple, utilisez h1-h6 pour identifier les titres (ou sous-titres), ul, ol, li pour les listes p pour les paragraphes. Il ne suffit pas de différencier ces éléments visuellement.

Pourquoi?

Quand ce qui se trouve dans le code correspond à ce que l'on voit, le site est plus compréhensible et utilisable pour ses visiteurs:

• Grâce à une bonne utilisation des balises de titres, un utilisateur de lecteur d'écran peut générer automatiquement des tables de matière et utiliser un raccourci clavier pour passer facilement d'un titre à l'autre.
• Les pages correctement structurées 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.
• Quand ce qui s'affiche à l'écran correspond à ce qu'elle voit, une personne qui utilise un logiciel de reconnaissance vocale peut facilement interagir avec un formulaire.

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.

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 - Titres sans balises structurantes (Pas OK)

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 qui atteste qu'un site web est accessible.</p>
<div class="subtitle">Histoire</div>
<p>AnySurfer existe depuis 2001.</p>
<div class="subtitle">Mission</div>
<p>AnySurfer veut rendre l’Internet plus accessible aux personnes avec un handicap.</p>

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

Exemple - Titres construits avec des balises structurantes (OK)

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 qui atteste qu'un site web est accessible.</p>

<h2>Histoire</h2>
<p>AnySurfer existe depuis 2001.</p>

<h2>Mission</h2>
<p>AnySurfer veut rendre l’Internet plus accessible aux personnes avec un handicap.</p>

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

Listes

Pour les listes utilisez les éléments ol (pour les listes numérotées) et ul (pour les listes non ordonnées). La combinaison des deux est possible.

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.

Exemple - Liste construite sans balises structurantes (pas OK)

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

Exemple de liste construite au moyen de balises structurantes (OK)

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

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

<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>

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 à 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; 
}

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.