L'élément HTML <ul> représente une liste d'éléments sans ordre particulier. Il est souvent représenté par une liste à puces.

Catégories de contenu Contenu de flux.
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 Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
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

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
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.
Note d'utilisation : 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 valeur 80% pour l'élément <ul>.
type
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.

Note d'utilisation : 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

Spécifications

Spécification État Commentaires
WHATWG HTML Living Standard
La définition de '<ul>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<ul>' dans cette spécification.
Recommendation  

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'attribut compact désormais déprécié,
    • La propriété margin peut être utilisée pour contrôler l'indentation de la liste.

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight, Bat, tregagnon, teoli, fabien.canu@gmail.com
 Dernière mise à jour par : SphinxKnight,