Les listes en HTML5

Les listes en HTML5 ressemblent aux listes que l'on connaît sur les logiciels de traitement de texte.

liste avec des numéros
liste avec des symboles / des puces

S'il existe ces deux types de listes, ce n'est pas seulement pour faire joli. C'est que leur usage est différent.

L'utilisation d'une liste avec des numéros sous-entend qu'il existe un ordre précis dans les éléments listés. C'est pour cela qu'il y a des numéros, pour suivre cet ordre.

A l'inverse, les listes avec des puces sous-entedent que l'ordre précis des éléments n'a pas d'importance.

1. Les listes ordonnées

Ce sont les listes avec des numéros.

Considérez cette liste :

mars
février
avril
janvier

Les mois sont dans le désordre. 1 devrait correspondre à janvier, 2 à février ...

L'ordre a donc bien une importance !

janvier
février
mars
avril

html


                    
     <ol>
          <li>janvier</li>
          <li>février</li>
          <li>mars</li>
          <li>avril</li>
     </ol>

OL = Ordered List

Dans ce code, la balise <ol> marque le début et la fin de la liste. Chaque balise <li> permet de marquer un élément de la liste.

LI = List Item, élément de liste en français.

2. Les listes non ordonnées

En revanche, les listes non ordonnées, en utilisant des puces, passent l'information visuelle que les éléments n'ont pas d'ordre précis, comme une liste de courses par exemple.

pommes
salade
eau
chips

Il n'y a pas d'ordre précis dans cette liste, les produits peuvent être achetés dans le désordre.

html


                    
     <ul>
          <li>pommes</li>
          <li>salade</li>
          <li>eau</li>
          <li>chips</li>
     </ul>

3. Les listes imbriquées

Il est possible avec ces deux formes de listes de les imbriquer, pour créer une liste dans une liste.

Ovins
- Mouton / bélier
- brebis
- agneau
- agnelle
Bovins
- Boeuf / taureau
- vache
- velle
- veau
Caprins
- bouc
- chèvre
- chevreau
- chevrette
Equidés
- jument
- cheval
- pouliche
- poulain

L'important ici de respecter les règles du HTML. Dans une UL ou dans une OL, il ne peut y avoir que des LI.

Mais, dans la LI, on peut faire ce que l'on veut. Donc la liste imbriquée se met DANS la LI. Ce qui donne le code suivant :

html


                    
     <ol>
          <li>Ovins
               <ul>
                    <li>Mouton / bélier</li>
                    <li>brebis</li>
                    <li>agneau</li>
                    <li>agnelle</li>
               </ul>
          </li>
          <li>Bovins
               <ul>
                    <li>Boeuf / taureau</li>
                    <li>vache</li>
                    <li>velle</li>
                    <li>veau</li>
               </ul>
          </li>
          <li>Caprins
               <ul>
                    <li>bouc</li>
                    <li>chèvre</li>
                    <li>chevreau</li>
                    <li>chevrette</li>
               </ul>
          </li>
          <li>Equidés
               <ul>
                    <li>jument</li>
                    <li>cheval</li>
                    <li>pouliche</li>
                    <li>poulain</li>
               </ul>
          </li>
     </ol>

A quoi est-ce que ça peut bien servir ? Et bien à faire des menus déroulants en css.

4. Les listes de définitions

Mais il existe une troisième forme de liste, spécifique au HTML celle-ci, les listes de définitions.

Comme leur nom l'indique, elles permettent de faire une liste ... de définitions, autrement dit un dictionnaire. Une collection de mot auxquels sont associés la ou leurs définitions.

html


                    
     <dl>
          <dt>HTML</dt>
          <dd>HyperText Markup Language, langage web permettant d'ajouter du contenu à une page web.</dd>
          <dt>CSS</dt>
          <dd>Cascading StyleSheet, langage permettant d'ajouter du style, du design, à une page web. Il s'utilise en complément du HTML.</dd>
     </dl>

Dans cette forme de liste, la balie <dl> marque le début et la fin du "dictionnaire"

DL = Definition List

La balise <dt> encadre les mots et la balise <dd> encadre les définitions

DT = Definition Term et DD = Definition Data

L'intérêt de cette liste est de faire fonctionner des éléments par paire (nom du produit / photo du produit; pseudo / message ...)

Dans cet article