<ul>

Description

L’élément <ul> représente une liste d’éléments non ordonnés — l’ordre des items n’a pas de signification. Chaque item est contenu dans un <li>. Les listes peuvent être imbriquées. Quand l’ordre compte, utiliser <ol>.

Syntaxe

<ul>
  <li>Premier item</li>
  <li>Deuxième item</li>
  <li>Troisième item</li>
</ul>

Exemples

Menu de navigation :

<nav>
  <ul>
    <li><a href="/">Accueil</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Liste imbriquée :

<ul>
  <li>Frameworks CSS
    <ul>
      <li>Tailwind CSS</li>
      <li>Bootstrap</li>
    </ul>
  </li>
  <li>Préprocesseurs CSS
    <ul>
      <li>Sass</li>
      <li>Less</li>
    </ul>
  </li>
</ul>

Notes

Sémantique des listes : <ul> est sémantiquement pertinent dès qu’il y a plusieurs items connexes dont l’ordre n’importe pas. Les navigateurs et lecteurs d’écran annoncent le nombre d’éléments dans une liste.

role="list" si les puces sont masquées : si CSS masque les puces (list-style: none), certains navigateurs (Safari) ne traitent plus l’élément comme une liste. Ajouter role="list" pour préserver la sémantique.