HTML Listes Non Ordonnées

La balise HTML <ul> définit une liste non ordonnée (à puces).

Liste HTML Non Ordonnée

Une liste non ordonnée commence par la balise <ul> . Chaque élément de la liste débute par la balise <li> .

Par défaut, les éléments de la liste seront marqués par des puces (petits cercles noirs) :

Exemple

<ul>
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ul>

Essayez-le Vous-Même »

Liste HTML Non Ordonnée - Choisir le Marqueur d'Élément de Liste

La propriété CSS list-style-type est utilisée pour définir le style du marqueur d'élément de liste. Elle peut prendre l'une des valeurs suivantes :

Valeur Description
disc Définit le marqueur d'élément de liste comme une puce (par défaut)
circle Définit le marqueur d'élément de liste comme un cercle
square Définit le marqueur d'élément de liste comme un carré
none Les éléments de la liste ne seront pas marqués

Disque

Exemple - Disque

<ul style="list-style-type:disc;">
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ul>
Essayez-le Vous-Même »

Cercle

Exemple - Cercle

<ul style="list-style-type:circle;">
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ul>
Essayez-le Vous-Même »

Carré

Exemple - Carré

<ul style="list-style-type:square;">
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ul>
Essayez-le Vous-Même »

Pas de Marqueur de Liste

Exemple - Aucun

<ul style="list-style-type:none;">
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ul>
Essayez-le Vous-Même »

Listes HTML Imbriquées

Les listes peuvent être imbriquées (une liste à l'intérieur d'une autre liste) :

Exemple

<ul>
<li>Café</li>
<li>Thé
<ul>
<li>Thé noir</li>
<li>Thé vert</li>
</ul>
</li>
<li>Lait</li>
</ul>
Essayez-le Vous-Même »

Remarque : Un élément de liste ( <li> ) peut contenir une nouvelle liste ainsi que d'autres éléments HTML, comme des images et des liens, etc.

Liste Horizontale avec CSS

Les listes HTML peuvent être stylisées de nombreuses manières différentes avec CSS.

Une méthode populaire consiste à styliser une liste horizontalement pour créer un menu de navigation :

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Accueil</a></li>
<li><a href="#news">Nouvelles</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">À propos</a></li>
</ul>

</body>
</html>
Essayez-le Vous-Même »

Astuce : Vous pouvez en apprendre beaucoup plus sur CSS dans notre Tutoriel CSS .

Résumé du Chapitre

  • Utilisez l'élément HTML <ul> pour définir une liste non ordonnée
  • Utilisez la propriété CSS list-style-type pour définir le marqueur d'élément de liste
  • Utilisez l'élément HTML <li> pour définir un élément de liste
  • Les listes peuvent être imbriquées
  • Les éléments de liste peuvent contenir d'autres éléments HTML
  • Utilisez la propriété CSS float:left pour afficher une liste horizontalement

Balises de Liste HTML

Balise Description
<ul> Définit une liste non ordonnée
<ol> Définit une liste ordonnée
<li> Définit un élément de liste
<dl> Définit une liste de description
<dt> Définit un terme dans une liste de description
<dd> Décrit le terme dans une liste de description

Pour une liste complète de toutes les balises HTML disponibles, visitez notre Référence des Balises HTML .