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 commence par la balise <li>.
Les éléments de la liste seront marqués par des puces (petits cercles noirs) par défaut :
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. Il peut avoir l'une des valeurs suivantes :
| Valeur | Description |
|---|---|
| disc | Définir le marqueur d'élément de liste sur une puce (par défaut) |
| circle | Placez le marqueur d'élément de liste sur un cercle |
| square | Placez le marqueur d'élément de liste sur un carré |
| none | Les éléments de la liste ne seront pas marqués |
Exemple - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Exemple - Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Exemple — Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Exemple — None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Try it Yourself »
Listes HTML imbriquées
Les listes peuvent être imbriquées (liste dans la liste) :
Exemple
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Try it Yourself »
Remarque : Un élément de liste (<li>) peut contenir une nouvelle liste et d'autres éléments HTML, comme des images et des liens, etc.
Liste horizontale avec CSS
Les listes HTML peuvent être stylisées de différentes manières avec CSS.
Une méthode courante 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: #111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
Try it Yourself »
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-typepour 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:leftpour afficher une liste horizontalement
HTML Liste des balises
| Étiquette | Description |
|---|---|
| <ul> | Définit une liste non ordonnée |
| <ol> | Définir 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.
