Les listes en HTML

Pourquoi utiliser des listes ?

Les listes permettent d'organiser et structurer l'information sur une page web. Elles sont utilisées partout : menus de navigation, énumérations, instructions étape par étape, chronologies...

Sans listes, le contenu serait désordonné et difficile à lire. Avec les listes, vous pouvez créer des présentations claires et élégantes !

Les types de listes en HTML

Les listes non ordonnées (`<ul>`)

Pour des éléments sans ordre particulier.

Premier élément
Deuxième élément
Troisième élément

<ul>
  <li>Premier élément</li>
  <li>Deuxième élément</li>
  <li>Troisième élément</li>
</ul>

Les listes ordonnées (`<ol>`)

Pour des éléments qui suivent un ordre précis.

Première étape
Deuxième étape
Troisième étape

<ol>
  <li>Première étape</li>
  <li>Deuxième étape</li>
  <li>Troisième étape</li>
</ol>

Styliser les listes avec CSS

Supprimer les puces par défaut

Par défaut, les listes affichent des puces (•) ou des numéros. Vous pouvez les supprimer avec CSS :

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Liste sans puces</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul class="sans-puces">
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
  </ul>
</body>
</html>

La propriété list-style-type: none; supprime les puces, et padding: 0; enlève le décalage à gauche.

Créer une chronologie élégante

Voici comment transformer une liste simple en chronologie moderne :

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Chronologie</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul class="chronologie">
    <li>
      <strong>2010</strong>
      Lancement du projet
    </li>
    <li>
      <strong>2015</strong>
      Première version publique
    </li>
    <li>
      <strong>2024</strong>
      Version actuelle
    </li>
  </ul>
</body>
</html>

2010 Lancement du projet
2015 Première version publique
2024 Version actuelle

<ul>
  <li><strong>2010</strong> Lancement du projet</li>
  <li><strong>2015</strong> Première version publique</li>
  <li><strong>2024</strong> Version actuelle</li>
</ul>

2010 Lancement du projet
2015 Première version publique
2024 Version actuelle

.chronologie li {
  background-color: #f0f0f0;
  padding: 15px;
  border-left: 4px solid #3498db;
  border-radius: 5px;
}

Propriétés CSS utiles pour les listes

Propriété	Description	Exemple
`list-style-type`	Change le type de puce	`none`, `circle`, `square`
`padding`	Espacement intérieur	`padding: 10px;`
`margin`	Espacement extérieur	`margin-bottom: 15px;`
`background-color`	Couleur de fond	`background-color: #f0f0f0;`
`border-left`	Bordure à gauche	`border-left: 3px solid blue;`
`border-radius`	Coins arrondis	`border-radius: 5px;`

Créer un menu de navigation

Les listes sont parfaites pour créer des menus :

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Menu de navigation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul class="menu">
    <li><a href="#">Accueil</a></li>
    <li><a href="#">À propos</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</body>
</html>

Conseils pour bien débuter avec les listes

Supprimez toujours les puces quand vous stylisez vos listes : list-style-type: none;
Utilisez padding et margin pour espacer vos éléments de manière harmonieuse
Ajoutez des bordures colorées (border-left) pour créer un effet moderne
Expérimentez avec border-radius pour arrondir les coins de vos éléments
Pensez à l'effet :hover pour rendre vos listes interactives

Les listes sont des outils puissants : maîtrisez-les et vos pages web seront plus claires et plus professionnelles !