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


```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 with JavaScript enabled. Enable JavaScript to view data.

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.