---
title: <ul>
slug: Web/HTML/Element/ul
tags:
  - Element
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/ul
---
<div>{{HTMLRef}}</div>

<p>L'élément HTML <strong><code>&lt;ul&gt;</code></strong> représente une liste d'éléments sans ordre particulier. Il est souvent représenté par une liste à puces.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}</div>

<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>

<h2 id="Attributs">Attributs</h2>

<p>À l'instar des différents éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>

<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>

<dl>
 <dt>{{htmlattrdef("compact")}}{{Deprecated_inline}}</dt>
 <dd>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.
 <div class="warning"><strong>Attention !</strong>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é {{cssxref("line-height")}} avec la valeur <code>80%</code> pour l'élément <code>&lt;ul&gt;</code>.</div>
 </dd>
</dl>

<dl>
 <dt>{{htmlattrdef("type")}}{{Deprecated_inline}}</dt>
 <dd>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 :
 <ul>
  <li><code>circle</code>,</li>
  <li><code>disc</code>,</li>
  <li>and <code>square</code>.</li>
 </ul>

 <p>Un quatrième type a été défini dans l'interface WebTV : <code>triangle</code> mais tous les navigateurs ne l'implémentent pas.</p>

 <div class="warning"><strong>Attention !</strong>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 {{cssxref("list-style-type")}} à la place.</div>
 </dd>
</dl>

<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>

<ul>
 <li>L'élément <code>&lt;ul&gt;</code> doit être utilisé pour regrouper plusieurs éléments qui n'ont pas de relation d'ordre. Si on hésite entre {{HTMLElement("ol")}} et {{HTMLElement("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 {{HTMLElement("ol")}}, sinon l'ordre n'importe pas et {{HTMLElement("ul")}} peut être utilisé.</li>
 <li>La propriété CSS {{cssxref("list-style-type")}} est utile pour choisir le type de puce utilisé.</li>
 <li>Il n'y a pas de limite pour l'imbrication des listes avec les éléments {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</li>
</ul>

<h2 id="Exemples">Exemples</h2>

<h3 id="Exemple_simple">Exemple simple</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;1 artichaut&lt;/li&gt;
  &lt;li&gt;De l'essuie-tout&lt;/li&gt;
  &lt;li&gt;200g de chocolat&lt;/li&gt;
&lt;/ul&gt;
</pre>

<h4 id="Résultat">Résultat</h4>

<p>{{EmbedLiveSample("Exemple_simple","100%","150")}}</p>

<h3 id="Liste_imbriquée">Liste imbriquée</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;1 artichaut&lt;/li&gt;
  &lt;li&gt;Les trucs pour le gateau
  &lt;!-- On voit que &lt;/li&gt; n'est pas là --&gt;
    &lt;ul&gt;
      &lt;li&gt;3 oeufs&lt;/li&gt;
      &lt;li&gt;La génoise
      &lt;!-- Là on ouvre une autre liste --&gt;
        &lt;ul&gt;
          &lt;li&gt;100g de sucre&lt;/li&gt;
          &lt;li&gt;1 oeuf&lt;/li&gt;
          &lt;li&gt;150g de farine&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt; &lt;!-- On ferme la liste la plus imbriquée --&gt;
      &lt;li&gt;200g de chocolat&lt;/li&gt;
    &lt;/ul&gt;
  &lt;!-- On ferme la liste imbriquée avec &lt;/li&gt; --&gt;
  &lt;/li&gt;
  &lt;li&gt;De l'essuie-tout&lt;/li&gt;
&lt;/ul&gt;</pre>

<h4 id="Résultat_2">Résultat</h4>

<p>{{EmbedLiveSample("Liste_imbriquée","100%","230")}}</p>

<h3 id="&lt;ul>_et_&lt;ol>_imbriqués"><code>&lt;ul&gt;</code> et <code>&lt;ol&gt;</code> imbriqués</h3>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;Lire un livre&lt;/li&gt;
  &lt;li&gt;Préparer une soupe
    &lt;ol&gt;
      &lt;li&gt;Couper les légumes&lt;/li&gt;
      &lt;li&gt;Mettre dans l'eau et cuire&lt;/li&gt;
      &lt;li&gt;Mouliner&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;
  &lt;li&gt;Relever le courrier&lt;/li&gt;
&lt;/ul&gt;
</pre>

<h4 id="Résultat_3">Résultat</h4>

<p>{{EmbedLiveSample("&lt;ul&gt;_et_&lt;ol&gt;_imbriqués","100%","180")}}</p>

<h2 id="Résumé_technique">Résumé technique</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, et du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a> si les enfants de l'élément <code>&lt;ul&gt;</code> incluent au moins un élément {{HTMLElement("li")}}. <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">Contenu tangible.</a></td>
  </tr>
  <tr>
   <th scope="row">Contenu autorisé</th>
   <td>Zéro ou plusieurs éléments {{HTMLElement("li")}} qui peuvent éventuellement contenir à leur tour des éléments {{HTMLElement("ol")}} ou {{HTMLElement("ul")}} (listes imbriquées).</td>
  </tr>
  <tr>
   <th scope="row">Omission de balises</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Parents autorisés</th>
   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
  </tr>
  <tr>
   <th scope="row">Rôles ARIA autorisés</th>
   <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td>
  </tr>
  <tr>
   <th scope="row">Interface DOM</th>
   <td>{{domxref("HTMLUListElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ul-element', '&lt;ul&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '&lt;ul&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div>

<p>{{Compat("html.elements.ul")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li>Les autres éléments HTML relatifs aux listes : {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} (et l'élément obsolète {{HTMLElement("dir")}}).</li>
 <li>Les propriétés CSS particulièrement utiles pour mettre en forme l'élément <code>&lt;ul&gt;</code> :
  <ul>
   <li>La propriété {{cssxref("list-style")}} qui permet de choisir la façon dont l'indicateur ordinal est affiché,</li>
   <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Les compteurs CSS</a>, qui permettent de gérer des listes imbriquées complexes,</li>
   <li>La propriété {{cssxref("line-height")}} qui permet de simuler l'attribut {{htmlattrxref("compact", "ul")}} désormais déprécié,</li>
   <li>La propriété {{cssxref("margin")}} peut être utilisée pour contrôler l'indentation de la liste.</li>
  </ul>
 </li>
</ul>