Balise HTML <ul>
La balise HTML <ul> définit une liste non ordonnée. Découvrez sa syntaxe, l'imbrication et la mise en forme avec CSS.
La balise HTML <ul> est utilisée pour définir une liste non ordonnée, qui regroupe un ensemble d'éléments sans ordre numérique. Lorsque l'ordre des éléments de la liste change, le sens ne change pas. En général, les éléments d'une liste non ordonnée sont affichés avec une puce, qui peut prendre différentes formes : un cercle, un point ou un carré.
Chaque élément d'une liste non ordonnée est déclaré à l'intérieur de la balise <li>.
La balise <ul> est un élément de type bloc et occupe tout l'espace horizontal disponible. Sa hauteur dépend du contenu qu'elle contient. Une liste non ordonnée est généralement rendue sous forme de liste à puces.
La balise <ol> représente également une liste d'éléments et crée une liste ordonnée. Elle diffère de <ul> en ce que l'ordre dans la balise <ol> est significatif. Par défaut, les éléments d'une liste ordonnée sont affichés avec des numéros.
Les balises <ul> et <ol> peuvent être imbriquées aussi profondément que vous le souhaitez. Les listes imbriquées peuvent alterner entre <ul> et <ol>. Cependant, notez que lors de l'imbrication d'une liste dans une autre, la liste intérieure doit être placée dans un élément <li> de la liste extérieure. Cela signifie que l'enfant direct d'une liste doit être un élément <li>, mais cet élément <li> peut contenir une autre liste. Il est possible de modifier le marqueur des éléments de liste avec CSS. Cependant, le sens sémantique exprimé par le choix d'un type de liste ne peut pas être modifié avec CSS.
Syntaxe
La balise <ul> va par paires. Le contenu est écrit entre les balises ouvrante (<ul>) et fermante (</ul>).
Exemple de la balise HTML <ul> :
Exemple de la balise HTML <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</body>
</html>Listes imbriquées
Les listes sont fréquemment imbriquées pour exprimer une hiérarchie — par exemple un menu avec des sous-éléments. Pour imbriquer une liste, placez le <ul> intérieur à l'intérieur d'un <li> de la liste extérieure, et non directement dans le <ul> extérieur. L'enfant direct d'un <ul> doit toujours être un <li>.
Exemple d'un <ul> imbriqué
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul>
<li>Coffee</li>
<li>
Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>Les navigateurs changent automatiquement le marqueur de puce à chaque niveau d'imbrication (disque, puis cercle, puis carré), ce qui facilite la lecture de la hiérarchie.
Mise en forme de la liste avec CSS
Les anciens attributs type et compact sont obsolètes en HTML5 — ne les utilisez pas. La méthode moderne et sémantique pour modifier le marqueur de puce est la propriété CSS list-style-type (ou list-style-image pour une image personnalisée). Conserver le marqueur dans CSS sépare la présentation de la structure : la liste signifie toujours « liste non ordonnée », quelle que soit la façon dont vous la mettez en forme.
Exemple de <ul> mis en forme avec la propriété CSS list-style-type :
Exemple de la balise HTML <ul> avec la propriété CSS list-style-type
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul.square {
list-style-type: square;
}
ul.circle {
list-style-type: circle;
}
ul.none {
list-style-type: none;
}
</style>
</head>
<body>
<h2>Examples of unordered lists:</h2>
<ul class="square">
<li>Cold Drinks</li>
<li>Hot Drinks</li>
<li>Ice-Creams</li>
</ul>
<ul class="circle">
<li>Coca-Cola</li>
<li>Fanta</li>
<li>Ice Tea</li>
</ul>
<ul class="none">
<li>No marker</li>
<li>No marker</li>
</ul>
</body>
</html>Menus de navigation
L'utilisation la plus courante de <ul> dans la pratique est le menu de navigation. Envelopper la liste dans un élément <nav> la marque comme un repère de navigation, et la liste communique toujours « ces éléments forment un groupe » aux technologies d'assistance. Les puces sont généralement supprimées avec CSS.
Exemple d'un menu de navigation construit avec <nav> et <ul>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</body>
</html>Accessibilité
Les lecteurs d'écran traitent un <ul> comme une liste : ils annoncent le début d'une liste, indiquent le nombre d'éléments qu'elle contient (par exemple « liste, 3 éléments »), et lisent chaque élément dans l'ordre. Ce décompte d'éléments est un contexte utile pour les utilisateurs malvoyants, aussi préférez les balises <ul>/<li> réelles à un empilement d'éléments <div> mis en forme.
Il existe un écueil important. Dans Safari avec VoiceOver, l'application de list-style: none (comme vous le faites généralement pour les menus de navigation) supprime la sémantique de liste — VoiceOver n'annonce plus l'élément comme une liste. Si le rôle de liste est important dans ce contexte, restaurez-le explicitement :
<ul role="list" style="list-style: none;">
<li>Home</li>
<li>About</li>
</ul>Attributs
La balise <ul> ne possède aucun attribut spécifique dans la norme HTML actuelle. (Les anciens attributs type et compact sont obsolètes — utilisez CSS à la place.) Elle ne prend en charge que les attributs globaux et les attributs d'événement.
Balises et sujets associés
<li>— définit chaque élément de la liste.<ol>— crée une liste ordonnée (numérotée).- Listes HTML — aperçu de tous les types de listes en HTML.
- CSS
list-style-type— contrôle le marqueur de puce.