<ul>

Exemple interactif

<ul>
  <li>Milk</li>
  <li>
    Cheese
    <ul>
      <li>Blue cheese</li>
      <li>Feta</li>
    </ul>
  </li>
</ul>

li {
  list-style-type: circle;
}

li li {
  list-style-type: square;
}

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 valeur 80% 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

Spécifications

Compatibilité des navigateurs

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.