<ul>

Résumé

L'élément HTML <ul> représente une liste d'éléments non ordonnés. C'est une collection d'éléments qui n'ont pas d'ordre numérique et dont leur position dans la liste n'a pas d'importance. En règle générale une liste d'élements non ordonnée est affichée avec une puce qui peut prendre plusieurs formes : un simple point, un cercle ou un carré. Le style de la puce n'est pas défini dans le code HTML de la page, mais dans le code CSS associé utilisant la propriété list-style-type.

Il n'y a pas de limite de profondeur et d'imbrication dans les listes définies avec les éléments <ol> et <ul>

Note d'utilisation : Les éléments <ol> et  <ul> représentent tout les deux une liste d'objets. Leur différence réside dans le fait qu'avec <ol> l'ordre est important. Un moyen mnémotechnique pour savoir lequel de ces deux éléments utiliser est d'essayer de changer l'ordre dans la liste : si sa signification a changé alors <ol> doit être utilisé, sinon <ul> doit être utilisé.

Attributs

Cet élément inclut les attributs globaux.

compact
Cet attribut booléen indique si la liste doit être affichée avec un style compact. L'interprétation de cet attribut dépend de l'agent utilisateur utilisé et ne fonctionne pas avec tous les navigateurs.
Note d'utilisation : Cet attribut ne doit pas être utilisé car il a été déprécié : les feuilles de style CSS doivent être utilisées pour la mise en forme de l'élément <ol>. Afin d'obtenir un effet similaire à cet attribut, la propriété CSS line-height peut être utilisée avec une valeur de 80%.
type
Cet attribut est utilisé pour définir le style de puce à utiliser pour la liste. La valeurs définies en HTML3.2 et pour la version de transition HTML 4.0/4.01 sont :
  • circle
  • disc
  • square.

Un quatrième type, triangle, a été défini par l'interface WebTV mais n'est pas supporté par tous les navigateurs.

Si cet attribut n'est pas présent et que la propriété CSS list-style-type ne s'applique pas à l'élément, le navigateur décidera du type de puce à utiliser suivant le niveau d'imbrication de la liste.

Note d'utilisation : Cet attribut ayant été déprécié, il ne doit plus être utilisé. La propriété CSS list-style-type doit être utilisée à la place.

Exemples

Exemple simple

<ul>
  <li>premier élément de la liste</li>
  <li>deuxième élément de la liste</li>
  <li>troisième élément de la liste</li>
</ul>

Résultat

  • premier élément de la liste
  • deuxième élément de la liste
  • troisième élément de la liste

Liste imbriquée

<ul>
  <li>Premier élément</li>
  <li>Deuxième élément<!-- La balise </li> n'est pas encore placée ! -->
    <ul>
      <li>Premier élément de la liste imbriquée</li>
      <li>Deuxième élément de la liste imbriquée</li>
      <li>Troisième élément de la liste imbriquée</li>
    </ul>
  </li>                <!-- Voici la balise </li> ! -->
  <li>Troisième élément</li>
</ul>

Résultat

  • Premier élément
  • Deuxième élément
    • Premier élément de la liste imbriquée
    • Deuxième élément de la liste imbriquée
    • Troisième élément de la liste imbriquée
  • Troisième élément

Listes <ul> et <ol> imbriquées

<ul>
  <li>Premier élément</li>
  <li>Deuxième élément<!-- La balise </li> n'est pas encore placée ! -->
    <ol>
      <li>Premier élément de la liste imbriquée</li>
      <li>Deuxième élément de la liste imbriquée</li>
      <li>Troisième élément de la liste imbriquée</li>
    </ol>
  </li>                <!-- Voici la balise </li> ! -->
  <li>Troisième élément</li>
</ul>

Résultat

  • Premier élément
  • Deuxième élément
    1. Premier élément de la liste imbriquée
    2. Deuxième élément de la liste imbriquée
    3. Troisième élément de la liste imbriquée
  • Troisième élément

Spécifications

Spécification Statut Commentaires
WHATWG HTML Living Standard Living Standard  
HTML5 Candidate Recommendation  
HTML 4.01 Specification Recommendation  

Voir également

  • Les autres éléments HTML en relation avec les listes : <ol>, <li>, <menu> et l'élément <dir> qui est obsolète
  • Les propriétés CSS pertinentes pour la mise en forme de l'élément <ul> :
    • la propriété list-style-type pour le type de puce à utiliser
    • Les compteurs CSS, utiles pour gérer les listes imbriquées complexes,
    • La propriété line-height qui permet d'obtenir le même effet que l'attribut compact qui est déprécié,
    • La propriété margin qui permet de contrôler l'indentation de la liste.

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : tregagnon, SphinxKnight, fabien.canu@gmail.com, teoli
Dernière mise à jour par : tregagnon,