convert content to md

6 files changed, 736 insertions, 640 deletions

diff --git a/files/fr/mdn/guidelines/code_guidelines/css/index.md b/files/fr/mdn/guidelines/code_guidelines/css/index.md
index 2e2a768762..b37d9b6f10 100644
--- a/files/fr/mdn/guidelines/code_guidelines/css/index.md
+++ b/files/fr/mdn/guidelines/code_guidelines/css/index.md
@@ -9,194 +9,205 @@ tags:
   - MDN Meta
 translation_of: MDN/Guidelines/Code_guidelines/CSS
 ---
-<div>{{MDNSidebar}}</div>
+{{MDNSidebar}}
 
-<p>Les directives suivantes couvrent la manière d'écrire les CSS pour les exemples de code MDN.</p>
+Les directives suivantes couvrent la manière d'écrire les CSS pour les exemples de code MDN.
 
-<h2 id="In_this_article">Dans cet article</h2>
+## Dans cet article
 
-<ul>
- <li><a href="#high-level_guidelines">Lignes directrices de haut niveau</a>
+- [Lignes directrices de haut niveau](#high-level_guidelines)
 
-  <ul>
-   <li><a href="#dont_use_preprocessors">N'utilisez pas de préprocesseurs</a></li>
-   <li><a href="#dont_use_specific_css_methodologies">N'utilisez pas de méthodologies CSS spécifiques</a></li>
-   <li><a href="#use_flexiblerelative_units">Utiliser des unités flexibles/relatives</a></li>
-   <li><a href="#dont_use_resets">Ne pas utiliser de réinitialisation</a></li>
-   <li><a href="#plan_your_css_%e2%80%94_avoid_overriding">Planifiez votre CSS — évitez les surcharges</a></li>
-  </ul>
- </li>
- <li><a href="#general_css_coding_style">Style général de codage CSS</a>
-  <ul>
-   <li><a href="#use_expanded_syntax">Utiliser une syntaxe étendue</a></li>
-   <li><a href="#favor_longhand_rules_over_terse_shorthand">Privilégiez les règles longues aux règles raccourcies</a></li>
-   <li><a href="#use_double_quotes_around_values">Utilisez des guillemets doubles autour des valeurs</a></li>
-   <li><a href="#spacing_around_function_parameters">Espacement autour des paramètres de la fonction</a></li>
-   <li><a href="#css_comments">Commentaires CSS</a></li>
-   <li><a href="#dont_use_!important">Ne pas utiliser !important</a></li>
-  </ul>
- </li>
- <li><a href="#specific_css_syntax_points">Points de syntaxe CSS spécifiques</a>
-  <ul>
-   <li><a href="#turning_off_borders_and_other_properties">Désactiver les bordures et autres propriétés</a></li>
-   <li><a href="#use_mobile_first_media_queries">Utilisez des requêtes média "mobile first"</a></li>
-  </ul>
- </li>
- <li><a href="#selectors">Sélecteurs</a>
-  <ul>
-   <li><a href="#dont_use_id_selectors">N'utilisez pas de sélecteurs ID</a></li>
-   <li><a href="#put_multiple_selectors_on_separate_lines">Mettre les sélecteurs multiples sur des lignes séparées</a></li>
-  </ul>
- </li>
-</ul>
+  - [N'utilisez pas de préprocesseurs](#dont_use_preprocessors)
+  - [N'utilisez pas de méthodologies CSS spécifiques](#dont_use_specific_css_methodologies)
+  - [Utiliser des unités flexibles/relatives](#use_flexiblerelative_units)
+  - [Ne pas utiliser de réinitialisation](#dont_use_resets)
+  - [Planifiez votre CSS — évitez les surcharges](#plan_your_css_%e2%80%94_avoid_overriding)
 
-<h2 id="High-level_guidelines">Lignes directrices de haut niveau</h2>
+- [Style général de codage CSS](#general_css_coding_style)
 
-<h3 id="Dont_use_preprocessors">N'utilisez pas de préprocesseurs</h3>
+  - [Utiliser une syntaxe étendue](#use_expanded_syntax)
+  - [Privilégiez les règles longues aux règles raccourcies](#favor_longhand_rules_over_terse_shorthand)
+  - [Utilisez des guillemets doubles autour des valeurs](#use_double_quotes_around_values)
+  - [Espacement autour des paramètres de la fonction](#spacing_around_function_parameters)
+  - [Commentaires CSS](#css_comments)
+  - [Ne pas utiliser !important](#dont_use_!important)
 
-<p>N'utilisez pas la syntaxe des préprocesseurs, ex. <a href="https://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, ou <a href="http://stylus-lang.com/">Stylus,</a> dans votre code d'exemple MDN. MDN documente le langage CSS classique, et l'utilisation de préprocesseurs ne sert qu'à élever la barre pour comprendre les exemples, ce qui peut potentiellement perdre les lecteurs.</p>
+- [Points de syntaxe CSS spécifiques](#specific_css_syntax_points)
 
-<h3 id="Dont_use_specific_CSS_methodologies">N'utilisez pas de méthodologies CSS spécifiques</h3>
+  - [Désactiver les bordures et autres propriétés](#turning_off_borders_and_other_properties)
+  - [Utilisez des requêtes média "mobile first"](#use_mobile_first_media_queries)
 
-<p>Dans le même esprit que la directive précédente, n'écrivez pas de code d'exemple MDN en utilisant une méthodologie CSS spécifique telle que <a href="http://getbem.com/naming/">BEM</a> ou <a href="https://smacss.com/">SMACSS</a>. Même s'il s'agit de syntaxe CSS valide, les conventions de dénomination peuvent prêter à confusion pour les personnes qui ne sont pas familières avec ces méthodologies.</p>
+- [Sélecteurs](#selectors)
 
-<h3 id="Use_flexiblerelative_units">Utiliser des unités flexibles/relatives</h3>
+  - [N'utilisez pas de sélecteurs ID](#dont_use_id_selectors)
+  - [Mettre les sélecteurs multiples sur des lignes séparées](#put_multiple_selectors_on_separate_lines)
 
-<p>Pour une flexibilité maximale sur le plus grand nombre possible d'appareils, il est judicieux de dimensionner les conteneurs, le <code>padding</code>, etc. en utilisant des unités relatives comme les <code>em</code> et les <code>rem</code>, ou des pourcentages et des unités de « viewport » si vous souhaitez qu'ils varient en fonction de la largeur du « viewport ». Vous pouvez en savoir plus à ce sujet dans notre article <a href="/fr/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks#fluid_grids">Éléments de construction d'un design adaptatif (Responsive Design)</a>.</p>
+## Lignes directrices de haut niveau
 
-<h3 id="Dont_use_resets">Ne pas utiliser de réinitialisation</h3>
+### N'utilisez pas de préprocesseurs
 
-<p>Pour un contrôle maximal des CSS sur toutes les plates-formes, beaucoup de gens avaient l'habitude d'utiliser les réinitialisations CSS pour supprimer tous les styles, avant de reconstruire les choses eux-mêmes. Cette méthode a certainement ses mérites, mais surtout dans le monde moderne, les réinitialisations CSS peuvent être excessives et entraîner beaucoup de temps supplémentaire passé à réimplémenter des choses qui n'étaient pas complètement cassées au départ, comme les marges par défaut, les styles de liste, etc.</p>
+N'utilisez pas la syntaxe des préprocesseurs, ex. [Sass](https://sass-lang.com/), [Less](http://lesscss.org/), ou [Stylus,](http://stylus-lang.com/) dans votre code d'exemple MDN. MDN documente le langage CSS classique, et l'utilisation de préprocesseurs ne sert qu'à élever la barre pour comprendre les exemples, ce qui peut potentiellement perdre les lecteurs.
 
-<p>Si vous avez vraiment envie d'utiliser une réinitialisation, envisagez d'utiliser <a href="https://necolas.github.io/normalize.css/">normalize.css de Nicolas Gallagher</a>, qui vise simplement à rendre les choses plus cohérentes d'un navigateur à l'autre, à se débarrasser de certains désagréments par défaut que nous supprimons toujours (les marges sur <code>&lt;body&gt;</code>, par exemple) et à corriger quelques bogues.</p>
+### N'utilisez pas de méthodologies CSS spécifiques
 
-<h3 id="Plan_your_CSS_—_avoid_overriding">Planifiez votre CSS — évitez les surcharges</h3>
+Dans le même esprit que la directive précédente, n'écrivez pas de code d'exemple MDN en utilisant une méthodologie CSS spécifique telle que [BEM](http://getbem.com/naming/) ou [SMACSS](https://smacss.com/). Même s'il s'agit de syntaxe CSS valide, les conventions de dénomination peuvent prêter à confusion pour les personnes qui ne sont pas familières avec ces méthodologies.
 
-<p>Avant de vous lancer dans l'écriture de gros morceaux de CSS, planifiez soigneusement vos styles. Quels styles généraux seront nécessaires, quelles mises en page différentes devrez-vous créer, quelles redéfinitions spécifiques devront être créées et seront-elles réutilisables ? Par-dessus tout, vous devez essayer d'éviter de créer trop de redéfinitions. Si vous vous retrouvez constamment en train d'écrire des styles pour ensuite les annuler quelques règles plus bas, vous devez probablement repenser votre stratégie.</p>
+### Utiliser des unités flexibles/relatives
 
-<h2 id="General_CSS_coding_style">Style général de codage CSS</h2>
+Pour une flexibilité maximale sur le plus grand nombre possible d'appareils, il est judicieux de dimensionner les conteneurs, le `padding`, etc. en utilisant des unités relatives comme les `em` et les `rem`, ou des pourcentages et des unités de « viewport » si vous souhaitez qu'ils varient en fonction de la largeur du « viewport ». Vous pouvez en savoir plus à ce sujet dans notre article [Éléments de construction d'un design adaptatif (Responsive Design)](/fr/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks#fluid_grids).
 
-<h3 id="Use_expanded_syntax">Utiliser une syntaxe étendue</h3>
+### Ne pas utiliser de réinitialisation
 
-<p>Vous pouvez utiliser différents styles d'écriture CSS, mais nous préférons le style étendu, avec le sélecteur/l'accolade ouvrante, l'accolade fermante et chaque déclaration sur une ligne distincte. Cela optimise la lisibilité et favorise la cohérence sur le MDN.</p>
+Pour un contrôle maximal des CSS sur toutes les plates-formes, beaucoup de gens avaient l'habitude d'utiliser les réinitialisations CSS pour supprimer tous les styles, avant de reconstruire les choses eux-mêmes. Cette méthode a certainement ses mérites, mais surtout dans le monde moderne, les réinitialisations CSS peuvent être excessives et entraîner beaucoup de temps supplémentaire passé à réimplémenter des choses qui n'étaient pas complètement cassées au départ, comme les marges par défaut, les styles de liste, etc.
 
-<p>Utilisez ceci :</p>
+Si vous avez vraiment envie d'utiliser une réinitialisation, envisagez d'utiliser [normalize.css de Nicolas Gallagher](https://necolas.github.io/normalize.css/), qui vise simplement à rendre les choses plus cohérentes d'un navigateur à l'autre, à se débarrasser de certains désagréments par défaut que nous supprimons toujours (les marges sur `<body>`, par exemple) et à corriger quelques bogues.
 
-<pre class="brush: css example-good">p {
+### Planifiez votre CSS — évitez les surcharges
+
+Avant de vous lancer dans l'écriture de gros morceaux de CSS, planifiez soigneusement vos styles. Quels styles généraux seront nécessaires, quelles mises en page différentes devrez-vous créer, quelles redéfinitions spécifiques devront être créées et seront-elles réutilisables ? Par-dessus tout, vous devez essayer d'éviter de créer trop de redéfinitions. Si vous vous retrouvez constamment en train d'écrire des styles pour ensuite les annuler quelques règles plus bas, vous devez probablement repenser votre stratégie.
+
+## Style général de codage CSS
+
+### Utiliser une syntaxe étendue
+
+Vous pouvez utiliser différents styles d'écriture CSS, mais nous préférons le style étendu, avec le sélecteur/l'accolade ouvrante, l'accolade fermante et chaque déclaration sur une ligne distincte. Cela optimise la lisibilité et favorise la cohérence sur le MDN.
+
+Utilisez ceci :
+
+```css example-good
+p {
   color: white;
   background-color: black;
   padding: 1rem;
-}</pre>
+}
+```
 
-<p>Pas cela :</p>
+Pas cela :
 
-<pre class="brush: css example-bad">p { color: white; background-color: black; padding: 1rem; }</pre>
+```css example-bad
+p { color: white; background-color: black; padding: 1rem; }
+```
 
-<p>En outre, gardez ces spécificités à l'esprit :</p>
+En outre, gardez ces spécificités à l'esprit :
 
-<ul>
-  <li>Insérez un espace entre le(s) sélecteur(s) et l'accolade ouvrante.</li>
-  <li>Incluez toujours un point-virgule à la fin de la dernière déclaration, même si ce n'est pas strictement nécessaire.</li>
-  <li>Mettez l'accolade de fermeture sur une nouvelle ligne.</li>
-  <li>Dans chaque déclaration, mettez un espace après les deux points de séparation, mais pas avant.</li>
-  <li>Utilisez 2 espaces pour l'indentation du code.</li>
-</ul>
+- Insérez un espace entre le(s) sélecteur(s) et l'accolade ouvrante.
+- Incluez toujours un point-virgule à la fin de la dernière déclaration, même si ce n'est pas strictement nécessaire.
+- Mettez l'accolade de fermeture sur une nouvelle ligne.
+- Dans chaque déclaration, mettez un espace après les deux points de séparation, mais pas avant.
+- Utilisez 2 espaces pour l'indentation du code.
 
-<h3 id="Favor_longhand_rules_over_terse_shorthand">Privilégiez les règles longues aux règles raccourcies</h3>
+### Privilégiez les règles longues aux règles raccourcies
 
-<p>En général, lorsque vous enseignez les spécificités de la syntaxe CSS, il est plus clair et plus évident d'utiliser des propriétés longues plutôt que des raccourcies (à moins bien sûr que l'enseignement du raccourci ne soit le but de l'exemple). N'oubliez pas que les exemples du MDN ont pour but d'enseigner aux gens, et non d'être efficaces ou astucieuses.</p>
+En général, lorsque vous enseignez les spécificités de la syntaxe CSS, il est plus clair et plus évident d'utiliser des propriétés longues plutôt que des raccourcies (à moins bien sûr que l'enseignement du raccourci ne soit le but de l'exemple). N'oubliez pas que les exemples du MDN ont pour but d'enseigner aux gens, et non d'être efficaces ou astucieuses.
 
-<p>Tout d'abord, il est souvent plus difficile de comprendre ce que fait le raccourci. Il faut un certain temps pour comprendre exactement ce que fait la syntaxe <a href="/fr/docs/Web/CSS/font"><code>font</code></a>, par exemple :</p>
+Tout d'abord, il est souvent plus difficile de comprendre ce que fait le raccourci. Il faut un certain temps pour comprendre exactement ce que fait la syntaxe [`font`](/fr/docs/Web/CSS/font), par exemple :
 
-<pre class="brush: css">font: small-caps bold 2rem/1.5 sans-serif;</pre>
+```css
+font: small-caps bold 2rem/1.5 sans-serif;
+```
 
-<p>Alors que celle-ci est plus immédiate en termes de compréhension :</p>
+Alors que celle-ci est plus immédiate en termes de compréhension :
 
-<pre class="brush: css">font-variant: small-caps;
+```css
+font-variant: small-caps;
 font-weight: bold;
 font-size: 2rem;
 line-height: 1.5;
-font-family: sans-serif;</pre>
-
-<p>Deuxièmement, les raccourcis CSS comportent des pièges potentiels supplémentaires : des valeurs par défaut sont définies pour des parties de la syntaxe que vous n'avez pas explicitement définies, ce qui peut produire des réinitialisations inattendues des valeurs que vous avez définies plus tôt dans la cascade, ou d'autres effets attendus. Par exemple, la propriété <a href="/fr/docs/Web/CSS/grid"><code>grid</code></a> définit toutes les valeurs par défaut suivantes pour les éléments qui ne sont pas spécifiés :</p>
-
-<ul>
-  <li><a href="/fr/docs/Web/CSS/grid-template-rows"><code>grid-template-rows</code></a>: <code>none</code></li>
-  <li><a href="/fr/docs/Web/CSS/grid-template-columns"><code>grid-template-columns</code></a>: <code>none</code></li>
-  <li><a href="/fr/docs/Web/CSS/grid-template-areas"><code>grid-template-areas</code></a>: <code>none</code></li>
-  <li><a href="/fr/docs/Web/CSS/grid-auto-rows"><code>grid-auto-rows</code></a>: <code>auto</code></li>
-  <li><a href="/fr/docs/Web/CSS/grid-auto-columns"><code>grid-auto-columns</code></a>: <code>auto</code></li>
-  <li><a href="/fr/docs/Web/CSS/grid-auto-flow"><code>grid-auto-flow</code></a>: <code>row</code></li>
-  <li><a href="/fr/docs/Web/CSS/column-gap"><code>column-gap</code></a>: <code>0</code></li>
-  <li><a href="/fr/docs/Web/CSS/row-gap"><code>row-gap</code></a>: <code>0</code></li>
-  <li><a href="/fr/docs/Web/CSS/column-gap"><code>column-gap</code></a>: <code>normal</code></li>
-  <li><a href="/fr/docs/Web/CSS/row-gap"><code>row-gap</code></a>: <code>normal</code></li>
-</ul>
-
-<p>En outre, certains raccourcis ne fonctionnent comme prévu que si vous incluez les différents composants de la valeur dans un certain ordre. Dans les animations CSS, par exemple :</p>
-
-<pre class="brush: css">/* duration | timing-function | delay | iteration-count
+font-family: sans-serif;
+```
+
+Deuxièmement, les raccourcis CSS comportent des pièges potentiels supplémentaires : des valeurs par défaut sont définies pour des parties de la syntaxe que vous n'avez pas explicitement définies, ce qui peut produire des réinitialisations inattendues des valeurs que vous avez définies plus tôt dans la cascade, ou d'autres effets attendus. Par exemple, la propriété [`grid`](/fr/docs/Web/CSS/grid) définit toutes les valeurs par défaut suivantes pour les éléments qui ne sont pas spécifiés :
+
+- [`grid-template-rows`](/fr/docs/Web/CSS/grid-template-rows): `none`
+- [`grid-template-columns`](/fr/docs/Web/CSS/grid-template-columns): `none`
+- [`grid-template-areas`](/fr/docs/Web/CSS/grid-template-areas): `none`
+- [`grid-auto-rows`](/fr/docs/Web/CSS/grid-auto-rows): `auto`
+- [`grid-auto-columns`](/fr/docs/Web/CSS/grid-auto-columns): `auto`
+- [`grid-auto-flow`](/fr/docs/Web/CSS/grid-auto-flow): `row`
+- [`column-gap`](/fr/docs/Web/CSS/column-gap): `0`
+- [`row-gap`](/fr/docs/Web/CSS/row-gap): `0`
+- [`column-gap`](/fr/docs/Web/CSS/column-gap): `normal`
+- [`row-gap`](/fr/docs/Web/CSS/row-gap): `normal`
+
+En outre, certains raccourcis ne fonctionnent comme prévu que si vous incluez les différents composants de la valeur dans un certain ordre. Dans les animations CSS, par exemple :
+
+```css
+/* duration | timing-function | delay | iteration-count
    direction | fill-mode | play-state | name */
-animation: 3s ease-in 1s 2 reverse both paused slidein;</pre>
+animation: 3s ease-in 1s 2 reverse both paused slidein;
+```
 
-<p>À titre d'exemple, la première valeur qui peut être analysée comme un <a href="/fr/docs/Web/CSS/time" title="Le type de données CSS &lt;time&gt ; représente une valeur de temps exprimée en secondes ou en millisecondes. Il est utilisé dans les propriétés d'animation, de transition et autres propriétés connexes."><code>&lt;time&gt;</code></a> est affecté à la propriété <a href="/fr/docs/Web/CSS/animation-duration" title="La propriété CSS animation-duration définit la durée nécessaire à une animation pour effectuer un cycle. "><code>animation-duration</code></a>, et la seconde est affectée à <a href="/fr/docs/Web/CSS/animation-delay" title="La propriété CSS animation-delay définit le moment où une animation commence. L'animation peut démarrer plus tard, immédiatement dès son début, ou immédiatement et à mi-chemin de l'animation."><code>animation-delay</code></a>. Pour plus de détails, lisez l'intégralité de <a href="/fr/docs/Web/CSS/animation#syntax">syntaxe de l'animation</a>.</p>
+À titre d'exemple, la première valeur qui peut être analysée comme un [`<time>`](/fr/docs/Web/CSS/time "Le type de données CSS <time> ; représente une valeur de temps exprimée en secondes ou en millisecondes. Il est utilisé dans les propriétés d'animation, de transition et autres propriétés connexes.") est affecté à la propriété [`animation-duration`](/fr/docs/Web/CSS/animation-duration "La propriété CSS animation-duration définit la durée nécessaire à une animation pour effectuer un cycle. "), et la seconde est affectée à [`animation-delay`](/fr/docs/Web/CSS/animation-delay "La propriété CSS animation-delay définit le moment où une animation commence. L'animation peut démarrer plus tard, immédiatement dès son début, ou immédiatement et à mi-chemin de l'animation."). Pour plus de détails, lisez l'intégralité de [syntaxe de l'animation](/fr/docs/Web/CSS/animation#syntax).
 
-<h3 id="Use_double_quotes_around_values">Utilisez des guillemets doubles autour des valeurs</h3>
+### Utilisez des guillemets doubles autour des valeurs
 
-<p>Lorsque des guillemets peuvent ou doivent être inclus, utilisez-les, et utilisez des guillemets doubles. Par exemple :</p>
+Lorsque des guillemets peuvent ou doivent être inclus, utilisez-les, et utilisez des guillemets doubles. Par exemple :
 
-<pre class="brush: css example-good">[data-vegetable="liquid"] {
+```css example-good
+[data-vegetable="liquid"] {
   background-color: goldenrod;
   background-image: url("../../media/examples/lizard.png");
-}</pre>
+}
+```
 
-<h3 id="Spacing_around_function_parameters">Espacement autour des paramètres de la fonction</h3>
+### Espacement autour des paramètres de la fonction
 
-<p>Les paramètres des fonctions doivent comporter des espaces après les virgules de séparation, mais pas avant :</p>
+Les paramètres des fonctions doivent comporter des espaces après les virgules de séparation, mais pas avant :
 
-<pre class="brush: css example-good">color: rgb(255, 0, 0);
-background-image: linear-gradient(to bottom, red, black);</pre>
+```css example-good
+color: rgb(255, 0, 0);
+background-image: linear-gradient(to bottom, red, black);
+```
 
-<h3 id="CSS_comments">Commentaires CSS</h3>
+### Commentaires CSS
 
-<p>Utilisez des commentaires de style CSS pour commenter le code qui n'est pas auto-documenté :</p>
+Utilisez des commentaires de style CSS pour commenter le code qui n'est pas auto-documenté :
 
-<pre class="brush: css example-good">/* Il s'agit d'un commentaire de style CSS */</pre>
+```css example-good
+/* Il s'agit d'un commentaire de style CSS */
+```
 
-<p>Mettez vos commentaires sur des lignes séparées précédant le code auquel ils se réfèrent :</p>
+Mettez vos commentaires sur des lignes séparées précédant le code auquel ils se réfèrent :
 
-<pre class="brush: css example-good">h3 {
+```css example-good
+h3 {
   /* Crée une ombre portée rouge, décalée de 1px vers la droite et le bas, avec un rayon de flou de 2px. */
   text-shadow: 1px 1px 2px red;
   /* Définit la taille de la police au double de la taille de la police du document par défaut. */
   font-size: 2rem;
-}</pre>
+}
+```
 
-<p>Notez également que vous devez laisser un espace entre les astérisques et le commentaire, dans chaque cas.</p>
+Notez également que vous devez laisser un espace entre les astérisques et le commentaire, dans chaque cas.
 
-<h3 id="Dont_use_!important">Ne pas utiliser !important</h3>
+### Ne pas utiliser !important
 
-<p><code>!important</code> est un dernier recours généralement utilisé uniquement lorsque vous devez remplacer quelque chose et qu'il n'y a pas d'autre moyen. Il s'agit d'une mauvaise pratique que vous devez éviter dans la mesure du possible.</p>
+`!important` est un dernier recours généralement utilisé uniquement lorsque vous devez remplacer quelque chose et qu'il n'y a pas d'autre moyen. Il s'agit d'une mauvaise pratique que vous devez éviter dans la mesure du possible.
 
-<p>Mauvais usage :</p>
+Mauvais usage :
 
-<pre class="brush: css example-bad">.bad-code {
+```css example-bad
+.bad-code {
   font-size: 4rem !important;
-}</pre>
+}
+```
 
-<h2 id="Specific_CSS_syntax_points">Points de syntaxe CSS spécifiques</h2>
+## Points de syntaxe CSS spécifiques
 
-<h3 id="Turning_off_borders_and_other_properties">Désactiver les bordures et autres propriétés</h3>
+### Désactiver les bordures et autres propriétés
 
-<p>Lorsque vous désactivez les bordures (et toute autre propriété qui peut prendre <code>0</code> ou <code>none</code> comme valeurs), utilisez <code>0</code> plutôt que <code>none</code> :</p>
+Lorsque vous désactivez les bordures (et toute autre propriété qui peut prendre `0` ou `none` comme valeurs), utilisez `0` plutôt que `none` :
 
-<pre class="brush: css example-good">border: 0;</pre>
+```css example-good
+border: 0;
+```
 
-<h3 id="Use_mobile_first_media_queries">Utilisez des requêtes média "mobile first"</h3>
+### Utilisez des requêtes média "mobile first"
 
-<p>Lorsque vous incluez différents ensembles de styles pour différentes tailles de fenêtres d'affichage à l'aide de requêtes de médias dans la même feuille de style, il est judicieux de faire en sorte que le style par défaut avant l'application de toute requête de médias au document soit le style pour écran étroit/mobile, puis de le remplacer pour les fenêtres d'affichage plus larges dans des requêtes de médias successives.</p>
+Lorsque vous incluez différents ensembles de styles pour différentes tailles de fenêtres d'affichage à l'aide de requêtes de médias dans la même feuille de style, il est judicieux de faire en sorte que le style par défaut avant l'application de toute requête de médias au document soit le style pour écran étroit/mobile, puis de le remplacer pour les fenêtres d'affichage plus larges dans des requêtes de médias successives.
 
-<pre class="brush: css example-good">/* Mise en page CSS par défaut pour les écrans étroits */
+```css example-good
+/* Mise en page CSS par défaut pour les écrans étroits */
 
 @media (min-width: 480px) {
   /* CSS pour les écrans de largeur moyenne */
@@ -208,48 +219,57 @@ background-image: linear-gradient(to bottom, red, black);</pre>
 
 @media (min-width: 1100px) {
   /* CSS pour les écrans très larges */
-}</pre>
+}
+```
 
-<p>Cela présente de nombreux avantages, exposés dans notre article <a href="/fr/docs/Web/Progressive_web_apps/Responsive/Mobile_first">Priorité aux mobiles</a>.</p>
+Cela présente de nombreux avantages, exposés dans notre article [Priorité aux mobiles](/fr/docs/Web/Progressive_web_apps/Responsive/Mobile_first).
 
-<h2 id="Selectors">Sélecteurs</h2>
+## Sélecteurs
 
-<h3 id="Dont_use_ID_selectors">N'utilisez pas de sélecteurs ID</h3>
+### N'utilisez pas de sélecteurs ID
 
-<p>Il n'est pas vraiment nécessaire d'utiliser des sélecteurs d'ID - ils sont moins flexibles (vous ne pouvez pas en ajouter d'autres si vous découvrez que vous en avez besoin de plus d'un), et il est plus difficile de les remplacer si nécessaire, car ils sont plus spécifiques que les classes.</p>
+Il n'est pas vraiment nécessaire d'utiliser des sélecteurs d'ID - ils sont moins flexibles (vous ne pouvez pas en ajouter d'autres si vous découvrez que vous en avez besoin de plus d'un), et il est plus difficile de les remplacer si nécessaire, car ils sont plus spécifiques que les classes.
 
-<p>Bonne pratique :</p>
+Bonne pratique :
 
-<pre class="brush: css example-good">.editorial-summary {
+```css example-good
+.editorial-summary {
   ...
-}</pre>
+}
+```
 
-<p>Mauvaise pratique :</p>
+Mauvaise pratique :
 
-<pre class="brush: css example-bad">#editorial-summary {
+```css example-bad
+#editorial-summary {
   ...
-}</pre>
+}
+```
 
-<h3 id="Put_multiple_selectors_on_separate_lines">Mettre les sélecteurs multiples sur des lignes séparées</h3>
+### Mettre les sélecteurs multiples sur des lignes séparées
 
-<p>Lorsqu'une règle comporte plusieurs sélecteurs, placez chaque sélecteur sur une nouvelle ligne. La liste des sélecteurs est ainsi plus facile à lire et les lignes de code sont plus courtes.</p>
+Lorsqu'une règle comporte plusieurs sélecteurs, placez chaque sélecteur sur une nouvelle ligne. La liste des sélecteurs est ainsi plus facile à lire et les lignes de code sont plus courtes.
 
-<p>Faites ceci :</p>
+Faites ceci :
 
-<pre class="brush: css example-good">h1,
+```css example-good
+h1,
 h2,
 h3 {
   font-family: sans-serif;
   text-align: center;
-}</pre>
+}
+```
 
-<p>Pas ça :</p>
+Pas ça :
 
-<pre class="brush: css example-bad">h1, h2, h3 {
+```css example-bad
+h1, h2, h3 {
   font-family: sans-serif;
   text-align: center;
-}</pre>
+}
+```
 
-<h2 id="Good_CSS_examples_on_MDN">De bons exemples de CSS sur MDN</h2>
+## De bons exemples de CSS sur MDN
 
-<p>Vous pouvez trouver de bons extraits CSS concis et significatifs en haut de nos pages de référence des propriétés CSS - parcourez notre <a href="/fr/docs/Web/CSS/Reference#keyword_index">index des mots-clés CSS</a> pour en trouver. Nos exemples interactifs sont généralement écrits pour suivre les directives ci-dessus, mais sachez qu'ils peuvent différer à certains endroits, car ils ont pour la plupart été écrits avant la nouvelle rédaction des directives.</p>
+Vous pouvez trouver de bons extraits CSS concis et significatifs en haut de nos pages de référence des propriétés CSS - parcourez notre [index des mots-clés CSS](/fr/docs/Web/CSS/Reference#keyword_index) pour en trouver. Nos exemples interactifs sont généralement écrits pour suivre les directives ci-dessus, mais sachez qu'ils peuvent différer à certains endroits, car ils ont pour la plupart été écrits avant la nouvelle rédaction des directives.
diff --git a/files/fr/mdn/guidelines/code_guidelines/general/index.md b/files/fr/mdn/guidelines/code_guidelines/general/index.md
index d35985d1aa..f589c55b7a 100644
--- a/files/fr/mdn/guidelines/code_guidelines/general/index.md
+++ b/files/fr/mdn/guidelines/code_guidelines/general/index.md
@@ -9,159 +9,162 @@ tags:
   - MDN Meta
 translation_of: MDN/Guidelines/Code_guidelines/General
 ---
-<div>{{MDNSidebar}}</div>
+{{MDNSidebar}}
 
-<p>Les directives suivantes concernant les exemples de code s'appliquent à tout le code, qu'il s'agisse de HTML, de CSS, de JavaScript ou d'autre chose.</p>
+Les directives suivantes concernant les exemples de code s'appliquent à tout le code, qu'il s'agisse de HTML, de CSS, de JavaScript ou d'autre chose.
 
-<h2 id="In_this_article">Dans cet article</h2>
+## Dans cet article
 
-<ul>
- <li><a href="#indentation_spacing_size">Indentation, espacement, taille</a>
+- [Indentation, espacement, taille](#indentation_spacing_size)
 
-  <ul>
-   <li><a href="#indentation">Indentation</a></li>
-   <li><a href="#code_line_length">Longueur des lignes de code</a></li>
-   <li><a href="#code_block_height">Hauteur des blocs de code</a></li>
-  </ul>
- </li>
- <li><a href="#guidelines_for_displaying_examples">Directives pour l'affichage des exemples</a>
-  <ul>
-   <li><a href="#size_of_rendered_example">Taille du rendu des exemples</a></li>
-   <li><a href="#use_of_images_and_other_media">Utilisation d'images et d'autres médias</a></li>
-   <li><a href="#use_of_color">Utilisation de la couleur</a></li>
-   <li><a href="#highlight_good_and_bad_practice_examples">Mettre en évidence les exemples de bonnes et de mauvaises pratiques</a></li>
-  </ul>
- </li>
- <li><a href="#writing_syntax_sections_on_reference_pages">Rédaction de sections syntaxiques sur les pages de référence</a></li>
-</ul>
+  - [Indentation](#indentation)
+  - [Longueur des lignes de code](#code_line_length)
+  - [Hauteur des blocs de code](#code_block_height)
 
-<h2 id="Indentation_spacing_size">Indentation, espacement, taille</h2>
+- [Directives pour l'affichage des exemples](#guidelines_for_displaying_examples)
 
-<h3 id="Indentation">Indentation</h3>
+  - [Taille du rendu des exemples](#size_of_rendered_example)
+  - [Utilisation d'images et d'autres médias](#use_of_images_and_other_media)
+  - [Utilisation de la couleur](#use_of_color)
+  - [Mettre en évidence les exemples de bonnes et de mauvaises pratiques](#highlight_good_and_bad_practice_examples)
 
-<p>Tout le code doit utiliser 2 espaces pour l'indentation, par exemple :</p>
+- [Rédaction de sections syntaxiques sur les pages de référence](#writing_syntax_sections_on_reference_pages)
 
-<pre class="brush: html example-good">&lt;div&gt;
-  &lt;p&gt;C'est mon paragraphe.&lt;/p&gt;
-&lt;/div&gt;</pre>
+## Indentation, espacement, taille
 
-<pre class="brush: js example-good">function myFunc() {
+### Indentation
+
+Tout le code doit utiliser 2 espaces pour l'indentation, par exemple :
+
+```html example-good
+<div>
+  <p>C'est mon paragraphe.</p>
+</div>
+```
+
+```js example-good
+function myFunc() {
   if(thingy) {
     console.log('Ouaip, ça a marché.');
   }
-}</pre>
+}
+```
 
-<h3 id="Code_line_length">Longueur des lignes de code</h3>
+### Longueur des lignes de code
 
-<p>Les lignes de code ne doivent pas comporter plus de 80 caractères (64 pour les <a href="https://github.com/mdn/interactive-examples">exemples interactifs</a>). Vous devez rompre les lignes de manière raisonnable pour des raisons de lisibilité, mais pas au détriment des bonnes pratiques.</p>
+Les lignes de code ne doivent pas comporter plus de 80 caractères (64 pour les [exemples interactifs](https://github.com/mdn/interactive-examples)). Vous devez rompre les lignes de manière raisonnable pour des raisons de lisibilité, mais pas au détriment des bonnes pratiques.
 
-<p>Par exemple, ceci n'est pas génial :</p>
+Par exemple, ceci n'est pas génial :
 
-<pre class="brush: js example-bad">let tommyCat = 'Dit Tommy le chat en reculant pour évacuer tout corps étranger qui aurait pu se loger dans sa puissante gorge. Plus d'un gros rat de gouttière avait trouvé la mort en regardant à bout portant le canon caverneux de cette impressionnante machine à rôder.';</pre>
+```js example-bad
+let tommyCat = 'Dit Tommy le chat en reculant pour évacuer tout corps étranger qui aurait pu se loger dans sa puissante gorge. Plus d'un gros rat de gouttière avait trouvé la mort en regardant à bout portant le canon caverneux de cette impressionnante machine à rôder.';
+```
 
-<p>C'est mieux, mais un peu gênant :</p>
+C'est mieux, mais un peu gênant :
 
-<pre class="brush: js">let tommyCat = 'Dit Tommy le chat en reculant pour évacuer tout corps étranger '
+```js
+let tommyCat = 'Dit Tommy le chat en reculant pour évacuer tout corps étranger '
 + 'qui aurait pu se loger dans sa puissante gorge. Plus d’un gros rat de gouttière '
 + 'avait trouvé la mort en regardant à bout portant le canon caverneux de cette '
-+ 'impressionnante machine à rôder.';</pre>
++ 'impressionnante machine à rôder.';
+```
 
-<p>Une meilleure solution consiste à utiliser un <i>template</i> :</p>
+Une meilleure solution consiste à utiliser un _template_ :
 
-<pre class="brush: js example-good">let tommyCat = `Dit Tommy le chat en reculant pour évacuer tout corps étranger
+```js example-good
+let tommyCat = `Dit Tommy le chat en reculant pour évacuer tout corps étranger
   qui aurait pu se loger dans sa puissante gorge. Plus d'un gros rat de gouttière
   avait trouvé la mort en regardant à bout portant le canon caverneux de cette
-  impressionnante machine à rôder.`;</pre>
+  impressionnante machine à rôder.`;
+```
 
-<h3 id="Code_block_height">Hauteur des blocs de code</h3>
+### Hauteur des blocs de code
 
-<p>Les blocs de code doivent être aussi longs que nécessaire, mais pas plus. L'idéal est de viser quelque chose de court, comme 15 à 25 lignes. Si un bloc de code doit être beaucoup plus long, envisagez de ne montrer que l'extrait le plus utile et de créer un lien vers l'exemple complet sur un repo GitHub ou un CodePen, par exemple.</p>
+Les blocs de code doivent être aussi longs que nécessaire, mais pas plus. L'idéal est de viser quelque chose de court, comme 15 à 25 lignes. Si un bloc de code doit être beaucoup plus long, envisagez de ne montrer que l'extrait le plus utile et de créer un lien vers l'exemple complet sur un repo GitHub ou un CodePen, par exemple.
 
-<h2 id="Guidelines_for_displaying_examples">Directives pour l'affichage des exemples</h2>
+## Directives pour l'affichage des exemples
 
-<h3 id="Size_of_rendered_example">Taille du rendu des exemples</h3>
+### Taille du rendu des exemples
 
-<p>Le volet de contenu principal de MDN a une largeur d'environ 700px sur un ordinateur de bureau. Les exemples intégrés à MDN doivent donc avoir une apparence correcte à cette largeur (définissez la largeur des exemples intégrés à 100%).</p>
+Le volet de contenu principal de MDN a une largeur d'environ 700px sur un ordinateur de bureau. Les exemples intégrés à MDN doivent donc avoir une apparence correcte à cette largeur (définissez la largeur des exemples intégrés à 100%).
 
-<p>En ce qui concerne la hauteur, nous vous recommandons de maintenir l'exemple rendu à moins de 700px de hauteur si possible, pour une lisibilité maximale à l'écran.</p>
+En ce qui concerne la hauteur, nous vous recommandons de maintenir l'exemple rendu à moins de 700px de hauteur si possible, pour une lisibilité maximale à l'écran.
 
-<p>Vous devriez également penser à rendre vos exemples plus ou moins adaptables, afin qu'ils soient également utiles sur les appareils mobiles.</p>
+Vous devriez également penser à rendre vos exemples plus ou moins adaptables, afin qu'ils soient également utiles sur les appareils mobiles.
 
-<h3 id="Use_of_images_and_other_media">Utilisation d'images et d'autres médias</h3>
+### Utilisation d'images et d'autres médias
 
-<p>Parfois, vous voudrez inclure des images ou d'autres médias dans un exemple. Si vous le faites :</p>
+Parfois, vous voudrez inclure des images ou d'autres médias dans un exemple. Si vous le faites :
 
-<ul>
-  <li>Assurez-vous que leur licence vous permet de les utiliser. Essayez d'utiliser des médias dont la licence est très permissive, comme <a href="https://creativecommons.org/share-your-work/public-domain/cc0/">CC0</a>, ou au moins compatible avec notre licence générale de contenu - <a href="https://creativecommons.org/licenses/by-sa/2.5/">Licence Creative Commons Attribution-ShareAlike</a> (CC-BY-SA).</li>
-  <li>Pour les images, faites-les passer par <a href="https://tinypng.com">https://tinypng.com</a> ou <a href="https://imageoptim.com">https://imageoptim.com</a>, pour réduire le poids de la page des exemples.</li>
-  <li>Pour le <code>SVG</code>, exécutez le code via <a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a>, et assurez-vous que le fichier <code>SVG</code> comporte une ligne vide à la fin du fichier.</li>
-  <li>
-    <p>Lorsque vous affichez des icônes sur une page (ex. via <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>), utilisez les icônes du référentiel <a href="https://github.com/mdn/mdn-dinocons">mdn-dinocons</a>, le cas échéant, et essayez de correspondre à leur style dans les autres cas.</p>
-  </li>
-</ul>
+- Assurez-vous que leur licence vous permet de les utiliser. Essayez d'utiliser des médias dont la licence est très permissive, comme [CC0](https://creativecommons.org/share-your-work/public-domain/cc0/), ou au moins compatible avec notre licence générale de contenu - [Licence Creative Commons Attribution-ShareAlike](https://creativecommons.org/licenses/by-sa/2.5/) (CC-BY-SA).
+- Pour les images, faites-les passer par <https://tinypng.com> ou <https://imageoptim.com>, pour réduire le poids de la page des exemples.
+- Pour le `SVG`, exécutez le code via [SVGOMG](https://jakearchibald.github.io/svgomg/), et assurez-vous que le fichier `SVG` comporte une ligne vide à la fin du fichier.
+- Lorsque vous affichez des icônes sur une page (ex. via [`background-image`](/fr/docs/Web/CSS/background-image)), utilisez les icônes du référentiel [mdn-dinocons](https://github.com/mdn/mdn-dinocons), le cas échéant, et essayez de correspondre à leur style dans les autres cas.
 
-<h3 id="Use_of_color">Utilisation de la couleur</h3>
+### Utilisation de la couleur
 
-<p>Minuscule pour l'hexadécimal, peut utiliser des mots-clés pour les nuances et les couleurs primaires (ex. : black, white, red), utiliser des schémas plus complexes uniquement si nécessaire (ex. : pour inclure la transparence).</p>
+Minuscule pour l'hexadécimal, peut utiliser des mots-clés pour les nuances et les couleurs primaires (ex. : black, white, red), utiliser des schémas plus complexes uniquement si nécessaire (ex. : pour inclure la transparence).
 
-<p>Préférez utiliser des mots-clés pour les couleurs primaires et autres couleurs "de base", par exemple :</p>
+Préférez utiliser des mots-clés pour les couleurs primaires et autres couleurs "de base", par exemple :
 
-<pre class="brush: css example-good">
+```css example-good
 color: black;
 color: white;
 color: red;
-</pre>
+```
 
-<p>Utilisez rgb() pour des couleurs plus complexes (y compris les couleurs semi-transparentes) :</p>
+Utilisez rgb() pour des couleurs plus complexes (y compris les couleurs semi-transparentes) :
 
-<pre class="brush: css example-good">
+```css example-good
 color: rgb(0, 0, 0, 0.5);
 color: rgb(248, 242, 230);
-</pre>
+```
 
-<p>Si vous devez utiliser des couleurs hexadécimales, utilisez des minuscules :</p>
+Si vous devez utiliser des couleurs hexadécimales, utilisez des minuscules :
 
-<pre class="brush: css example-good">
+```css example-good
 color: #058ed9;
 color: #a39a92;
-</pre>
+```
 
-<p>et utilisez la forme abrégée le cas échéant :</p>
+et utilisez la forme abrégée le cas échéant :
 
-<pre class="brush: css example-good">
+```css example-good
 color: #ff0;
 color: #fff;
-</pre>
+```
 
-<p>Le fichier <a href="https://github.com/mdn/mdn-minimalist/blob/main/sass/vars/_color-palette.scss">sass/vars/_color-palette.scss</a> du dépôt <a href="https://github.com/mdn/mdn-minimalist">mdn-minimalist</a> comporte un ensemble de couleurs utiles qui complètent le design général de MDN.</p>
+Le fichier [sass/vars/\_color-palette.scss](https://github.com/mdn/mdn-minimalist/blob/main/sass/vars/_color-palette.scss) du dépôt [mdn-minimalist](https://github.com/mdn/mdn-minimalist) comporte un ensemble de couleurs utiles qui complètent le design général de MDN.
 
-<h3 id="Highlight_good_and_bad_practice_examples">Mettre en évidence les exemples de bonnes et de mauvaises pratiques</h3>
+### Mettre en évidence les exemples de bonnes et de mauvaises pratiques
 
-<p>Comme vous le remarquerez en parcourant ces lignes directrices, les blocs de code censés être des exemples de bonnes pratiques sont marqués d'un fond en vert, et les blocs de code censés être des exemples de mauvaises pratiques sont marqués d'un fond en rouge.</p>
+Comme vous le remarquerez en parcourant ces lignes directrices, les blocs de code censés être des exemples de bonnes pratiques sont marqués d'un fond en vert, et les blocs de code censés être des exemples de mauvaises pratiques sont marqués d'un fond en rouge.
 
-<p>Pour ce faire, vous devez d'abord utiliser les commandes de l'éditeur MDN pour placer votre bloc de code dans un bloc <code>&lt;pre&gt;</code> et lui donner la coloration syntaxique appropriée. La source du code ressemblera à quelque chose comme ceci :</p>
+Pour ce faire, vous devez d'abord utiliser les commandes de l'éditeur MDN pour placer votre bloc de code dans un bloc `<pre>` et lui donner la coloration syntaxique appropriée. La source du code ressemblera à quelque chose comme ceci :
 
-<pre class="brush: js">
+```js
 function myFunc() {
   console.log('Hello!');
 };
-&lt;/pre&gt;
 </pre>
+```
 
-<p>Pour en faire un bon exemple, vous insérez <code>example-good</code> juste avant le guillemet fermant de l'attribut <code>class</code> :</p>
+Pour en faire un bon exemple, vous insérez `example-good` juste avant le guillemet fermant de l'attribut `class` :
 
-<pre class="brush: html">&lt;pre class="brush: js example-good"&gt;
+```html
+<pre class="brush: js example-good">
   ...
-</pre>
+```
 
-<p>Pour en faire un mauvais exemple, vous insérez <code>example-bad</code> juste avant le guillemet fermant de l'attribut <code>class</code> :</p>
+Pour en faire un mauvais exemple, vous insérez `example-bad` juste avant le guillemet fermant de l'attribut `class` :
 
-<pre class="brush: html">&lt;pre class="brush: js example-bad"&gt;
+```html
+<pre class="brush: js example-bad">
   ...
-</pre>
+```
 
-<p>Nous aimerions vous encourager à les utiliser. Il n'est pas nécessaire de les utiliser partout, mais seulement lorsque vous signalez spécifiquement les bonnes et mauvaises pratiques dans votre code.</p>
+Nous aimerions vous encourager à les utiliser. Il n'est pas nécessaire de les utiliser partout, mais seulement lorsque vous signalez spécifiquement les bonnes et mauvaises pratiques dans votre code.
 
-<h2 id="Writing_syntax_sections_on_reference_pages">Rédaction de sections syntaxiques sur les pages de référence</h2>
+## Rédaction de sections syntaxiques sur les pages de référence
 
-<p>Les pages de référence MDN comprennent des sections Syntaxe qui indiquent sans ambiguïté quelle peut/doit être la syntaxe d'une fonctionnalité, par exemple une méthode JavaScript, une propriété CSS, un élément HTML, etc. Des directives pour les rédiger sont données sur le document <a href="/fr/docs/MDN/Structures/Syntax_sections">Sections syntaxiques</a>.</p>
+Les pages de référence MDN comprennent des sections Syntaxe qui indiquent sans ambiguïté quelle peut/doit être la syntaxe d'une fonctionnalité, par exemple une méthode JavaScript, une propriété CSS, un élément HTML, etc. Des directives pour les rédiger sont données sur le document [Sections syntaxiques](/fr/docs/MDN/Structures/Syntax_sections).
diff --git a/files/fr/mdn/guidelines/code_guidelines/html/index.md b/files/fr/mdn/guidelines/code_guidelines/html/index.md
index 086c1f5e34..a6afac4bf9 100644
--- a/files/fr/mdn/guidelines/code_guidelines/html/index.md
+++ b/files/fr/mdn/guidelines/code_guidelines/html/index.md
@@ -9,154 +9,183 @@ tags:
   - MDN Meta
 translation_of: MDN/Guidelines/Code_guidelines/HTML
 ---
-<div>{{MDNSidebar}}</div>
+{{MDNSidebar}}
 
-<p>Les directives suivantes couvrent la manière d'écrire du HTML pour les exemples de code MDN.</p>
+Les directives suivantes couvrent la manière d'écrire du HTML pour les exemples de code MDN.
 
-<h2 id="In_this_article">Dans cet article</h2>
+## Dans cet article
 
-<ul>
-  <li><a href="#doctype_and_metadata">Doctype et méta-données</a>
-    <ul>
-      <li><a href="#doctype">Doctype</a></li>
-      <li><a href="#document_language">Langue du document</a></li>
-      <li><a href="#document_characterset">Jeu de caractères du document</a></li>
-      <li><a href="#viewport_meta_tag">Méta-balise Viewport</a></li>
-    </ul>
-  </li>
-  <li><a href="#general_markup_coding_style">Style général de codage des balises</a>
-    <ul>
-      <li><a href="#use_lowercase">Utiliser les minuscules</a></li>
-      <li><a href="#trailing_slashes">Barre oblique de fermeture (slash)</a></li>
-      <li><a href="#quoting_attributes">Guillemets des attributs</a></li>
-      <li><a href="#use_double_quotes">Utiliser les guillemets doubles</a></li>
-      <li><a href="#boolean_attributes">Attributs booléens</a></li>
-      <li><a href="#class_and_id_names">Noms de classes et d'ID</a></li>
-      <li><a href="#entity_references">Références des entités</a></li>
-    </ul>
-  </li>
-</ul>
+- [Doctype et méta-données](#doctype_and_metadata)
 
-<h2 id="Doctype_and_metadata">Doctype et méta-données</h2>
+  - [Doctype](#doctype)
+  - [Langue du document](#document_language)
+  - [Jeu de caractères du document](#document_characterset)
+  - [Méta-balise Viewport](#viewport_meta_tag)
 
-<div class="notecard note">
-<p><strong>Note :</strong> Les directives de cette section ne s'appliquent que lorsque vous devez montrer un document HTML complet. La plupart du temps, vous n'aurez pas besoin de le faire ; un extrait est généralement suffisant pour démontrer une fonctionnalité. Lorsque vous utilisez la macro <a href="/fr/docs/MDN/Structures/Code_examples#traditional_live_samples">EmbedLiveSample</a>, il suffit d'inclure l'extrait HTML ; il sera automatiquement inséré dans un document HTML complet lors de son affichage.</p>
-</div>
+- [Style général de codage des balises](#general_markup_coding_style)
 
-<h3 id="Doctype">Doctype</h3>
+  - [Utiliser les minuscules](#use_lowercase)
+  - [Barre oblique de fermeture (slash)](#trailing_slashes)
+  - [Guillemets des attributs](#quoting_attributes)
+  - [Utiliser les guillemets doubles](#use_double_quotes)
+  - [Attributs booléens](#boolean_attributes)
+  - [Noms de classes et d'ID](#class_and_id_names)
+  - [Références des entités](#entity_references)
 
-<p>Vous devez utiliser le doctype HTML5. Il est court, facile à retenir et rétrocompatible :</p>
+## Doctype et méta-données
 
-<pre class="brush: html example-good">&lt;!DOCTYPE html&gt;</pre>
+> **Note :** Les directives de cette section ne s'appliquent que lorsque vous devez montrer un document HTML complet. La plupart du temps, vous n'aurez pas besoin de le faire ; un extrait est généralement suffisant pour démontrer une fonctionnalité. Lorsque vous utilisez la macro [EmbedLiveSample](/fr/docs/MDN/Structures/Code_examples#traditional_live_samples), il suffit d'inclure l'extrait HTML ; il sera automatiquement inséré dans un document HTML complet lors de son affichage.
 
-<h3 id="Document_language">Langue du document</h3>
+### Doctype
 
-<p>Définissez la langue du document à l'aide de l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#lang"><code>lang</code></a> de votre élément <a href="/fr/docs/Web/HTML/Element/html"><code>&lt;html&gt;</code></a> :</p>
+Vous devez utiliser le doctype HTML5. Il est court, facile à retenir et rétrocompatible :
 
-<pre class="brush: html example-good">&lt;html lang="fr"&gt;</pre>
+```html example-good
+<!DOCTYPE html>
+```
 
-<p>C'est bon pour l'accessibilité et les moteurs de recherche, cela aide à localiser le contenu et cela rappelle aux gens d'utiliser les meilleures pratiques.</p>
+### Langue du document
 
-<h3 id="Document_characterset">Jeu de caractères du document</h3>
+Définissez la langue du document à l'aide de l'attribut [`lang`](/fr/docs/Web/HTML/Global_attributes#lang) de votre élément [`<html>`](/fr/docs/Web/HTML/Element/html) :
 
-<p>Vous devez également définir le jeu de caractères de votre document comme suit :</p>
+```html example-good
+<html lang="fr">
+```
 
-<pre class="brush: html example-good">&lt;meta charset="utf-8"&gt;</pre>
+C'est bon pour l'accessibilité et les moteurs de recherche, cela aide à localiser le contenu et cela rappelle aux gens d'utiliser les meilleures pratiques.
 
-<p>Utilisez UTF-8 à moins que vous n'ayez une très bonne raison de ne pas le faire ; il couvrira vos besoins en caractères à peu près indépendamment de la langue que vous utilisez dans votre document. En outre, vous devriez toujours spécifier le jeu de caractères le plus tôt possible dans le bloc <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a> de votre HTML (dans le premier kilooctet), car cela vous protège contre une <a href="http://support.microsoft.com/kb/928847">vulnérabilité de sécurité d'Internet Explorer</a>.</p>
+### Jeu de caractères du document
 
-<h3 id="Viewport_meta_tag">Méta-balise Viewport</h3>
+Vous devez également définir le jeu de caractères de votre document comme suit :
 
-<p>Enfin, vous devez toujours ajouter la métabalise viewport dans votre HTML <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a>, pour donner à l'exemple une meilleure chance de fonctionner sur les appareils mobiles. Vous devez inclure au moins les éléments suivants dans votre document, que vous pourrez modifier ultérieurement en fonction des besoins :</p>
+```html example-good
+<meta charset="utf-8">
+```
 
-<pre class="brush: html example-good">&lt;meta name="viewport" content="width=device-width"&gt;</pre>
+Utilisez UTF-8 à moins que vous n'ayez une très bonne raison de ne pas le faire ; il couvrira vos besoins en caractères à peu près indépendamment de la langue que vous utilisez dans votre document. En outre, vous devriez toujours spécifier le jeu de caractères le plus tôt possible dans le bloc [`<head>`](/fr/docs/Web/HTML/Element/head) de votre HTML (dans le premier kilooctet), car cela vous protège contre une [vulnérabilité de sécurité d'Internet Explorer](http://support.microsoft.com/kb/928847).
 
-<p>Voir <a href="/fr/docs/Web/CSS/Viewport_concepts#mobile_viewports">Zones d'affichage sur mobiles</a> pour plus de détails.</p>
+### Méta-balise Viewport
 
-<h2 id="General_markup_coding_style">Style général de codage des balises</h2>
+Enfin, vous devez toujours ajouter la métabalise viewport dans votre HTML [`<head>`](/fr/docs/Web/HTML/Element/head), pour donner à l'exemple une meilleure chance de fonctionner sur les appareils mobiles. Vous devez inclure au moins les éléments suivants dans votre document, que vous pourrez modifier ultérieurement en fonction des besoins :
 
-<h3 id="Use_lowercase">Utiliser les minuscules</h3>
+```html example-good
+<meta name="viewport" content="width=device-width">
+```
 
-<p>Utilisez les minuscules pour tous les noms d'éléments et les noms/valeurs d'attributs, car elles sont plus nettes et vous permettent d'écrire plus rapidement les balises :</p>
+Voir [Zones d'affichage sur mobiles](/fr/docs/Web/CSS/Viewport_concepts#mobile_viewports) pour plus de détails.
 
-<p>C'est bien :</p>
+## Style général de codage des balises
 
-<pre class="brush: html example-good">&lt;p class="nice"&gt;Ça a l'air sympa et soigné&lt;/p&gt;</pre>
+### Utiliser les minuscules
 
-<p>Ce n'est pas très bon :</p>
+Utilisez les minuscules pour tous les noms d'éléments et les noms/valeurs d'attributs, car elles sont plus nettes et vous permettent d'écrire plus rapidement les balises :
 
-<pre class="brush: html example-bad">&lt;P CLASS="WHOA-THERE"&gt;Pourquoi mon balisage crie-t-il ?&lt;/P&gt;</pre>
+C'est bien :
 
-<h3 id="Trailing_slashes">Barre oblique de fermeture (slash)</h3>
+```html example-good
+<p class="nice">Ça a l'air sympa et soigné</p>
+```
 
-<p>N'incluez pas les barres obliques de fin de style XHTML pour les éléments vides, car elles sont inutiles et ralentissent le processus. Elles peuvent également casser les anciens navigateurs si vous ne faites pas attention (bien que, d'après ce dont nous nous souvenons, cela n'a pas été un problème depuis Netscape 4).</p>
+Ce n'est pas très bon :
 
-<p>C'est bon :</p>
+```html example-bad
+<P CLASS="WHOA-THERE">Pourquoi mon balisage crie-t-il ?</P>
+```
 
-<pre class="brush: html example-good">&lt;input type="text"&gt;
-&lt;hr&gt;</pre>
+### Barre oblique de fermeture (slash)
 
-<p>Les barres obliques ne sont pas nécessaires :</p>
+N'incluez pas les barres obliques de fin de style XHTML pour les éléments vides, car elles sont inutiles et ralentissent le processus. Elles peuvent également casser les anciens navigateurs si vous ne faites pas attention (bien que, d'après ce dont nous nous souvenons, cela n'a pas été un problème depuis Netscape 4).
 
-<pre class="brush: html example-bad">&lt;input type="text" /&gt;
-&lt;hr /&gt;</pre>
+C'est bon :
 
-<h3 id="Quoting_attributes">Guillemets des attributs</h3>
+```html example-good
+<input type="text">
+<hr>
+```
 
-<p>Vous devez mettre toutes les valeurs d'attribut entre guillemets. Il est tentant d'omettre les guillemets puisque HTML5 le permet, mais le balisage est plus net et plus facile à lire si vous les incluez. Par exemple, ceci est mieux :</p>
+Les barres obliques ne sont pas nécessaires :
 
-<pre class="brush: html example-good">&lt;img src="images/logo.jpg" alt="Une icône de globe circulaire" class="no-border"&gt;</pre>
+```html example-bad
+<input type="text" />
+<hr />
+```
 
-<p>que ça :</p>
+### Guillemets des attributs
 
-<pre class="brush: html example-bad">&lt;img src=images/logo.jpg alt=Une icône de globe circulaire class=no-border&gt;</pre>
+Vous devez mettre toutes les valeurs d'attribut entre guillemets. Il est tentant d'omettre les guillemets puisque HTML5 le permet, mais le balisage est plus net et plus facile à lire si vous les incluez. Par exemple, ceci est mieux :
 
-<p>Cela peut également causer des problèmes - dans l'exemple ci-dessus, l'attribut <code>alt</code> sera interprété comme plusieurs attributs, car il n'y a pas de guillemets pour spécifier que "Une icône de globe circulaire" est une valeur d'attribut unique.</p>
+```html example-good
+<img src="images/logo.jpg" alt="Une icône de globe circulaire" class="no-border">
+```
 
-<h3 id="Use_double_quotes">Utiliser les guillemets doubles</h3>
+que ça :
 
-<p>Utilisez des guillemets doubles pour le HTML, et non des guillemets simples :</p>
+```html example-bad
+<img src=images/logo.jpg alt=Une icône de globe circulaire class=no-border>
+```
 
-<pre class="brush: html example-good">&lt;p class="important"&gt;Yes&lt;/p&gt;</pre>
+Cela peut également causer des problèmes - dans l'exemple ci-dessus, l'attribut `alt` sera interprété comme plusieurs attributs, car il n'y a pas de guillemets pour spécifier que "Une icône de globe circulaire" est une valeur d'attribut unique.
 
-<pre class="brush: html example-bad">&lt;p class='important'&gt;Nope&lt;/p&gt;</pre>
+### Utiliser les guillemets doubles
 
-<h3 id="Boolean_attributes">Attributs booléens</h3>
+Utilisez des guillemets doubles pour le HTML, et non des guillemets simples :
 
-<p>N'écrivez pas les attributs booléens en entier ; vous pouvez simplement écrire le nom de l'attribut pour le définir. Par exemple, vous pouvez écrire :</p>
+```html example-good
+<p class="important">Yes</p>
+```
 
-<pre class="brush: html example-good">required</pre>
+```html example-bad
+<p class='important'>Nope</p>
+```
 
-<p>Ceci est parfaitement compréhensible et fonctionne bien ; la version plus longue avec la valeur est acceptée mais n'est pas nécessaire :</p>
+### Attributs booléens
 
-<pre class="brush: html example-bad">required="required"</pre>
+N'écrivez pas les attributs booléens en entier ; vous pouvez simplement écrire le nom de l'attribut pour le définir. Par exemple, vous pouvez écrire :
 
-<h3 id="Class_and_ID_names">Noms de classes et d'ID</h3>
+```html example-good
+required
+```
 
-<p>Utilisez des noms de classe/ID sémantiques et séparez les mots multiples par des traits d'union. N'utilisez pas de camelCase.</p>
+Ceci est parfaitement compréhensible et fonctionne bien ; la version plus longue avec la valeur est acceptée mais n'est pas nécessaire :
 
-<p>Bon :</p>
+```html example-bad
+required="required"
+```
 
-<pre class="brush: html example-good">&lt;p class="editorial-summary"&gt;Blah blah blah&lt;/p&gt;</pre>
+### Noms de classes et d'ID
 
-<p>Mauvais :</p>
+Utilisez des noms de classe/ID sémantiques et séparez les mots multiples par des traits d'union. N'utilisez pas de camelCase.
 
-<pre class="brush: html example-bad">&lt;p class="bigRedBox"&gt;Blah blah blah&lt;/p&gt;</pre>
+Bon :
 
-<h3 id="Entity_references">Références des entités</h3>
+```html example-good
+<p class="editorial-summary">Blah blah blah</p>
+```
 
-<p>N'utilisez pas inutilement les références d'entités - utilisez le caractère littéral chaque fois que cela est possible (vous devrez toujours échapper les caractères comme les crochets et les guillemets).</p>
+Mauvais :
 
-<p>Par exemple, vous pourriez simplement écrire</p>
+```html example-bad
+<p class="bigRedBox">Blah blah blah</p>
+```
 
-<pre class="brush: html example-good">&lt;p&gt;© 2018 Me&lt;/p&gt;</pre>
+### Références des entités
 
-<p>Au lieu de</p>
+N'utilisez pas inutilement les références d'entités - utilisez le caractère littéral chaque fois que cela est possible (vous devrez toujours échapper les caractères comme les crochets et les guillemets).
 
-<pre class="brush: html example-bad">&lt;p&gt;&amp;copy; 2018 Me&lt;/p&gt;</pre>
+Par exemple, vous pourriez simplement écrire
 
-<p>Cela ne pose aucun problème tant que vous déclarez un jeu de caractères UTF-8.</p>
+```html example-good
+<p>© 2018 Me</p>
+```
 
-<h2 id="Good_HTML_examples_on_MDN">De bons exemples HTML sur MDN</h2>
+Au lieu de
 
-<p>Vous pouvez trouver de bons extraits HTML, concis et significatifs, en haut des <a href="/fr/docs/Web/HTML/Reference">pages de référence HTML</a> - nos exemples interactifs sont généralement rédigés de manière à suivre ces directives, mais sachez qu'ils peuvent différer à certains endroits car ils ont pour la plupart été rédigés avant la nouvelle rédaction des directives.</p>
+```html example-bad
+<p>&copy; 2018 Me</p>
+```
+
+Cela ne pose aucun problème tant que vous déclarez un jeu de caractères UTF-8.
+
+## De bons exemples HTML sur MDN
+
+Vous pouvez trouver de bons extraits HTML, concis et significatifs, en haut des [pages de référence HTML](/fr/docs/Web/HTML/Reference) - nos exemples interactifs sont généralement rédigés de manière à suivre ces directives, mais sachez qu'ils peuvent différer à certains endroits car ils ont pour la plupart été rédigés avant la nouvelle rédaction des directives.
diff --git a/files/fr/mdn/guidelines/code_guidelines/index.md b/files/fr/mdn/guidelines/code_guidelines/index.md
index ab395b6e62..9b887fdfac 100644
--- a/files/fr/mdn/guidelines/code_guidelines/index.md
+++ b/files/fr/mdn/guidelines/code_guidelines/index.md
@@ -12,53 +12,45 @@ tags:
 translation_of: MDN/Guidelines/Code_guidelines
 original_slug: MDN/Guidelines/Code_lignesdirectrices
 ---
-<div>{{MDNSidebar}}</div>
+{{MDNSidebar}}
 
-<p>Cette série de documents décrit les directives de codage et les meilleures pratiques que nous utilisons pour écrire des démonstrations, des extraits de code, des exemples interactifs, etc. à utiliser sur MDN.</p>
+Cette série de documents décrit les directives de codage et les meilleures pratiques que nous utilisons pour écrire des démonstrations, des extraits de code, des exemples interactifs, etc. à utiliser sur MDN.
 
-<p>Si vous cherchez des lignes directrices à suivre pour rédiger vos exemples de codes, vous êtes au bon endroit. Le plus grand avantage de respecter ces directives est qu'elles favoriseront la cohérence entre nos échantillons et nos démos sur MDN, ce qui augmente la lisibilité et la compréhension en général.</p>
+Si vous cherchez des lignes directrices à suivre pour rédiger vos exemples de codes, vous êtes au bon endroit. Le plus grand avantage de respecter ces directives est qu'elles favoriseront la cohérence entre nos échantillons et nos démos sur MDN, ce qui augmente la lisibilité et la compréhension en général.
 
-<div class="note">
-  <p><strong>Note :</strong> Si vous souhaitez obtenir des conseils sur le style du code tel qu'il apparaît sur un article de MDN, plutôt que sur le contenu du code, consultez notre <a href="/fr/docs/MDN/Guidelines/Writing_style_guide#code_sample_style_and_formatting">Guide stylistique</a>.</p>
-</div>
+> **Note :** Si vous souhaitez obtenir des conseils sur le style du code tel qu'il apparaît sur un article de MDN, plutôt que sur le contenu du code, consultez notre [Guide stylistique](/fr/docs/MDN/Guidelines/Writing_style_guide#code_sample_style_and_formatting).
 
-<h2 id="Article_structure">Structure d'article</h2>
+## Structure d'article
 
-<p>Cet article contient les meilleures pratiques générales de haut niveau pour la rédaction d'exemples de codes MDN. Ses sous-articles sont les suivants :</p>
+Cet article contient les meilleures pratiques générales de haut niveau pour la rédaction d'exemples de codes MDN. Ses sous-articles sont les suivants :
 
-<ul>
-  <li><a href="/fr/docs/MDN/Guidelines/Code_guidelines/General">Lignes directrices générales pour tous les codes</a> — à la fois syntaxique et pour des exemples de stylisme/affichage</li>
-  <li><a href="/fr/docs/MDN/Guidelines/Code_guidelines/HTML">Lignes directrices du HTML</a></li>
-  <li><a href="/fr/docs/MDN/Guidelines/Code_guidelines/CSS">Lignes directrices du CSS</a></li>
-  <li><a href="/fr/docs/MDN/Guidelines/Code_guidelines/JavaScript">Lignes directrices du JavaScript</a></li>
-  <li><a href="/fr/docs/MDN/Guidelines/Code_guidelines/Shell">Lignes directrices des commandes Shell</a></li>
-</ul>
+- [Lignes directrices générales pour tous les codes](/fr/docs/MDN/Guidelines/Code_guidelines/General) — à la fois syntaxique et pour des exemples de stylisme/affichage
+- [Lignes directrices du HTML](/fr/docs/MDN/Guidelines/Code_guidelines/HTML)
+- [Lignes directrices du CSS](/fr/docs/MDN/Guidelines/Code_guidelines/CSS)
+- [Lignes directrices du JavaScript](/fr/docs/MDN/Guidelines/Code_guidelines/JavaScript)
+- [Lignes directrices des commandes Shell](/fr/docs/MDN/Guidelines/Code_guidelines/Shell)
 
-<h2 id="General_best_practices">Bonnes pratiques générales</h2>
+## Bonnes pratiques générales
 
-<p>Cette section fournit rapidement les meilleures pratiques générales pour créer un échantillon de code minimal compréhensible afin de démontrer l'utilisation d'une caractéristique ou d'une fonction spécifique.</p>
+Cette section fournit rapidement les meilleures pratiques générales pour créer un échantillon de code minimal compréhensible afin de démontrer l'utilisation d'une caractéristique ou d'une fonction spécifique.
 
-<p>Les échantillons de code doivent l'être :</p>
+Les échantillons de code doivent l'être :
 
-<ul>
-  <li>assez simple pour être compréhensible, mais</li>
-  <li>suffisamment complexe pour faire quelque chose d'intéressant, et de préférence utile.</li>
-</ul>
+- assez simple pour être compréhensible, mais
+- suffisamment complexe pour faire quelque chose d'intéressant, et de préférence utile.
 
-<p>Il y a une considération primordiale que vous devez garder à l'esprit : <strong>Les lecteurs copieront et colleront l'échantillon de code dans leur propre code, et pourront le mettre en production.</strong></p>
+Il y a une considération primordiale que vous devez garder à l'esprit : **Les lecteurs copieront et colleront l'échantillon de code dans leur propre code, et pourront le mettre en production.**
 
-<p>Par conséquent, vous devez vous assurer que l'exemple de code est utilisable et suit les meilleures pratiques généralement acceptées, et <strong>ne fait rien</strong> qui puisse rendre une application peu sûre, grossièrement inefficace, gonflée ou inaccessible. Si l'exemple de code n'est pas utilisable ou ne vaut pas la peine d'être produit, veillez à inclure un avertissement dans un commentaire de code et dans le texte explicatif — s'il s'agit d'un extrait et non d'un exemple complet, précisez-le clairement. Cela signifie également que vous devez fournir <strong>toutes</strong> les informations nécessaires à l'exécution de l'exemple, y compris les dépendances et la configuration.</p>
+Par conséquent, vous devez vous assurer que l'exemple de code est utilisable et suit les meilleures pratiques généralement acceptées, et **ne fait rien** qui puisse rendre une application peu sûre, grossièrement inefficace, gonflée ou inaccessible. Si l'exemple de code n'est pas utilisable ou ne vaut pas la peine d'être produit, veillez à inclure un avertissement dans un commentaire de code et dans le texte explicatif — s'il s'agit d'un extrait et non d'un exemple complet, précisez-le clairement. Cela signifie également que vous devez fournir **toutes** les informations nécessaires à l'exécution de l'exemple, y compris les dépendances et la configuration.
 
-<p>Les échantillons de code doivent être aussi autonomes et faciles à comprendre que possible. L'objectif n'est pas nécessairement de produire un code efficace et intelligent qui impressionne les experts et possède une grande fonctionnalité, mais plutôt de produire des exemples de travail réduits qui peuvent être compris le plus rapidement possible.</p>
+Les échantillons de code doivent être aussi autonomes et faciles à comprendre que possible. L'objectif n'est pas nécessairement de produire un code efficace et intelligent qui impressionne les experts et possède une grande fonctionnalité, mais plutôt de produire des exemples de travail réduits qui peuvent être compris le plus rapidement possible.
 
-<p>Les autres meilleures pratiques générales sont les suivantes :</p>
+Les autres meilleures pratiques générales sont les suivantes :
 
-<ul>
-  <li>L'échantillon doit être court et, idéalement, ne montrer que la caractéristique qui vous intéresse immédiatement.</li>
-  <li><strong>Seulement</strong> inclure le code qui est essentiel pour l'exemple. Une grande quantité de code non pertinent peut facilement distraire ou embrouiller le public. Si vous souhaitez fournir un exemple complet, plus long, mettez-le dans l'un de nos <a href="https://github.com/mdn/">Dépôts GitHub</a> (ou un JSBin, CodePen, ou similaire) et fournissez ensuite le lien vers la version complète au-dessus ou au-dessous de l'échantillon.</li>
-  <li>N'incluez pas de code côté serveur, de bibliothèques, de frameworks, de préprocesseurs et autres dépendances inutiles - ils rendent le code moins portable et plus difficile à exécuter et à comprendre. Utilisez du code "vanilla" lorsque cela est possible.</li>
-  <li>Ne présumez pas de la connaissance des bibliothèques, des frameworks, des préprocesseurs ou d'autres fonctionnalités non natives. Par exemple, utilisez des noms de classe qui ont un sens dans l'exemple plutôt que des noms de classe qui ont un sens pour les utilisateurs de BEM ou Bootstrap.</li>
-  <li>Écrivez votre code de manière aussi propre et compréhensible que possible, même si ce n'est pas la manière la plus efficace de le faire.</li>
-  <li>N'utilisez pas de mauvaises pratiques pour faire court (comme des éléments de présentation tels que <a href="/fr/docs/Web/HTML/Element/big"><code>&lt;big&gt;</code></a> ou <a href="/fr/docs/Web/API/Document/write"><code>document.write()</code></a>) ; faites-le correctement.</li>
-  <li>Dans le cas des démonstrations d'API, si vous utilisez plusieurs API ensemble, indiquez quelles API sont incluses ainsi que l'origine des fonctionnalités.</li>
-</ul>
+- L'échantillon doit être court et, idéalement, ne montrer que la caractéristique qui vous intéresse immédiatement.
+- **Seulement** inclure le code qui est essentiel pour l'exemple. Une grande quantité de code non pertinent peut facilement distraire ou embrouiller le public. Si vous souhaitez fournir un exemple complet, plus long, mettez-le dans l'un de nos [Dépôts GitHub](https://github.com/mdn/) (ou un JSBin, CodePen, ou similaire) et fournissez ensuite le lien vers la version complète au-dessus ou au-dessous de l'échantillon.
+- N'incluez pas de code côté serveur, de bibliothèques, de frameworks, de préprocesseurs et autres dépendances inutiles - ils rendent le code moins portable et plus difficile à exécuter et à comprendre. Utilisez du code "vanilla" lorsque cela est possible.
+- Ne présumez pas de la connaissance des bibliothèques, des frameworks, des préprocesseurs ou d'autres fonctionnalités non natives. Par exemple, utilisez des noms de classe qui ont un sens dans l'exemple plutôt que des noms de classe qui ont un sens pour les utilisateurs de BEM ou Bootstrap.
+- Écrivez votre code de manière aussi propre et compréhensible que possible, même si ce n'est pas la manière la plus efficace de le faire.
+- N'utilisez pas de mauvaises pratiques pour faire court (comme des éléments de présentation tels que [`<big>`](/fr/docs/Web/HTML/Element/big) ou [`document.write()`](/fr/docs/Web/API/Document/write)) ; faites-le correctement.
+- Dans le cas des démonstrations d'API, si vous utilisez plusieurs API ensemble, indiquez quelles API sont incluses ainsi que l'origine des fonctionnalités.
diff --git a/files/fr/mdn/guidelines/code_guidelines/javascript/index.md b/files/fr/mdn/guidelines/code_guidelines/javascript/index.md
index a2178f8491..429efa487f 100644
--- a/files/fr/mdn/guidelines/code_guidelines/javascript/index.md
+++ b/files/fr/mdn/guidelines/code_guidelines/javascript/index.md
@@ -9,314 +9,339 @@ tags:
   - MDN Meta
 translation_of: MDN/Guidelines/Code_guidelines/JavaScript
 ---
-<div>{{MDNSidebar}}</div>
-
-<p>Les directives suivantes couvrent la manière d'écrire le JavaScript pour les exemples de code MDN.</p>
-
-<p>Ce qui suit est un ensemble assez simple de directives JavaScript. Nous pourrions aller beaucoup plus en profondeur sur ce sujet, mais nous voulons essentiellement fournir des directives simples pour écrire des exemples concis qui seront compréhensibles par le plus grand nombre de personnes possible, plutôt que des directives détaillées pour écrire des applications web complexes. Si vous voulez quelque chose qui entre dans plus de détails, nous vous recommandons le <a href="https://github.com/airbnb/javascript">guide stylistique JavaScript d'AirBnB</a>, qui est généralement compatible avec nos directives.</p>
-
-<h2 id="In_this_article">Dans cet article</h2>
-
-<ul>
-  <li><a href="#general_javascript_guidelines">Directives générales sur le JavaScript</a>
-    <ul>
-      <li><a href="#use_expanded_syntax">Utiliser une syntaxe étendue</a></li>
-      <li><a href="#javascript_comments">Commentaires JavaScript</a></li>
-      <li><a href="#use_es6_features">Utiliser les fonctions ES6</a></li>
-    </ul>
-  </li>
-  <li><a href="#variables">Variables</a>
-    <ul>
-      <li><a href="#variable_naming">Nommage des variables</a></li>
-      <li><a href="#declaring_variables">Déclaration des variables</a></li>
-    </ul>
-  </li>
-  <li><a href="#operators_and_comparison">Opérateurs et comparaison</a>
-    <ul>
-      <li><a href="#ternary_operators">Opérateurs ternaires</a></li>
-      <li><a href="#use_strict_equality">Utiliser l'égalité stricte</a></li>
-      <li><a href="#use_shortcuts_for_boolean_tests">Utiliser des raccourcis pour les tests booléens</a></li>
-    </ul>
-  </li>
-  <li><a href="#control_statements">Instructions de contrôle</a></li>
-  <li><a href="#strings">Chaînes de caractères</a>
-    <ul>
-      <li><a href="#use_template_literals">Utiliser des modèles littéraux</a></li>
-      <li><a href="#use_textcontent_not_innerhtml">Utiliser textContent, et non innerHTML</a></li>
-    </ul>
-  </li>
-  <li><a href="#conditionals">Conditions</a>
-    <ul>
-      <li><a href="#general_purpose_looping">Usage général des boucles</a></li>
-      <li><a href="#switch_statements">Les instructions switch</a></li>
-    </ul>
-  </li>
-  <li><a href="#functions_and_objects">Fonctions et objets</a>
-    <ul>
-      <li><a href="#function_naming">Nommage des fonctions</a></li>
-      <li><a href="#defining_functions">Définition des fonctions</a></li>
-      <li><a href="#creating_objects">Création d'objets</a></li>
-      <li><a href="#object_classes">Classes d'objets</a></li>
-      <li><a href="#object_naming">Nommage des objets</a></li>
-    </ul>
-  </li>
-  <li><a href="#arrays">Tableaux</a>
-    <ul>
-      <li><a href="#creating_arrays">Création de tableaux</a></li>
-      <li><a href="#adding_to_an_array">Ajout à un tableau</a></li>
-    </ul>
-  </li>
-  <li><a href="#error_handling">Traitement des erreurs</a></li>
-</ul>
-
-<h2 id="General_JavaScript_guidelines">Directives générales sur le JavaScript</h2>
-
-<h3 id="Use_expanded_syntax">Utiliser une syntaxe étendue</h3>
-
-<p>Pour JavaScript, nous utilisons une syntaxe étendue, chaque ligne de JS étant placée sur une nouvelle ligne, l'accolade d'ouverture d'un bloc sur la même ligne que l'instruction associée et l'accolade de fermeture sur une nouvelle ligne. Cela permet d'optimiser la lisibilité et de favoriser la cohérence sur le MDN.</p>
-
-<p>Faites ceci</p>
-
-<pre class="brush: js example-good">function myFunc() {
+{{MDNSidebar}}
+
+Les directives suivantes couvrent la manière d'écrire le JavaScript pour les exemples de code MDN.
+
+Ce qui suit est un ensemble assez simple de directives JavaScript. Nous pourrions aller beaucoup plus en profondeur sur ce sujet, mais nous voulons essentiellement fournir des directives simples pour écrire des exemples concis qui seront compréhensibles par le plus grand nombre de personnes possible, plutôt que des directives détaillées pour écrire des applications web complexes. Si vous voulez quelque chose qui entre dans plus de détails, nous vous recommandons le [guide stylistique JavaScript d'AirBnB](https://github.com/airbnb/javascript), qui est généralement compatible avec nos directives.
+
+## Dans cet article
+
+- [Directives générales sur le JavaScript](#general_javascript_guidelines)
+
+  - [Utiliser une syntaxe étendue](#use_expanded_syntax)
+  - [Commentaires JavaScript](#javascript_comments)
+  - [Utiliser les fonctions ES6](#use_es6_features)
+
+- [Variables](#variables)
+
+  - [Nommage des variables](#variable_naming)
+  - [Déclaration des variables](#declaring_variables)
+
+- [Opérateurs et comparaison](#operators_and_comparison)
+
+  - [Opérateurs ternaires](#ternary_operators)
+  - [Utiliser l'égalité stricte](#use_strict_equality)
+  - [Utiliser des raccourcis pour les tests booléens](#use_shortcuts_for_boolean_tests)
+
+- [Instructions de contrôle](#control_statements)
+- [Chaînes de caractères](#strings)
+
+  - [Utiliser des modèles littéraux](#use_template_literals)
+  - [Utiliser textContent, et non innerHTML](#use_textcontent_not_innerhtml)
+
+- [Conditions](#conditionals)
+
+  - [Usage général des boucles](#general_purpose_looping)
+  - [Les instructions switch](#switch_statements)
+
+- [Fonctions et objets](#functions_and_objects)
+
+  - [Nommage des fonctions](#function_naming)
+  - [Définition des fonctions](#defining_functions)
+  - [Création d'objets](#creating_objects)
+  - [Classes d'objets](#object_classes)
+  - [Nommage des objets](#object_naming)
+
+- [Tableaux](#arrays)
+
+  - [Création de tableaux](#creating_arrays)
+  - [Ajout à un tableau](#adding_to_an_array)
+
+- [Traitement des erreurs](#error_handling)
+
+## Directives générales sur le JavaScript
+
+### Utiliser une syntaxe étendue
+
+Pour JavaScript, nous utilisons une syntaxe étendue, chaque ligne de JS étant placée sur une nouvelle ligne, l'accolade d'ouverture d'un bloc sur la même ligne que l'instruction associée et l'accolade de fermeture sur une nouvelle ligne. Cela permet d'optimiser la lisibilité et de favoriser la cohérence sur le MDN.
+
+Faites ceci
+
+```js example-good
+function myFunc() {
   console.log('Hello!');
-};</pre>
+};
+```
 
-<p>Évitez cela</p>
+Évitez cela
 
-<pre class="brush: js example-bad">function myFunc() { console.log('Hello!'); };</pre>
+```js example-bad
+function myFunc() { console.log('Hello!'); };
+```
 
-<p>Nous avons également quelques règles spécifiques concernant l'espacement à l'intérieur des caractéristiques du langage. Vous devez inclure des espaces entre les opérateurs et les opérandes, les paramètres, etc.</p>
+Nous avons également quelques règles spécifiques concernant l'espacement à l'intérieur des caractéristiques du langage. Vous devez inclure des espaces entre les opérateurs et les opérandes, les paramètres, etc.
 
-<p>C'est plus lisible</p>
+C'est plus lisible
 
-<pre class="brush: js example-good">if(dayOfWeek === 7 &amp;&amp; weather === 'soleil') {
+```js example-good
+if(dayOfWeek === 7 && weather === 'soleil') {
   goOnTrip('plage', 'voiture', ['crême glacée', 'pelle et sceau', 'serviette de plage']);
-}</pre>
+}
+```
 
-<p>que ceci</p>
+que ceci
 
-<pre class="brush: js example-bad">if(dayOfWeek===7&amp;&amp;weather==='soleil'){
+```js example-bad
+if(dayOfWeek===7&&weather==='soleil'){
   goOnTrip('plage','voiture',['crême glacée','pelle et sceau','serviette de plage']);
-}</pre>
+}
+```
 
-<p>En outre, gardez ces spécificités à l'esprit :</p>
+En outre, gardez ces spécificités à l'esprit :
 
-<ul>
-  <li>N'incluez pas d'espaces de remplissage après les parenthèses ouvrantes ou avant les parenthèses fermantes - <code>(myVar)</code>, et non <code>( myVar )</code>.</li>
-  <li>Toutes les instructions doivent se terminer par un point-virgule (";"). Nous les exigeons dans tous nos exemples de code, même s'ils sont techniquement facultatifs en JavaScript, car nous pensons que cela permet d'obtenir un code plus clair et plus précis quant à la fin de chaque instruction.</li>
-  <li>Utilisez des guillemets simples en JavaScript, chaque fois que des guillemets simples sont nécessaires dans la syntaxe.</li>
-  <li>Il ne doit pas y avoir d'espace entre un mot-clé d'instruction, une fonction ou une boucle et sa parenthèse ouvrante (par exemple, <code>if() { .... }</code>, <code>fonction myFunc() { ... }, for(...) { ... }</code>).</li>
-  <li>Il doit y avoir un espace entre les parenthèses et l'accolade ouvrante dans les cas décrits au point précédent.</li>
-</ul>
+- N'incluez pas d'espaces de remplissage après les parenthèses ouvrantes ou avant les parenthèses fermantes - `(myVar)`, et non `( myVar )`.
+- Toutes les instructions doivent se terminer par un point-virgule (";"). Nous les exigeons dans tous nos exemples de code, même s'ils sont techniquement facultatifs en JavaScript, car nous pensons que cela permet d'obtenir un code plus clair et plus précis quant à la fin de chaque instruction.
+- Utilisez des guillemets simples en JavaScript, chaque fois que des guillemets simples sont nécessaires dans la syntaxe.
+- Il ne doit pas y avoir d'espace entre un mot-clé d'instruction, une fonction ou une boucle et sa parenthèse ouvrante (par exemple, `if() { .... }`, `fonction myFunc() { ... }, for(...) { ... }`).
+- Il doit y avoir un espace entre les parenthèses et l'accolade ouvrante dans les cas décrits au point précédent.
 
-<h3 id="JavaScript_comments">Commentaires JavaScript</h3>
+### Commentaires JavaScript
 
-<p>Utilisez des commentaires de style JS pour commenter le code qui n'est pas auto-documenté :</p>
+Utilisez des commentaires de style JS pour commenter le code qui n'est pas auto-documenté :
 
-<pre class="brush: js example-good">// This is a JavaScript-style comment</pre>
+```js example-good
+// This is a JavaScript-style comment
+```
 
-<p>Mettez vos commentaires sur des lignes séparées précédant le code auquel ils se réfèrent :</p>
+Mettez vos commentaires sur des lignes séparées précédant le code auquel ils se réfèrent :
 
-<pre class="brush: js example-good">function myFunc() {
+```js example-good
+function myFunc() {
   // Affiche la chaîne de caractères "Bonjour" dans la console JS du navigateur.
   console.log('Bonjour');
-  // Crée un nouveau paragraphe, le remplit de contenu et l'ajoute au &lt;body&gt;
+  // Crée un nouveau paragraphe, le remplit de contenu et l'ajoute au <body>
   let para = document.createElement('p');
   para.textContent = 'Mon nouveau paragraphe';
   document.body.appendChild(para);
-}</pre>
+}
+```
 
-<p>Notez également que vous devez laisser un espace entre les barres obliques et le commentaire, dans chaque cas.</p>
+Notez également que vous devez laisser un espace entre les barres obliques et le commentaire, dans chaque cas.
 
-<h3 id="Use_ES6_features">Utiliser les fonctions ES6</h3>
+### Utiliser les fonctions ES6
 
-<p>Pour un usage général*, vous pouvez utiliser les fonctionnalités ES6 courantes (telles que les <a href="/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions">fonctions fléchées</a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesses</a>, <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/let">let</a></code>/<code><a href="/fr/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, <a href="/fr/docs/Web/JavaScript/Reference/Template_literals">littéraux de gabarits</a>, et le <a href="/fr/docs/Web/JavaScript/Reference/Operators/Spread_syntax">syntaxe de décomposition</a>) dans les exemples MDN. Nous les incluons à de nombreux endroits dans ces directives, car nous pensons que l'industrie du Web a généralement atteint un point où ces fonctionnalités sont suffisamment familières pour être compréhensibles. Et pour ceux qui ne les utilisent pas encore, nous aimerions jouer notre rôle en aidant les gens à développer leurs compétences.</p>
+Pour un usage général\*, vous pouvez utiliser les fonctionnalités ES6 courantes (telles que les [fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [promesses](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise), [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let)/[`const`](/fr/docs/Web/JavaScript/Reference/Statements/const), [littéraux de gabarits](/fr/docs/Web/JavaScript/Reference/Template_literals), et le [syntaxe de décomposition](/fr/docs/Web/JavaScript/Reference/Operators/Spread_syntax)) dans les exemples MDN. Nous les incluons à de nombreux endroits dans ces directives, car nous pensons que l'industrie du Web a généralement atteint un point où ces fonctionnalités sont suffisamment familières pour être compréhensibles. Et pour ceux qui ne les utilisent pas encore, nous aimerions jouer notre rôle en aidant les gens à développer leurs compétences.
 
-<p>Cependant, nous ne recommandons pas encore l'utilisation générale des nouvelles fonctionnalités ES telles que <a href="/fr/docs/Web/JavaScript/Reference/Statements/async_function">async</a>/<a href="/fr/docs/Web/JavaScript/Reference/Operators/await">await</a>, les virgules de fin sur les listes d'arguments, etc. Nous préférerions que vous ne les utilisiez pas, sauf si cela est strictement nécessaire, et si vous les utilisez, incluez une explication dans votre exemple pour dire ce qu'ils font, avec un lien vers le matériel de référence approprié.</p>
+Cependant, nous ne recommandons pas encore l'utilisation générale des nouvelles fonctionnalités ES telles que [async](/fr/docs/Web/JavaScript/Reference/Statements/async_function)/[await](/fr/docs/Web/JavaScript/Reference/Operators/await), les virgules de fin sur les listes d'arguments, etc. Nous préférerions que vous ne les utilisiez pas, sauf si cela est strictement nécessaire, et si vous les utilisez, incluez une explication dans votre exemple pour dire ce qu'ils font, avec un lien vers le matériel de référence approprié.
 
-<div class="note">
-  <p><strong>Note :</strong> Par "usage général", nous entendons la rédaction d'exemples généraux. Les pages de référence couvrant des fonctionnalités spécifiques de l'ES moderne doivent évidemment utiliser les fonctionnalités qu'elles documentent !</p>
-</div>
+> **Note :** Par "usage général", nous entendons la rédaction d'exemples généraux. Les pages de référence couvrant des fonctionnalités spécifiques de l'ES moderne doivent évidemment utiliser les fonctionnalités qu'elles documentent !
 
-<h2 id="Variables">Variables</h2>
+## Variables
 
-<h3 id="Variable_naming">Nommage des variables</h3>
+### Nommage des variables
 
-<p>Pour les noms de variables, utilisez la casse minuscule au format chameau « lowerCamelCase » et, le cas échéant, des noms concis, lisibles par l'homme et sémantiques.</p>
+Pour les noms de variables, utilisez la casse minuscule au format chameau « lowerCamelCase » et, le cas échéant, des noms concis, lisibles par l'homme et sémantiques.
 
-<p>Écrivez comme suit :</p>
+Écrivez comme suit :
 
-<pre class="brush: js example-good">let playerScore = 0;
+```js example-good
+let playerScore = 0;
 
-let speed = distance / time;</pre>
+let speed = distance / time;
+```
 
-<p>Éviter ce genre de chose :</p>
+Éviter ce genre de chose :
 
-<pre class="brush: js example-bad">let thisIsaveryLONGVariableThatRecordsPlayerscore345654 = 0;
+```js example-bad
+let thisIsaveryLONGVariableThatRecordsPlayerscore345654 = 0;
 
 let s = d/t;
-</pre>
+```
 
-<div class="note">
-  <p><strong>Note :</strong> The only place where it is OK to not use human-readable semantic names is where a very common recognized convention exists, such as using <code>i</code>, <code>j</code>, etc. for loop iterators.</p>
-</div>
+> **Note :** The only place where it is OK to not use human-readable semantic names is where a very common recognized convention exists, such as using `i`, `j`, etc. for loop iterators.
 
-<h3 id="Declaring_variables">Déclaration des variables</h3>
+### Déclaration des variables
 
-<p>Lorsque vous déclarez des variables et des constantes, utilisez les mots-clés <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/let">let</a></code> et <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, pas <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/var">var</a></code>.</p>
+Lorsque vous déclarez des variables et des constantes, utilisez les mots-clés [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) et [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const), pas [`var`](/fr/docs/Web/JavaScript/Reference/Statements/var).
 
-<p>Si une variable ne sera pas réaffectée, préférez <code>const</code> :</p>
+Si une variable ne sera pas réaffectée, préférez `const` :
 
-<pre class="brush: js example-good">const myName = 'Chris';
+```js example-good
+const myName = 'Chris';
 console.log(myName);
-</pre>
+```
 
-<p>Sinon, utilisez <code>let</code> :</p>
+Sinon, utilisez `let` :
 
-<pre class="brush: js example-good">let myAge = '40';
+```js example-good
+let myAge = '40';
 myAge++;
 console.log('Happy birthday!');
-</pre>
+```
 
-<p>Cet exemple utilise <code>let</code> là où il devrait préférer <code>const</code>. Il fonctionnera mais devrait être évité dans les exemples de code MDN :</p>
+Cet exemple utilise `let` là où il devrait préférer `const`. Il fonctionnera mais devrait être évité dans les exemples de code MDN :
 
-<pre class="brush: js example-bad">let myName = 'Chris';
+```js example-bad
+let myName = 'Chris';
 console.log(myName);
-</pre>
+```
 
-<p>Cet exemple utilise <code>const</code> pour une variable qui est réaffectée. La réaffectation entraînera une erreur :</p>
+Cet exemple utilise `const` pour une variable qui est réaffectée. La réaffectation entraînera une erreur :
 
-<pre class="brush: js example-bad">const myAge = '40';
+```js example-bad
+const myAge = '40';
 myAge++;
 console.log('Happy birthday!');
-</pre>
+```
 
-<p>Cet exemple utilise <code>var</code>, ce qui doit être évité dans les exemples de code MDN, sauf si cela est vraiment nécessaire :</p>
+Cet exemple utilise `var`, ce qui doit être évité dans les exemples de code MDN, sauf si cela est vraiment nécessaire :
 
-<pre class="brush: js example-bad">var myAge = '40';
-var myName = 'Chris';</pre>
+```js example-bad
+var myAge = '40';
+var myName = 'Chris';
+```
 
-<h2 id="Operators_and_comparison">Opérateurs et comparaison</h2>
+## Opérateurs et comparaison
 
-<h3 id="Ternary_operators">Opérateurs ternaires</h3>
+### Opérateurs ternaires
 
-<p>Les opérateurs ternaires doivent être placés sur une seule ligne :</p>
+Les opérateurs ternaires doivent être placés sur une seule ligne :
 
-<pre class="brush: js example-good">let status = (age &gt;= 18) ? 'adult' : 'minor';</pre>
+```js example-good
+let status = (age >= 18) ? 'adult' : 'minor';
+```
 
-<p>Pas emboîtés :</p>
+Pas emboîtés :
 
-<pre class="brush: js example-bad">let status = (age &gt;= 18)
+```js example-bad
+let status = (age >= 18)
   ? 'adult'
-  : 'minor';</pre>
+  : 'minor';
+```
 
-<p>C'est beaucoup plus difficile à lire.</p>
+C'est beaucoup plus difficile à lire.
 
-<h3 id="Use_strict_equality">Utiliser l'égalité stricte</h3>
+### Utiliser l'égalité stricte
 
-<p>Utilisez toujours une égalité et une inégalité strictes.</p>
+Utilisez toujours une égalité et une inégalité strictes.
 
-<p>Comme ceci :</p>
+Comme ceci :
 
-<pre class="brush: js example-good">name === 'Chris';
-age !== 25;</pre>
+```js example-good
+name === 'Chris';
+age !== 25;
+```
 
-<p>N'écrivez pas comme ça :</p>
+N'écrivez pas comme ça :
 
-<pre class="brush: js example-bad">name == 'Chris';
-age != 25;</pre>
+```js example-bad
+name == 'Chris';
+age != 25;
+```
 
-<h3 id="Use_shortcuts_for_boolean_tests">Utiliser des raccourcis pour les tests booléens</h3>
+### Utiliser des raccourcis pour les tests booléens
 
-<p>Utilisez des raccourcis pour les tests booléens - utilisez <code>x</code> et <code>!x</code>, et non <code>x === true</code> et <code>x === false</code>.</p>
+Utilisez des raccourcis pour les tests booléens - utilisez `x` et `!x`, et non `x === true` et `x === false`.
 
-<h2 id="Control_statements">Instructions de contrôle</h2>
+## Instructions de contrôle
 
-<p>Écrivez des instructions de contrôle comme ceci :</p>
+Écrivez des instructions de contrôle comme ceci :
 
-<pre class="brush: js example-good">if(iceCream) {
+```js example-good
+if(iceCream) {
   alert('Woo hoo!');
-}</pre>
+}
+```
 
-<p>Pas comme cela :</p>
+Pas comme cela :
 
-<pre class="brush: js example-bad">if (iceCream){
+```js example-bad
+if (iceCream){
   alert('Woo hoo!');
-}</pre>
+}
+```
 
-<p>N'oubliez pas non plus :</p>
+N'oubliez pas non plus :
 
-<ul>
- <li>Il ne doit y avoir <em>aucun espace</em> entre un mot-clé de déclaration de contrôle et sa parenthèse ouvrante.</li>
- <li>Il doit y avoir <em>un espace</em> entre les parenthèses et l'accolade ouvrante.</li>
-</ul>
+- Il ne doit y avoir _aucun espace_ entre un mot-clé de déclaration de contrôle et sa parenthèse ouvrante.
+- Il doit y avoir _un espace_ entre les parenthèses et l'accolade ouvrante.
 
-<h2 id="Strings">Chaînes de caractères</h2>
+## Chaînes de caractères
 
-<h3 id="Use_template_literals">Utiliser des modèles littéraux</h3>
+### Utiliser des modèles littéraux
 
-<p>Pour insérer des valeurs dans des chaînes de caractères, utilisez des chaînes de caractères littérales.</p>
+Pour insérer des valeurs dans des chaînes de caractères, utilisez des chaînes de caractères littérales.
 
-<p>Comme suit :</p>
+Comme suit :
 
-<pre class="brush: js example-good">let myName = 'Chris';
-console.log(`Hi! I'm ${myName}!`);</pre>
+```js example-good
+let myName = 'Chris';
+console.log(`Hi! I'm ${myName}!`);
+```
 
-<p>En évitant d'écrire :</p>
+En évitant d'écrire :
 
-<pre class="brush: js example-bad">let myName = 'Chris';
-console.log('Hi! I\'m' + myName + '!');</pre>
+```js example-bad
+let myName = 'Chris';
+console.log('Hi! I\'m' + myName + '!');
+```
 
-<h3 id="Use_textContent_not_innerHTML">Utiliser textContent, et non innerHTML</h3>
+### Utiliser textContent, et non innerHTML
 
-<p>Lorsque vous insérez des chaînes de caractères dans les nœuds du DOM, utilisez la fonction <a href="/fr/docs/Web/API/Node/textContent"><code>Node.textContent</code></a>:</p>
+Lorsque vous insérez des chaînes de caractères dans les nœuds du DOM, utilisez la fonction [`Node.textContent`](/fr/docs/Web/API/Node/textContent):
 
-<pre class="brush: js example-good">let text = 'Bonjour à vous tous, braves gens';
+```js example-good
+let text = 'Bonjour à vous tous, braves gens';
 const para = document.createElement('p');
-para.textContent = text;</pre>
+para.textContent = text;
+```
 
-<p>Et pas <a href="/fr/docs/Web/API/Element/innerHTML"><code>Element.innerHTML</code></a>:</p>
+Et pas [`Element.innerHTML`](/fr/docs/Web/API/Element/innerHTML):
 
-<pre class="brush: js example-bad">let text = 'Bonjour à vous tous, braves gens';
+```js example-bad
+let text = 'Bonjour à vous tous, braves gens';
 const para = document.createElement('p');
-para.innerHTML = text;</pre>
+para.innerHTML = text;
+```
 
-<p>Le <code>textContent</code> est beaucoup plus efficace, et moins sujet aux erreurs que le <code>innerHTML</code>.</p>
+Le `textContent` est beaucoup plus efficace, et moins sujet aux erreurs que le `innerHTML`.
 
-<h2 id="Conditionals">Conditions</h2>
+## Conditions
 
-<h3 id="General_purpose_looping">Usage général des boucles</h3>
+### Usage général des boucles
 
-<p>When <a href="/fr/docs/Learn/JavaScript/Building_blocks/Looping_code">loops</a> are required, feel free to choose an appropriate loop out of the available ones (<code><a href="/fr/docs/Web/JavaScript/Reference/Statements/for">for</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/while">while</a></code>, etc.) Just make sure to keep the code as understandable as possible.</p>
+When [loops](/fr/docs/Learn/JavaScript/Building_blocks/Looping_code) are required, feel free to choose an appropriate loop out of the available ones ([`for`](/fr/docs/Web/JavaScript/Reference/Statements/for), [`for...of`](/fr/docs/Web/JavaScript/Reference/Statements/for...of), [`while`](/fr/docs/Web/JavaScript/Reference/Statements/while), etc.) Just make sure to keep the code as understandable as possible.
 
-<p>Lorsque vous utilisez des boucles <code>for</code>/<code>for...of</code>, veillez à définir correctement l'initialisateur, avec un mot clé <code>let</code> :</p>
+Lorsque vous utilisez des boucles `for`/`for...of`, veillez à définir correctement l'initialisateur, avec un mot clé `let` :
 
-<pre class="brush: js example-good">let cats = ['Athena', 'Luna'];
+```js example-good
+let cats = ['Athena', 'Luna'];
 for(let i of cats) {
   console.log(i);
 }
-</pre>
+```
 
-<p>Pas</p>
+Pas
 
-<pre class="brush: js example-bad">let cats = ['Athena', 'Luna'];
+```js example-bad
+let cats = ['Athena', 'Luna'];
 for(i of cats) {
   console.log(i);
 }
-</pre>
+```
 
-<p>Gardez également à l'esprit :</p>
+Gardez également à l'esprit :
 
-<ul>
- <li>Il ne doit y avoir <em>aucun espace</em> entre un mot-clé de boucle et sa parenthèse ouvrante.</li>
- <li>Il doit y avoir <em>un espace</em> entre les parenthèses et l'accolade ouvrante.</li>
-</ul>
+- Il ne doit y avoir _aucun espace_ entre un mot-clé de boucle et sa parenthèse ouvrante.
+- Il doit y avoir _un espace_ entre les parenthèses et l'accolade ouvrante.
 
-<h3 id="Switch_statements">Les instructions switch</h3>
+### Les instructions switch
 
-<p>Formatez les instructions <code>switch</code> comme suit :</p>
+Formatez les instructions `switch` comme suit :
 
-<pre class="brush: js example-good">let expr = 'Papayes';
+```js example-good
+let expr = 'Papayes';
 switch(expr) {
   case 'Oranges':
     console.log('Les oranges sont à 1,10 € le kilo.');
@@ -327,93 +352,106 @@ switch(expr) {
     break;
   default:
     console.log('Désolé, nous n'avons plus de ' + expr + '.');
-}</pre>
+}
+```
 
-<h2 id="Functions_and_objects">Fonctions et objets</h2>
+## Fonctions et objets
 
-<h3 id="Function_naming">Nommage des fonctions</h3>
+### Nommage des fonctions
 
-<p>Pour les noms de fonctions, utilisez la casse minuscule au format chameau « lowevCamelCase » et, le cas échéant, des noms concis, lisibles par l'homme et sémantiques.</p>
+Pour les noms de fonctions, utilisez la casse minuscule au format chameau « lowevCamelCase » et, le cas échéant, des noms concis, lisibles par l'homme et sémantiques.
 
-<p>Par exemple :</p>
+Par exemple :
 
-<pre class="brush: js example-good">function sayHello() {
+```js example-good
+function sayHello() {
   alert('Bonjour !');
-};</pre>
+};
+```
 
-<p>En évitant de faire :</p>
+En évitant de faire :
 
-<pre class="brush: js example-bad">function SayHello() {
+```js example-bad
+function SayHello() {
   alert('Bonjour !');
 };
 
 function notVeryObviousName() {
   alert('Bonjour !');
 };
-</pre>
+```
 
-<div class="note">
-  <p><strong>Note :</strong> Le seul endroit où il est acceptable de ne pas utiliser des noms sémantiques lisibles par l'homme est lorsqu'une convention reconnue très courante existe, comme l'utilisation de <code>i</code>, <code>j</code>, etc. pour les itérateurs de boucle.</p>
-</div>
+> **Note :** Le seul endroit où il est acceptable de ne pas utiliser des noms sémantiques lisibles par l'homme est lorsqu'une convention reconnue très courante existe, comme l'utilisation de `i`, `j`, etc. pour les itérateurs de boucle.
 
-<h3 id="Defining_functions">Définition des fonctions</h3>
+### Définition des fonctions
 
-<p>Dans la mesure du possible, utilisez la déclaration <code>fonction</code> pour définir des fonctions sur des expressions de fonction :</p>
+Dans la mesure du possible, utilisez la déclaration `fonction` pour définir des fonctions sur des expressions de fonction :
 
-<p>Faites comme ça :</p>
+Faites comme ça :
 
-<pre class="brush: js example-good">function sum(a, b) {
+```js example-good
+function sum(a, b) {
   return a + b;
-}</pre>
+}
+```
 
-<p>Pas comme ça :</p>
+Pas comme ça :
 
-<pre class="brush: js example-bad">let sum = function(a, b) {
+```js example-bad
+let sum = function(a, b) {
   return a + b;
-}</pre>
+}
+```
 
-<p>Lorsque vous utilisez des fonctions anonymes à l'intérieur d'une méthode qui requiert une fonction comme paramètre, il est acceptable (mais pas obligatoire) d'utiliser une fonction flèche pour rendre le code plus court et plus propre.</p>
+Lorsque vous utilisez des fonctions anonymes à l'intérieur d'une méthode qui requiert une fonction comme paramètre, il est acceptable (mais pas obligatoire) d'utiliser une fonction flèche pour rendre le code plus court et plus propre.
 
-<p>Donc, au lieu de ça :</p>
+Donc, au lieu de ça :
 
-<pre class="brush: js example-good">const array1 = [1, 2, 3, 4];
+```js example-good
+const array1 = [1, 2, 3, 4];
 let sum = array.reduce(function(a, b) {
   return a + b;
-});</pre>
+});
+```
 
-<p>vous pourriez écrire ceci :</p>
+vous pourriez écrire ceci :
 
-<pre class="brush: js example-good">const array = [1, 2, 3, 4];
-let sum = array.reduce((a, b) =&gt;
+```js example-good
+const array = [1, 2, 3, 4];
+let sum = array.reduce((a, b) =>
   a + b
-);</pre>
+);
+```
 
-<p>N'oubliez pas non plus :</p>
+N'oubliez pas non plus :
 
-<ul>
- <li>Il ne doit y avoir <em>aucun espace</em> entre un nom de fonction et sa parenthèse ouvrante.</li>
- <li>Il doit y avoir <em>un espace</em> entre les parenthèses et l'accolade ouvrante.</li>
-</ul>
+- Il ne doit y avoir _aucun espace_ entre un nom de fonction et sa parenthèse ouvrante.
+- Il doit y avoir _un espace_ entre les parenthèses et l'accolade ouvrante.
 
-<h3 id="Creating_objects">Création d'objets</h3>
+### Création d'objets
 
-<p>Utilisez des littéraux - et non des constructeurs - pour créer des objets généraux (c'est-à-dire lorsque les classes ne sont pas concernées) :</p>
+Utilisez des littéraux - et non des constructeurs - pour créer des objets généraux (c'est-à-dire lorsque les classes ne sont pas concernées) :
 
-<p>Par exemple :</p>
+Par exemple :
 
-<pre class="brush: js example-good">let myObject = { };</pre>
+```js example-good
+let myObject = { };
+```
 
-<p>Et pas :</p>
+Et pas :
 
-<pre class="brush: js example-bad">let myObject = new Object();</pre>
+```js example-bad
+let myObject = new Object();
+```
 
-<h3 id="Object_classes">Classes d'objets</h3>
+### Classes d'objets
 
-<p>Utilisez la syntaxe de classe ES pour les objets, et non les constructeurs à l'ancienne.</p>
+Utilisez la syntaxe de classe ES pour les objets, et non les constructeurs à l'ancienne.
 
-<p>À titre d'exemples :</p>
+À titre d'exemples :
 
-<pre class="brush: js example-good">class Person {
+```js example-good
+class Person {
   constructor(name, age, gender) {
     this.name = name;
     this.age = age;
@@ -423,79 +461,94 @@ let sum = array.reduce((a, b) =&gt;
   greeting() {
     console.log(`Salut ! Je m'appelle ${this.name}`);
   };
-}</pre>
+}
+```
 
-<p>Utilisez <code>extends</code> pour l'héritage :</p>
+Utilisez `extends` pour l'héritage :
 
-<pre class="brush: js example-good">class Teacher extends Person {
+```js example-good
+class Teacher extends Person {
   ...
-}</pre>
+}
+```
 
-<h3 id="Object_naming">Nommage des objets</h3>
+### Nommage des objets
 
-<p>Lorsque vous définissez une classe d'objets (comme ci-dessus), utilisez l'écriture de casse au format chameau en majuscule « UpperCamelCase » (également connue sous le nom de « PascalCasing ») pour le nom de la classe, et la casse en minuscule « lowerCamelCase » pour les noms des propriétés et des méthodes de l'objet.</p>
+Lorsque vous définissez une classe d'objets (comme ci-dessus), utilisez l'écriture de casse au format chameau en majuscule « UpperCamelCase » (également connue sous le nom de « PascalCasing ») pour le nom de la classe, et la casse en minuscule « lowerCamelCase » pour les noms des propriétés et des méthodes de l'objet.
 
-<p>Lors de la définition d'une instance d'objet, qu'il s'agisse d'un littéral ou d'un constructeur, utilisez le lowerCamelCase pour le nom de l'instance :</p>
+Lors de la définition d'une instance d'objet, qu'il s'agisse d'un littéral ou d'un constructeur, utilisez le lowerCamelCase pour le nom de l'instance :
 
-<pre class="brush: js example-good">let hanSolo = new Person('Han Solo', 25, 'male');
+```js example-good
+let hanSolo = new Person('Han Solo', 25, 'male');
 
 let hanSolo = {
   name: 'Han Solo',
   age: 25,
   gender: 'male'
-}</pre>
+}
+```
 
-<h2 id="Arrays">Tableaux</h2>
+## Tableaux
 
-<h3 id="Creating_arrays">Création de tableaux</h3>
+### Création de tableaux
 
-<p>Utilisez des littéraux - et non des constructeurs - pour créer des tableaux :</p>
+Utilisez des littéraux - et non des constructeurs - pour créer des tableaux :
 
-<p>Comme ceci :</p>
+Comme ceci :
 
-<pre class="brush: js example-good">let myArray = [ ];</pre>
+```js example-good
+let myArray = [ ];
+```
 
-<p>Pas comme ça :</p>
+Pas comme ça :
 
-<pre class="brush: js example-bad">let myArray = new Array(length);</pre>
+```js example-bad
+let myArray = new Array(length);
+```
 
-<h3 id="Adding_to_an_array">Ajout à un tableau</h3>
+### Ajout à un tableau
 
-<p>Pour ajouter des éléments à un tableau, utilisez <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/push">push()</a></code>, et non l'affectation directe. Étant donné le tableau suivant :</p>
+Pour ajouter des éléments à un tableau, utilisez [`push()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/push), et non l'affectation directe. Étant donné le tableau suivant :
 
-<pre class="brush: js">const pets = [];</pre>
+```js
+const pets = [];
+```
 
-<p>faites ça :</p>
+faites ça :
 
-<pre class="brush: js example-good">pets.push('cat');</pre>
+```js example-good
+pets.push('cat');
+```
 
-<p>et pas ça :</p>
+et pas ça :
 
-<pre class="brush: js example-bad">pets[pets.length] = 'cat';</pre>
+```js example-bad
+pets[pets.length] = 'cat';
+```
 
-<h2 id="Error_handling">Traitement des erreurs</h2>
+## Traitement des erreurs
 
-<p>Si certains états de votre programme lancent des erreurs non attrapées, ils interrompent l'exécution et réduisent potentiellement l'utilité de l'exemple. Vous devriez donc attraper les erreurs en utilisant un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> :</p>
+Si certains états de votre programme lancent des erreurs non attrapées, ils interrompent l'exécution et réduisent potentiellement l'utilité de l'exemple. Vous devriez donc attraper les erreurs en utilisant un bloc [`try...catch`](/fr/docs/Web/JavaScript/Reference/Statements/try...catch) :
 
-<pre class="brush: js example-good">try {
+```js example-good
+try {
   console.log(results);
 }
 catch(e) {
   console.error(e);
-}</pre>
+}
+```
 
-<h2 id="Good_JavaScript_examples_on_MDN">De bons exemples de JavaScript sur MDN</h2>
+## De bons exemples de JavaScript sur MDN
 
-<p>Vous pouvez trouver de bons extraits de JavaScript, concis et significatifs, en haut de nos pages <a href="/fr/docs/Web/JavaScript/Reference">Référence du langage JavaScript</a> - parcourez-les pour en trouver.</p>
+Vous pouvez trouver de bons extraits de JavaScript, concis et significatifs, en haut de nos pages [Référence du langage JavaScript](/fr/docs/Web/JavaScript/Reference) - parcourez-les pour en trouver.
 
-<p>Nos exemples interactifs (et autres) sont généralement rédigés de manière à suivre les directives ci-dessus, mais sachez qu'ils peuvent différer à certains endroits, car ils ont été rédigés pour la plupart avant que les directives ne soient nouvellement rédigées.</p>
+Nos exemples interactifs (et autres) sont généralement rédigés de manière à suivre les directives ci-dessus, mais sachez qu'ils peuvent différer à certains endroits, car ils ont été rédigés pour la plupart avant que les directives ne soient nouvellement rédigées.
 
-<p>En ce qui concerne les exemples d'API, nous aimerions mettre en avant quelques exemples qui nous semblent bons :</p>
+En ce qui concerne les exemples d'API, nous aimerions mettre en avant quelques exemples qui nous semblent bons :
 
-<ul>
-  <li><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch#examples">Exemples de <code>fetch()</code></a></li>
-  <li><a href="/fr/docs/Web/API/CanvasRenderingContext2D/fillRect#examples">Exemples de <code>fillRect()</code></a> (les exemples de Canvas 2D sont généralement bons, bien qu'ils utilisent toujours l'ancienne déclaration <code>var</code>).</li>
-  <li><a href="/fr/docs/Web/API/PaymentRequest/show">Payment Request API <code>show()</code></a> (Les exemples de <a href="/fr/docs/Web/API/PaymentRequest"><code>PaymentRequest</code></a> sont généralement assez bons).</li>
-  <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utilisations de l'API Web Audio</a> (les bonnes pratiques générales en matière de HTML, CSS et JavaScript, ainsi qu'une bonne démonstration de l'utilisation des extraits et des liens vers des exemples complets ailleurs).</li>
-  <li><a href="/fr/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API">Utilisations de l'API Media Capabilities</a> (des bonnes pratiques plus générales pour l'utilisation des extraits de code dans un guide).</li>
-</ul>
+- [Exemples de `fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch#examples)
+- [Exemples de `fillRect()`](/fr/docs/Web/API/CanvasRenderingContext2D/fillRect#examples) (les exemples de Canvas 2D sont généralement bons, bien qu'ils utilisent toujours l'ancienne déclaration `var`).
+- [Payment Request API `show()`](/fr/docs/Web/API/PaymentRequest/show) (Les exemples de [`PaymentRequest`](/fr/docs/Web/API/PaymentRequest) sont généralement assez bons).
+- [Utilisations de l'API Web Audio](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) (les bonnes pratiques générales en matière de HTML, CSS et JavaScript, ainsi qu'une bonne démonstration de l'utilisation des extraits et des liens vers des exemples complets ailleurs).
+- [Utilisations de l'API Media Capabilities](/fr/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API) (des bonnes pratiques plus générales pour l'utilisation des extraits de code dans un guide).
diff --git a/files/fr/mdn/guidelines/code_guidelines/shell/index.md b/files/fr/mdn/guidelines/code_guidelines/shell/index.md
index a3a1cba4b0..74f9a25912 100644
--- a/files/fr/mdn/guidelines/code_guidelines/shell/index.md
+++ b/files/fr/mdn/guidelines/code_guidelines/shell/index.md
@@ -9,29 +9,28 @@ tags:
   - Shell
 translation_of: MDN/Guidelines/Code_guidelines/Shell
 ---
-<div>{{MDNSidebar}}</div>
+{{MDNSidebar}}
 
-<p>Les directives suivantes expliquent comment rédiger des exemples de lignes de commande sur MDN.</p>
+Les directives suivantes expliquent comment rédiger des exemples de lignes de commande sur MDN.
 
-<h2 id="Shell_prompts_in_brief">Les commandes Shell en bref</h2>
+## Les commandes Shell en bref
 
-<p>Un <i>shell</i> est un programme qui attend que vous tapiez une commande et que vous appuyiez sur la touche retour. Pour indiquer les commandes que vous devez taper, la documentation MDN les répertorie dans un bloc de code, similaire aux exemples de code. Un tel bloc ressemble à ceci :</p>
+Un _shell_ est un programme qui attend que vous tapiez une commande et que vous appuyiez sur la touche retour. Pour indiquer les commandes que vous devez taper, la documentation MDN les répertorie dans un bloc de code, similaire aux exemples de code. Un tel bloc ressemble à ceci :
 
-<pre class="brush: bash example-good"># Cela peut prendre un certain temps…
+```bash example-good
+# Cela peut prendre un certain temps…
 hg clone https://hg.mozilla.org/mozilla-central/ firefox
-cd firefox</pre>
+cd firefox
+```
 
-<h2 id="Guidelines">Directives</h2>
+## Directives
 
-<p>Il existe quelques directives à suivre lors de l'écriture d'un bloc de code shell :</p>
+Il existe quelques directives à suivre lors de l'écriture d'un bloc de code shell :
 
-<ul>
- <li>N'incluez pas de "$" ou de "&gt;" au début d'une instruction shell. Cela perturbe plus qu'il n'aide et n'est pas utile pour copier les instructions.</li>
- <li>Les commentaires commencent par "#".</li>
- <li>Choisissez la coloration syntaxique "bash".</li>
-</ul>
+- N'incluez pas de "$" ou de ">" au début d'une instruction shell. Cela perturbe plus qu'il n'aide et n'est pas utile pour copier les instructions.
+- Les commentaires commencent par "#".
+- Choisissez la coloration syntaxique "bash".
 
-<h2 id="Good_shell_prompt_examples_on_MDN">De bons exemples de commandes shell sur le MDN</h2>
-
-<p>Nos <a href="/fr/docs/Learn/Server-side/Django">Documents de développement côté serveur de Django</a> montrent une bonne pratique de présentation des commandes de l'invite shell, etc. sur le MDN. Regardez <a href="/fr/docs/Learn/Server-side/Django/development_environment">Configurer un environnement de développement Django</a> par exemple.</p>
+## De bons exemples de commandes shell sur le MDN
 
+Nos [Documents de développement côté serveur de Django](/fr/docs/Learn/Server-side/Django) montrent une bonne pratique de présentation des commandes de l'invite shell, etc. sur le MDN. Regardez [Configurer un environnement de développement Django](/fr/docs/Learn/Server-side/Django/development_environment) par exemple.