Listes HTML 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 <ul>
balise. Chaque élément de la liste commence par la
<li>
balise.
Les éléments de la liste seront marqués par des puces (petits cercles noirs) par défaut :
Exemple
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Liste HTML non ordonnée - Choisissez un 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 prendre l'une des valeurs suivantes :
Value | Description |
---|---|
disc | Sets the list item marker to a bullet (default) |
circle | Sets the list item marker to a circle |
square | Sets the list item marker to a square |
none | The list items will not be marked |
Exemple - Disque
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Exemple - Cercle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Exemple - Carré
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Exemple - Aucun
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
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>
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.
Un moyen 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">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>
Astuce : vous pouvez en apprendre beaucoup plus sur CSS dans notre didacticiel 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 - Utiliser 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
Tag | Description |
---|---|
<ul> | Defines an unordered list |
<ol> | Defines an ordered list |
<li> | Defines a list item |
<dl> | Defines a description list |
<dt> | Defines a term in a description list |
<dd> | Describes the term in a description list |
Pour une liste complète de toutes les balises HTML disponibles, consultez notre Référence des balises HTML .