<ul>

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

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 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.

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

html

<ul>
  <li>1 artichaut</li>
  <li>De l'essuie-tout</li>
  <li>200g de chocolat</li>
</ul>

Résultat

Liste imbriquée

HTML

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

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 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 (en-US), group, listbox, menu (en-US), menubar (en-US), radiogroup (en-US), tablist (en-US), toolbar (en-US), tree (en-US), presentation
Interface DOM HTMLUListElement (en-US)

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