HTML <ul> Tag
Exemple
Une liste HTML non ordonnée :
<ul>
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ul> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
La balise <ul> définit une liste non ordonnée (à puces).
Utilisez la balise <ul> avec la balise <li> pour créer des listes non ordonnées.
Conseil : Utilisez CSS pour styliser les listes .
Conseil : Pour les listes ordonnées, utilisez la balise <ol> .
Support des Navigateurs
| Élément | |||||
|---|---|---|---|---|---|
| <ul> | Oui | Oui | Oui | Oui | Oui |
Attributs Globaux
La balise <ul> prend également en charge les Attributs Globaux en HTML .
Attributs d'Événement
La balise <ul> prend également en charge les Attributs d'Événement en HTML .
Plus d'Exemples
Exemple
Définir les différents types de style de liste (avec CSS) :
<ul style="list-style-type:circle">
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ul>
<ul style="list-style-type:disc">
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ul>
<ul style="list-style-type:square">
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ul> Exemple
Élargir et réduire l'interligne dans les listes (avec CSS) :
<ul style="line-height:180%">
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ul>
<ul style="line-height:80%">
<li>Café</li>
<li>Thé</li>
<li>Lait</li>
</ul> Exemple
Créer une liste à l'intérieur d'une liste (une liste imbriquée) :
<ul>
<li>Café</li>
<li>Thé
<ul>
<li>Thé noir</li>
<li>Thé vert</li>
</ul>
</li>
<li>Lait</li>
</ul> Exemple
Créer une liste imbriquée plus complexe :
<ul>
<li>Café</li>
<li>Thé
<ul>
<li>Thé noir</li>
<li>Thé vert
<ul>
<li>Chine</li>
<li>Afrique</li>
</ul>
</li>
</ul>
</li>
<li>Lait</li>
</ul> Pages Associées
Tutoriel HTML : Listes HTML
Référence DOM HTML : Objet Ul
Tutoriel CSS : Styliser les Listes
Paramètres CSS par Défaut
La plupart des navigateurs afficheront l'élément <ul> avec les valeurs par défaut suivantes :
Exemple
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}