convert content to md

1 files changed, 127 insertions, 93 deletions

diff --git a/files/fr/web/html/element/dialog/index.md b/files/fr/web/html/element/dialog/index.md
index 8c5051b4b2..e9733eb958 100644
--- a/files/fr/web/html/element/dialog/index.md
+++ b/files/fr/web/html/element/dialog/index.md
@@ -12,113 +12,148 @@ tags:
 translation_of: Web/HTML/Element/dialog
 browser-compat: html.elements.dialog
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <code><strong>&lt;dialog&gt;</strong></code> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).</p>
+L'élément HTML **`<dialog>`** représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).
 
 <table class="properties">
   <tbody>
-   <tr>
-    <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-    <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots"> racine de sectionnement</a>.</td>
-   </tr>
-   <tr>
-    <th scope="row">Contenu autorisé</th>
-    <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td>
-   </tr>
-   <tr>
-    <th scope="row">Omission de balises</th>
-    <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
-   </tr>
-   <tr>
-    <th scope="row">Parents autorisés</th>
-    <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td>
-   </tr>
-   <tr>
-    <th scope="row">Rôle ARIA implicite</th>
-    <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/dialog_role"><code>dialog</code></a></td>
-   </tr>
-   <tr>
-    <th scope="row">Rôles ARIA autorisés</th>
-    <td><a href="https://w3c.github.io/aria/#alertdialog"><code>alertdialog</code></a></td>
-   </tr>
-   <tr>
-    <th scope="row">Interface DOM</th>
-    <td><a href="/fr/docs/Web/API/HTMLDialogElement"><code>HTMLDialogElement</code></a></td>
-   </tr>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots"
+          >racine de sectionnement</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôle ARIA implicite</th>
+      <td>
+        <a href="/fr/docs/Web/Accessibility/ARIA/Roles/dialog_role"
+          ><code>dialog</code></a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>
+        <a href="https://w3c.github.io/aria/#alertdialog"
+          ><code>alertdialog</code></a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLDialogElement"
+          ><code>HTMLDialogElement</code></a
+        >
+      </td>
+    </tr>
   </tbody>
- </table>
+</table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<div class="warning">
-  <p><strong>Attention :</strong> L'attribut <code>tabindex</code> ne doit pas être utilisé sur l'élément <code>&lt;dialog&gt;</code>.</p>
-</div>
+> **Attention :** L'attribut `tabindex` ne doit pas être utilisé sur l'élément `<dialog>`.
 
-<dl>
-  <dt><code>open</code></dt>
-  <dd>Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur.</dd>
-</dl>
+- `open`
+  - : Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur.
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<ul>
-  <li>Les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a> peuvent fermer un dialogue s'ils possèdent l'attribut <code>method="dialog"</code>. Lorsqu'un tel formulaire est soumis, le dialogue se ferme avec sa propriété <a href="/fr/docs/Web/API/HTMLDialogElement/returnValue"><code>returnValue</code></a> définie sur la <code>value</code> (valeur) du bouton qui a été utilisé pour soumettre le formulaire.</li>
-  <li>Le pseudo-élément CSS <a href="/fr/docs/Web/CSS/::backdrop"><code>::backdrop</code></a> peut être utilisé pour créer un style derrière un élément <code>&lt;dialog&gt;</code> lorsque le dialogue est affiché avec <a href="/fr/docs/Web/API/HTMLDialogElement/showModal"><code>HTMLDialogElement.showModal()</code></a>. Par exemple, pour atténuer le contenu inaccessible derrière la boîte de dialogue modale.</li>
-</ul>
+- Les éléments [`<form>`](/fr/docs/Web/HTML/Element/Form) peuvent fermer un dialogue s'ils possèdent l'attribut `method="dialog"`. Lorsqu'un tel formulaire est soumis, le dialogue se ferme avec sa propriété [`returnValue`](/fr/docs/Web/API/HTMLDialogElement/returnValue) définie sur la `value` (valeur) du bouton qui a été utilisé pour soumettre le formulaire.
+- Le pseudo-élément CSS [`::backdrop`](/fr/docs/Web/CSS/::backdrop) peut être utilisé pour créer un style derrière un élément `<dialog>` lorsque le dialogue est affiché avec [`HTMLDialogElement.showModal()`](/fr/docs/Web/API/HTMLDialogElement/showModal). Par exemple, pour atténuer le contenu inaccessible derrière la boîte de dialogue modale.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="simple_example">Exemple simple</h3>
+### Exemple simple
 
-<pre class="brush: html">&lt;dialog open&gt;
-  &lt;p&gt;Salutations, à tous et à toutes !&lt;/p&gt;
-&lt;/dialog&gt;</pre>
+```html
+<dialog open>
+  <p>Salutations, à tous et à toutes !</p>
+</dialog>
+```
 
-<h3 id="advanced_example">Exemple avancé</h3>
+### Exemple avancé
 
-<h4 id="html">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;!-- Boîte de dialogue contextuelle simple contenant un formulaire --&gt;
-&lt;dialog id="favDialog"&gt;
-  &lt;form method="dialog"&gt;
-    &lt;p&gt;&lt;label&gt;Animal préféré :
-      &lt;select&gt;
-        &lt;option&gt;&lt;/option&gt;
-        &lt;option&gt;Crevette en saumure&lt;/option&gt;
-        &lt;option&gt;Panda rouge&lt;/option&gt;
-        &lt;option&gt;Singe-araignée&lt;/option&gt;
-      &lt;/select&gt;
-    &lt;/label&gt;&lt;/p&gt;
-    &lt;menu&gt;
-      &lt;button value="cancel"&gt;Annuler&lt;/button&gt;
-      &lt;button id="confirmBtn" value="default"&gt;Confirmer&lt;/button&gt;
-    &lt;/menu&gt;
-  &lt;/form&gt;
-&lt;/dialog&gt;
+```html
+<!-- Boîte de dialogue contextuelle simple contenant un formulaire -->
+<dialog id="favDialog">
+  <form method="dialog">
+    <p><label>Animal préféré :
+      <select>
+        <option></option>
+        <option>Crevette en saumure</option>
+        <option>Panda rouge</option>
+        <option>Singe-araignée</option>
+      </select>
+    </label></p>
+    <menu>
+      <button value="cancel">Annuler</button>
+      <button id="confirmBtn" value="default">Confirmer</button>
+    </menu>
+  </form>
+</dialog>
 
-&lt;menu&gt;
-  &lt;button id="updateDetails"&gt;Mettre à jour les détails&lt;/button&gt;
-&lt;/menu&gt;
+<menu>
+  <button id="updateDetails">Mettre à jour les détails</button>
+</menu>
 
-&lt;output aria-live="polite"&gt;&lt;/output&gt;</pre>
+<output aria-live="polite"></output>
+```
 
-<h4 id="javascript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">let updateButton = document.getElementById('updateDetails');
+```js
+let updateButton = document.getElementById('updateDetails');
 let favDialog = document.getElementById('favDialog');
 let outputBox = document.querySelector('output');
 let selectEl = document.querySelector('select');
 let confirmBtn = document.getElementById('confirmBtn');
 
-// Le bouton "Mettre à jour les détails" ouvre le &lt;dialogue&gt ; modulaire
+// Le bouton "Mettre à jour les détails" ouvre le <dialogue> ; modulaire
 updateButton.addEventListener('click', function onOpen() {
   if (typeof favDialog.showModal === "function") {
     favDialog.showModal();
   } else {
-    console.error("L'API &lt;dialog&gt; n'est pas prise en charge par ce navigateur.");
+    console.error("L'API <dialog> n'est pas prise en charge par ce navigateur.");
   }
 });
 // L'entrée "Animal favori" définit la valeur du bouton d'envoi.
@@ -129,29 +164,28 @@ selectEl.addEventListener('change', function onSelect(e) {
 // de la boîte de dialogue en raison de [method="dialog"]
 favDialog.addEventListener('close', function onClose() {
   outputBox.value = favDialog.returnValue + " bouton cliqué - " + (new Date()).toString();
-});</pre>
+});
+```
 
-<h4 id="result">Résultat</h3>
+#### Résultat
 
-<p>{{EmbedLiveSample("advanced_example", "", 300)}}</p>
+{{EmbedLiveSample("advanced_example", "", 300)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="Polyfill">Prothèse d'émulation (polyfill)</h2>
+## Prothèse d'émulation (polyfill)
 
-<p>Incluez ce polyfill pour fournir un support aux navigateurs sans élément <code>&lt;dialog&gt;</code> : <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a>.</p>
+Incluez ce polyfill pour fournir un support aux navigateurs sans élément `<dialog>` : [dialog-polyfill](https://github.com/GoogleChrome/dialog-polyfill).
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'évènement <a href="/fr/docs/Web/Reference/HTMLDialogElement/close_event">close</a></li>
- <li>L'évènement <a href="/fr/docs/Web/Reference/HTMLDialogElement/cancel_event">cancel</a></li>
- <li><a href="/fr/docs/Learn/Forms">Guide sur les formulaires HTML</a></li>
- <li>Le pseudo-élément <a href="/fr/docs/Web/CSS/::backdrop"><code>::backdrop</code></a></li>
-</ul>
+- L'évènement [close](/fr/docs/Web/Reference/HTMLDialogElement/close_event)
+- L'évènement [cancel](/fr/docs/Web/Reference/HTMLDialogElement/cancel_event)
+- [Guide sur les formulaires HTML](/fr/docs/Learn/Forms)
+- Le pseudo-élément [`::backdrop`](/fr/docs/Web/CSS/::backdrop)