<ul>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
L'élément HTML <ul>
représente une liste d'éléments sans ordre particulier. Il est souvent représenté par une liste à puces.
Exemple interactif
Attributs
À l'instar des différents éléments HTML, cet élément inclut les attributs universels.
Attributs dépréciés ou obsolètes
compact
Obsolète-
Cet attribut booléen fournit une indication pour afficher la liste en mode compact. L'interprétation de cet attribut est laissée à la discrétion de l'agent utilisateur et ne fonctionne pas pour tous les navigateurs.
Attention : Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété
line-height
avec la valeur80%
pour l'élément<ul>
. type
Obsolète-
Cet attribut permet de définir le style de puce utilisé pour la liste. Les valeurs définies au sein des spécifications pour HTML3.2 et HTML 4.0/4.01 sont :
circle
,disc
,- and
square
.
Un quatrième type a été défini dans l'interface WebTV :
triangle
mais tous les navigateurs ne l'implémentent pas.Attention : Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété CSS
list-style-type
à la place.
Notes d'utilisation
- L'élément
<ul>
doit être utilisé pour regrouper plusieurs éléments qui n'ont pas de relation d'ordre. Si on hésite entre<ol>
et<ul>
, on se demandera si changer l'ordre des éléments de la liste a un impact : si le déplacement d'un élément change la signification, cela signifie que l'ordre est important et qu'il faudra utiliser<ol>
, sinon l'ordre n'importe pas et<ul>
peut être utilisé. - La propriété CSS
list-style-type
est utile pour choisir le type de puce utilisé. - Il n'y a pas de limite pour l'imbrication des listes avec les éléments
<ol>
et<ul>
.
Exemples
Exemple simple
HTML
<ul>
<li>1 artichaut</li>
<li>De l'essuie-tout</li>
<li>200g de chocolat</li>
</ul>
Résultat
Liste imbriquée
HTML
<ul>
<li>1 artichaut</li>
<li>
Les trucs pour le gateau
<!-- On voit que </li> n'est pas là -->
<ul>
<li>3 oeufs</li>
<li>
La génoise
<!-- Là on ouvre une autre liste -->
<ul>
<li>100g de sucre</li>
<li>1 oeuf</li>
<li>150g de farine</li>
</ul>
</li>
<!-- On ferme la liste la plus imbriquée -->
<li>200g de chocolat</li>
</ul>
<!-- On ferme la liste imbriquée avec </li> -->
</li>
<li>De l'essuie-tout</li>
</ul>
Résultat
<ul>
et <ol>
imbriqués
HTML
<ul>
<li>Lire un livre</li>
<li>
Préparer une soupe
<ol>
<li>Couper les légumes</li>
<li>Mettre dans l'eau et cuire</li>
<li>Mouliner</li>
</ol>
</li>
<li>Relever le courrier</li>
</ul>
Résultat
Résumé technique
Catégories de contenu |
Contenu de flux, et du
contenu tangible
si les enfants de l'élément <ul> incluent au moins un
élément <li> .
Contenu tangible.
|
---|---|
Contenu autorisé |
Zéro ou plusieurs éléments <li> qui peuvent
éventuellement contenir à leur tour des éléments
<ol> ou <ul> (listes
imbriquées).
|
Omission de balises | |
Parents autorisés | Tout élément qui accepte du contenu de flux. |
Rôles ARIA autorisés |
directory , group ,
listbox , menu ,
menubar , radiogroup ,
tablist , toolbar ,
tree , presentation
|
Interface DOM | HTMLUListElement |
Spécifications
Specification |
---|
HTML Standard # the-ul-element |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
-
Les autres éléments HTML relatifs aux listes :
<ol>
,<li>
,<menu>
(et l'élément obsolète<dir>
). -
Les propriétés CSS particulièrement utiles pour mettre en forme l'élément
<ul>
:- La propriété
list-style
qui permet de choisir la façon dont l'indicateur ordinal est affiché, - Les compteurs CSS, qui permettent de gérer des listes imbriquées complexes,
- La propriété
line-height
qui permet de simuler l'attributcompact
désormais déprécié, - La propriété
margin
peut être utilisée pour contrôler l'indentation de la liste.
- La propriété