Balise HTML <ul>
Exemple
Une liste HTML non ordonnée :
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et utilisation
La <ul>balise définit une liste non ordonnée (à puces).
Utilisez la <ul>balise avec la balise <li> pour créer des listes non ordonnées.
Astuce : utilisez CSS pour styliser les listes .
Conseil : Pour les listes ordonnées, utilisez la balise <ol> .
Prise en charge du navigateur
| Element | |||||
|---|---|---|---|---|---|
| <ul> | Yes | Yes | Yes | Yes | Yes |
Attributs globaux
La <ul>balise prend également en charge les attributs globaux en HTML .
Attributs d'événement
La <ul>balise prend également en charge les attributs d'événement en HTML .
Plus d'exemples
Exemple
Définissez les différents types de style de liste (avec CSS) :
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Exemple
Développez et réduisez la hauteur de ligne dans les listes (avec CSS):
<ul style="line-height:180%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul
style="line-height:80%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Exemple
Créer une liste à l'intérieur d'une liste (une liste imbriquée) :
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Exemple
Créez une liste imbriquée plus complexe :
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
Pages connexes
Tutoriel HTML : Listes HTML
Référence HTML DOM : Objet Ul
Tutoriel CSS : styliser les listes
Paramètres CSS par défaut
La plupart des navigateurs afficheront l' <ul>élément avec les valeurs par défaut suivantes :
Exemple
ul {
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}