# Listes HTML : énumérations avec les balises , et

Les listes HTML présentent des informations et des éléments sélectionnés dans un document HTML sous forme de liste. Selon les besoins, il peut s’agir d’une liste ordonnée, d’une liste non ordonnée ou d’une liste de définitions. Les balises HTML `<li>`, `<ol>`, `<ul>` et `<dl>` sont utilisées pour leur création.

## Qu’est-ce qu’une liste HTML ?

Les listes HTML sont utilisées dans [HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/quest-ce-que-le-html/) pour présenter des informations et des éléments de texte sous forme de liste **structurée et claire**. Selon les besoins, le contenu peut être présenté sous forme de liste ordonnée avec numérotation ou de liste non ordonnée. Depuis [HTML5](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html5-cest-quoi/), il existe une troisième variante, les listes de définitions, qui sont spécialement adaptées à l’attribution de termes et à leur description.

Les listes HTML constituent un élément essentiel pour concevoir des sites Web clairs et variés, et permettent de transmettre les informations **clairement et efficacement**. Cela s’applique aussi bien à une simple énumération, à une numérotation croissante des informations ou à des définitions présentées de façon détaillée.

## Quels sont les différents types de listes HTML ?

Comme nous l’avons déjà mentionné, les listes peuvent être présentées de différentes manières dans les documents HTML. Alors que les **listes ordonnées et désordonnées** sont très souvent utilisées et sont pratiquement présentes sur tous les sites Internet, les **listes de définitions** (également appelées listes de description) sont beaucoup moins utilisées. Dans les sections suivantes, nous allons examiner de plus près les différents types de listes HTML et leur syntaxe.

### Listes ordonnées (*Ordered Lists*)

Une liste HTML ordonnée se caractérise par un contenu et des éléments listés que vous organisez et structurez selon une hiérarchie souhaitée en utilisant un **ordre alphanumérique croissant**. L’avantage réside dans la séquence claire et réfléchie des informations. Pour cela, on utilise d’une part la [balise HTML](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/balises-htlm/) ouvrante `<ol>`, la balise fermante `</ol>` et plusieurs points `<li>...</li>` pour les différentes entrées de la liste. Les listes ordonnées conviennent par exemple pour présenter des classements, des instructions étape par étape ou des listes de questions.

La **syntaxe des listes ordonnées** se présente comme suit :

```html
<ol>
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>Troisième élément de la liste</li>
<li>Quatrième élément de la liste</li>
<li>...</li>
</ol>
```

La sortie ressemble à ceci :

[![Image: Exemple de liste HTML ordonnée](https://www.ionos.fr/digitalguide/fileadmin/_processed_/4/0/csm_exemple-liste-ordonnee_7e5076a1ff.webp "Exemple de liste HTML ordonnée")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/exemple-liste-ordonnee.png) Les éléments de la liste ordonnée sont numérotés par défaut.  Conseil Dans un article séparé, nous aborderons un peu plus en détail le fonctionnement et les possibilités des listes ordonnées.

### Listes non ordonnées (*Unordered Lists*)

Dans une liste HTML non ordonnée, vous n’utilisez pas l’ordre alphanumérique des éléments de la liste. À la place, elles utilisent des **symboles d’énumération** tels que des points de suspension, des tirets, des flèches ou des coches. De cette manière, le contenu peut être présenté de manière structurée sans être hiérarchisé. Les contenus typiques sont par exemple les ingrédients des recettes, les villes et les pays ou les listes de noms. Pour créer une liste non ordonnée, la balise HTML d’ouverture `<ul>`, la balise de fermeture `</ul>` et plusieurs points `<li>...</li>` sont utilisés.

La **syntaxe des listes non ordonnées** se présente comme suit :

```html
<ul>
<li>Premier élément de la liste</li>
<li>Deuxième élément de la liste</li>
<li>Troisième élément de la liste</li>
<li>Quatrième élément de la liste</li>
<li>...</li>
</ul>
```

[![Image: Exemple de liste HTML non ordonnée](https://www.ionos.fr/digitalguide/fileadmin/_processed_/4/d/csm_exemple-liste-non-ordonnee_9bdadbe7a7.webp "Exemple de liste HTML non ordonnée")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/exemple-liste-non-ordonnee.png) À moins que vous ne donniez des instructions supplémentaires, les listes non ordonnées sont automatiquement rendues avec des puces.  Conseil Vous trouverez également des informations supplémentaires sur les [listes non ordonnées](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/liste-non-ordonnee-en-html/) dans cet article.

### Listes de définitions (*Description Lists*)

Une liste de définitions vous permet de lister **des termes sélectionnés et leur définition**, explication ou description associée de manière structurée. Ce type de liste HTML est particulièrement utilisé pour les glossaires, les pages de lexique technique, les spécifications produits ou des explications dans des tutoriels. Pour créer une liste de définitions, utilisez les trois composants suivants :

- `<dl>...</dl>` : signifie « *Definition List* » ; identifie le début et la fin de l’élément de liste.
- `<dt>...</dt>` : signifie « *Definition Term* » (dt) ; identifie le terme à expliquer.
- `<dd>...</dd>` : signifie « *Definition Description* » (dd) ; indique la description, la définition ou l’explication du terme associé et suit immédiatement la balise `<dt>`.

Les listes de définitions HTML sont créées sur la base de la **syntaxe** suivante :

```html
<dl>
<dt>Terme 1</dt>
<dd>Description ou définition du terme 1</dd>
<dt>Terme 2</dt>
<dd>Description ou définition du terme 2</dd>
<dt>Terme 3</dt>
<dd>Description ou définition du terme 3</dd>
<dt>...</dt>
<dd>...</dd>
</dl>
```

[![Image: Exemple de liste HTML de définitions](https://www.ionos.fr/digitalguide/fileadmin/_processed_/0/6/csm_exemple-liste-definitions_ae4486ac20.webp "Exemple de liste HTML de définitions")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/exemple-liste-definitions.png) Exemple de liste de définitions qui énumère des termes et fournit la description ou définition à la ligne suivante. ## Domaines d’application des listes HTML

Voici un aperçu des domaines d’application et des possibilités d’utilisation des différentes balises pour une liste HTML :

<table>
  <thead>
    <tr>
      <th>Liste ordonnée</th>
      <th>Liste non ordonnée</th>
      <th>Liste de description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Instructions pas à pas</td>
      <td>Avantages ou inconvénients</td>
      <td>Glossaires</td>
    </tr>
    <tr>
      <td>Tutoriels</td>
      <td>Menus déroulants ou contextuels</td>
      <td>FAQ</td>
    </tr>
    <tr>
      <td>Classements</td>
      <td>Collections de liens</td>
      <td>Listes de produits</td>
    </tr>
    <tr>
      <td>Comparaisons</td>
      <td>Sources et références</td>
      <td>Catégories</td>
    </tr>
  </tbody>
</table>

## Pourquoi utiliser les listes HTML ?

L’utilisation d’une liste HTML permet d’améliorer l’efficacité et la structure du contenu des pages Web. Parmi les avantages des listes, on peut citer :

- Une meilleure structure, clarté et organisation des informations
- Un meilleur classement par les moteurs de recherche grâce à des éléments de page variés
- Une accessibilité optimisée et une structure sémantique claire des pages pour une meilleure lisibilité
- Une présentation visuelle personnalisée du contenu des pages, notamment en combinaison avec le stylisme CSS

Conseil Dans notre [tutoriel HTML pour débutants](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/apprendre-le-html-le-tutoriel-pour-debutant/), vous découvrirez toutes les informations importantes pour un démarrage en douceur dans ce langage de programmation Web.


This is a markdown version of: [https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-list/](https://www.ionos.fr/digitalguide/sites-internet/developpement-web/html-list/) for AI/LLM consumption.