<ul> : l'élément de liste non ordonnée

Exemple interactif

<ul>
  <li>Lait</li>
  <li>
    Fromage
    <ul>
      <li>Bleu</li>
      <li>Feta</li>
    </ul>
  </li>
</ul>

li {
  list-style-type: circle;
}

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

Attributs

Cet élément inclut les attributs universels.

compact Obsolète

Cet attribut booléen suggère que la liste doit être affichée dans un style compact. L'interprétation de cet attribut dépend du navigateur. Utilisez plutôt la CSS : pour obtenir un effet similaire à l'attribut compact, la propriété CSS line-height peut être utilisée avec une valeur de 80%.

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
• square

Un quatrième type de puce a été défini dans l'interface WebTV, mais il n'est pas pris en charge par tous les navigateurs : triangle.

Si cet attribut n'est pas présent et qu'aucune propriété CSS list-style-type ne s'applique à l'élément, l'agent utilisateur choisit un type de puce en fonction du niveau d'imbrication de la liste.

Attention : Cet attribut a été obsolète et ne doit pas être utilisé ; on pourra utiliser la propriété CSS list-style-type à la place.

Notes d'utilisation

• L'élément <ul> sert à regrouper une collection d'éléments qui n'ont pas d'ordre numérique, et leur ordre dans la liste n'a pas de signification. Typiquement, les éléments d'une liste non ordonnée sont affichés avec une puce, qui peut prendre plusieurs formes, comme un point, un cercle ou un carré. Le style de la puce n'est pas défini dans la description HTML de la page, mais dans sa CSS associée, via la propriété list-style-type.
• Les éléments <ul> et <ol> peuvent être imbriqués aussi profondément que souhaité. De plus, les listes imbriquées peuvent alterner entre <ol> et <ul> sans restriction.
• Les éléments <ol> et <ul> représentent tous deux une liste d'éléments. Ils diffèrent en ce que, pour <ol>, l'ordre a une signification. Pour déterminer lequel utiliser, essayez de changer l'ordre des éléments de la liste ; si le sens change, il faut utiliser <ol>, sinon vous pouvez utiliser <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

Liste ordonnée imbriquée dans une liste non ordonnée

HTML

<ul>
  <li>Lire un livre</li>
  <li>
    Préparer une soupe
    <!-- Regardez, la balise de fermeture </li> n'est pas placée ici ! -->
    <ol>
      <li>Couper les légumes</li>
      <li>Mettre dans l'eau et cuire</li>
      <li>Mouliner</li>
    </ol>
    <!-- La balise de fermeture </li> est ici -->
  </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>
• 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.