CHAPITRE 4 : LES LISTES EN HTML

Video du chapitre : chaine GeniusClassrooms

À quoi servent les listes ?

Dès qu'une information se présente sous forme d'énumération, un menu, des étapes à suivre, un panier, la bonne balise est une liste. Beaucoup de débutants écrivent une suite de paragraphes avec des tirets : visuellement cela ressemble, mais le navigateur, Google et les lecteurs d'écran n'y voient qu'un texte quelconque. Une vraie liste porte du sens.

1. La liste à puces : <ul>

ul signifie unordered list, liste non ordonnée. On l'emploie quand l'ordre des éléments n'a pas d'importance. Chaque élément est un <li> (list item).

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Résultat : trois éléments précédés d'une puce ronde. Permuter CSS et JavaScript ne change rien au sens : c'est bien une liste non ordonnée.

2. La liste numérotée : <ol>

ol signifie ordered list. Ici l'ordre compte : une recette, une procédure, un classement.

<ol>
    <li>Ouvrir l'editeur de texte</li>
    <li>Creer un fichier index.html</li>
    <li>Ecrire la structure de base</li>
    <li>Ouvrir le fichier dans le navigateur</li>
</ol>

La numérotation est automatique. N'écrivez jamais « 1. », « 2. » à la main dans les <li> : en cas d'insertion, tout serait à renuméroter.

Deux attributs utiles

3. La liste de définitions : <dl>

Moins connue, mais précieuse pour un glossaire. Elle associe un terme (<dt>) à sa définition (<dd>).

<dl>
    <dt>HTML</dt>
    <dd>Langage de balisage qui structure le contenu d'une page.</dd>

    <dt>CSS</dt>
    <dd>Langage qui decrit la presentation de ce contenu.</dd>
</dl>

4. Les listes imbriquées

Une liste peut en contenir une autre. Attention : la sous-liste se place à l'intérieur du <li> parent, jamais entre deux <li>. C'est l'erreur la plus fréquente.

<ul>
    <li>Developpement web
        <ul>
            <li>Front-end</li>
            <li>Back-end</li>
        </ul>
    </li>
    <li>Base de donnees</li>
</ul>

À retenir

• <ul> : l'ordre est indifférent
• <ol> : l'ordre fait sens, la numérotation est automatique
• <dl> : un terme et sa définition
• Dans <ul> et <ol>, l'enfant direct est toujours <li>