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

• Catégories de contenu Contenu de flux
• Contenu autorisé Zéro ou plusieurs éléments <li> éventuellement mélangés avec des éléments <ol> et <ul>
• Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
• Éléments parents autorisés Tout élément acceptant du contenu de flux
• Interface DOM HTMLUListElement
• Document de la norme HTML5, section 4.5.6 (HTML4.01, section 10.2)
• Type d'élément Block

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

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.