initial commit

1 files changed, 195 insertions, 0 deletions

diff --git a/files/fr/web/html/element/ul/index.html b/files/fr/web/html/element/ul/index.html
new file mode 100644
index 0000000000..f44c66895e
--- /dev/null
+++ b/files/fr/web/html/element/ul/index.html
@@ -0,0 +1,195 @@
+---
+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>