convert content to md

4 files changed, 207 insertions, 260 deletions

diff --git a/files/fr/mdn/structures/index.md b/files/fr/mdn/structures/index.md
index 5e605bea37..4a7a047a30 100644
--- a/files/fr/mdn/structures/index.md
+++ b/files/fr/mdn/structures/index.md
@@ -8,10 +8,8 @@ tags:
   - TopicStub
 translation_of: MDN/Structures
 ---
-<div>{{MDNSidebar}}</div>
+{{MDNSidebar}}{{IncludeSubnav("/en-US/docs/MDN")}}
 
-<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div>
+Tout au long de MDN, il existe diverses structures de document qui sont utilisées à plusieurs reprises, pour fournir une présentation cohérente des informations dans les articles MDN. Voici des articles décrivant ces structures, afin que, en tant qu'auteur MDN, vous puissiez les reconnaître, les appliquer et les modifier selon les besoins pour les documents que vous écrivez, modifiez ou traduisez.
 
-<p>Tout au long de MDN, il existe diverses structures de document qui sont utilisées à plusieurs reprises, pour fournir une présentation cohérente des informations dans les articles MDN. Voici des articles décrivant ces structures, afin que, en tant qu'auteur MDN, vous puissiez les reconnaître, les appliquer et les modifier selon les besoins pour les documents que vous écrivez, modifiez ou traduisez.</p>
-
-<p>{{LandingPageListSubPages()}}</p>
+{{LandingPageListSubPages()}}
diff --git a/files/fr/mdn/structures/live_samples/index.md b/files/fr/mdn/structures/live_samples/index.md
index c297eac680..8fe8e96a8b 100644
--- a/files/fr/mdn/structures/live_samples/index.md
+++ b/files/fr/mdn/structures/live_samples/index.md
@@ -9,124 +9,115 @@ tags:
 translation_of: MDN/Structures/Live_samples
 original_slug: MDN/Structures/Exemples_live
 ---
-<div>{{MDNSidebar}}</div>
+{{MDNSidebar}}
 
-<p>MDN permet de transformer les exemples présentés dans les articles en exemples dit « live » qui permettent aux lecteurs de les voir en action. Les exemples live peuvent inclure du HTML, CSS et JavaScript. A noter, les exemples lives <em>ne sont pas interactifs</em> ; néanmoins, ils assurent que le code de sortie affiché pour un exemple est bien le même que défini par l'exemple, parce que la sortie est générée par le code d'exemple.</p>
+MDN permet de transformer les exemples présentés dans les articles en exemples dit « live » qui permettent aux lecteurs de les voir en action. Les exemples live peuvent inclure du HTML, CSS et JavaScript. A noter, les exemples lives _ne sont pas interactifs_ ; néanmoins, ils assurent que le code de sortie affiché pour un exemple est bien le même que défini par l'exemple, parce que la sortie est générée par le code d'exemple.
 
-<h2 id="how_does_the_live_sample_system_work">Comment le système d'exemples lives fonctionne-t-il ?</h2>
+## Comment le système d'exemples lives fonctionne-t-il ?
 
-<p>Le système d'exemple live rassemble tout le code existant et le fusionne dans un fichier HTML, puis affiche ce fichier dans une <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>. Un exemple live est composé de deux parties :</p>
+Le système d'exemple live rassemble tout le code existant et le fusionne dans un fichier HTML, puis affiche ce fichier dans une [`<iframe>`](/fr/docs/Web/HTML/Element/iframe). Un exemple live est composé de deux parties :
 
-<ul>
-  <li>Un groupe qui comporte tout le code de l'exemple</li>
-  <li>La macro (crée l'<em>iframe</em> ou le lien qui) affiche le résultat du bloc de code</li>
-</ul>
+- Un groupe qui comporte tout le code de l'exemple
+- La macro (crée l'_iframe_ ou le lien qui) affiche le résultat du bloc de code
 
-<p>Dans ce contexte, un « groupe » de blocs de code est identifié par l'ID d'un titre ou d'un élément de bloc (tel qu'un <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a>).</p>
+Dans ce contexte, un « groupe » de blocs de code est identifié par l'ID d'un titre ou d'un élément de bloc (tel qu'un [`<div>`](/fr/docs/Web/HTML/Element/div)).
 
-<ul>
- <li>Si l'ID appartient à un élément de bloc, le groupe comprend tous les blocs de code de l'élément de bloc englobant dont l'ID est utilisé.</li>
- <li>Si l'ID appartient à une rubrique, le groupe inclut tous les blocs de code qui se trouvent après cette rubrique et avant la rubrique suivante du même niveau de rubrique. Notez que les blocs de code sous les sous-titres de la rubrique spécifiée sont tous utilisés ; si ce n'est pas l'effet que vous souhaitez, utilisez plutôt un ID sur un élément de bloc.</li>
-</ul>
+- Si l'ID appartient à un élément de bloc, le groupe comprend tous les blocs de code de l'élément de bloc englobant dont l'ID est utilisé.
+- Si l'ID appartient à une rubrique, le groupe inclut tous les blocs de code qui se trouvent après cette rubrique et avant la rubrique suivante du même niveau de rubrique. Notez que les blocs de code sous les sous-titres de la rubrique spécifiée sont tous utilisés ; si ce n'est pas l'effet que vous souhaitez, utilisez plutôt un ID sur un élément de bloc.
 
-<p>La macro utilise une URL spéciale pour récupérer l'échantillon de code pour un groupe donné, par exemple <code>https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/animation/_samples_/Cylon_Eye</code>. La structure générale est <code>https://<em>url-of-page</em>_samples_/<em>group-id</em></code>, où <code>group-id</code> est l'ID de la rubrique ou du bloc où se trouve le code.</p>
+La macro utilise une URL spéciale pour récupérer l'échantillon de code pour un groupe donné, par exemple `https://yari-demos.prod.mdn.mozit.cloud/en-US/docs/Web/CSS/animation/_samples_/Cylon_Eye`. La structure générale est `https://url-of-page_samples_/group-id`, où `group-id` est l'ID de la rubrique ou du bloc où se trouve le code.
 
-<p>Le cadre (ou la page) qui en résulte est protégé par un bac à sable, sécurisé, et peut techniquement faire tout ce qui fonctionne sur le Web. Bien sûr, d'un point de vue pratique, le code doit contribuer à l'intérêt de la page qui le contient ; les trucs aléatoires qui tournent sur MDN seront supprimés par la communauté des éditeurs.</p>
+Le cadre (ou la page) qui en résulte est protégé par un bac à sable, sécurisé, et peut techniquement faire tout ce qui fonctionne sur le Web. Bien sûr, d'un point de vue pratique, le code doit contribuer à l'intérêt de la page qui le contient ; les trucs aléatoires qui tournent sur MDN seront supprimés par la communauté des éditeurs.
 
-<div class="note">
-  <p><strong>Note :</strong> Vous <strong>devez</strong> utiliser la macro pour présenter la sortie de l'échantillon en direct.</p>
-</div>
+> **Note :** Vous **devez** utiliser la macro pour présenter la sortie de l'échantillon en direct.
 
-<p>Chaque bloc <a href="/fr/docs/Web/HTML/Element/pre"><code>&lt;pre&gt;</code></a> contenant du code pour l'échantillon est doté d'une classe qui indique s'il s'agit de code HTML, CSS ou JavaScript ; ces classes sont « brush : html », « brush : css » et « brush : js ». Ces classes doivent se trouver sur les blocs de code correspondants.</p>
+Chaque bloc [`<pre>`](/fr/docs/Web/HTML/Element/pre) contenant du code pour l'échantillon est doté d'une classe qui indique s'il s'agit de code HTML, CSS ou JavaScript ; ces classes sont « brush : html », « brush : css » et « brush : js ». Ces classes doivent se trouver sur les blocs de code correspondants.
 
-<p>Le système d'échantillonnage en direct offre de nombreuses options, et nous allons essayer de les décomposer pour les examiner un par un.</p>
+Le système d'échantillonnage en direct offre de nombreuses options, et nous allons essayer de les décomposer pour les examiner un par un.
 
-<h3 id="live_sample_macros">Exemples de macros en direct</h3>
+### Exemples de macros en direct
 
-<p>Il existe deux macros que vous pouvez utiliser pour afficher des échantillons en direct :</p>
+Il existe deux macros que vous pouvez utiliser pour afficher des échantillons en direct :
 
-<ul>
-  <li><code><a href="https://github.com/mdn/yari/blob/master/kumascript/macros/EmbedLiveSample.ejs">EmbedLiveSample</a></code> embarque un échantillon vivant dans une page</li>
-  <li><code><a href="https://github.com/mdn/yari/blob/master/kumascript/macros/LiveSampleLink.ejs">LiveSampleLink</a></code> crée un lien qui ouvre l'échantillon en direct dans une nouvelle page.</li>
-</ul>
+- [`EmbedLiveSample`](https://github.com/mdn/yari/blob/master/kumascript/macros/EmbedLiveSample.ejs) embarque un échantillon vivant dans une page
+- [`LiveSampleLink`](https://github.com/mdn/yari/blob/master/kumascript/macros/LiveSampleLink.ejs) crée un lien qui ouvre l'échantillon en direct dans une nouvelle page.
 
-<p>Dans de nombreux cas, vous pouvez être en mesure d'ajouter la macro <code>EmbedLiveSample</code> ou <code>LiveSampleLink</code> aux pages avec peu ou pas de travail supplémentaire ! Tant que l'échantillon peut être identifié par l'ID d'un titre ou se trouve dans un bloc avec un ID que vous pouvez utiliser, l'ajout de la macro devrait faire l'affaire.</p>
+Dans de nombreux cas, vous pouvez être en mesure d'ajouter la macro `EmbedLiveSample` ou `LiveSampleLink` aux pages avec peu ou pas de travail supplémentaire ! Tant que l'échantillon peut être identifié par l'ID d'un titre ou se trouve dans un bloc avec un ID que vous pouvez utiliser, l'ajout de la macro devrait faire l'affaire.
 
-<h4 id="embedlivesample_macro">La macro EmbedLiveSample</h4>
+#### La macro EmbedLiveSample
 
-<pre class="brush: js">\{{EmbedLiveSample(<em>block_ID</em>, <em>width</em>, <em>height</em>, <em>screenshot_URL</em>, <em>page_slug</em>)}}</pre>
+```js
+\{{EmbedLiveSample(<em>block_ID</em>, <em>width</em>, <em>height</em>, <em>screenshot_URL</em>, <em>page_slug</em>)}}
+```
 
-<dl>
-  <dt>block_ID</dt>
-  <dd>Requis : L'ID de l'en-tête ou du bloc qui l'entoure d'où le code doit être tiré. La meilleure façon de s'assurer que l'ID est correct est de regarder l'URL de la section dans la table des matières de la page ; vous pouvez également le vérifier en consultant le source de la page.</dd>
-  <dt>width</dt>
-  <dd>La largeur de l'<a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a> à créer, spécifiée en <code>px</code>. Ce paramètre est facultatif ; une largeur par défaut raisonnable sera utilisée si vous l'omettez. Notez que si vous voulez utiliser une largeur spécifique, vous <em>devez</em> également spécifier le paramètre height.</dd>
-  <dt>height</dt>
-  <dd>La hauteur de l'<a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a> à créer, spécifiée en <code>px</code>. Ce paramètre est facultatif ; une hauteur par défaut raisonnable sera utilisée si vous l'omettez. Notez que si vous voulez utiliser une hauteur spécifique, vous <em>devez</em> également spécifier le paramètre width. Si vous n'utilisez qu'un seul d'entre eux, la taille de cadre par défaut est utilisée.</dd>
-  <dt>screenshot_URL</dt>
-  <dd>L'URL d'une capture d'écran qui montre à quoi devrait ressembler l'échantillon en direct. Ce paramètre est facultatif, mais il peut être utile pour les nouvelles technologies qui ne fonctionnent peut-être pas dans le navigateur de l'utilisateur, afin qu'il puisse voir à quoi ressemblerait l'échantillon s'il était pris en charge par son navigateur. Si vous incluez ce paramètre, la capture d'écran est affichée à côté de l'échantillon en direct, avec les titres appropriés.</dd>
-  <dt>page_slug</dt>
-  <dd>
-    <p>Le slug de la page contenant l'échantillon ; ceci est facultatif, et s'il n'est pas fourni, l'échantillon est tiré de la même page sur laquelle la macro est utilisée.</p>
-    <div class="warning">
-      <p><strong>Attention :</strong> Pour afficher un échantillon en direct d'une page contenant du code dans une page cible différente, la page contenant du code doit elle-même utiliser la macro <code><a href="https://github.com/mdn/kumascript/blob/master/macros/EmbedLiveSample.ejs">EmbedLiveSample</a></code> pour intégrer un échantillon en direct dans sa propre page. Sinon, si la page contenant le code n'utilise pas elle-même la macro <code><a href="https://github.com/mdn/kumascript/blob/master/macros/EmbedLiveSample.ejs">EmbedLiveSample</a></code> sa propre page, l'échantillon vivant ne s'affichera pas du tout sur la page cible. (Voir <a href="https://github.com/mdn/yari/issues/2243">Le ticket Yari #2243</a>.)</p>
-    </div>
-  </dd>
-</dl>
+- block_ID
+  - : Requis : L'ID de l'en-tête ou du bloc qui l'entoure d'où le code doit être tiré. La meilleure façon de s'assurer que l'ID est correct est de regarder l'URL de la section dans la table des matières de la page ; vous pouvez également le vérifier en consultant le source de la page.
+- width
+  - : La largeur de l'[`<iframe>`](/fr/docs/Web/HTML/Element/iframe) à créer, spécifiée en `px`. Ce paramètre est facultatif ; une largeur par défaut raisonnable sera utilisée si vous l'omettez. Notez que si vous voulez utiliser une largeur spécifique, vous _devez_ également spécifier le paramètre height.
+- height
+  - : La hauteur de l'[`<iframe>`](/fr/docs/Web/HTML/Element/iframe) à créer, spécifiée en `px`. Ce paramètre est facultatif ; une hauteur par défaut raisonnable sera utilisée si vous l'omettez. Notez que si vous voulez utiliser une hauteur spécifique, vous _devez_ également spécifier le paramètre width. Si vous n'utilisez qu'un seul d'entre eux, la taille de cadre par défaut est utilisée.
+- screenshot_URL
+  - : L'URL d'une capture d'écran qui montre à quoi devrait ressembler l'échantillon en direct. Ce paramètre est facultatif, mais il peut être utile pour les nouvelles technologies qui ne fonctionnent peut-être pas dans le navigateur de l'utilisateur, afin qu'il puisse voir à quoi ressemblerait l'échantillon s'il était pris en charge par son navigateur. Si vous incluez ce paramètre, la capture d'écran est affichée à côté de l'échantillon en direct, avec les titres appropriés.
+- page_slug
 
-<h4 id="livesamplelink_macro">La macro LiveSampleLink</h4>
+  - : Le slug de la page contenant l'échantillon ; ceci est facultatif, et s'il n'est pas fourni, l'échantillon est tiré de la même page sur laquelle la macro est utilisée.
 
-<pre class="brush: js">\{{LiveSampleLink(<em>block_ID</em>, <em>link_text</em>)}}</pre>
+    > **Attention :** Pour afficher un échantillon en direct d'une page contenant du code dans une page cible différente, la page contenant du code doit elle-même utiliser la macro [`EmbedLiveSample`](https://github.com/mdn/kumascript/blob/master/macros/EmbedLiveSample.ejs) pour intégrer un échantillon en direct dans sa propre page. Sinon, si la page contenant le code n'utilise pas elle-même la macro [`EmbedLiveSample`](https://github.com/mdn/kumascript/blob/master/macros/EmbedLiveSample.ejs) sa propre page, l'échantillon vivant ne s'affichera pas du tout sur la page cible. (Voir [Le ticket Yari #2243](https://github.com/mdn/yari/issues/2243).)
 
-<dl>
-  <dt>block_ID</dt>
-  <dd>L'ID de l'en-tête ou du bloc qui l'entoure, d'où le code doit être tiré. La meilleure façon de s'assurer que l'ID est correct est de regarder l'URL de la section dans la table des matières de la page ; vous pouvez également le vérifier en consultant le source de la page.</dd>
-  <dt>link_text</dt>
-  <dd>Une chaîne de caractères à utiliser comme texte du lien.</dd>
-</dl>
+#### La macro LiveSampleLink
 
-<h2 id="using_the_live_sample_system">Utilisation du système d'échantillonnage en direct</h2>
+```js
+\{{LiveSampleLink(<em>block_ID</em>, <em>link_text</em>)}}
+```
 
-<p>Les sections ci-dessous décrivent quelques cas d'utilisation courants du système d'échantillons en direct.</p>
+- block_ID
+  - : L'ID de l'en-tête ou du bloc qui l'entoure, d'où le code doit être tiré. La meilleure façon de s'assurer que l'ID est correct est de regarder l'URL de la section dans la table des matières de la page ; vous pouvez également le vérifier en consultant le source de la page.
+- link_text
+  - : Une chaîne de caractères à utiliser comme texte du lien.
 
-<h3 id="turning_snippets_into_live_samples">Transformer des extraits en échantillons vivants</h3>
+## Utilisation du système d'échantillonnage en direct
 
-<p>Un cas d'utilisation courant consiste à prendre des extraits de code existants déjà présentés sur MDN et à les transformer en échantillons vivants.</p>
+Les sections ci-dessous décrivent quelques cas d'utilisation courants du système d'échantillons en direct.
 
-<h4 id="prepare_the_code_samples">Préparer les échantillons de code</h4>
+### Transformer des extraits en échantillons vivants
 
-<p>La première étape consiste à ajouter des extraits de code ou à s'assurer que les extraits existants sont prêts à être utilisés comme échantillons en direct, tant au niveau du contenu que du balisage. Les extraits de code, pris dans leur ensemble, doivent constituer un exemple complet et exécutable. Par exemple, si l'extrait existant ne présente que du CSS, vous devrez peut-être ajouter un extrait de HTML sur lequel le CSS pourra opérer.</p>
+Un cas d'utilisation courant consiste à prendre des extraits de code existants déjà présentés sur MDN et à les transformer en échantillons vivants.
 
-<p>Chaque morceau de code doit se trouver dans un bloc <a href="/fr/docs/Web/HTML/Element/pre"><code>&lt;pre&gt;</code></a>, avec un bloc distinct pour chaque langue, correctement marqué quant à sa langue. La plupart du temps, cela a déjà été fait, mais il est toujours utile de revérifier pour s'assurer que chaque morceau de code est configuré avec la bonne syntaxe. Ceci est fait avec une classe sur l'élément <code>&lt;pre&gt;</code> de <code>brush:<em>language-type</em></code>, où <em>language-type</em> est le type de langage que le bloc contient, par exemple <code>html</code>, <code>css</code>, ou <code>js</code>.</p>
+#### Préparer les échantillons de code
 
-<div class="note">
-  <p><strong>Note :</strong> Vous pouvez avoir plus d'un bloc pour chaque langue ; ils sont tous concaténés ensemble. Vous pouvez ainsi avoir un morceau de code, suivi d'une explication de son fonctionnement, puis un autre morceau, et ainsi de suite. Il est ainsi encore plus facile de produire des didacticiels et autres qui utilisent des échantillons en direct entrecoupés de texte explicatif.</p>
-</div>
+La première étape consiste à ajouter des extraits de code ou à s'assurer que les extraits existants sont prêts à être utilisés comme échantillons en direct, tant au niveau du contenu que du balisage. Les extraits de code, pris dans leur ensemble, doivent constituer un exemple complet et exécutable. Par exemple, si l'extrait existant ne présente que du CSS, vous devrez peut-être ajouter un extrait de HTML sur lequel le CSS pourra opérer.
 
-<p>Assurez-vous donc que les blocs <a href="/fr/docs/Web/HTML/Element/pre"><code>&lt;pre&gt;</code></a> de votre code HTML, CSS et/ou JavaScript sont chacun configurés correctement pour la coloration syntaxique de ce langage, et vous êtes prêt à partir.</p>
+Chaque morceau de code doit se trouver dans un bloc [`<pre>`](/fr/docs/Web/HTML/Element/pre), avec un bloc distinct pour chaque langue, correctement marqué quant à sa langue. La plupart du temps, cela a déjà été fait, mais il est toujours utile de revérifier pour s'assurer que chaque morceau de code est configuré avec la bonne syntaxe. Ceci est fait avec une classe sur l'élément `<pre>` de `brush:language-type`, où _language-type_ est le type de langage que le bloc contient, par exemple `html`, `css`, ou `js`.
 
-<h2 id="live_sample_demo">Démonstration en direct</h2>
+> **Note :** Vous pouvez avoir plus d'un bloc pour chaque langue ; ils sont tous concaténés ensemble. Vous pouvez ainsi avoir un morceau de code, suivi d'une explication de son fonctionnement, puis un autre morceau, et ainsi de suite. Il est ainsi encore plus facile de produire des didacticiels et autres qui utilisent des échantillons en direct entrecoupés de texte explicatif.
 
-<p>Cette section est le résultat de l'utilisation du bouton du modèle d'échantillon en direct pour créer non seulement le titre principal (« Démonstration d'échantillon en direct »), mais aussi des sous-titres pour notre contenu HTML, CSS et JavaScript. Vous n'êtes pas limité à un bloc de chacun d'entre eux ; en outre, ils ne doivent pas nécessairement être dans un ordre particulier. Mélangez et associez !</p>
+Assurez-vous donc que les blocs [`<pre>`](/fr/docs/Web/HTML/Element/pre) de votre code HTML, CSS et/ou JavaScript sont chacun configurés correctement pour la coloration syntaxique de ce langage, et vous êtes prêt à partir.
 
-<p>Vous pouvez choisir de supprimer tous ceux que vous souhaitez ; si vous n'avez pas besoin de script, supprimez simplement cette rubrique et son bloc <a href="/fr/docs/Web/HTML/Element/pre"><code>&lt;pre&gt;</code></a>. Vous pouvez également supprimer l'intitulé d'un bloc de code (« HTML », « CSS » ou « JavaScript »), puisqu'il n'est pas utilisé par la macro d'échantillonnage en direct.</p>
+## Démonstration en direct
 
-<p>Maintenant que le modèle a été inséré, nous pouvons insérer du code, voire du texte explicatif.</p>
+Cette section est le résultat de l'utilisation du bouton du modèle d'échantillon en direct pour créer non seulement le titre principal (« Démonstration d'échantillon en direct »), mais aussi des sous-titres pour notre contenu HTML, CSS et JavaScript. Vous n'êtes pas limité à un bloc de chacun d'entre eux ; en outre, ils ne doivent pas nécessairement être dans un ordre particulier. Mélangez et associez !
 
-<h3 id="html">HTML</h3>
+Vous pouvez choisir de supprimer tous ceux que vous souhaitez ; si vous n'avez pas besoin de script, supprimez simplement cette rubrique et son bloc [`<pre>`](/fr/docs/Web/HTML/Element/pre). Vous pouvez également supprimer l'intitulé d'un bloc de code (« HTML », « CSS » ou « JavaScript »), puisqu'il n'est pas utilisé par la macro d'échantillonnage en direct.
 
-<p>Ce HTML crée un paragraphe et quelques blocs pour nous aider à positionner et à styliser un message.</p>
+Maintenant que le modèle a été inséré, nous pouvons insérer du code, voire du texte explicatif.
 
-<pre class="brush: html">&lt;p&gt;Un exemple simple du système d'échantillonnage en direct en action.&lt;/p&gt;
-&lt;div class="box"&gt;
-  &lt;div id="item"&gt;Bonjour à tous ! Bienvenue sur MDN&lt;/div&gt;
-&lt;/div&gt;</pre>
+### HTML
 
-<h3 id="css">CSS</h3>
+Ce HTML crée un paragraphe et quelques blocs pour nous aider à positionner et à styliser un message.
+
+```html
+<p>Un exemple simple du système d'échantillonnage en direct en action.</p>
+<div class="box">
+  <div id="item">Bonjour à tous ! Bienvenue sur MDN</div>
+</div>
+```
 
-<p>Le code CSS donne un style à la boîte ainsi qu'au texte qu'elle contient.</p>
+### CSS
 
-<pre class="brush: css">.box {
+Le code CSS donne un style à la boîte ainsi qu'au texte qu'elle contient.
+
+```css
+.box {
   width: 200px;
   border-radius: 6px;
   padding: 20px;
@@ -138,34 +129,35 @@ original_slug: MDN/Structures/Exemples_live
   text-align: center;
   font-family: sans-serif;
   font-size: 1.5em;
-}</pre>
+}
+```
 
-<h3 id="javascript">JavaScript</h3>
+### JavaScript
 
-<p>Ce code est très simple. Tout ce qu'il fait est d'attacher un gestionnaire d'événement au texte « Bonjour à tous ! » qui fait apparaître une alerte lorsqu'il est cliqué.</p>
+Ce code est très simple. Tout ce qu'il fait est d'attacher un gestionnaire d'événement au texte « Bonjour à tous ! » qui fait apparaître une alerte lorsqu'il est cliqué.
 
-<pre class="brush: js">const el = document.getElementById('item');
+```js
+const el = document.getElementById('item');
 el.onclick = function() {
   alert('Ohhh, arrête de m\'embêter !');
-}</pre>
+}
+```
 
-<h3 id="result">Résultat</h3>
+### Résultat
 
-<p>Voici le résultat de l'exécution des blocs de code ci-dessus via <code>\{{EmbedLiveSample('live_sample_demo')}}</code> :</p>
+Voici le résultat de l'exécution des blocs de code ci-dessus via `\{{EmbedLiveSample('live_sample_demo')}}` :
 
-<p>{{EmbedLiveSample('live_sample_demo')}}</p>
+{{EmbedLiveSample('live_sample_demo')}}
 
-<p>Voici un lien qui résulte de l'appel de ces blocs de code via <code>\{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}}</code>:</p>
+Voici un lien qui résulte de l'appel de ces blocs de code via `\{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}}`:
 
-<p>{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}}</p>
+{{LiveSampleLink('live_sample_demo', 'Lien vers un échantillon de démonstration en direct')}}
 
-<h2 id="conventions_regarding_live_samples">Conventions relatives aux échantillons vivants</h2>
+## Conventions relatives aux échantillons vivants
 
-<dl>
-  <dt>Ordres des blocs de code</dt>
-  <dd>Lors de l'ajout d'un échantillon vivant, les blocs de code doivent être triés de manière à ce que le premier corresponde à la langue principale de cet échantillon (s'il y en a une). Par exemple, lors de l'ajout d'un échantillon réel pour la référence HTML, le premier bloc doit être HTML, lors de l'ajout d'un échantillon réel pour la référence CSS, il doit être CSS et ainsi de suite.</dd>
-  <dt>Nomenclature des rubriques</dt>
-  <dd>Lorsqu'il n'y a pas d'ambiguïté (par exemple, l'échantillon se trouve dans une section « Exemples »), les titres doivent être simples avec le seul nom du langage correspondant : HTML, CSS, JavaScript, SVG, etc. (voir ci-dessus). Les titres tels que « Contenu HTML » ou « Contenu JavaScript » ne doivent pas être utilisés. Toutefois, si un titre aussi court rend le contenu peu clair, on peut utiliser un titre plus réfléchi.</dd>
-  <dt>Utilisation d'un bloc « Résultat »</dt>
-  <dd>Après les différents blocs de code, veuillez utiliser un dernier bloc « Résultat » avant d'utiliser la macro <code>EmbedLiveSample</code> (voir ci-dessus). De cette façon, la sémantique de l'exemple est rendue plus claire à la fois pour le lecteur et pour tout outil qui analyserait la page (par exemple, un lecteur d'écran, un crawler web).</dd>
-</dl>
+- Ordres des blocs de code
+  - : Lors de l'ajout d'un échantillon vivant, les blocs de code doivent être triés de manière à ce que le premier corresponde à la langue principale de cet échantillon (s'il y en a une). Par exemple, lors de l'ajout d'un échantillon réel pour la référence HTML, le premier bloc doit être HTML, lors de l'ajout d'un échantillon réel pour la référence CSS, il doit être CSS et ainsi de suite.
+- Nomenclature des rubriques
+  - : Lorsqu'il n'y a pas d'ambiguïté (par exemple, l'échantillon se trouve dans une section « Exemples »), les titres doivent être simples avec le seul nom du langage correspondant : HTML, CSS, JavaScript, SVG, etc. (voir ci-dessus). Les titres tels que « Contenu HTML » ou « Contenu JavaScript » ne doivent pas être utilisés. Toutefois, si un titre aussi court rend le contenu peu clair, on peut utiliser un titre plus réfléchi.
+- Utilisation d'un bloc « Résultat »
+  - : Après les différents blocs de code, veuillez utiliser un dernier bloc « Résultat » avant d'utiliser la macro `EmbedLiveSample` (voir ci-dessus). De cette façon, la sémantique de l'exemple est rendue plus claire à la fois pour le lecteur et pour tout outil qui analyserait la page (par exemple, un lecteur d'écran, un crawler web).
diff --git a/files/fr/mdn/structures/macros/commonly-used_macros/index.md b/files/fr/mdn/structures/macros/commonly-used_macros/index.md
index 4aaeb81c61..bc8158e7df 100644
--- a/files/fr/mdn/structures/macros/commonly-used_macros/index.md
+++ b/files/fr/mdn/structures/macros/commonly-used_macros/index.md
@@ -3,206 +3,166 @@ title: Commonly-used macros
 slug: MDN/Structures/Macros/Commonly-used_macros
 translation_of: MDN/Structures/Macros/Commonly-used_macros
 ---
-<div>{{MDNSidebar}}</div>
+{{MDNSidebar}}
 
-<p>Cette page présente un grand nombre de macros à usage général créées pour une utilisation avec MDN. Pour avoir des informations sur l'utilisation de ces macros, voir <a href="https://developer.mozilla.org/fr/docs/MDN/Contribute/Structures/Macros" title="/fr/docs/MDN/Contribute/Content/Macros"> Utilisation des macros </a> et <a href="/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros" title="/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros"> Utiliser les liens macros </a>. Voir <a href="/fr/docs/MDN/Contribute/Structures/Macros/Other" title="/fr/docs/MDN/Contribute/Structures/Macros/Other"> les autres macros </a> pour avoir des informations sur les macros qui sont rarement utilisées, ou utilisées dans des contextes spécifiques, ou obsolètes. Il y a aussi une liste complète de <a href="/fr/docs/templates" title="/fr/docs/templates">toutes les macros MDN</a>.</p>
+Cette page présente un grand nombre de macros à usage général créées pour une utilisation avec MDN. Pour avoir des informations sur l'utilisation de ces macros, voir [Utilisation des macros ](https://developer.mozilla.org/fr/docs/MDN/Contribute/Structures/Macros "/fr/docs/MDN/Contribute/Content/Macros")et [Utiliser les liens macros ](/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros "/fr/docs/MDN/Contribute/Editor/Links#Using_link_macros"). Voir [les autres macros ](/fr/docs/MDN/Contribute/Structures/Macros/Other "/fr/docs/MDN/Contribute/Structures/Macros/Other")pour avoir des informations sur les macros qui sont rarement utilisées, ou utilisées dans des contextes spécifiques, ou obsolètes. Il y a aussi une liste complète de [toutes les macros MDN](/fr/docs/templates "/fr/docs/templates").
 
-<p>Voir aussi le<a href="/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide" title="/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide"> Guide style CSS </a> pour l'utilisation des styles disponibles.</p>
+Voir aussi le[ Guide style CSS ](/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide "/fr/docs/MDN/Contribute/Guidelines/CSS_style_guide")pour l'utilisation des styles disponibles.
 
-<h2 id="Linking">Linking</h2>
+## Linking
 
-<h3 id="Création_dun_lien_hypertexte_unique">Création d'un lien hypertexte unique</h3>
+### Création d'un lien hypertexte unique
 
-<p>En général, vous ne devez pas utiliser des macros pour créer des liens arbitraires. Utilisez le <strong> Lien </strong> dans l'interface de l'éditeur pour créer des liens.</p>
+En général, vous ne devez pas utiliser des macros pour créer des liens arbitraires. Utilisez le **Lien** dans l'interface de l'éditeur pour créer des liens.
 
-<ul>
- <li>La macro {{TemplateLink("Glossary")}} crée un lien vers une entrée du<a href="https://developer.mozilla.org/fr/docs/Glossaire"> glossaire</a> MDN. Cette macro accepte un paramètre obligatoire et deux optionnels:
+- La macro {{TemplateLink("Glossary")}} crée un lien vers une entrée du[ glossaire](https://developer.mozilla.org/fr/docs/Glossaire) MDN. Cette macro accepte un paramètre obligatoire et deux optionnels:
 
-  <ol>
-   <li>Le nom d'un terme (comme "HTML").</li>
-   <li>Le texte à afficher dans l'article au lieu du nom du terme (ce qui devrait être rarement utilisé). {{optional_inline}}</li>
-   <li>Si ce paramètre est spécifié et est non nul, le style personnalisé normalement appliqué aux liens glossaire n'est pas appliquée. {{optional_inline}}</li>
-  </ol>
+  1.  Le nom d'un terme (comme "HTML").
+  2.  Le texte à afficher dans l'article au lieu du nom du terme (ce qui devrait être rarement utilisé). {{optional_inline}}
+  3.  Si ce paramètre est spécifié et est non nul, le style personnalisé normalement appliqué aux liens glossaire n'est pas appliquée. {{optional_inline}}
 
-  <p>Examples:</p>
+  Examples:
 
-  <ul>
-   <li>\{{Glossary("HTML")}} yields {{Glossary("HTML")}}</li>
-   <li>\{{Glossary("CSS", "Cascading Style Sheets")}} yields {{Glossary("CSS", "Cascading Style Sheets")}}</li>
-   <li>\{{Glossary("HTML", "", 1)}} yields {{Glossary("HTML", "", 1)}}</li>
-  </ul>
- </li>
-</ul>
+  - \\{{Glossary("HTML")}} yields {{Glossary("HTML")}}
+  - \\{{Glossary("CSS", "Cascading Style Sheets")}} yields {{Glossary("CSS", "Cascading Style Sheets")}}
+  - \\{{Glossary("HTML", "", 1)}} yields {{Glossary("HTML", "", 1)}}
 
-<h3 id="Liens_vers_des_pages_avec_références">Liens vers des pages avec références</h3>
+### Liens vers des pages avec références
 
-<p>Il existe différentes macros pour des liens vers des pages dans les zones de référence spécifiques MDN.</p>
+Il existe différentes macros pour des liens vers des pages dans les zones de référence spécifiques MDN.
 
-<ul>
- <li>{{TemplateLink("cssxref")}} links to a page in the <a href="/en-US/docs/CSS_Reference" title="en-US/docs/CSS_Reference">CSS Reference</a>. Example: <code>\{{cssxref("cursor")}}</code>, results in: {{ cssxref("cursor") }}.</li>
- <li>{{TemplateLink("domxref")}} links to pages in the DOM reference; if you include parentheses at the end, the template knows to display the link to look like a function name. For example, \{{domxref("document.getElementsByName()")}} results in {{ domxref("document.getElementsByName()") }} while <code>\{\{domxref("Node")\}\}</code> results in {{ domxref("Node") }}.</li>
- <li>{{TemplateLink("event")}} links to pages in the DOM Event reference, for example: \{{event("change")}} results in {{event("change")}}.</li>
- <li>{{TemplateLink("HTMLElement")}} links to an HTML element in the HTML Reference.</li>
- <li>{{TemplateLink("htmlattrxref")}} links to an HTML attribute, either a global attribute description if you only specify the attribute name or an attribute associated with a specific element if you specify an attribute name and an element name. For example, <code>\{\{htmlattrxref("lang")\}\} </code>will create this link: {{htmlattrxref("lang")}}.<code> </code> <code>\{\{htmlattrxref("type","input")\}\}</code> will create this link: {{htmlattrxref("type","input")}}.</li>
- <li>{{TemplateLink("jsxref")}} links to a page in the <a href="/en-US/docs/Web/JavaScript/Reference" title="en-US/docs/Web/JavaScript/Reference">JavaScript Reference</a>.</li>
- <li>{{TemplateLink("SVGAttr")}} links to a specific SVG attribute. For example, <code>\{\{SVGAttr("d")\}\}</code> creates this link: {{SVGAttr("d")}}.</li>
- <li>{{TemplateLink("SVGElement")}} links to an SVG element in the SVG Reference.</li>
-</ul>
+- {{TemplateLink("cssxref")}} links to a page in the [CSS Reference](/en-US/docs/CSS_Reference "en-US/docs/CSS_Reference"). Example: `\{{cssxref("cursor")}}`, results in: {{ cssxref("cursor") }}.
+- {{TemplateLink("domxref")}} links to pages in the DOM reference; if you include parentheses at the end, the template knows to display the link to look like a function name. For example, \\{{domxref("document.getElementsByName()")}} results in {{ domxref("document.getElementsByName()") }} while `\{\{domxref("Node")\}\}` results in {{ domxref("Node") }}.
+- {{TemplateLink("event")}} links to pages in the DOM Event reference, for example: \\{{event("change")}} results in {{event("change")}}.
+- {{TemplateLink("HTMLElement")}} links to an HTML element in the HTML Reference.
+- {{TemplateLink("htmlattrxref")}} links to an HTML attribute, either a global attribute description if you only specify the attribute name or an attribute associated with a specific element if you specify an attribute name and an element name. For example, `\{\{htmlattrxref("lang")\}\} `will create this link: {{htmlattrxref("lang")}}.` ` `\{\{htmlattrxref("type","input")\}\}` will create this link: {{htmlattrxref("type","input")}}.
+- {{TemplateLink("jsxref")}} links to a page in the [JavaScript Reference](/en-US/docs/Web/JavaScript/Reference "en-US/docs/Web/JavaScript/Reference").
+- {{TemplateLink("SVGAttr")}} links to a specific SVG attribute. For example, `\{\{SVGAttr("d")\}\}` creates this link: {{SVGAttr("d")}}.
+- {{TemplateLink("SVGElement")}} links to an SVG element in the SVG Reference.
 
-<h3 id="Liens_vers_des_bugs_et_des_IRC">Liens vers des bugs et des <a href="https://fr.wikipedia.org/wiki/Internet_Relay_Chat">IRC</a></h3>
+### Liens vers des bugs et des [IRC](https://fr.wikipedia.org/wiki/Internet_Relay_Chat)
 
-<ul>
- <li>Bugs
-  <ul>
-   <li>{{TemplateLink("bug")}} allows you to link to a bug on bugzilla.mozilla.org easily using this syntax: <code>\{\{Bug(123456)\}\}</code>. This gives you: {{ Bug(123456) }}.</li>
-   <li>{{TemplateLink("WebkitBug")}} inserts a link to a bug in the WebKit bug database. For example, <code>\{\{WebkitBug(31277)\}\}</code> inserts {{ WebkitBug(31277) }}.</li>
-  </ul>
- </li>
- <li>{{TemplateLink("IRCLink")}} inserts a link to the specified IRC channel, complete with a tooltip that says that's what it does and that an IRC client is needed.</li>
-</ul>
+- Bugs
 
-<h3 id="Aides_à_la_navigation_pour_les_guides_multi-pages">Aides à la navigation pour les guides multi-pages</h3>
+  - {{TemplateLink("bug")}} allows you to link to a bug on bugzilla.mozilla.org easily using this syntax: `\{\{Bug(123456)\}\}`. This gives you: {{ Bug(123456) }}.
+  - {{TemplateLink("WebkitBug")}} inserts a link to a bug in the WebKit bug database. For example, `\{\{WebkitBug(31277)\}\}` inserts {{ WebkitBug(31277) }}.
 
-<p>{{TemplateLink("Previous")}}, {{TemplateLink("Next")}}, and {{TemplateLink("PreviousNext")}} provide navigation controls for articles which are part of sequences. For the single-way templates, the only parameter needed is the wiki location of the previous or next article in the sequence. For {{TemplateLink("PreviousNext")}}, the two parameters needed are the wiki locations of the appropriate articles. The first parameter is for the previous article and the second is for the next article.</p>
+- {{TemplateLink("IRCLink")}} inserts a link to the specified IRC channel, complete with a tooltip that says that's what it does and that an IRC client is needed.
 
-<h2 id="Exemples_de_code">Exemples de code</h2>
+### Aides à la navigation pour les guides multi-pages
 
-<h3 id="Live_samples">Live samples</h3>
+{{TemplateLink("Previous")}}, {{TemplateLink("Next")}}, and {{TemplateLink("PreviousNext")}} provide navigation controls for articles which are part of sequences. For the single-way templates, the only parameter needed is the wiki location of the previous or next article in the sequence. For {{TemplateLink("PreviousNext")}}, the two parameters needed are the wiki locations of the appropriate articles. The first parameter is for the previous article and the second is for the next article.
 
-<ul>
- <li>{{TemplateLink("EmbedLiveSample")}} lets you embed the output of a code sample on a page, as described in <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">Live samples</a>.</li>
- <li>{{TemplateLink("LiveSampleLink")}} creates a link to a page containing the output of a code sample on a page, as described in <a href="/en-US/docs/MDN/Contribute/Structures/Live_samples">Live samples</a>.</li>
-</ul>
+## Exemples de code
 
-<h3 id="Fichiers_exemples_attachés">Fichiers exemples attachés</h3>
+### Live samples
 
-<ul>
- <li>{{TemplateLink("Embed_text")}} template lets you embed an attached text file into the body of your article. This is helpful if you want to have code snippets that are both downloadable but also displayed within the article's content. You may optionally specify a language for syntax highlighting; if you don't specify one, the text is embedded unformatted. The first parameter is the filename of the attachment to embed; the second, if provided, is the language for the syntax highlighter to apply, such as "javascript", "svg", or "cpp".</li>
- <li>{{TemplateLink("EmbedSVG")}} embeds an attached XML file as an SVG image, in place on the page. Specify the filename of the attached SVG file. You can use this in tandem with {{TemplateLink("Embed_text")}} to show the source and then the rendered output of the same file.</li>
-</ul>
+- {{TemplateLink("EmbedLiveSample")}} lets you embed the output of a code sample on a page, as described in [Live samples](/en-US/docs/MDN/Contribute/Structures/Live_samples).
+- {{TemplateLink("LiveSampleLink")}} creates a link to a page containing the output of a code sample on a page, as described in [Live samples](/en-US/docs/MDN/Contribute/Structures/Live_samples).
 
-<h2 id="Génération_de_sidebar_barre_latérale">Génération de sidebar (barre latérale)</h2>
+### Fichiers exemples attachés
 
-<p>Modèles pour presque toutes les grandes collection de pages. Ils permettent généralement de revenir à la page principale de référence/Guide/tutoriel et de mettre l'article dans la catégorie appropriée.</p>
+- {{TemplateLink("Embed_text")}} template lets you embed an attached text file into the body of your article. This is helpful if you want to have code snippets that are both downloadable but also displayed within the article's content. You may optionally specify a language for syntax highlighting; if you don't specify one, the text is embedded unformatted. The first parameter is the filename of the attachment to embed; the second, if provided, is the language for the syntax highlighter to apply, such as "javascript", "svg", or "cpp".
+- {{TemplateLink("EmbedSVG")}} embeds an attached XML file as an SVG image, in place on the page. Specify the filename of the attached SVG file. You can use this in tandem with {{TemplateLink("Embed_text")}} to show the source and then the rendered output of the same file.
 
-<ul>
- <li>{{TemplateLink("CSSRef")}} generates the sidebar for CSS reference pages.</li>
- <li>{{TemplateLink("HTMLRef")}} generates the sidebar for HTML reference pages.</li>
- <li>{{TemplateLink("APIRef")}} generates the sidebar for Web API reference pages.</li>
-</ul>
+## Génération de sidebar (barre latérale)
 
-<h2 id="La_mise_en_forme_à_usage_général">La mise en forme à usage général</h2>
+Modèles pour presque toutes les grandes collection de pages. Ils permettent généralement de revenir à la page principale de référence/Guide/tutoriel et de mettre l'article dans la catégorie appropriée.
 
-<h3 id="Inline_indicators_for_API_documentation">Inline indicators for API documentation</h3>
+- {{TemplateLink("CSSRef")}} generates the sidebar for CSS reference pages.
+- {{TemplateLink("HTMLRef")}} generates the sidebar for HTML reference pages.
+- {{TemplateLink("APIRef")}} generates the sidebar for Web API reference pages.
 
-<p>{{TemplateLink("optional_inline")}} and {{TemplateLink("ReadOnlyInline")}} are used in API documentation, usually when describing the list of properties of an object or parameters of a function.</p>
+## La mise en forme à usage général
 
-<p>Usage: <code>\{{optional_inline()}}</code> or <code>\{{ReadOnlyInline()}}</code>. Example:</p>
+### Inline indicators for API documentation
 
-<dl>
- <dt><code>isCustomObject</code> {{ReadOnlyInline()}}</dt>
- <dd>Indicates, if <code>true</code>, that the object is a custom one.</dd>
- <dt>parameterX {{ optional_inline() }}</dt>
- <dd>Blah blah blah...</dd>
-</dl>
+{{TemplateLink("optional_inline")}} and {{TemplateLink("ReadOnlyInline")}} are used in API documentation, usually when describing the list of properties of an object or parameters of a function.
 
-<h2 id="Status_and_compatibility_indicators">Status and compatibility indicators</h2>
+Usage: `\{{optional_inline()}}` or `\{{ReadOnlyInline()}}`. Example:
 
-<h3 id="Inline_indicators_with_no_additional_parameters">Inline indicators with no additional parameters</h3>
+- `isCustomObject` {{ReadOnlyInline()}}
+  - : Indicates, if `true`, that the object is a custom one.
+- parameterX {{ optional_inline() }}
+  - : Blah blah blah...
 
-<h4 id="Non-standard">Non-standard</h4>
+## Status and compatibility indicators
 
-<p>{{TemplateLink("non-standard_inline")}} inserts an in-line mark indicating the API has not been standardized and is not on a standards track.</p>
+### Inline indicators with no additional parameters
 
-<h5 id="Syntax"><strong>Syntax</strong></h5>
+#### Non-standard
 
-<p><code>\{{non-standard_inline}}</code></p>
+{{TemplateLink("non-standard_inline")}} inserts an in-line mark indicating the API has not been standardized and is not on a standards track.
 
-<h5 id="Examples">Examples</h5>
+##### **Syntax**
 
-<ul>
- <li>Icon: {{non-standard_inline}}</li>
-</ul>
+`\{{non-standard_inline}}`
 
-<h4 id="Experimental">Experimental</h4>
+##### Examples
 
-<p>{{TemplateLink("experimental_inline")}} inserts an in-line mark indicating the API is not widely implemented and may change in the future.</p>
+- Icon: {{non-standard_inline}}
 
-<h5 id="Syntax_2">Syntax</h5>
+#### Experimental
 
-<p><code>\{{experimental_inline}}</code></p>
+{{TemplateLink("experimental_inline")}} inserts an in-line mark indicating the API is not widely implemented and may change in the future.
 
-<h5 id="Examples_2"><code>Examples</code></h5>
+##### Syntax
 
-<ul>
- <li>Icon: {{experimental_inline}}</li>
-</ul>
+`\{{experimental_inline}}`
 
-<h3 id="Inline_indicators_that_support_specifying_the_technology">Inline indicators that support specifying the technology</h3>
+##### `Examples`
 
-<p>In these macros the parameter (when specified) should be one of the strings "html", "js", "css", or "gecko", followed by the version number.</p>
+- Icon: {{experimental_inline}}
 
-<h4 id="Deprecated">Deprecated</h4>
+### Inline indicators that support specifying the technology
 
-<p>{{TemplateLink("deprecated_inline")}} inserts an in-line deprecated mark to discourage the use of an API that is officially deprecated. <strong>Note:</strong> "Deprecated" means that the item should no longer be used, but still functions. If you mean that it no longer works at all, use the term "obsolete."</p>
+In these macros the parameter (when specified) should be one of the strings "html", "js", "css", or "gecko", followed by the version number.
 
-<p>Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).</p>
+#### Deprecated
 
-<h5 id="Syntax_3">Syntax</h5>
+{{TemplateLink("deprecated_inline")}} inserts an in-line deprecated mark to discourage the use of an API that is officially deprecated. **Note:** "Deprecated" means that the item should no longer be used, but still functions. If you mean that it no longer works at all, use the term "obsolete."
 
-<p><code>\{{deprecated_inline}}</code> or<code> \{{deprecated_inline("gecko5")}}</code></p>
+Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).
 
-<h5 id="Examples_3">Examples</h5>
+##### Syntax
 
-<ul>
- <li>Icon: {{deprecated_inline}}</li>
- <li>Badge: {{deprecated_inline("gecko5")}}</li>
-</ul>
+`\{{deprecated_inline}}` or` \{{deprecated_inline("gecko5")}}`
 
-<h4 id="Obsolete">Obsolete</h4>
+##### Examples
 
-<p>{{TemplateLink("obsolete_inline")}} inserts an in-line obsolete mark to prevent the use of, for example, a function, method or property which is officially obsolete.</p>
+- Icon: {{deprecated_inline}}
+- Badge: {{deprecated_inline("gecko5")}}
 
-<p>Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).</p>
+#### Obsolete
 
-<h5 id="Syntax_4">Syntax</h5>
+{{TemplateLink("obsolete_inline")}} inserts an in-line obsolete mark to prevent the use of, for example, a function, method or property which is officially obsolete.
 
-<p><code>\{{obsolete_inline}}</code> or<code> \{{obsolete_inline("js1.8.5")}}</code></p>
+Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).
 
-<h5 id="Examples_4">Examples</h5>
+##### Syntax
 
-<ul>
- <li>Icon: {{obsolete_inline}}</li>
- <li>Badge: {{obsolete_inline("js1.8.5")}}</li>
-</ul>
+`\{{obsolete_inline}}` or` \{{obsolete_inline("js1.8.5")}}`
 
-<h3 id="Template_badges">Template badges</h3>
+##### Examples
 
-<p>These macros are mostly used on the <a href="/en-US/docs/WebAPI">WebAPI</a> page. See {{anch("Creating new badges")}} for information on creating a new badge.</p>
+- Icon: {{obsolete_inline}}
+- Badge: {{obsolete_inline("js1.8.5")}}
 
-<h3 id="Page_or_section_header_indicators">Page or section header indicators</h3>
+### Template badges
 
-<p>These templates have the same semantics as their inline counterparts described above. The templates should be placed directly underneath the main page title (or breadcrumb navigation if available) in the reference page. They can also be used to mark up a section on a page.</p>
+These macros are mostly used on the [WebAPI](/en-US/docs/WebAPI) page. See {{anch("Creating new badges")}} for information on creating a new badge.
 
-<ul>
- <li>{{TemplateLink("non-standard_header")}}: <code>\{{Non-standard_header()}}</code> {{ Non-standard_header() }}</li>
- <li>{{TemplateLink("SeeCompatTable")}} should be used on pages that provide a "Browser compatibility" section. Example: <code>\{{SeeCompatTable()}}</code> {{ SeeCompatTable() }}</li>
- <li>{{TemplateLink("deprecated_header")}}: <code>\{{deprecated_header()}}</code> {{ Deprecated_header() }}</li>
- <li>{{TemplateLink("deprecated_header")}} with parameter: <code>\{{deprecated_header("gecko5")}}</code> {{ Deprecated_header("gecko5") }} Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).</li>
- <li>{{TemplateLink("obsolete_header")}}: <code>\{{obsolete_header()}}</code> {{ Obsolete_header() }}</li>
- <li>{{TemplateLink("obsolete_header")}} with parameter: <code>\{{obsolete_header("gecko30")}}</code> {{ Obsolete_header("gecko30") }} Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).</li>
-</ul>
+### Page or section header indicators
 
-<h3 id="Indicating_that_a_feature_is_available_in_web_workers">Indicating that a feature is available in web workers</h3>
+These templates have the same semantics as their inline counterparts described above. The templates should be placed directly underneath the main page title (or breadcrumb navigation if available) in the reference page. They can also be used to mark up a section on a page.
 
-<p>The {{TemplateLink("AvailableInWorkers")}} macro inserts a localised note box indicating that a feature is available in a <a href="/en-US/docs/Web/API/Web_Workers_API">Web worker</a> context.</p>
+- {{TemplateLink("non-standard_header")}}: `\{{Non-standard_header()}}` {{ Non-standard_header() }}
+- {{TemplateLink("SeeCompatTable")}} should be used on pages that provide a "Browser compatibility" section. Example: `\{{SeeCompatTable()}}` {{ SeeCompatTable() }}
+- {{TemplateLink("deprecated_header")}}: `\{{deprecated_header()}}` {{ Deprecated_header() }}
+- {{TemplateLink("deprecated_header")}} with parameter: `\{{deprecated_header("gecko5")}}` {{ Deprecated_header("gecko5") }} Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).
+- {{TemplateLink("obsolete_header")}}: `\{{obsolete_header()}}` {{ Obsolete_header() }}
+- {{TemplateLink("obsolete_header")}} with parameter: `\{{obsolete_header("gecko30")}}` {{ Obsolete_header("gecko30") }} Don't use the parameter in any browser-agnostic area (HTML, APIs, JS, CSS, …).
 
-<ol>
-</ol>
+### Indicating that a feature is available in web workers
 
-<p> </p>
-
-<ol>
-</ol>
-
-<p> </p>
+The {{TemplateLink("AvailableInWorkers")}} macro inserts a localised note box indicating that a feature is available in a [Web worker](/en-US/docs/Web/API/Web_Workers_API) context.
diff --git a/files/fr/mdn/structures/macros/index.md b/files/fr/mdn/structures/macros/index.md
index 448d6a4649..2b2710c8a5 100644
--- a/files/fr/mdn/structures/macros/index.md
+++ b/files/fr/mdn/structures/macros/index.md
@@ -3,39 +3,36 @@ title: Macros
 slug: MDN/Structures/Macros
 translation_of: MDN/Structures/Macros
 ---
-<div>{{MDNSidebar}}</div>
-<p>La plate-forme <a href="/fr/docs/projet:MDN/Kuma" title="/fr/docs/projet:MDN/Kuma">Kuma</a> sur laquelle MDN travail, fournit un système de macro, <a href="/docs/fr/projet:MDN/Kuma/KumaScript_guide" title="/docs/fr/projet: MDN/Kuma/KumaScript_guide">KumaScript</a>, ce qui permet de faire une grande variété de choses automatiquement. Cet article fournit des informations sur la façon d'invoquer les macros MDN dans les articles.</p>
+{{MDNSidebar}}
 
-<p>Le <a href="/docs/fr/projet:MDN/Kuma/KumaScript_guide" title="/fr/docs/projet:MDN/Kuma/KumaScript_guide ">Guide KumaScript</a> offre un regard en profondeur sur la façon d'utiliser des macros MDN, cette section est plus qu'un bref aperçu. Si vous avez déjà lu la section ci-dessus sur {{SectionOnPage ("/docs/fr/projet:MDN/Contribuer/Editor_guide/Links", "Utiliser les liens macros")}}, vous êtes un peu familiers avec le concept.</p>
+La plate-forme [Kuma](/fr/docs/projet:MDN/Kuma "/fr/docs/projet:MDN/Kuma") sur laquelle MDN travail, fournit un système de macro, [KumaScript](/docs/fr/projet:MDN/Kuma/KumaScript_guide "/docs/fr/projet: MDN/Kuma/KumaScript_guide"), ce qui permet de faire une grande variété de choses automatiquement. Cet article fournit des informations sur la façon d'invoquer les macros MDN dans les articles.
 
-<h2 id="Comment_les_macros_sont-elle_mises_en_œuvre">Comment les macros sont-elle mises en œuvre</h2>
+Le [Guide KumaScript](/docs/fr/projet:MDN/Kuma/KumaScript_guide "/fr/docs/projet:MDN/Kuma/KumaScript_guide ") offre un regard en profondeur sur la façon d'utiliser des macros MDN, cette section est plus qu'un bref aperçu. Si vous avez déjà lu la section ci-dessus sur {{SectionOnPage ("/docs/fr/projet:MDN/Contribuer/Editor_guide/Links", "Utiliser les liens macros")}}, vous êtes un peu familiers avec le concept.
 
-<p>Macros sur MDN sont mis en œuvre en utilisant le serveur exécuté <a href="/fr/docs/Web/JavaScript">JavaScript</a> code, interprété à l'aide de Node.js. En plus de cela, nous avons un certain nombre de bibliothèques, que nous avons mis en place pour fournir des services et des fonctionnalités orientées wiki, les macros interagissent avec la plate-forme wiki et avec son contenu. Si vous voulez en apprendre davantage, consultez le <a href="/docs/fr/projet:MDN/Kuma/KumaScript_guide">guide KumaScript</a>; le <a href="/docs/fr/projet:MDN/Kuma/KumaScript_reference">KumaScript reference</a> fournit des détails sur les bibliothèques et autres API KumaScript que nous avons mis en œuvre.</p>
+## Comment les macros sont-elle mises en œuvre
 
-<h2 id="Utiliser_une_macro_dans_le_contenu">Utiliser une macro dans le contenu</h2>
+Macros sur MDN sont mis en œuvre en utilisant le serveur exécuté [JavaScript](/fr/docs/Web/JavaScript) code, interprété à l'aide de Node.js. En plus de cela, nous avons un certain nombre de bibliothèques, que nous avons mis en place pour fournir des services et des fonctionnalités orientées wiki, les macros interagissent avec la plate-forme wiki et avec son contenu. Si vous voulez en apprendre davantage, consultez le [guide KumaScript](/docs/fr/projet:MDN/Kuma/KumaScript_guide); le [KumaScript reference](/docs/fr/projet:MDN/Kuma/KumaScript_reference) fournit des détails sur les bibliothèques et autres API KumaScript que nous avons mis en œuvre.
 
-<p>Pour réellement utiliser une macro, vous placez simplement l'appel à la macro dans une paire de doubles acolades, avec ses paramètres, le cas échéant, entre parenthèses:</p>
+## Utiliser une macro dans le contenu
 
-<pre>\{{macroname(parameter-list)}}</pre>
+Pour réellement utiliser une macro, vous placez simplement l'appel à la macro dans une paire de doubles acolades, avec ses paramètres, le cas échéant, entre parenthèses:
 
-<p>Quelques notes sur les appels de macro:</p>
+    \{{macroname(parameter-list)}}
 
-<ul>
- <li>Les noms de macros sont sensibles à la casse, mais une tentative est faite pour corriger ces erreurs communes; vous pouvez utiliser tout en minuscules, même si le nom de la macro utilise des majuscules en son sein, et vous pouvez débuter par une majuscule une macro dont le nom commence normalement par une lettre minuscule.</li>
- <li>Les paramètres sont séparés par des virgules.</li>
- <li>Si il n'y a pas de paramètres, vous pouvez laisser les parenthèses ou les enlever; <code>\{{macroname()}} </code> et <code>\{{macroname}}</code> sont identiques.</li>
- <li>Les paramètres numériques peuvent être entre guillemets, ou non (cependant, si vous avez un numéro de version avec plusieurs décimales, il doit être entre guillemets).</li>
- <li>Si vous obtenez des erreurs, consultez votre code attentivement. Si vous ne pouvez toujours pas à comprendre ce qui se passe, voir <a href="/fr/docs/MDN/Kuma/Troubleshooting_KumaScript_errors">Dépannage des erreurs KumaScript</a>.</li>
-</ul>
+Quelques notes sur les appels de macro:
 
-<p>Les macros sont mis en cache; pour tout ensemble de valeurs d'entrée (les paramètres et les valeurs environnementales telles que l'URL pour laquelle la macro a été exécutée), les résultats sont stockés et réutilisés. Cela signifie que la macro est que effectivement parcourue que lorsque les entrées changent.</p>
+- Les noms de macros sont sensibles à la casse, mais une tentative est faite pour corriger ces erreurs communes; vous pouvez utiliser tout en minuscules, même si le nom de la macro utilise des majuscules en son sein, et vous pouvez débuter par une majuscule une macro dont le nom commence normalement par une lettre minuscule.
+- Les paramètres sont séparés par des virgules.
+- Si il n'y a pas de paramètres, vous pouvez laisser les parenthèses ou les enlever; `\{{macroname()}} `et `\{{macroname}}` sont identiques.
+- Les paramètres numériques peuvent être entre guillemets, ou non (cependant, si vous avez un numéro de version avec plusieurs décimales, il doit être entre guillemets).
+- Si vous obtenez des erreurs, consultez votre code attentivement. Si vous ne pouvez toujours pas à comprendre ce qui se passe, voir [Dépannage des erreurs KumaScript](/fr/docs/MDN/Kuma/Troubleshooting_KumaScript_errors).
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez forcer toutes les macros d'une page à être réévalué avec un shift-reload.</p>
-</div>
+Les macros sont mis en cache; pour tout ensemble de valeurs d'entrée (les paramètres et les valeurs environnementales telles que l'URL pour laquelle la macro a été exécutée), les résultats sont stockés et réutilisés. Cela signifie que la macro est que effectivement parcourue que lorsque les entrées changent.
 
-<p>Les macros peuvent être aussi simple que d'insérer un plus grand bloc de texte ou d'échange dans le contenu d'une autre partie du MDN, ou aussi complexe que la construction de tout un index du contenu en cherchant dans des parties du site, coiffer la sortie, et en ajoutant des liens.</p>
+> **Note :** Vous pouvez forcer toutes les macros d'une page à être réévalué avec un shift-reload.
 
-<p>Vous pouvez lire sur nos macros les plus couramment utilisés sur le <a href="/fr/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros">couramment utilisés</a>; aussi, il y a un <a href="https://developer.mozilla.org/fr/docs/templates">la liste complète de toutes les macros</a> ici. La plupart des macros ont intégré dans la documentation eux, comme des commentaires en haut.</p>
+Les macros peuvent être aussi simple que d'insérer un plus grand bloc de texte ou d'échange dans le contenu d'une autre partie du MDN, ou aussi complexe que la construction de tout un index du contenu en cherchant dans des parties du site, coiffer la sortie, et en ajoutant des liens.
 
-<p>{{EditorGuideQuicklinks}}</p>
+Vous pouvez lire sur nos macros les plus couramment utilisés sur le [couramment utilisés](/fr/docs/MDN/Contribute/Structures/Macros/Commonly-used_macros); aussi, il y a un [la liste complète de toutes les macros](https://developer.mozilla.org/fr/docs/templates) ici. La plupart des macros ont intégré dans la documentation eux, comme des commentaires en haut.
+
+{{EditorGuideQuicklinks}}