8. LISTES ET CITATIONS

Table des matières

8.1 Listes

8.1.1 Baliser les listes à puces avec les balises <ul> et <li>

Utiliser les balises <ul> et <li> pour baliser les listes d’éléments pour lesquelles l’ordre n’a pas d’importance (menus, onglets, boutons de partage, plan du site, etc.).

Le cas échéant, veiller à la bonne imbrication des listes :

Premier item de premier niveau
Deuxième item de premier niveau
- Première item de second niveau
- Deuxième item de second niveau
Troisième item de premier niveau

<ul>
   <li>Premier item de premier niveau</li>
   <li>
       Deuxième item de premier niveau
       <ul>
           <li>Premier item de second niveau</li>
           <li>Deuxième item de second niveau</li>
       </ul>
   </li>
   <li>Troisième item de premier niveau</li>
</ul>

ASTUCES

Si vous voulez afficher plusieurs contenus sous forme de cartes par exemple, il est recommandé d'utiliser les balises <ul> et <li> afin de créer une liste d'éléments qui sera alors mieux comprise par les utilisateurs de lecteurs d'écran.

8.1.2 Baliser des listes numérotées avec les balises <ol> et <li>

Utiliser les balises <ol> et <li> pour baliser les listes d’éléments pour lesquelles l’ordre a de l’importance (liste d’étapes dans un processus, classement quelconque, etc.). C’est-à-dire lorsque l’information ne serait plus comprise si les éléments étaient placés dans un ordre différent.

Premier item de premier niveau
Deuxième item de premier niveau
1. Premier item de second nivea

<ol>
   <li>Premier item de premier niveau</li>
   <li>Deuxième item de premier niveau
      <ol>
         <li>Premier item de second niveau</li>
      </ol>
  </li>
</ol>

8.1.3 Baliser les listes de définitions avec les balises <dl>, <dt> et <dd>

Utiliser les balises <dl> , <dt> et <dd> pour baliser les listes de définitions (dans un glossaire, par exemple).

Il est possible d’associer plusieurs définitions à un seul terme en procédant de la manière suivante :

<dl>
   <dt>Terme 1</dt>
   <dd>Définition du terme 1.</dd>
   <dt>Terme 2</dt>
   <dt>1. Première définition du terme 2.</dt>
   <dt>2. Deuxième définition du terme 2.</dt>
</dl>

HTML5

La spécification HTML5 étend le rôle de la liste de définitions classiques à celui plus large d’une liste de descriptions. Il est désormais possible d’utiliser <dl>, <dt> et <dd> pour baliser n’importe quel groupe de clés/valeurs (caractéristiques dans une fiche produit, informations de publication d’un article, etc.).

<h2>Conférence sur le développement durable</h2>
<dl>
   <dt>Lieu</dt>
   <dd>Paris</dd>
   <dt>Date</dt>
   <dd>Samedi 29 septembre 2012</dd>
   <dt>Heure</dt>
   <dd>À partir de 10 heures</dd>
</dl>

Exemple d’utilisation : Questions/réponses, FAQ, liste d’équipe, liste d’adresses.

8.2 Citations

8.2.1 Baliser les blocs de citation avec la balise <blockquote>

Chaque fois qu’un bloc de citations est à intégrer dans la page HTML, entourer ce dernier d’une balise<blockquote> .

Ex.

<blockquote>
   <p>La nature du web est dans son universalité.</p>
   <p>Il doit être accessible à toutes les personnes handicapées.</p>   
</blockquote>

REMARQUES

Toute citation isolée, qui n’est pas incorporée directement en ligne dans le flux du texte environnant, est considérée comme un bloc de citation.

HTML5

S’il y a un auteur, il doit être à l’intérieur de la balise <footer> et se situer à l’intérieur de la balise <blockquote>. Ex.

<blockquote>
   <p>La nature du web est dans son universalité.</p>
   <p>Il doit être accessible à toutes les personnes handicapées</p>   
   <footer>
      Tim Berners-Lee<br/>
      Directeur du W3C et créateur du Web
   </footer>
</blockquote>

RESSOURCES

Voir aussi Déclarer les citations et les citations en exergue (Contributeurs éditoriaux)

8.2.2 Baliser les courtes citations avec la balise <q>

Utiliser la balise <q> à l’intérieur d’un texte lorsqu’il y a une courte citation :

Les balises <q> (quote) peuvent être utilisées pour de courtes citations provenant d’une autre source (Critère de succès 1.3.1 du WCAG 2.0, Technique H49).
Aucun formatage n’est appliqué au texte contenu dans la balise <q> .

Ex.

<q>Au sein de l'économie numérique, la croissance et la prospérité 
économiques du Canada seront dictées par l'innovation</q>
 a déclaré le ministre.

Rendu : « Au sein de l’économie numérique, la croissance et la prospérité économiques du Canada seront dictées par l’innovation », a déclaré le ministre.

ATTENTION

Les guillemets entourant la citation courtes sont générés par le CSS comme suit :

q, cite { font-style: italic; } 
    q cite, q q { font-style: normal } 
 
    /* Ajuste les guillemets automatiques (citations courtes) 
       dépendant de la langue */ 
    q          { quotes: '0AB0A0' '0A00BB'; } //Guillemets français par défaut
    q:lang(fr) { quotes: '0AB0A0' '0A00BB'; }
    q:lang(en) { quotes: '201C' '201D'; }

RESSOURCES

Voir aussi Déclarer les citations et les citations en exergue (Contributeurs éditoriaux)