convert content to md

1 files changed, 155 insertions, 146 deletions

diff --git a/files/fr/web/html/element/ul/index.md b/files/fr/web/html/element/ul/index.md
index 41919488a2..b2cd998f98 100644
--- a/files/fr/web/html/element/ul/index.md
+++ b/files/fr/web/html/element/ul/index.md
@@ -8,184 +8,193 @@ tags:
   - Web
 translation_of: Web/HTML/Element/ul
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<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>
+L'élément HTML **`<ul>`** représente une liste d'éléments sans ordre particulier. Il est souvent représenté par une liste à puces.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<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>
+À l'instar des différents éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
+### Attributs dépréciés ou obsolètes
 
-<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">
-   <p><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>.</p></div>
- </dd>
- <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>
+- {{htmlattrdef("compact")}}{{Deprecated_inline}}
 
- <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>
+  - : 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">
-   <p><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.</p>
-  </div>
- </dd>
-</dl>
+    > **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é {{cssxref("line-height")}} avec la valeur `80%` pour l'élément `<ul>`.
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+- {{htmlattrdef("type")}}{{Deprecated_inline}}
 
-<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>
+  - : 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 {{cssxref("list-style-type")}} à la place.
 
-<h2 id="Exemples">Exemples</h2>
+## Notes d'utilisation
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+- 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 {{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é.
+- La propriété CSS {{cssxref("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 {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.
 
-<h4 id="HTML">HTML</h4>
+## Exemples
 
-<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>
+### Exemple simple
+
+#### HTML
+
+```html
+<ul>
+  <li>1 artichaut</li>
+  <li>De l'essuie-tout</li>
+  <li>200g de chocolat</li>
+</ul>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_simple","100%","150")}}</p>
+{{EmbedLiveSample("Exemple_simple","100%","150")}}
 
-<h3 id="Liste_imbriquée">Liste imbriquée</h3>
+### Liste imbriquée
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<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>
+```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>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Liste_imbriquée","100%","230")}}</p>
+{{EmbedLiveSample("Liste_imbriquée","100%","230")}}
 
-<h3 id="&lt;ul>_et_&lt;ol>_imbriqués"><code>&lt;ul&gt;</code> et <code>&lt;ol&gt;</code> imbriqués</h3>
+### `<ul>` et `<ol>` imbriqués
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<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>
+```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>
+```
 
-<h4 id="Résultat_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("&lt;ul&gt;_et_&lt;ol&gt;_imbriqués","100%","180")}}</p>
+{{EmbedLiveSample("&lt;ul&gt;_et_&lt;ol&gt;_imbriqués","100%","180")}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <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>
+  <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>&#x3C;ul></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>
+## Spécifications
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+| Spécification                                                                                            | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-ul-element', '&lt;ul&gt;')}}     | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '&lt;ul&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-<p>{{Compat("html.elements.ul")}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+{{Compat("html.elements.ul")}}
 
-<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>
+## Voir aussi
+
+- Les autres éléments HTML relatifs aux listes : {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} (et l'élément obsolète {{HTMLElement("dir")}}).
+- Les propriétés CSS particulièrement utiles pour mettre en forme l'élément `<ul>` :
+
+  - La propriété {{cssxref("list-style")}} qui permet de choisir la façon dont l'indicateur ordinal est affiché,
+  - [Les compteurs CSS](/fr/docs/Web/CSS/Compteurs_CSS), qui permettent de gérer des listes imbriquées complexes,
+  - La propriété {{cssxref("line-height")}} qui permet de simuler l'attribut {{htmlattrxref("compact", "ul")}} désormais déprécié,
+  - La propriété {{cssxref("margin")}} peut être utilisée pour contrôler l'indentation de la liste.