convert content to md

229 files changed, 27441 insertions, 25223 deletions

diff --git a/files/fr/web/html/applying_color/index.md b/files/fr/web/html/applying_color/index.md
index ea1e73ea67..ae03220e48 100644
--- a/files/fr/web/html/applying_color/index.md
+++ b/files/fr/web/html/applying_color/index.md
@@ -15,163 +15,150 @@ tags:
 translation_of: Web/HTML/Applying_color
 original_slug: Web/HTML/Appliquer_des_couleurs
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>La couleur fait partie intégrante des moyens d'expressions. Lorsqu'on écrit un site web, il est naturel d'y ajouter des couleurs dans la mise en forme. Avec <a href="/fr/docs/Web/CSS">CSS</a>, il existe de nombreuses façons d'ajouter de la couleur aux <a href="/fr/docs/Web/HTML/Element">éléments</a> <a href="/fr/docs/Web/HTML">HTML</a> afin d'obtenir le résultat souhaité. Cet article est une introduction détaillée aux différentes méthodes permettant d'appliquer des couleurs CSS en HTML.</p>
+La couleur fait partie intégrante des moyens d'expressions. Lorsqu'on écrit un site web, il est naturel d'y ajouter des couleurs dans la mise en forme. Avec [CSS](/fr/docs/Web/CSS), il existe de nombreuses façons d'ajouter de la couleur aux [éléments](/fr/docs/Web/HTML/Element) [HTML](/fr/docs/Web/HTML) afin d'obtenir le résultat souhaité. Cet article est une introduction détaillée aux différentes méthodes permettant d'appliquer des couleurs CSS en HTML.
 
-<p>L'ajout de couleur à un document HTML s'avère assez simple et permet de colorer presque tous les éléments.</p>
+L'ajout de couleur à un document HTML s'avère assez simple et permet de colorer presque tous les éléments.
 
-<p>Nous allons aborder la plupart des points que vous devez connaître lorsque vous utilisez des couleurs, y compris une <a href="#things_that_can_have_color">liste de ce que vous pouvez colorer et des propriétés CSS concernées</a>, <a href="#how_to_describe_a_color">comment décrire une couleur</a>, et comment <a href="#using_color">utiliser les couleurs à la fois dans les feuilles de style et dans les scripts</a>. Nous verrons également comment <a href="#letting_the_user_pick_a_color">permettre à l'utilisateur de choisir une couleur</a>.</p>
+Nous allons aborder la plupart des points que vous devez connaître lorsque vous utilisez des couleurs, y compris une [liste de ce que vous pouvez colorer et des propriétés CSS concernées](#things_that_can_have_color), [comment décrire une couleur](#how_to_describe_a_color), et comment [utiliser les couleurs à la fois dans les feuilles de style et dans les scripts](#using_color). Nous verrons également comment [permettre à l'utilisateur de choisir une couleur](#letting_the_user_pick_a_color).
 
-<p>Ensuite, nous terminerons avec une brève discussion sur <a href="#using_color_wisely">l'utilisation judicieuse des couleurs</a> : comment sélectionner les couleurs adéquates tout en gardant à l'esprit les besoins des personnes daltoniennes par exemple.</p>
+Ensuite, nous terminerons avec une brève discussion sur [l'utilisation judicieuse des couleurs](#using_color_wisely) : comment sélectionner les couleurs adéquates tout en gardant à l'esprit les besoins des personnes daltoniennes par exemple.
 
-<h2 id="Things_that_can_have_color">Ce qui peut être coloré</h2>
+## Ce qui peut être coloré
 
-<p>On peut appliquer une couleur sur chaque élément HTML. Voyons plutôt quelles sont les choses que l'on peut dessiner sur les éléments : le texte, la bordure, etc. Pour chacune de ces choses, nous verrons la liste des propriétés CSS qui permettent de les colorer.</p>
+On peut appliquer une couleur sur chaque élément HTML. Voyons plutôt quelles sont les choses que l'on peut dessiner sur les éléments : le texte, la bordure, etc. Pour chacune de ces choses, nous verrons la liste des propriétés CSS qui permettent de les colorer.
 
-<p>De façon générale, la propriété <a href="/fr/docs/Web/CSS/color"><code>color</code></a> permet de définir la couleur de premier plan pour le contenu d'un élément HTML et la propriété <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> permet de définir la couleur utilisée pour l'arrière-plan de l'élément. Ces propriétés peuvent être utilisées sur la quasi-totalité des éléments HTML.</p>
+De façon générale, la propriété [`color`](/fr/docs/Web/CSS/color) permet de définir la couleur de premier plan pour le contenu d'un élément HTML et la propriété [`background-color`](/fr/docs/Web/CSS/background-color) permet de définir la couleur utilisée pour l'arrière-plan de l'élément. Ces propriétés peuvent être utilisées sur la quasi-totalité des éléments HTML.
 
-<h3 id="Text">Texte</h3>
+### Texte
 
-<p>Lorsqu'un élément est affiché à l'écran, les propriétés suivantes déterminent la couleur du texte, celle de son arrière-plan et celle des décorations.</p>
+Lorsqu'un élément est affiché à l'écran, les propriétés suivantes déterminent la couleur du texte, celle de son arrière-plan et celle des décorations.
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/color"><code>color</code></a></dt>
- <dd>Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que <a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals#font_style_font_weight_text_transform_and_text_decoration">ses décorations</a> (tels que le soulignement, le surlignement, les rayures, etc.).</dd>
- <dt><a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a></dt>
- <dd>Cette propriété correspondra à la couleur utilisée en arrière-plan du texte.</dd>
- <dt><a href="/fr/docs/Web/CSS/text-shadow"><code>text-shadow</code></a></dt>
- <dd>Cette propriété permet d'ajouter un effet d'ombre au texte. Parmi les options de cette ombre, on a la couleur de base de l'ombre (qui participe au flou et qui est fusionnée avec l'arrière-plan selon les autres paramètres. Voir <a href="/fr/docs/Learn/CSS/Styling_text/Fundamentals#text_drop_shadows">ce paragraphe</a> pour en savoir plus.</dd>
- <dt><a href="/fr/docs/Web/CSS/text-decoration-color"><code>text-decoration-color</code></a></dt>
- <dd>Par défaut, les décorations du texte (le soulignement, les rayures, etc.) utilise la propriété <code>color</code> pour leurs couleurs. Il est cependant possible de passer outre cette valeur et de fournir une couleur différente avec la propriété <code>text-decoration-color</code>.</dd>
- <dt><a href="/fr/docs/Web/CSS/text-emphasis-color"><code>text-emphasis-color</code></a></dt>
- <dd>Cette propriété correspondra à la couleur utilisée pour dessiner les symboles d'emphase utilisés à côté des caractères du texte. Ces symboles sont principalement utilisés dans des textes écrits dans des langues d'Asie orientale.</dd>
- <dt><a href="/fr/docs/Web/CSS/caret-color"><code>caret-color</code></a></dt>
- <dd>Cette propriété correspondra à la couleur utilisée pour dessiner le curseur de saisie de texte dans l'élément. Cette propriété est uniquement pertinente pour les éléments qui sont éditables (par exemple <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a> ou les éléments dont l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-contenteditable"><code>contenteditable</code></a> est activé).</dd>
-</dl>
+- [`color`](/fr/docs/Web/CSS/color)
+  - : Cette propriété correspondra à la couleur utilisée pour dessiner le texte ainsi que [ses décorations](/fr/docs/Learn/CSS/Styling_text/Fundamentals#font_style_font_weight_text_transform_and_text_decoration) (tels que le soulignement, le surlignement, les rayures, etc.).
+- [`background-color`](/fr/docs/Web/CSS/background-color)
+  - : Cette propriété correspondra à la couleur utilisée en arrière-plan du texte.
+- [`text-shadow`](/fr/docs/Web/CSS/text-shadow)
+  - : Cette propriété permet d'ajouter un effet d'ombre au texte. Parmi les options de cette ombre, on a la couleur de base de l'ombre (qui participe au flou et qui est fusionnée avec l'arrière-plan selon les autres paramètres. Voir [ce paragraphe](/fr/docs/Learn/CSS/Styling_text/Fundamentals#text_drop_shadows) pour en savoir plus.
+- [`text-decoration-color`](/fr/docs/Web/CSS/text-decoration-color)
+  - : Par défaut, les décorations du texte (le soulignement, les rayures, etc.) utilise la propriété `color` pour leurs couleurs. Il est cependant possible de passer outre cette valeur et de fournir une couleur différente avec la propriété `text-decoration-color`.
+- [`text-emphasis-color`](/fr/docs/Web/CSS/text-emphasis-color)
+  - : Cette propriété correspondra à la couleur utilisée pour dessiner les symboles d'emphase utilisés à côté des caractères du texte. Ces symboles sont principalement utilisés dans des textes écrits dans des langues d'Asie orientale.
+- [`caret-color`](/fr/docs/Web/CSS/caret-color)
+  - : Cette propriété correspondra à la couleur utilisée pour dessiner le curseur de saisie de texte dans l'élément. Cette propriété est uniquement pertinente pour les éléments qui sont éditables (par exemple [`<input>`](/fr/docs/Web/HTML/Element/Input) et [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea) ou les éléments dont l'attribut [`contenteditable`](/fr/docs/Web/HTML/Global_attributes#attr-contenteditable) est activé).
 
-<h3 id="Boxes">Boîtes</h3>
+### Boîtes
 
-<p>Chaque élément est une boîte avec du contenu. Cette boîte possède un arrière-plan et une bordure, quel que soit le contenu qu'elle renferme</p>
+Chaque élément est une boîte avec du contenu. Cette boîte possède un arrière-plan et une bordure, quel que soit le contenu qu'elle renferme
 
-<dl>
- <dt><a href="#borders">Bordures</a></dt>
- <dd>Voir la section <a href="#borders">Bordures</a> pour la liste des propriétés CSS qui peuvent être utilisées pour colorer la bordure d'une boîte.</dd>
- <dt><a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a></dt>
- <dd>Cette propriété correspondra à la couleur d'arrière-plan, utilisée dans les zones où l'élément ne possède pas de contenu au premier plan.</dd>
- <dt><a href="/fr/docs/Web/CSS/column-rule-color"><code>column-rule-color</code></a></dt>
- <dd>Cette propriété correspondra à la couleur utilisée pour dessiner la ligne qui sépare des colonnes de texte.</dd>
- <dt><a href="/fr/docs/Web/CSS/outline-color"><code>outline-color</code></a></dt>
- <dd>Cette propriété correspondra à la couleur utilisée pour le contour de l'élément. Le contour est différent de la bordure, car il occupe un espace autour de la boîte et peut alors chevaucher le contenu d'une autre boîte. Le contour est généralement utilisé afin d'indiquer que l'élément a le focus et ainsi montrer quel élément reçoit les évènements de saisie.</dd>
-</dl>
+- [Bordures](#borders)
+  - : Voir la section [Bordures](#borders) pour la liste des propriétés CSS qui peuvent être utilisées pour colorer la bordure d'une boîte.
+- [`background-color`](/fr/docs/Web/CSS/background-color)
+  - : Cette propriété correspondra à la couleur d'arrière-plan, utilisée dans les zones où l'élément ne possède pas de contenu au premier plan.
+- [`column-rule-color`](/fr/docs/Web/CSS/column-rule-color)
+  - : Cette propriété correspondra à la couleur utilisée pour dessiner la ligne qui sépare des colonnes de texte.
+- [`outline-color`](/fr/docs/Web/CSS/outline-color)
+  - : Cette propriété correspondra à la couleur utilisée pour le contour de l'élément. Le contour est différent de la bordure, car il occupe un espace autour de la boîte et peut alors chevaucher le contenu d'une autre boîte. Le contour est généralement utilisé afin d'indiquer que l'élément a le focus et ainsi montrer quel élément reçoit les évènements de saisie.
 
-<h3 id="Borders">Bordures</h3>
+### Bordures
 
-<p>Tout élément possède une <a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">bordure</a> dessinée autour. Une bordure simple est représentée par une ligne dessinant un rectangle autour du contenu de l'élément. Vous pouvez lire <a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">la mise en forme des bordures grâce à CSS</a> afin d'approfondir ce sujet.</p>
+Tout élément possède une [bordure](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) dessinée autour. Une bordure simple est représentée par une ligne dessinant un rectangle autour du contenu de l'élément. Vous pouvez lire [la mise en forme des bordures grâce à CSS](/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) afin d'approfondir ce sujet.
 
-<p>Il est possible d'utiliser la propriété raccourcie <a href="/fr/docs/Web/CSS/border"><code>border</code></a> qui permet de configurer l'ensemble des caractéristiques d'une bordure en une seule règle (y compris les caractéristiques qui ne sont pas liées aux couleurs comme <a href="/fr/docs/Web/CSS/border-width">la largeur</a>, <a href="/fr/docs/Web/CSS/border-style">le style</a> (ligne pleine, pointillés, etc.) et ainsi de suite).</p>
+Il est possible d'utiliser la propriété raccourcie [`border`](/fr/docs/Web/CSS/border) qui permet de configurer l'ensemble des caractéristiques d'une bordure en une seule règle (y compris les caractéristiques qui ne sont pas liées aux couleurs comme [la largeur](/fr/docs/Web/CSS/border-width), [le style](/fr/docs/Web/CSS/border-style) (ligne pleine, pointillés, etc.) et ainsi de suite).
 
-<dl>
- <dt><a href="/fr/docs/Web/CSS/border-color"><code>border-color</code></a></dt>
- <dd>Cette propriété correspondra à la couleur qui sera utilisée pour chacun des côtés de la bordure.</dd>
- <dt><a href="/fr/docs/Web/CSS/border-left-color"><code>border-left-color</code></a>, <a href="/fr/docs/Web/CSS/border-right-color"><code>border-right-color</code></a>, <a href="/fr/docs/Web/CSS/border-top-color"><code>border-top-color</code></a>, <a href="/fr/docs/Web/CSS/border-bottom-color"><code>border-bottom-color</code></a></dt>
- <dd>Ces propriétés permettent d'indiquer une couleur différente pour chaque côté de la bordure de l'élément.</dd>
- <dt><a href="/fr/docs/Web/CSS/border-block-start-color"><code>border-block-start-color</code></a> et <a href="/fr/docs/Web/CSS/border-block-end-color"><code>border-block-end-color</code></a></dt>
- <dd>Ces propriétés permettent de définir les couleurs utilisées pour les côtés de la bordure dans l'axe orthogonal au sens d'écriture. Ainsi, si le texte est écrit en français (de gauche à droite), <code>border-block-start-color</code> permettra de définir le côté haut de la bordure et <code>border-block-end-color</code> le côté bas. Ces propriétés sont complétées par les propriétés <code>border-inline-*</code> qui agissent sur l'autre axe.</dd>
- <dt><a href="/fr/docs/Web/CSS/border-inline-start-color"><code>border-inline-start-color</code></a> et <a href="/fr/docs/Web/CSS/border-inline-end-color"><code>border-inline-end-color</code></a></dt>
- <dd>Ces propriétés permettent de définir les couleurs utilisées pour les bordures pour les côtés sur l'axe du sens d'écriture. Les côtés impactés dépendent donc des propriétés <a href="/fr/docs/Web/CSS/writing-mode"><code>writing-mode</code></a>, <a href="/fr/docs/Web/CSS/direction"><code>direction</code></a>, and <a href="/fr/docs/Web/CSS/text-orientation"><code>text-orientation</code></a> qui permettent, la plupart du temps, d'ajuster la directionnalité du texte en fonction de la langue utilisée. Si le texte est écrit de droite à gauche, <code>border-inline-start-color</code> correspondra à la couleur appliquée sur le côté droit.</dd>
-</dl>
+- [`border-color`](/fr/docs/Web/CSS/border-color)
+  - : Cette propriété correspondra à la couleur qui sera utilisée pour chacun des côtés de la bordure.
+- [`border-left-color`](/fr/docs/Web/CSS/border-left-color), [`border-right-color`](/fr/docs/Web/CSS/border-right-color), [`border-top-color`](/fr/docs/Web/CSS/border-top-color), [`border-bottom-color`](/fr/docs/Web/CSS/border-bottom-color)
+  - : Ces propriétés permettent d'indiquer une couleur différente pour chaque côté de la bordure de l'élément.
+- [`border-block-start-color`](/fr/docs/Web/CSS/border-block-start-color) et [`border-block-end-color`](/fr/docs/Web/CSS/border-block-end-color)
+  - : Ces propriétés permettent de définir les couleurs utilisées pour les côtés de la bordure dans l'axe orthogonal au sens d'écriture. Ainsi, si le texte est écrit en français (de gauche à droite), `border-block-start-color` permettra de définir le côté haut de la bordure et `border-block-end-color` le côté bas. Ces propriétés sont complétées par les propriétés `border-inline-*` qui agissent sur l'autre axe.
+- [`border-inline-start-color`](/fr/docs/Web/CSS/border-inline-start-color) et [`border-inline-end-color`](/fr/docs/Web/CSS/border-inline-end-color)
+  - : Ces propriétés permettent de définir les couleurs utilisées pour les bordures pour les côtés sur l'axe du sens d'écriture. Les côtés impactés dépendent donc des propriétés [`writing-mode`](/fr/docs/Web/CSS/writing-mode), [`direction`](/fr/docs/Web/CSS/direction), and [`text-orientation`](/fr/docs/Web/CSS/text-orientation) qui permettent, la plupart du temps, d'ajuster la directionnalité du texte en fonction de la langue utilisée. Si le texte est écrit de droite à gauche, `border-inline-start-color` correspondra à la couleur appliquée sur le côté droit.
 
-<h3 id="Other_ways_to_use_color">Autres méthodes pour utiliser de la couleur</h3>
+### Autres méthodes pour utiliser de la couleur
 
-<p>CSS n'est pas la seule technologie web qui gère des couleurs. Voici les autres technologies qui permettent d'apporter de la couleur sur une page web.</p>
+CSS n'est pas la seule technologie web qui gère des couleurs. Voici les autres technologies qui permettent d'apporter de la couleur sur une page web.
 
-<dl>
- <dt><a href="/fr/docs/Web/API/Canvas_API">L'API Canvas</a></dt>
- <dd>Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a>. Vous pouvez lire <a href="/fr/docs/Web/API/Canvas_API/Tutorial">le tutoriel sur l'API Canvas</a> pour en savoir plus.</dd>
- <dt><a href="/fr/docs/Web/SVG">SVG</a> (<em>Scalable Vector Graphics</em>)</dt>
- <dd>Ce format permet de dessiner des images en indiquant des commandes pour dessiner des formes, des motifs et des lignes afin de composer une image. Les commandes SVG sont construites dans un fichier XML et peuvent être embarquées dans une page web grâce à un élément <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>.</dd>
- <dt><a href="/fr/docs/Web/API/WebGL_API">WebGL</a></dt>
- <dd>L'API Web Graphics Library est une API basée sur OpenGL ES qui permet de dessiner en deux ou trois dimensions sur le Web. Voir <a href="/fr/docs/Web/API/WebGL_API/Tutorial">le tutoriel WebGL</a> afin d'en savoir plus.</dd>
-</dl>
+- [L'API Canvas](/fr/docs/Web/API/Canvas_API)
+  - : Cette API permet de dessiner des graphiques matriciels en deux dimensions à l'intérieur d'un élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas). Vous pouvez lire [le tutoriel sur l'API Canvas](/fr/docs/Web/API/Canvas_API/Tutorial) pour en savoir plus.
+- [SVG](/fr/docs/Web/SVG) (_Scalable Vector Graphics_)
+  - : Ce format permet de dessiner des images en indiquant des commandes pour dessiner des formes, des motifs et des lignes afin de composer une image. Les commandes SVG sont construites dans un fichier XML et peuvent être embarquées dans une page web grâce à un élément [`<img>`](/fr/docs/Web/HTML/Element/Img).
+- [WebGL](/fr/docs/Web/API/WebGL_API)
+  - : L'API Web Graphics Library est une API basée sur OpenGL ES qui permet de dessiner en deux ou trois dimensions sur le Web. Voir [le tutoriel WebGL](/fr/docs/Web/API/WebGL_API/Tutorial) afin d'en savoir plus.
 
-<h2 id="How_to_describe_a_color">Comment décrire une couleur</h2>
+## Comment décrire une couleur
 
-<p>Afin de représenter une couleur en CSS, il est nécessaire de trouver une méthode pour « traduire » le concept analogique de couleur dans un format numérique qu'un ordinateur pourra utiliser. Pour ce faire, on décompose la couleur en différentes composantes. Cela peut être la part de chaque couleur primaire ou bien la teinte et la luminosité de la couleur. Bref, il existe différentes façons de décrire une couleur en CSS.</p>
+Afin de représenter une couleur en CSS, il est nécessaire de trouver une méthode pour « traduire » le concept analogique de couleur dans un format numérique qu'un ordinateur pourra utiliser. Pour ce faire, on décompose la couleur en différentes composantes. Cela peut être la part de chaque couleur primaire ou bien la teinte et la luminosité de la couleur. Bref, il existe différentes façons de décrire une couleur en CSS.
 
-<p>Pour des informations plus détaillées sur chaque type de valeur, vous pouvez consulter la page de la référence CSS à propos de l'unité <a href="/fr/docs/Web/CSS/color_value"><code>&lt;color&gt;</code></a>.</p>
+Pour des informations plus détaillées sur chaque type de valeur, vous pouvez consulter la page de la référence CSS à propos de l'unité [`<color>`](/fr/docs/Web/CSS/color_value).
 
-<h3 id="Keywords">Mots-clés</h3>
+### Mots-clés
 
-<p>Un ensemble standard de noms de couleurs a été défini et il est possible d'utiliser l'un de ces mots-clés plutôt qu'une représentation numérique s'il existe un mot-clé pour la valeur qu'on souhaite utiliser. Les mots-clés désignant les couleurs regroupent les couleurs primaires et secondaires (tels que<code>red</code> pour rouge, <code>blue</code> pour bleu, <code>orange</code>), les tons de gris (allant de <code>black</code> pour noir à  <code>white</code> pour blanc et incluant des niveaux tels que <code>darkgray</code> (gris foncé) et <code>lightgrey</code> (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme <code>lightseagreen</code>, <code>cornflowerblue</code> ou <code>rebeccapurple</code>.</p>
+Un ensemble standard de noms de couleurs a été défini et il est possible d'utiliser l'un de ces mots-clés plutôt qu'une représentation numérique s'il existe un mot-clé pour la valeur qu'on souhaite utiliser. Les mots-clés désignant les couleurs regroupent les couleurs primaires et secondaires (tels que`red` pour rouge, `blue` pour bleu, `orange`), les tons de gris (allant de `black` pour noir à `white` pour blanc et incluant des niveaux tels que `darkgray` (gris foncé) et `lightgrey` (gris clair)). D'autres couleurs sont également disponibles avec un mot-clé comme `lightseagreen`, `cornflowerblue` ou `rebeccapurple`.
 
-<p>Vous pouvez consulter <a href="/fr/docs/Web/CSS/color_value#color_keywords">cette liste</a> pour connaître l'ensemble des mots-clés disponibles.</p>
+Vous pouvez consulter [cette liste](/fr/docs/Web/CSS/color_value#color_keywords) pour connaître l'ensemble des mots-clés disponibles.
 
-<h3 id="RGB_values">Valeurs RGB</h3>
+### Valeurs RGB
 
-<p>Il existe trois façons de représenter une couleur RGB en CSS.</p>
+Il existe trois façons de représenter une couleur RGB en CSS.
 
-<h4 id="Hexadecimal_string_notation">La notation hexadécimale</h4>
+#### La notation hexadécimale
 
-<p>On peut utiliser une chaîne de caractères avec des chiffres hexadécimaux afin de représenter chacune des composantes (rouge, verte, bleue) (soit, en anglais, <i>red</i>, <i>green</i>, <i>blue</i> qui donne l'acronyme RGB). On peut également décrire une quatrième composante pour l'opacité. Chaque composante est représentée par un nombre entre 0 et 255 (ce qui correspond à 0x00 et 0xFF en notation hexadécimale) ou par un nombre entre 0 et 15 (ce qui correspond à 0x0 et 0xF en notation hexadécimale). Toutes les composantes doivent être indiquées avec le même nombre de chiffres. Si c'est la notation à un seul chiffre qui est utilisée, la couleur finale sera calculée avec chaque composante doublée, autrement dit, <code>"#D"</code> sera converti en <code>"#DD"</code>.</p>
+On peut utiliser une chaîne de caractères avec des chiffres hexadécimaux afin de représenter chacune des composantes (rouge, verte, bleue) (soit, en anglais, _red_, _green_, _blue_ qui donne l'acronyme RGB). On peut également décrire une quatrième composante pour l'opacité. Chaque composante est représentée par un nombre entre 0 et 255 (ce qui correspond à 0x00 et 0xFF en notation hexadécimale) ou par un nombre entre 0 et 15 (ce qui correspond à 0x0 et 0xF en notation hexadécimale). Toutes les composantes doivent être indiquées avec le même nombre de chiffres. Si c'est la notation à un seul chiffre qui est utilisée, la couleur finale sera calculée avec chaque composante doublée, autrement dit, `"#D"` sera converti en `"#DD"`.
 
-<p>Lorsqu'on utilise une chaîne de caractères avec un code hexadécimal, la chaîne de caractères commence toujours par le caractère <code>"#"</code>. Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.</p>
+Lorsqu'on utilise une chaîne de caractères avec un code hexadécimal, la chaîne de caractères commence toujours par le caractère `"#"`. Le reste de la chaîne correspond aux chiffres hexadécimaux. L'utilisation des majuscules ou minuscules n'a pas d'importance.
 
-<dl>
- <dt><code>"#rrggbb"</code></dt>
- <dd>Cette forme indique une couleur opaque dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (<code>0xrr</code>), les deux chiffres suivants indiquent la composante verte (<code>0xgg</code>) et les deux derniers chiffres indiquent la composante bleue (<code>0xbb</code>).</dd>
- <dt><code>"#rrggbbaa"</code></dt>
- <dd>Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (<code>0xrr</code>), les deux chiffres suivants indiquent la composante verte (<code>0xgg</code>), les deux chiffres suivants indiquent la composante bleue (<code>0xbb</code>), enfin, les deux derniers chiffres indiquent la composante alpha (<code>0xaa</code>) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).</dd>
- <dt><code>"#rgb"</code></dt>
- <dd>Cette forme indique une couleur dont la composante rouge vaut <code>0xrr</code>, la composante verte vaut <code>0xgg</code> et dont la composante bleue vaut <code>0xbb</code>.</dd>
- <dt><code>"#rgba"</code></dt>
- <dd>Cette forme indique une couleur dont la composante rouge vaut <code>0xrr</code>, la composante verte vaut <code>0xgg</code> et dont la composante bleue vaut <code>0xbb</code>. Le canal alpha vaut <code>0xaa</code> (plus la valeur est faible, plus la couleur sera transparente).</dd>
-</dl>
+- `"#rrggbb"`
+  - : Cette forme indique une couleur opaque dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (`0xrr`), les deux chiffres suivants indiquent la composante verte (`0xgg`) et les deux derniers chiffres indiquent la composante bleue (`0xbb`).
+- `"#rrggbbaa"`
+  - : Cette forme indique une couleur dont les deux premiers chiffres hexadécimaux indiquent la composante rouge (`0xrr`), les deux chiffres suivants indiquent la composante verte (`0xgg`), les deux chiffres suivants indiquent la composante bleue (`0xbb`), enfin, les deux derniers chiffres indiquent la composante alpha (`0xaa`) utilisée pour indiquer l'opacité de la couleur (plus la valeur est faible, plus la couleur est transparente).
+- `"#rgb"`
+  - : Cette forme indique une couleur dont la composante rouge vaut `0xrr`, la composante verte vaut `0xgg` et dont la composante bleue vaut `0xbb`.
+- `"#rgba"`
+  - : Cette forme indique une couleur dont la composante rouge vaut `0xrr`, la composante verte vaut `0xgg` et dont la composante bleue vaut `0xbb`. Le canal alpha vaut `0xaa` (plus la valeur est faible, plus la couleur sera transparente).
 
-<p>Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères <code>"#0000ff"</code> ou <code>"#00f"</code>. Pour le rendre opaque à 25%, on utilisera <code>"#0000ff44"</code> ou <code>"#00f4"</code>.</p>
+Par exemple, on pourra représenter un bleu pur et opaque avec les chaînes de caractères `"#0000ff"` ou `"#00f"`. Pour le rendre opaque à 25%, on utilisera `"#0000ff44"` ou `"#00f4"`.
 
-<h4 id="RGB_functional_notation">La notation fonctionnelle RGB</h4>
+#### La notation fonctionnelle RGB
 
-<p>La notation fonctionnelle RGB permet, comme les chaînes de caractères hexadécimales, de représenter des couleurs avec leurs composantes rouge, verte, bleue et éventuellement avec une composante alpha pour l'opacité. Toutefois, au lieu d'utiliser une chaîne de caractères, on utilise ici la fonction CSS <a href="/fr/docs/Web/CSS/color_value#rgb_colors"><code>rgb()</code></a>. Cette fonction prend trois arguments pour chacune des composantes (dans cet ordre) rouge, verte et bleue. Un quatrième paramètre, optionnel, permet d'indiquer la valeur du canal alpha.</p>
+La notation fonctionnelle RGB permet, comme les chaînes de caractères hexadécimales, de représenter des couleurs avec leurs composantes rouge, verte, bleue et éventuellement avec une composante alpha pour l'opacité. Toutefois, au lieu d'utiliser une chaîne de caractères, on utilise ici la fonction CSS [`rgb()`](/fr/docs/Web/CSS/color_value#rgb_colors). Cette fonction prend trois arguments pour chacune des composantes (dans cet ordre) rouge, verte et bleue. Un quatrième paramètre, optionnel, permet d'indiquer la valeur du canal alpha.
 
-<p>Voici les valeurs qui peuvent être utilisées pour chacun de ces paramètres :</p>
+Voici les valeurs qui peuvent être utilisées pour chacun de ces paramètres :
 
-<dl>
- <dt><code>red</code>, <code>green</code> et <code>blue</code></dt>
- <dd>Chaque composante doit être un entier (type <a href="/fr/docs/Web/CSS/integer"><code>&lt;integer&gt;</code></a>) compris entre 0 et 255 (inclus) ou un pourcentage (type <a href="/fr/docs/Web/CSS/percentage"><code>&lt;percentage&gt;</code></a>) compris entre 0% et 100%.</dd>
- <dt><code>alpha</code></dt>
- <dd>Le canal alpha est un nombre entre 0.0 (la couleur est alors totalement transparente) et 1.0 (complètement opaque). On peut également utiliser un pourcentage où 0% correspondra à la valeur 0.0 et 100% correspondra à la valeur 1.0.</dd>
-</dl>
+- `red`, `green` et `blue`
+  - : Chaque composante doit être un entier (type [`<integer>`](/fr/docs/Web/CSS/integer)) compris entre 0 et 255 (inclus) ou un pourcentage (type [`<percentage>`](/fr/docs/Web/CSS/percentage)) compris entre 0% et 100%.
+- `alpha`
+  - : Le canal alpha est un nombre entre 0.0 (la couleur est alors totalement transparente) et 1.0 (complètement opaque). On peut également utiliser un pourcentage où 0% correspondra à la valeur 0.0 et 100% correspondra à la valeur 1.0.
 
-<p>Par exemple, on pourra représenter un rouge pur à moitié opaque grâce à <code>rgb(255, 0, 0, 0.5)</code> ou grâce à <code>rgb(100%, 0, 0, 50%)</code>.</p>
+Par exemple, on pourra représenter un rouge pur à moitié opaque grâce à `rgb(255, 0, 0, 0.5)` ou grâce à `rgb(100%, 0, 0, 50%)`.
 
-<h3 id="HSL_functional_notation">La notation fonctionnelle HSL</h3>
+### La notation fonctionnelle HSL
 
-<p>D'autres personnes préfèrent manipuler <a href="https://fr.wikipedia.org/wiki/Teinte_saturation_luminosit%C3%A9">la notation HSL ou aussi appelée « Teinte saturation luminosité »</a> (NDT : HSL signifie <em>Hue Saturation Lightness</em> en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle <code>hsl()</code> (qui fonctionne de façon analogue à la fonction <code>rgb()</code>).</p>
+D'autres personnes préfèrent manipuler [la notation HSL ou aussi appelée « Teinte saturation luminosité »](https://fr.wikipedia.org/wiki/Teinte_saturation_luminosit%C3%A9) (NDT : HSL signifie _Hue Saturation Lightness_ en anglais). Sur le Web, les couleurs HSL sont représentées grâce à la notation fonctionnelle `hsl()` (qui fonctionne de façon analogue à la fonction `rgb()`).
 
-<p>Le diagramme qui suit illustre un cylindre de couleur pour le modèle HSL : <i>Hue</i> (la teinte) définit la couleur sur un axe radial qui parcourt les couleurs du spectre visible. La saturation est un pourcentage de la teinte entre un gris total et la couleur de la teinte vive. Enfin, la luminosité permet d'avoir des couleurs plus sombres (noir pour une luminosité nulle ou blanc pour une luminosité maximale). Cette image a été créée par <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> sur <a href="https://www.wikipedia.org/">Wikipédia</a> et est distribuée avec la licence <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>.</p>
+Le diagramme qui suit illustre un cylindre de couleur pour le modèle HSL : _Hue_ (la teinte) définit la couleur sur un axe radial qui parcourt les couleurs du spectre visible. La saturation est un pourcentage de la teinte entre un gris total et la couleur de la teinte vive. Enfin, la luminosité permet d'avoir des couleurs plus sombres (noir pour une luminosité nulle ou blanc pour une luminosité maximale). Cette image a été créée par [SharkD](http://commons.wikimedia.org/wiki/User:SharkD) sur [Wikipédia](https://www.wikipedia.org/) et est distribuée avec la licence [CC BY-SA 3.0](http://creativecommons.org/licenses/by-sa/3.0).
 
-<img alt="Cylindre de couleur HSL" src="640px-hsl_color_solid_cylinder.png">
+![Cylindre de couleur HSL](640px-hsl_color_solid_cylinder.png)
 
-<p>La valeur de la teinte (<strong>H</strong>) est un angle qui commence au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type <a href="/fr/docs/Web/CSS/angle"><code>&lt;angle&gt;</code></a> et on peut utiliser différentes unités disponibles en CSS comme les degrés (<code>deg</code>), les radians (<code>rad</code>), les grades (<code>grad</code>) ou les tours (<code>turn</code>).</p>
+La valeur de la teinte (**H**) est un angle qui commence au rouge, parcourt le jaune, le vert, le cyan, le bleu et le magenta (avant de revenir à rouge avec un angle de 360°). Cette valeur identifie la teinte de base. La valeur utilisée est de type [`<angle>`](/fr/docs/Web/CSS/angle) et on peut utiliser différentes unités disponibles en CSS comme les degrés (`deg`), les radians (`rad`), les grades (`grad`) ou les tours (`turn`).
 
-<p>Ensuite, la saturation (<strong>S</strong>) indique la force de la teinte dans la couleur. Enfin, la luminosité (<strong>L</strong>) indique le niveau de gris de la couleur.</p>
+Ensuite, la saturation (**S**) indique la force de la teinte dans la couleur. Enfin, la luminosité (**L**) indique le niveau de gris de la couleur.
 
-<p>On peut faire une analogie avec la conception d'une couleur pour une peinture :</p>
+On peut faire une analogie avec la conception d'une couleur pour une peinture :
 
-<ol>
-  <li>On commence avec une peinture de base qui possède l'intensité la plus forte pour une couleur donnée (par exemple, le bleu le plus intense qui puisse être affiché) : c'est la teinte (<em>hue</em>) (<strong>H</strong>). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.</li>
-  <li>Ensuite, on choisit une peinture avec un niveau de gris qui la force de la couleur. Est-ce qu'on veut qu'elle soit claire ou sombre, voire complètement noire ? C'est la luminosité (<strong>L</strong>). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.</li>
-  <li>Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (<strong>S</strong>). Plus cette valeur est élevée, plus on utilise la couleur de base, plus cette valeur est faible et plus on utilise la peinture grise.</li>
-</ol>
+1.  On commence avec une peinture de base qui possède l'intensité la plus forte pour une couleur donnée (par exemple, le bleu le plus intense qui puisse être affiché) : c'est la teinte (_hue_) (**H**). En CSS, c'est un angle qui détermine la couleur parmi une roue de couleurs.
+2.  Ensuite, on choisit une peinture avec un niveau de gris qui la force de la couleur. Est-ce qu'on veut qu'elle soit claire ou sombre, voire complètement noire ? C'est la luminosité (**L**). En CSS, c'est un pourcentage, 0% indiquant une couleur noire et 100% une couleur blanche.
+3.  Enfin, avec ces deux peintures, on décide de la proportion de chacune pour le mélange final : c'est la saturation (**S**). Plus cette valeur est élevée, plus on utilise la couleur de base, plus cette valeur est faible et plus on utilise la peinture grise.
 
-<p>Il est également possible d'ajouter un canal alpha afin d'avoir une couleur partiellement (ou totalement) transparente.</p>
+Il est également possible d'ajouter un canal alpha afin d'avoir une couleur partiellement (ou totalement) transparente.
 
-<h4>Exemples avec HSL</h4>
+#### Exemples avec HSL
 
-<p>Voici quelques exemples utilisant la notation HSL :</p>
+Voici quelques exemples utilisant la notation HSL :
 
-<pre class="brush: css hidden">table {
+```css hidden
+table {
   border: 1px solid black;
   font: 16px "Open Sans", Helvetica, Arial, sans-serif;
   border-spacing: 0;
@@ -186,101 +173,107 @@ th, td {
 
 th {
   background-color: hsl(0, 0%, 75%);
-}</pre>
-
-<pre class="brush: html hidden">&lt;table&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th scope="col"&gt;Couleur en notation HSL&lt;/th&gt;
-      &lt;th scope="col"&gt;Exemple&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;code&gt;hsl(90deg, 100%, 50%)&lt;/code&gt;&lt;/td&gt;
-      &lt;td style="background-color: hsl(90deg, 100%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;code&gt;hsl(90, 100%, 50%)&lt;/code&gt;&lt;/td&gt;
-      &lt;td style="background-color: hsl(90, 100%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;code&gt;hsl(0.15turn, 50%, 75%)&lt;/code&gt;&lt;/td&gt;
-      &lt;td style="background-color: hsl(0.15turn, 50%, 75%);"&gt;&amp;nbsp;&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;code&gt;hsl(0.15turn, 90%, 75%)&lt;/code&gt;&lt;/td&gt;
-      &lt;td style="background-color: hsl(0.15turn, 90%, 75%);"&gt;&amp;nbsp;&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;code&gt;hsl(0.15turn, 90%, 50%)&lt;/code&gt;&lt;/td&gt;
-      &lt;td style="background-color: hsl(0.15turn, 90%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;td&gt;&lt;code&gt;hsl(270deg, 90%, 50%)&lt;/code&gt;&lt;/td&gt;
-      &lt;td style="background-color: hsl(270deg, 90%, 50%);"&gt;&amp;nbsp;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;</pre>
-
-<p>{{EmbedLiveSample("Exemples_avec_HSL", 300, 260)}}</p>
-
-<div class="note">
-  <p><strong>Note :</strong> Il est possible d'omettre l'unité pour la valeur de la teinte (<em>hue</em>), l'unité par défaut utilisée sera alors les degrés (<code>deg</code>).</p>
-</div>
-
-<h2 id="Using_color">Utiliser les couleurs</h2>
-
-<p>Maintenant qu'on connaît les différentes propriétés CSS, comment décrire une couleur et dans quel format, on peut assembler cela pour utiliser les couleurs dans un document web. Comme on l'a vu précédemment, de nombreuses choses peuvent être colorées. Pour ce faire, on peut utiliser deux mécanismes : une « <strong>feuille de style</strong> » et du code JavaScript pour modifier et ajouter des couleurs dynamiquement.</p>
-
-<h3 id="Specifying_colors_in_stylesheets">Indiquer les couleurs via une feuille de style</h3>
-
-<p>La façon la plus simple (et la plus fréquemment utilisée) pour appliquer des couleurs est d'utiliser une feuille de style CSS qui sera traitée par le navigateur au moment d'afficher les éléments à l'écran. Par la suite, nous verrons plusieurs exemples (sans pour autant exploiter toutes ces propriétés).</p>
-
-<p>Prenons un exemple et commençons par le résultat :</p>
-
-<div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 200)}}</div>
-
-<h4 id="HTML">HTML</h4>
-
-<p>Voici le fragment de code HTML utilisé pour cet exemple :</p>
-
-<pre class="brush: html">&lt;div class="conteneur"&gt;
-  &lt;div class="boite boiteGauche"&gt;
-    &lt;p&gt;
+}
+```
+
+```html hidden
+<table>
+  <thead>
+    <tr>
+      <th scope="col">Couleur en notation HSL</th>
+      <th scope="col">Exemple</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>hsl(90deg, 100%, 50%)</code></td>
+      <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td>
+    </tr>
+    <tr>
+      <td><code>hsl(90, 100%, 50%)</code></td>
+      <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td>
+    </tr>
+    <tr>
+      <td><code>hsl(0.15turn, 50%, 75%)</code></td>
+      <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td>
+    </tr>
+    <tr>
+      <td><code>hsl(0.15turn, 90%, 75%)</code></td>
+      <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td>
+    </tr>
+    <tr>
+      <td><code>hsl(0.15turn, 90%, 50%)</code></td>
+      <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td>
+    </tr>
+    <tr>
+      <td><code>hsl(270deg, 90%, 50%)</code></td>
+      <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+{{EmbedLiveSample("Exemples_avec_HSL", 300, 260)}}
+
+> **Note :** Il est possible d'omettre l'unité pour la valeur de la teinte (_hue_), l'unité par défaut utilisée sera alors les degrés (`deg`).
+
+## Utiliser les couleurs
+
+Maintenant qu'on connaît les différentes propriétés CSS, comment décrire une couleur et dans quel format, on peut assembler cela pour utiliser les couleurs dans un document web. Comme on l'a vu précédemment, de nombreuses choses peuvent être colorées. Pour ce faire, on peut utiliser deux mécanismes : une « **feuille de style** » et du code JavaScript pour modifier et ajouter des couleurs dynamiquement.
+
+### Indiquer les couleurs via une feuille de style
+
+La façon la plus simple (et la plus fréquemment utilisée) pour appliquer des couleurs est d'utiliser une feuille de style CSS qui sera traitée par le navigateur au moment d'afficher les éléments à l'écran. Par la suite, nous verrons plusieurs exemples (sans pour autant exploiter toutes ces propriétés).
+
+Prenons un exemple et commençons par le résultat :
+
+{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 200)}}
+
+#### HTML
+
+Voici le fragment de code HTML utilisé pour cet exemple :
+
+```html
+<div class="conteneur">
+  <div class="boite boiteGauche">
+    <p>
       Voici la première boîte.
-    &lt;/p&gt;
-  &lt;/div&gt;
-  &lt;div class="boite boiteDroite"&gt;
-    &lt;p&gt;
+    </p>
+  </div>
+  <div class="boite boiteDroite">
+    <p>
       Voici la seconde boîte.
-    &lt;/p&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+    </p>
+  </div>
+</div>
+```
 
-<p>Ce fragment est plutôt simple : on utilise un élément <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> qui enveloppe le contenu, constitué de deux <code>&lt;div&gt;</code>, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément <a href="/fr/docs/Web/HTML/Element/p"><code>&lt;p&gt;</code></a>).</p>
+Ce fragment est plutôt simple : on utilise un élément [`<div>`](/fr/docs/Web/HTML/Element/div) qui enveloppe le contenu, constitué de deux `<div>`, chacun avec une classe différente et contenant chacun un paragraphe (c'est-à-dire un élément [`<p>`](/fr/docs/Web/HTML/Element/p)).
 
-<p>Voyons ensuite la feuille de style CSS appliquée au bloc HTML précédent.</p>
+Voyons ensuite la feuille de style CSS appliquée au bloc HTML précédent.
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<p>Nous allons ici étudier la feuille de style en la décomposant, partie par partie.</p>
+Nous allons ici étudier la feuille de style en la décomposant, partie par partie.
 
-<pre class="brush: css">.conteneur {
+```css
+.conteneur {
   width: 620px;
   height: 110px;
   margin: 0;
   padding: 10px;
   border: 6px solid mediumturquoise;
-}</pre>
+}
+```
 
-<p>Le sélecteur de classe <code>.conteneur</code> permet d'appliquer des styles à l'élément <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> qui enveloppe le reste du contenu. Pour ce style, on indique une largeur avec la propriété <a href="/fr/docs/Web/CSS/width"><code>width</code></a> et une hauteur avec la propriété <a href="/fr/docs/Web/CSS/height"><code>height</code></a>, on définit aussi une marge et une zone de remplissage avec <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> et <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>.</p>
+Le sélecteur de classe `.conteneur` permet d'appliquer des styles à l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) qui enveloppe le reste du contenu. Pour ce style, on indique une largeur avec la propriété [`width`](/fr/docs/Web/CSS/width) et une hauteur avec la propriété [`height`](/fr/docs/Web/CSS/height), on définit aussi une marge et une zone de remplissage avec [`margin`](/fr/docs/Web/CSS/margin) et [`padding`](/fr/docs/Web/CSS/padding).
 
-<p>La règle la plus intéressante est celle où on manipule la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a> afin de dessiner une bordure sur l'extérieur de l'élément. Cette bordure sera une ligne pleine de 6 pixels avec la couleur <code>mediumturquoise</code>.</p>
+La règle la plus intéressante est celle où on manipule la propriété [`border`](/fr/docs/Web/CSS/border) afin de dessiner une bordure sur l'extérieur de l'élément. Cette bordure sera une ligne pleine de 6 pixels avec la couleur `mediumturquoise`.
 
-<p>Les deux boîtes colorées possèdent un certain nombre de propriétés communes. On utilise donc une classe : <code>.boite</code> pour laquelle on définit ces propriétés qui seront appliquées sur les deux éléments :</p>
+Les deux boîtes colorées possèdent un certain nombre de propriétés communes. On utilise donc une classe : `.boite` pour laquelle on définit ces propriétés qui seront appliquées sur les deux éléments :
 
-<pre class="brush: css">.boite {
+```css
+.boite {
   width: 290px;
   height: 100px;
   margin: 0;
@@ -289,86 +282,90 @@ th {
   display: flex;
   justify-content: center;
   align-items: center;
-}</pre>
+}
+```
 
-<p>Pour résumer, les styles ciblés par <code>.boite</code> indiquent la taille de la boîte, la configuration de la police de caractères utilisée, centrent le contenu des boîtes grâce <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout">aux boîtes flexibles CSS</a>. Pour cela, on utilise le mode d'affichage <code>flex</code> avec <a href="/fr/docs/Web/CSS/display"><code>display: flex</code></a> et on paramètre les propriétés <a href="/fr/docs/Web/CSS/justify-content"><code>justify-content</code></a> et <a href="/fr/docs/Web/CSS/align-items"><code>align-items</code></a> avec la valeur <code>center</code>. Ensuite, on crée une classe pour chacune des deux boîtes dont chacune définit les propriétés qui diffèrent entre ces éléments.</p>
+Pour résumer, les styles ciblés par `.boite` indiquent la taille de la boîte, la configuration de la police de caractères utilisée, centrent le contenu des boîtes grâce [aux boîtes flexibles CSS](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout). Pour cela, on utilise le mode d'affichage `flex` avec [`display: flex`](/fr/docs/Web/CSS/display) et on paramètre les propriétés [`justify-content`](/fr/docs/Web/CSS/justify-content) et [`align-items`](/fr/docs/Web/CSS/align-items) avec la valeur `center`. Ensuite, on crée une classe pour chacune des deux boîtes dont chacune définit les propriétés qui diffèrent entre ces éléments.
 
-<pre class="brush: css">.boiteGauche {
+```css
+.boiteGauche {
   float: left;
   background-color: rgb(245, 130, 130);
   outline: 2px solid darkred;
-}</pre>
+}
+```
 
-<p>La classe <code>.boiteGauche</code> permet de mettre en forme la boîte située à gauche et on l'utilise pour définir certaines couleurs :</p>
+La classe `.boiteGauche` permet de mettre en forme la boîte située à gauche et on l'utilise pour définir certaines couleurs :
 
-<ul>
-  <li>La couleur de l'arrière-plan est définie grâce à la propriété <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> pour laquelle on fournit la valeur <code>rgb(245, 130, 130)</code>.</li>
-  <li>Un contour est défini autour de la boîte grâce à la propriété <a href="/fr/docs/Web/CSS/outline"><code>outline</code></a>. Ici, ce contour est une ligne pleine, rouge foncée (le mot-clé <code>darkred</code>) de deux pixels.</li>
-  <li>On notera ici qu'on ne définit pas de couleur pour le texte. La valeur qui sera utilisée pour la propriété <a href="/fr/docs/Web/CSS/color"><code>color</code></a> sera celle qui est héritée par le plus proche élément englobant qui définit cette propriété. La couleur par défaut est le noir.</li>
-</ul>
+- La couleur de l'arrière-plan est définie grâce à la propriété [`background-color`](/fr/docs/Web/CSS/background-color) pour laquelle on fournit la valeur `rgb(245, 130, 130)`.
+- Un contour est défini autour de la boîte grâce à la propriété [`outline`](/fr/docs/Web/CSS/outline). Ici, ce contour est une ligne pleine, rouge foncée (le mot-clé `darkred`) de deux pixels.
+- On notera ici qu'on ne définit pas de couleur pour le texte. La valeur qui sera utilisée pour la propriété [`color`](/fr/docs/Web/CSS/color) sera celle qui est héritée par le plus proche élément englobant qui définit cette propriété. La couleur par défaut est le noir.
 
-<pre class="brush: css">.boiteDroite {
+```css
+.boiteDroite {
   float: right;
   background-color: hsl(270deg, 50%, 75%);
   outline: 4px dashed rgb(110, 20, 120);
   color: hsl(0deg, 100%, 100%);
   text-decoration: underline wavy #88ff88;
   text-shadow: 2px 2px 3px black;
-}</pre>
+}
+```
 
-<p>Enfin, la classe <code>.boiteDroite</code> décrit les propriétés de la boîte dessinée à droite. On configure cette boîte afin qu'elle flotte à droite de la boîte précédente. Ensuite, on paramètre les couleurs suivantes :</p>
+Enfin, la classe `.boiteDroite` décrit les propriétés de la boîte dessinée à droite. On configure cette boîte afin qu'elle flotte à droite de la boîte précédente. Ensuite, on paramètre les couleurs suivantes :
 
-<ul>
-  <li>La propriété <code>background-color</code> est définie avec la notation fonctionnelle HSL : <code>hsl(270deg, 50%, 75%)</code>. Cela correspond à un violet.</li>
-  <li>La propriété <code>outline</code> permet d'indiquer un contour de 4 pixels formé par une ligne pointillée dont la couleur est exprimée avec la notation fonctionnelle RGB <code>rgb(110, 20, 120)</code> (violet foncé).</li>
-  <li>La couleur de premier plan (c'est-à-dire celle utilisée pour le texte) est définie avec la propriété <a href="/fr/docs/Web/CSS/color"><code>color</code></a> et la valeur <code>hsl(0deg, 100%, 100%)</code> qui correspond au blanc.</li>
-  <li>On ajoute une ligne verte ondulée sous le texte avec <a href="/fr/docs/Web/CSS/text-decoration"><code>text-decoration</code></a>.</li>
-  <li>Enfin, on ajoute une ombre au texte avec la propriété <a href="/fr/docs/Web/CSS/text-shadow"><code>text-shadow</code></a> dont le paramètre de couleur vaut <code>black</code> (noir).</li>
-</ul>
+- La propriété `background-color` est définie avec la notation fonctionnelle HSL : `hsl(270deg, 50%, 75%)`. Cela correspond à un violet.
+- La propriété `outline` permet d'indiquer un contour de 4 pixels formé par une ligne pointillée dont la couleur est exprimée avec la notation fonctionnelle RGB `rgb(110, 20, 120)` (violet foncé).
+- La couleur de premier plan (c'est-à-dire celle utilisée pour le texte) est définie avec la propriété [`color`](/fr/docs/Web/CSS/color) et la valeur `hsl(0deg, 100%, 100%)` qui correspond au blanc.
+- On ajoute une ligne verte ondulée sous le texte avec [`text-decoration`](/fr/docs/Web/CSS/text-decoration).
+- Enfin, on ajoute une ombre au texte avec la propriété [`text-shadow`](/fr/docs/Web/CSS/text-shadow) dont le paramètre de couleur vaut `black` (noir).
 
-<h2 id="Letting_the_user_pick_a_color">Permettre à l'utilisateur de choisir une couleur</h2>
+## Permettre à l'utilisateur de choisir une couleur
 
-<p>Il existe différentes situations où l'on peut/doit permettre à l'utilisateur de sélectionner une couleur. Il peut s'agir d'une interface personnalisable, d'une application de dessin, d'une application d'édition où on peut choisir la couleur du texte, etc. Bien que, par le passé, il fût nécessaire d'implémenter son propre sélecteur de couleur, HTML fournit désormais aux navigateurs une façon homogène de le faire avec un élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-type"><code>type</code></a> vaut <code>"color"</code>.</p>
+Il existe différentes situations où l'on peut/doit permettre à l'utilisateur de sélectionner une couleur. Il peut s'agir d'une interface personnalisable, d'une application de dessin, d'une application d'édition où on peut choisir la couleur du texte, etc. Bien que, par le passé, il fût nécessaire d'implémenter son propre sélecteur de couleur, HTML fournit désormais aux navigateurs une façon homogène de le faire avec un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) dont l'attribut [`type`](/fr/docs/Web/HTML/Element/Input#attr-type) vaut `"color"`.
 
-<p>Lorsqu'on choisit une couleur via un élément <code>&lt;input&gt;</code>, la valeur stockée dans le document et envoyée via le formulaire est représentée avec une chaîne de caractères hexadécimale.</p>
+Lorsqu'on choisit une couleur via un élément `<input>`, la valeur stockée dans le document et envoyée via le formulaire est représentée avec une chaîne de caractères hexadécimale.
 
-<h3 id="Example_Picking_a_color">Exemple : sélectionner une couleur</h3>
+### Exemple : sélectionner une couleur
 
-<p>Prenons un exemple simple où l'utilisateur choisit une couleur qui est immédiatement appliquée sur la bordure de l'exemple. Une fois la couleur finale sélectionnée, la valeur du sélecteur de couleur est affichée.</p>
+Prenons un exemple simple où l'utilisateur choisit une couleur qui est immédiatement appliquée sur la bordure de l'exemple. Une fois la couleur finale sélectionnée, la valeur du sélecteur de couleur est affichée.
 
-<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p>
+{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}
 
-<div class="note">
-  <p><strong>Note :</strong> Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.</p>
-</div>
+> **Note :** Sur macOS, pour indiquer qu'on a fini de choisir la couleur, il faut fermer la fenêtre du sélecteur de couleur.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<p>Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteur de couleur avec un libellé associé (l'élément <a href="/fr/docs/Web/HTML/Element/Label"><code>&lt;label&gt;</code></a>) ainsi qu'un paragraphe (<a href="/fr/docs/Web/HTML/Element/p"><code>&lt;p&gt;</code></a>) vide dans lequel nous placerons plus tard du texte avec JavaScript.</p>
+Voici le fragment HTML qui permet de créer une boîte qui contient un sélecteur de couleur avec un libellé associé (l'élément [`<label>`](/fr/docs/Web/HTML/Element/Label)) ainsi qu'un paragraphe ([`<p>`](/fr/docs/Web/HTML/Element/p)) vide dans lequel nous placerons plus tard du texte avec JavaScript.
 
-<pre class="brush: html">&lt;div id="box"&gt;
-  &lt;label for="colorPicker"&gt;Couleur de la bordure :&lt;/label&gt;
-  &lt;input type="color" value="#8888ff" id="colorPicker"&gt;
-  &lt;p id="output"&gt;&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div id="box">
+  <label for="colorPicker">Couleur de la bordure :</label>
+  <input type="color" value="#8888ff" id="colorPicker">
+  <p id="output"></p>
+</div>
+```
 
-<h4 id="CSS_2">CSS</h4>
+#### CSS
 
-<p>La feuille CSS détermine la taille de la boîte et une mise en forme simple. La bordure mesure deux pixels de large (mais sera modifiée par le code JavaScript qui va suivre…).</p>
+La feuille CSS détermine la taille de la boîte et une mise en forme simple. La bordure mesure deux pixels de large (mais sera modifiée par le code JavaScript qui va suivre…).
 
-<pre class="brush: css">#box {
+```css
+#box {
   width: 500px;
   height: 200px;
   border: 2px solid rgb(245, 220, 225);
   padding: 4px 6px;
   font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
-}</pre>
+}
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<p>Le script est utilisé pour mettre à jour la couleur de la bordure afin que celle-ci corresponde à la valeur courante du sélecteur. On ajoute ensuite deux gestionnaires d'évènements pour « écouter » ce qui se passe avec l'élément <code><a href="/fr/docs/Web/HTML/Element/Input/color">&lt;input type="color"&gt;</a></code>.</p>
+Le script est utilisé pour mettre à jour la couleur de la bordure afin que celle-ci corresponde à la valeur courante du sélecteur. On ajoute ensuite deux gestionnaires d'évènements pour « écouter » ce qui se passe avec l'élément [`<input type="color">`](/fr/docs/Web/HTML/Element/Input/color).
 
-<pre class="brush: js">let colorPicker = document.getElementById("colorPicker");
+```js
+let colorPicker = document.getElementById("colorPicker");
 let box = document.getElementById("box");
 let output = document.getElementById("output");
 
@@ -380,130 +377,113 @@ colorPicker.addEventListener("input", function(event) {
 
 colorPicker.addEventListener("change", function(event) {
   output.innerText = "Couleur choisie : " + colorPicker.value;
-}, false);</pre>
+}, false);
+```
 
-<p>L'évènement <a href="/fr/docs/Web/API/HTMLElement/input_event"><code>input</code></a> est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.</p>
+L'évènement [`input`](/fr/docs/Web/API/HTMLElement/input_event) est envoyé chaque fois que la valeur de l'élément change, c'est-à-dire chaque fois que l'utilisateur ajuste la couleur via le sélecteur. Pour chacun de ces évènements, on modifie la couleur de la bordure afin qu'elle corresponde à celle du sélecteur.
 
-<p>L'évènement <a href="/fr/docs/Web/API/HTMLElement/change_event"><code>change</code></a> est reçu lors de la finalisation du choix de la couleur via le sélecteur. Lorsque cet évènement suvient, on modifie le contenu de l'élément <code>&lt;p&gt;</code> (le paragraphe) qui possède l'identifiant <code>"output"</code> en y ajoutant une chaîne de caractères qui décrit la couleur choisie.</p>
+L'évènement [`change`](/fr/docs/Web/API/HTMLElement/change_event) est reçu lors de la finalisation du choix de la couleur via le sélecteur. Lorsque cet évènement suvient, on modifie le contenu de l'élément `<p>` (le paragraphe) qui possède l'identifiant `"output"` en y ajoutant une chaîne de caractères qui décrit la couleur choisie.
 
-<h2 id="Using_color_wisely">L'art de choisir une couleur</h2>
+## L'art de choisir une couleur
 
-<p>Choisir les bonnes couleurs lors de la conception d'un site web peut s'avérer plus compliqué qu'il n'y paraît. Un mauvais choix de couleur peut nuire à l'attractivité du site voire empêcher les utilisateurs de consulter le contenu si le contraste est trop faible ou les couleurs trop criardes. Dans le pire des cas, le site peut être inutilisable à cause des couleurs choisies pour les personnes qui ont des handicaps visuels.</p>
+Choisir les bonnes couleurs lors de la conception d'un site web peut s'avérer plus compliqué qu'il n'y paraît. Un mauvais choix de couleur peut nuire à l'attractivité du site voire empêcher les utilisateurs de consulter le contenu si le contraste est trop faible ou les couleurs trop criardes. Dans le pire des cas, le site peut être inutilisable à cause des couleurs choisies pour les personnes qui ont des handicaps visuels.
 
-<h3 id="Finding_the_right_colors">Trouver les bonnes couleurs</h3>
+### Trouver les bonnes couleurs
 
-<p>Il existe des outils qui permettent de faciliter la sélection des couleurs. Bien qu'ils ne remplacent pas un bon designer, ils permettent au moins de commencer.</p>
+Il existe des outils qui permettent de faciliter la sélection des couleurs. Bien qu'ils ne remplacent pas un bon designer, ils permettent au moins de commencer.
 
-<h4 id="Base_color">La couleur de base</h4>
+#### La couleur de base
 
-<p>La première étape consiste à choisir la couleur de base. C'est la couleur principale qui participe à la définition du site web ou du sujet dont il est question. Par exemple, on associe la couleur jaune à La Poste, le bleu au ciel ou à quelque chose de marin, etc. Voici quelques idées (parmi les nombreuses qui existent) pour choisir une couleur de base :</p>
+La première étape consiste à choisir la couleur de base. C'est la couleur principale qui participe à la définition du site web ou du sujet dont il est question. Par exemple, on associe la couleur jaune à La Poste, le bleu au ciel ou à quelque chose de marin, etc. Voici quelques idées (parmi les nombreuses qui existent) pour choisir une couleur de base :
 
-<ul>
- <li>Une couleur naturellement associée au contenu : la couleur d'un produit ou une couleur rattachée à un concept ou une émotion dont il serait question sur le site.</li>
- <li>Naviguer parmi les sites existants et les bibliothèques d'image pour puiser de l'inspiration parmi les couleurs.</li>
-</ul>
+- Une couleur naturellement associée au contenu : la couleur d'un produit ou une couleur rattachée à un concept ou une émotion dont il serait question sur le site.
+- Naviguer parmi les sites existants et les bibliothèques d'image pour puiser de l'inspiration parmi les couleurs.
 
-<p>Une fois la couleur de base sélectionnée, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web <a href="http://www.colorzilla.com/">ColorZilla</a>, par exemple, propose une extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) qui permet d'utiliser une pipette pour identifier les couleurs utilisées à un endroit d'une page web. Cette extension permet également de mesurer la couleur moyenne des pixels d'une zone donnée.</p>
+Une fois la couleur de base sélectionnée, vous pouvez utiliser certaines extensions de navigateur pour « prélever » des couleurs existantes sur le web. Le site web [ColorZilla](http://www.colorzilla.com/), par exemple, propose une extension ([Chrome](http://www.colorzilla.com/chrome) / [Firefox](http://www.colorzilla.com/firefox)) qui permet d'utiliser une pipette pour identifier les couleurs utilisées à un endroit d'une page web. Cette extension permet également de mesurer la couleur moyenne des pixels d'une zone donnée.
 
-<div class="note">
-  <p><strong>Note :</strong> On peut s'apercevoir qu'un site contient plusieurs couleurs très proches les unes des autres, utiliser une « moyenne » permet alors de récupérer le ton principal sous la forme d'une seule couleur.</p>
-</div>
+> **Note :** On peut s'apercevoir qu'un site contient plusieurs couleurs très proches les unes des autres, utiliser une « moyenne » permet alors de récupérer le ton principal sous la forme d'une seule couleur.
 
-<h4 id="Fleshing_out_the_palette">Agrémenter la palette</h4>
+#### Agrémenter la palette
 
-<p>Une fois la couleur de base sélectionnée et identifiée, il existe de nombreux outils qui permettent de construire une palette de couleurs qui pourront être utilisées avec cette couleur de base. Ces outils utilisent la théorie des couleurs pour déterminer les couleurs appropriées. Certains de ces outils permettent également de voir les couleurs « filtrées » afin de visualiser ce qu'une personne daltonienne verrait.</p>
+Une fois la couleur de base sélectionnée et identifiée, il existe de nombreux outils qui permettent de construire une palette de couleurs qui pourront être utilisées avec cette couleur de base. Ces outils utilisent la théorie des couleurs pour déterminer les couleurs appropriées. Certains de ces outils permettent également de voir les couleurs « filtrées » afin de visualiser ce qu'une personne daltonienne verrait.
 
-<p>Voici quelques exemples (libres d'accès et gratuits au moment où nous écrivons ces lignes) de tels outils :</p>
+Voici quelques exemples (libres d'accès et gratuits au moment où nous écrivons ces lignes) de tels outils :
 
-<ul>
- <li><a href="/fr/docs/Web/CSS/CSS_Colors/Color_picker_tool">Le sélecteur de couleur MDN</a></li>
- <li><a href="http://paletton.com">Paletton</a> (en anglais)</li>
- <li><a href="https://color.adobe.com/fr/create/color-wheel">La roue des couleurs en ligne d'Adobe Color CC</a></li>
-</ul>
+- [Le sélecteur de couleur MDN](/fr/docs/Web/CSS/CSS_Colors/Color_picker_tool)
+- [Paletton](http://paletton.com) (en anglais)
+- [La roue des couleurs en ligne d'Adobe Color CC](https://color.adobe.com/fr/create/color-wheel)
 
-<p>Lorsque vous concevez votre palette de couleurs, gardez à l'esprit qu'en plus des couleurs générées par ces outils, il faudra vraisemblablement prévoir des couleurs neutres (telles que le blanc ou un ton de blanc, du noir ou un ton de noir et certaines nuances de gris).</p>
+Lorsque vous concevez votre palette de couleurs, gardez à l'esprit qu'en plus des couleurs générées par ces outils, il faudra vraisemblablement prévoir des couleurs neutres (telles que le blanc ou un ton de blanc, du noir ou un ton de noir et certaines nuances de gris).
 
-<div class="note">
-  <p><strong>Note :</strong> On utilise généralement le moins de couleurs possibles afin de garder une cohérence. En utilisant des couleurs afin d'accentuer certains éléments plutôt que d'en utiliser pour tous les éléments de la page, on rend le contenu plus facile à lire et à parcourir. De plus, les couleurs ont ainsi plus d'impact</p>
-</div>
+> **Note :** On utilise généralement le moins de couleurs possibles afin de garder une cohérence. En utilisant des couleurs afin d'accentuer certains éléments plutôt que d'en utiliser pour tous les éléments de la page, on rend le contenu plus facile à lire et à parcourir. De plus, les couleurs ont ainsi plus d'impact
 
-<h3 id="Color_theory_resources">Quelques ressources sur la théorie des couleurs</h3>
+### Quelques ressources sur la théorie des couleurs
 
-<p>Décrire l'ensemble des notions liées à la théorie des couleurs dépasse le sujet de cet article. Toutefois, il existe de nombreux articles traitant de ce sujet ainsi que des cours pour apprendre ces notions. Voici quelques-unes des ressources disponibles en ligne à propos de la théorie des couleurs :</p>
+Décrire l'ensemble des notions liées à la théorie des couleurs dépasse le sujet de cet article. Toutefois, il existe de nombreux articles traitant de ce sujet ainsi que des cours pour apprendre ces notions. Voici quelques-unes des ressources disponibles en ligne à propos de la théorie des couleurs :
 
-<dl>
- <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">La science des couleurs (en anglais)</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> en association avec <a href="https://www.pixar.com/">Pixar</a>)</dt>
- <dd>Un cours en ligne qui introduit certains concepts : qu'est-ce qu'une couleur, comment est-elle perçue, comment utiliser les couleurs afin de véhiculer certaines idées.</dd>
- <dt><a href="https://en.wikipedia.org/wiki/Color_theory">La théorie des couleurs sur Wikipédia (en anglais)</a></dt>
- <dd>La page Wikipédia qui traite de la théorie des couleurs et qui fournit de nombreuses informations techniques.</dd>
-</dl>
+- [La science des couleurs (en anglais)](https://www.khanacademy.org/partner-content/pixar/color) ([Khan Academy](https://www.khanacademy.org/) en association avec [Pixar](https://www.pixar.com/))
+  - : Un cours en ligne qui introduit certains concepts : qu'est-ce qu'une couleur, comment est-elle perçue, comment utiliser les couleurs afin de véhiculer certaines idées.
+- [La théorie des couleurs sur Wikipédia (en anglais)](https://en.wikipedia.org/wiki/Color_theory)
+  - : La page Wikipédia qui traite de la théorie des couleurs et qui fournit de nombreuses informations techniques.
 
-<h3 id="Color_and_accessibility">Les couleurs et l'accessibilité</h3>
+### Les couleurs et l'accessibilité
 
-<p>Une couleur peut poser différents problèmes d'accessibilité. Une couleur mal choisie pourra empêcher certaines personnes d'utiliser l'interface du site, ce qui peut se traduire par une baisse de fréquentation, une mauvaise image (au sens propre comme au figuré), etc.</p>
+Une couleur peut poser différents problèmes d'accessibilité. Une couleur mal choisie pourra empêcher certaines personnes d'utiliser l'interface du site, ce qui peut se traduire par une baisse de fréquentation, une mauvaise image (au sens propre comme au figuré), etc.
 
-<p>Pour commencer, n'hésitez pas à vous renseigner sur le daltonisme et les différents types de daltonisme : confusion rouge/vert, confusion sur l'ensemble des couleurs.</p>
+Pour commencer, n'hésitez pas à vous renseigner sur le daltonisme et les différents types de daltonisme : confusion rouge/vert, confusion sur l'ensemble des couleurs.
 
-<div class="note">
-  <p><strong>Note :</strong> Une règle d'or consiste à ne jamais utiliser une couleur comme seule façon d'indiquer une information. Si, par exemple, vous souhaitez indiquer une réussite ou un échec en changeant uniquement la couleur d'un symbole (un drapeau par exemple), les utilisateurs souffrant de daltonismes et avec une confusion rouge/vert ne pourront pas lire cette information. Il est sans doute préférable d'utiliser du texte et de la couleur afin que tout le monde puisse être en mesure de comprendre ce qui a changé.</p>
-</div>
+> **Note :** Une règle d'or consiste à ne jamais utiliser une couleur comme seule façon d'indiquer une information. Si, par exemple, vous souhaitez indiquer une réussite ou un échec en changeant uniquement la couleur d'un symbole (un drapeau par exemple), les utilisateurs souffrant de daltonismes et avec une confusion rouge/vert ne pourront pas lire cette information. Il est sans doute préférable d'utiliser du texte et de la couleur afin que tout le monde puisse être en mesure de comprendre ce qui a changé.
 
-<p>Pour plus d'informations sur le daltonisme, vous pouvez consulter les articles suivants (en anglais, n'hésitez pas à éditer la page pour ajouter des ressources francophones) :</p>
+Pour plus d'informations sur le daltonisme, vous pouvez consulter les articles suivants (en anglais, n'hésitez pas à éditer la page pour ajouter des ressources francophones) :
 
-<ul>
- <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a></li>
- <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li>
- <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness &amp; Web Design</a></li>
-</ul>
+- [Medline Plus: Color Blindness](https://medlineplus.gov/colorblindness.html)
+- [American Academy of Ophthamology: What Is Color Blindness?](https://www.aao.org/eye-health/diseases/what-is-color-blindness)
+- [Color Blindness & Web Design](https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html)
 
-<h3 id="Palette_design_example">Un exemple de conception de palette</h3>
+### Un exemple de conception de palette
 
-<p>Considérons un exemple rapide pour construire une palette. Imaginons qu'on souhaite construire un site web pour un jeu dont l'action se déroule sur Mars. On peut <a href="https://www.google.com/search?q=Mars&amp;tbm=isch">rechercher des images relatives à Mars sur Google</a> ou sur un autre moteur de recherche. On utilise un sélecteur de couleur pour sélectionner un échantillon de couleur.</p>
+Considérons un exemple rapide pour construire une palette. Imaginons qu'on souhaite construire un site web pour un jeu dont l'action se déroule sur Mars. On peut [rechercher des images relatives à Mars sur Google](https://www.google.com/search?q=Mars&tbm=isch) ou sur un autre moteur de recherche. On utilise un sélecteur de couleur pour sélectionner un échantillon de couleur.
 
-<p>Avec une pipette, on identifie la couleur de base : c'est la couleur de code <code>D79C7A</code>, qui correspond à un rouge orangé rouillé, typique de l'imaginaire collectif pour la surface martienne.</p>
+Avec une pipette, on identifie la couleur de base : c'est la couleur de code `D79C7A`, qui correspond à un rouge orangé rouillé, typique de l'imaginaire collectif pour la surface martienne.
 
-<p>Une fois la couleur de base sélectionnée, on construit la palette. Pour cela, nous avons choisi <a href="http://www.paletton.com/">Paletteon</a> afin de compléter avec d'autres couleurs. Lorsqu'on ouvre Palleton, on voit ceci :</p>
+Une fois la couleur de base sélectionnée, on construit la palette. Pour cela, nous avons choisi [Paletteon](http://www.paletton.com/) afin de compléter avec d'autres couleurs. Lorsqu'on ouvre Palleton, on voit ceci :
 
-<p><img alt="L'affichage du site Palleton après l'ouverture" src="paletton1.png"></p>
+![L'affichage du site Palleton après l'ouverture](paletton1.png)
 
-<p>Ensuite, on saisit le code de la couleur (<code>D79C7A</code>) dans le champ "Base RGB" situé en bas à gauche de l'outil :</p>
+Ensuite, on saisit le code de la couleur (`D79C7A`) dans le champ "Base RGB" situé en bas à gauche de l'outil :
 
-<p><img alt="After entering base color" src="paletton2.png"></p>
+![After entering base color](paletton2.png)
 
-<p>On obtient alors une palette monochromatique, basée sur la couleur sélectionnée. Si vous avez besoin d'un nuancier autour de cette couleur, la palette monochromatique pourra sans doute vous aider. Mais ici, on souhaite plutôt avoir une couleur qui ressorte, pour cela on clique sur la case "<em>add complementary</em>" sous le menu permettant de sélectionner le type de palette (et qui vaut "Monochromatic"). Paletteon calcule alors une couleur complémentaire appropriée et indique le code de cette nouvelle couleur dans le coin inférieur droit : <code>#508D7C</code>.</p>
+On obtient alors une palette monochromatique, basée sur la couleur sélectionnée. Si vous avez besoin d'un nuancier autour de cette couleur, la palette monochromatique pourra sans doute vous aider. Mais ici, on souhaite plutôt avoir une couleur qui ressorte, pour cela on clique sur la case "_add complementary_" sous le menu permettant de sélectionner le type de palette (et qui vaut "Monochromatic"). Paletteon calcule alors une couleur complémentaire appropriée et indique le code de cette nouvelle couleur dans le coin inférieur droit : `#508D7C`.
 
-<p><img alt="Now with complementary colors included." src="paletton3.png"></p>
+![Now with complementary colors included.](paletton3.png)
 
-<p>Si vous n'êtes pas satisfait du résultat obtenu, vous pouvez faire varier le schéma de composition. Ainsi, on pourra utiliser le thème "Triad" qui fournira le résultat suivant :</p>
+Si vous n'êtes pas satisfait du résultat obtenu, vous pouvez faire varier le schéma de composition. Ainsi, on pourra utiliser le thème "Triad" qui fournira le résultat suivant :
 
-<p><img alt="Triad color scheme selected" src="paletton4.png"></p>
+![Triad color scheme selected](paletton4.png)
 
-<p>On obtient alors un bleu gris en haut à droite. En cliquant dessus, on obtient le code <code>#556E8D</code>. On pourra utiliser cette couleur afin d'accentuer certains éléments tels que les titres ou les onglets mis en évidence ou bien d'autres indicateurs sur le site :</p>
+On obtient alors un bleu gris en haut à droite. En cliquant dessus, on obtient le code `#556E8D`. On pourra utiliser cette couleur afin d'accentuer certains éléments tels que les titres ou les onglets mis en évidence ou bien d'autres indicateurs sur le site :
 
-<p><img alt="Triad color scheme selected" src="paletton-color-detail.png"></p>
+![Triad color scheme selected](paletton-color-detail.png)
 
-<p>Maintenant, nous disposons d'une couleur de base, d'une couleur d'accentuation ainsi que de variations autour de celles-ci au cas où nous aurions besoin de dégradés. On peut exporter les couleurs sous différents formats afin de les utiliser.</p>
+Maintenant, nous disposons d'une couleur de base, d'une couleur d'accentuation ainsi que de variations autour de celles-ci au cas où nous aurions besoin de dégradés. On peut exporter les couleurs sous différents formats afin de les utiliser.
 
-<p>Avec ces couleurs, il faudra probablement sélectionner quelques couleurs neutres. Une pratique courante consiste à trouver le contraste suffisant pour que le texte soit pleinement lisible mais sans que ce contraste soit trop fort. Il est facile de s'égarer dans l'une ou l'autre des directions : n'hésitez pas à demander des retours sur les couleurs que vous avez sélectionnées. Si le contraste est trop faible, le texte sera illisible et on ne pourra pas le distinguer de l'arrière-plan, cela pourra également poser des problèmes d'accessibilité. Si le contraste est trop élevé, le site pourra paraître criard.</p>
+Avec ces couleurs, il faudra probablement sélectionner quelques couleurs neutres. Une pratique courante consiste à trouver le contraste suffisant pour que le texte soit pleinement lisible mais sans que ce contraste soit trop fort. Il est facile de s'égarer dans l'une ou l'autre des directions : n'hésitez pas à demander des retours sur les couleurs que vous avez sélectionnées. Si le contraste est trop faible, le texte sera illisible et on ne pourra pas le distinguer de l'arrière-plan, cela pourra également poser des problèmes d'accessibilité. Si le contraste est trop élevé, le site pourra paraître criard.
 
-<h3 id="Color_backgrounds_contrast_and_printing">Couleurs, arrière-plans, contraste et impression</h3>
+### Couleurs, arrière-plans, contraste et impression
 
-<p>Le rendu d'un document peut être différent selon que ce dernier est affiché sur un écran ou sur du papier. De plus, sur papier, on peut chercher à économiser l'encre superflu. Lorsqu'un utilisateur imprime une page, il n'est par exemple peut-être pas nécessaire d'imprimer les arrière-plans. Par défaut, la plupart des navigateurs retirent les images d'arrière-plan à l'impression.</p>
+Le rendu d'un document peut être différent selon que ce dernier est affiché sur un écran ou sur du papier. De plus, sur papier, on peut chercher à économiser l'encre superflu. Lorsqu'un utilisateur imprime une page, il n'est par exemple peut-être pas nécessaire d'imprimer les arrière-plans. Par défaut, la plupart des navigateurs retirent les images d'arrière-plan à l'impression.
 
-<p>Si les couleurs d'arrière-plan ou les images sont importantes pour l'ensemble du document, on peut utiliser la propriété <a href="/fr/docs/Web/CSS/color-adjust"><code>color-adjust</code></a> afin d'indiquer au navigateur qu'il ne faut pas modifier l'apparence du contenu.</p>
+Si les couleurs d'arrière-plan ou les images sont importantes pour l'ensemble du document, on peut utiliser la propriété [`color-adjust`](/fr/docs/Web/CSS/color-adjust) afin d'indiquer au navigateur qu'il ne faut pas modifier l'apparence du contenu.
 
-<p>Par défaut, la propriété <code>color-adjust</code> vaut <code>economy</code> et indique au navigateur qu'il peut modifier l'apparence afin d'optimiser la lisibilité du contenu et d'économiser de l'encre selon le support d'imprimerie.</p>
+Par défaut, la propriété `color-adjust` vaut `economy` et indique au navigateur qu'il peut modifier l'apparence afin d'optimiser la lisibilité du contenu et d'économiser de l'encre selon le support d'imprimerie.
 
-<p><code>color-adjust</code> peut être paramétré avec la valeur <code>exact</code> afin d'indiquer au navigateur qu'un ou plusieurs éléments doivent être conservés tels quels afin que l'ensemble du document ne soit pas détérioré.</p>
+`color-adjust` peut être paramétré avec la valeur `exact` afin d'indiquer au navigateur qu'un ou plusieurs éléments doivent être conservés tels quels afin que l'ensemble du document ne soit pas détérioré.
 
-<div class="note">
-  <p><strong>Note :</strong> Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec <code>color-adjust: exact</code>. En effet, si le navigateur fournit une option à l'utilisateur pour ne pas imprimer les arrière-plans, ce réglage prendra le pas sur la feuille de style.</p>
-</div>
+> **Note :** Il n'est pas garanti que le navigateur respecte exactement la feuille de style utilisée avec `color-adjust: exact`. En effet, si le navigateur fournit une option à l'utilisateur pour ne pas imprimer les arrière-plans, ce réglage prendra le pas sur la feuille de style.
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Dessiner des graphiques</a></li>
- <li><a href="/fr/docs/Web/Guide/Graphics">Le graphisme sur le Web</a></li>
- <li><a href="/fr/docs/Web/CSS/CSS_Colors/Color_picker_tool">Un outil de sélection de couleur sur MDN</a></li>
-</ul>
+- [Dessiner des graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
+- [Le graphisme sur le Web](/fr/docs/Web/Guide/Graphics)
+- [Un outil de sélection de couleur sur MDN](/fr/docs/Web/CSS/CSS_Colors/Color_picker_tool)
diff --git a/files/fr/web/html/attributes/accept/index.md b/files/fr/web/html/attributes/accept/index.md
index ab22f146ca..fca3d327d7 100644
--- a/files/fr/web/html/attributes/accept/index.md
+++ b/files/fr/web/html/attributes/accept/index.md
@@ -10,154 +10,148 @@ tags:
   - Reference
 translation_of: Web/HTML/Attributes/accept
 ---
-<p>{{HTMLSidebar}}</p>
+{{HTMLSidebar}}
 
-<p>L'attribut <strong><code>accept</code></strong> prend comme valeur une liste séparée par des virgules d'un ou plusieurs types de fichiers, ou d'une <a href="#unique_file_type_specifiers">spécification de type de fichier unique</a>, décrivant les types de fichiers à autoriser. La propriété <code>accept</code> est un attribut pour les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> de type <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>. Elle était prise en charge par l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, mais a été supprimée au profit de <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a> dans HTML5.</p>
+L'attribut **`accept`** prend comme valeur une liste séparée par des virgules d'un ou plusieurs types de fichiers, ou d'une [spécification de type de fichier unique](#unique_file_type_specifiers), décrivant les types de fichiers à autoriser. La propriété `accept` est un attribut pour les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) de type [`file`](/fr/docs/Web/HTML/Element/Input/file). Elle était prise en charge par l'élément [`<form>`](/fr/docs/Web/HTML/Element/Form), mais a été supprimée au profit de [`file`](/fr/docs/Web/HTML/Element/Input/file) dans HTML5.
 
-<p>Comme un type de fichier donné peut être identifié de plusieurs manières, il est utile de fournir un ensemble complet de spécificateurs de type lorsque vous avez besoin de fichiers d'un type spécifique, ou d'utiliser le joker pour indiquer qu'un type de n'importe quel format est accepté.</p>
+Comme un type de fichier donné peut être identifié de plusieurs manières, il est utile de fournir un ensemble complet de spécificateurs de type lorsque vous avez besoin de fichiers d'un type spécifique, ou d'utiliser le joker pour indiquer qu'un type de n'importe quel format est accepté.
 
-<p>Par exemple, il existe un certain nombre de façons d'identifier les fichiers Microsoft Word, de sorte qu'un site qui accepte les fichiers Word pourrait utiliser un <code>&lt;input&gt;</code> comme celui-ci&nbsp;:</p>
+Par exemple, il existe un certain nombre de façons d'identifier les fichiers Microsoft Word, de sorte qu'un site qui accepte les fichiers Word pourrait utiliser un `<input>` comme celui-ci :
 
-<pre class="brush: html">&lt;input type="file" id="docpicker"
-  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"&gt;</pre>
+```html
+<input type="file" id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
+```
 
-<p>En revanche, si vous acceptez un fichier multimédia, vous pouvez inclure tout format de ce type de média&nbsp;:</p>
+En revanche, si vous acceptez un fichier multimédia, vous pouvez inclure tout format de ce type de média :
 
-<pre class="brush: html">&lt;input type="file" id="soundFile" accept="audio/*"&gt;
-&lt;input type="file" id="videoFile" accept="video/*"&gt;
-&lt;input type="file" id="imageFile" accept="image/*"&gt;</pre>
+```html
+<input type="file" id="soundFile" accept="audio/*">
+<input type="file" id="videoFile" accept="video/*">
+<input type="file" id="imageFile" accept="image/*">
+```
 
-<p>L'attribut <code>accept</code> ne valide pas les types de fichiers sélectionnés ; il fournit des indications aux navigateurs pour guider les utilisateurs vers la sélection des bons types de fichiers. Il est toujours possible (dans la plupart des cas) pour les utilisateurs de basculer une option dans le sélecteur de fichiers qui permet de passer outre et de sélectionner le fichier de leur choix, puis de choisir des types de fichiers incorrects.</p>
+L'attribut `accept` ne valide pas les types de fichiers sélectionnés ; il fournit des indications aux navigateurs pour guider les utilisateurs vers la sélection des bons types de fichiers. Il est toujours possible (dans la plupart des cas) pour les utilisateurs de basculer une option dans le sélecteur de fichiers qui permet de passer outre et de sélectionner le fichier de leur choix, puis de choisir des types de fichiers incorrects.
 
-<p>Pour cette raison, vous devez vous assurer que les exigences attendues sont validées côté serveur.</p>
+Pour cette raison, vous devez vous assurer que les exigences attendues sont validées côté serveur.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>Lorsque cet attribut est utilisé sur un champ permettant de sélectionner un fichier, le sélecteur de fichier natif qui s'ouvre devrait filtrer sur les seuls fichiers qui correspondent au(x) type(s) indiqués. La plupart des systèmes d'exploitation masquent ou grisent alors les fichiers qui ne correspondent pas et ne peuvent pas être sélectionnés.</p>
+Lorsque cet attribut est utilisé sur un champ permettant de sélectionner un fichier, le sélecteur de fichier natif qui s'ouvre devrait filtrer sur les seuls fichiers qui correspondent au(x) type(s) indiqués. La plupart des systèmes d'exploitation masquent ou grisent alors les fichiers qui ne correspondent pas et ne peuvent pas être sélectionnés.
 
-<pre class="brush: html">&lt;p&gt;
-  &lt;label for="soundFile"&gt;Sélectionnez un fichier audio :&lt;/label&gt;
-  &lt;input type="file" id="soundFile" accept="audio/*"&gt;
-&lt;/p&gt;
-&lt;p&gt;
-  &lt;label for="videoFile"&gt;Sélectionnez un fichier vidéo :&lt;/label&gt;
-  &lt;input type="file" id="videoFile" accept="video/*"&gt;
-&lt;/p&gt;
-&lt;p&gt;
-  &lt;label for="imageFile"&gt;Sélectionner des images :&lt;/label&gt;
-  &lt;input type="file" id="imageFile" accept="image/*" multiple&gt;
-&lt;/p&gt;</pre>
+```html
+<p>
+  <label for="soundFile">Sélectionnez un fichier audio :</label>
+  <input type="file" id="soundFile" accept="audio/*">
+</p>
+<p>
+  <label for="videoFile">Sélectionnez un fichier vidéo :</label>
+  <input type="file" id="videoFile" accept="video/*">
+</p>
+<p>
+  <label for="imageFile">Sélectionner des images :</label>
+  <input type="file" id="imageFile" accept="image/*" multiple>
+</p>
+```
 
-<p>{{EmbedLiveSample('examples', '', 160)}}</p>
+{{EmbedLiveSample('examples', '', 160)}}
 
-<p>Notez que le dernier exemple vous permet de sélectionner plusieurs images. Voir l'attribut <a href="multiple"><code>multiple</code></a> pour plus d'informations.</p>
+Notez que le dernier exemple vous permet de sélectionner plusieurs images. Voir l'attribut [`multiple`](multiple) pour plus d'informations.
 
-<h2 id="unique_file_type_specifiers">Spécification de type de fichier unique</h2>
+## Spécification de type de fichier unique
 
-<p>Un <strong>spécificateur de type de fichier unique</strong> est une chaîne qui décrit un type de fichier pouvant être sélectionné par l'utilisateur dans un élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> de type <code>file</code>. Chaque spécificateur unique de type de fichier peut prendre l'une des formes suivantes :</p>
+Un **spécificateur de type de fichier unique** est une chaîne qui décrit un type de fichier pouvant être sélectionné par l'utilisateur dans un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) de type `file`. Chaque spécificateur unique de type de fichier peut prendre l'une des formes suivantes :
 
-<ul>
-  <li>Une extension de nom de fichier valide et insensible à la casse, commençant par un caractère point (« . »). Par exemple : <code>.jpg</code>, <code>.pdf</code>, ou <code>.doc</code>.</li>
-  <li>Une chaîne de type MIME valide, sans extension.</li>
-  <li>La chaîne de caractères <code>audio/*</code> signifiant "tout fichier audio".</li>
-  <li>La chaîne de caractères <code>vidéo/*</code> signifiant "tout fichier vidéo".</li>
-  <li>La chaîne de caractères <code>image/*</code> signifiant "tout fichier image".</li>
-</ul>
+- Une extension de nom de fichier valide et insensible à la casse, commençant par un caractère point (« . »). Par exemple : `.jpg`, `.pdf`, ou `.doc`.
+- Une chaîne de type MIME valide, sans extension.
+- La chaîne de caractères `audio/*` signifiant "tout fichier audio".
+- La chaîne de caractères `vidéo/*` signifiant "tout fichier vidéo".
+- La chaîne de caractères `image/*` signifiant "tout fichier image".
 
-<p>L'attribut <code>accept</code> prend comme valeur une chaîne de caractères contenant une ou plusieurs de ces spécificateurs de type de fichier unique, séparées par des virgules. Par exemple, un sélecteur de fichiers qui a besoin d'un contenu pouvant être présenté comme une image, y compris les formats d'image standard et les fichiers PDF, pourrait ressembler à ceci :</p>
+L'attribut `accept` prend comme valeur une chaîne de caractères contenant une ou plusieurs de ces spécificateurs de type de fichier unique, séparées par des virgules. Par exemple, un sélecteur de fichiers qui a besoin d'un contenu pouvant être présenté comme une image, y compris les formats d'image standard et les fichiers PDF, pourrait ressembler à ceci :
 
-<pre class="brush: html">&lt;input type="file" accept="image/*,.pdf"&gt;</pre>
+```html
+<input type="file" accept="image/*,.pdf">
+```
 
-<h2 id="using_file_inputs">Utilisation des champs pour saisir des fichiers</h2>
+## Utilisation des champs pour saisir des fichiers
 
-<h3 id="a_basic_example">Un exemple de base</h3>
+### Un exemple de base
 
-<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
-  &lt;div&gt;
-    &lt;label for="file"&gt;Choisissez le fichier à téléverser&lt;/label&gt;
-    &lt;input type="file" id="file" name="file" multiple&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Soumettre&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="file">Choisissez le fichier à téléverser</label>
+    <input type="file" id="file" name="file" multiple>
+  </div>
+  <div>
+    <button>Soumettre</button>
+  </div>
+</form>
+```
 
-<pre class="brush: css">div {
+```css
+div {
   margin-bottom: 10px;
-}</pre>
+}
+```
 
-<p>Cela produit le résultat suivant :</p>
+Cela produit le résultat suivant :
 
-<p>{{EmbedLiveSample('a_basic_example', 650, 100)}}</p>
+{{EmbedLiveSample('a_basic_example', 650, 100)}}
 
-<div class="note">
-  <p><strong>Note :</strong> Vous pouvez trouver cet exemple sur GitHub également - voir le <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">code source</a>, et aussi <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">le fonctionnement en direct</a>.</p>
-</div>
+> **Note :** Vous pouvez trouver cet exemple sur GitHub également - voir le [code source](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html), et aussi [le fonctionnement en direct](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html).
 
-<p>Quel que soit le dispositif ou le système d'exploitation de l'utilisateur, l'entrée de fichier fournit un bouton qui ouvre une boîte de dialogue de sélection de fichier permettant à l'utilisateur de choisir un fichier.</p>
+Quel que soit le dispositif ou le système d'exploitation de l'utilisateur, l'entrée de fichier fournit un bouton qui ouvre une boîte de dialogue de sélection de fichier permettant à l'utilisateur de choisir un fichier.
 
-<p>L'inclusion de l'attribut <a href="multiple"><code>multiple</code></a>, comme indiqué ci-dessus, spécifie que plusieurs fichiers peuvent être choisis en même temps. L'utilisateur peut choisir plusieurs fichiers dans le sélecteur de fichiers de n'importe quelle manière permise par la plateforme qu'il a choisie (par exemple, en maintenant la touche <kbd>Maj</kbd> ou <kbd>Ctrl</kbd>, puis en cliquant). Si vous souhaitez que l'utilisateur ne choisisse qu'un seul fichier par <code>&lt;input&gt;</code>, omettez l'attribut <code>multiple</code>.</p>
+L'inclusion de l'attribut [`multiple`](multiple), comme indiqué ci-dessus, spécifie que plusieurs fichiers peuvent être choisis en même temps. L'utilisateur peut choisir plusieurs fichiers dans le sélecteur de fichiers de n'importe quelle manière permise par la plateforme qu'il a choisie (par exemple, en maintenant la touche <kbd>Maj</kbd> ou <kbd>Ctrl</kbd>, puis en cliquant). Si vous souhaitez que l'utilisateur ne choisisse qu'un seul fichier par `<input>`, omettez l'attribut `multiple`.
 
-<h3 id="limiting_accepted_file_types">Restreindre les types de fichier acceptés</h3>
+### Restreindre les types de fichier acceptés
 
-<p>Souvent, vous ne voudrez pas que l'utilisateur puisse choisir n'importe quel type de fichier arbitraire ; au contraire, vous voudrez souvent qu'il sélectionne des fichiers d'un ou plusieurs types spécifiques. Par exemple, si votre entrée de fichier permet aux utilisateurs de télécharger une photo de profil, vous voulez probablement qu'ils sélectionnent des formats d'image compatibles avec le Web, tels que <a href="/fr/docs/Glossary/jpeg">JPEG</a> ou <a href="/fr/docs/Glossary/PNG">PNG</a>.</p>
+Souvent, vous ne voudrez pas que l'utilisateur puisse choisir n'importe quel type de fichier arbitraire ; au contraire, vous voudrez souvent qu'il sélectionne des fichiers d'un ou plusieurs types spécifiques. Par exemple, si votre entrée de fichier permet aux utilisateurs de télécharger une photo de profil, vous voulez probablement qu'ils sélectionnent des formats d'image compatibles avec le Web, tels que [JPEG](/fr/docs/Glossary/jpeg) ou [PNG](/fr/docs/Glossary/PNG).
 
-<p>Les types de fichiers acceptables peuvent être spécifiés avec l'attribut <a href="/fr/docs/Web/HTML/Element/Input/file#attr-accept"><code>accept</code></a>, qui prend une liste d'extensions de fichiers ou de types MIME autorisés séparés par des virgules. Quelques exemples :</p>
+Les types de fichiers acceptables peuvent être spécifiés avec l'attribut [`accept`](/fr/docs/Web/HTML/Element/Input/file#attr-accept), qui prend une liste d'extensions de fichiers ou de types MIME autorisés séparés par des virgules. Quelques exemples :
 
-<ul>
-  <li><code>accept="image/png"</code> ou <code>accept=".png"</code> — Accepter les fichiers PNG.</li>
-  <li><code>accept="image/png, image/jpeg"</code> ou <code>accept=".png, .jpg, .jpeg"</code> — Accepter les fichiers PNG ou JPEG.</li>
-  <li><code>accept="image/*"</code> — Accepter tout fichier ayant un type MIME <code>image/*</code>. (De nombreux appareils mobiles permettent également à l'utilisateur de prendre une photo avec l'appareil photo lorsque cette option est utilisée).</li>
-  <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — Accepter tout ce qui ressemble à un document MS Word.</li>
-</ul>
+- `accept="image/png"` ou `accept=".png"` — Accepter les fichiers PNG.
+- `accept="image/png, image/jpeg"` ou `accept=".png, .jpg, .jpeg"` — Accepter les fichiers PNG ou JPEG.
+- `accept="image/*"` — Accepter tout fichier ayant un type MIME `image/*`. (De nombreux appareils mobiles permettent également à l'utilisateur de prendre une photo avec l'appareil photo lorsque cette option est utilisée).
+- `accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` — Accepter tout ce qui ressemble à un document MS Word.
 
-<p>Examinons un exemple plus complet :</p>
+Examinons un exemple plus complet :
 
-<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
-  &lt;div&gt;
-    &lt;label for="profile_pic"&gt;Choisissez le fichier à téléverser&lt;/label&gt;
-    &lt;input type="file" id="profile_pic" name="profile_pic"
-          accept=".jpg, .jpeg, .png"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Soumettre&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="profile_pic">Choisissez le fichier à téléverser</label>
+    <input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png">
+  </div>
+  <div>
+    <button>Soumettre</button>
+  </div>
+</form>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   margin-bottom: 10px;
-}</pre>
-
-<p>{{EmbedLiveSample('limiting_accepted_file_types', 650, 100)}}</p>
-
-<h2 id="specifications">Spécifications</h2>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}}</td>
-      <td>{{Spec2('HTML5.1')}}</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.elements.attribute.accept")}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utiliser des fichiers à partir d'applications web</a></li>
-  <li><a href="/fr/docs/Web/API/File">L'API File</a></li>
-</ul>
+}
+```
+
+{{EmbedLiveSample('limiting_accepted_file_types', 650, 100)}}
+
+## Spécifications
+
+| Spécification                                                                                            | Statut                           |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}} | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}} | {{Spec2('HTML5.1')}}     |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.elements.attribute.accept")}}
+
+## Voir aussi
+
+- [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File/Using_files_from_web_applications)
+- [L'API File](/fr/docs/Web/API/File)
diff --git a/files/fr/web/html/attributes/autocomplete/index.md b/files/fr/web/html/attributes/autocomplete/index.md
index a419111c3f..d45f5c6d45 100644
--- a/files/fr/web/html/attributes/autocomplete/index.md
+++ b/files/fr/web/html/attributes/autocomplete/index.md
@@ -20,250 +20,231 @@ tags:
 translation_of: Web/HTML/Attributes/autocomplete
 original_slug: Web/HTML/Attributs/autocomplete
 ---
-<div>{{HTMLSidebar}}</div>
-
-<p>L'attribut <code>autocomplete</code> est disponible sur les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> qui prennent une valeur textuelle ou numérique en entrée, mais aussi pour les éléments <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>. <code>autocomplete</code> permet aux développeuses et développeurs web de spécifier quelle est l'autorisation éventuelle, pour l'<a href="/fr/docs/Glossary/User_agent">agent utilisateur</a>, de fournir une assistance automatisée afin de remplir les valeurs des champs de formulaire, ainsi que des indications au navigateur quant au type d'informations attendues dans le champ.</p>
-
-<p>La source fournissant les valeurs suggérées pour l'autocomplétion dépend du navigateur. Généralement, celle-ci est constituée des valeurs saisies précédemment par l'utilisateur. Des valeurs préconfigurées peuvent aussi être utilisées. Ainsi, un navigateur pourra permettre à un utilisateur d'enregistrer son nom, son adresse, son numéro de téléphone et des adresses électroniques pour l'aider lors de l'autocomplétion. Le navigateur pourrait également fournir le stockage chiffré des informations de cartes bancaires et déclencher une procédure d'authentification lorsque ces informations doivent être récupérées pour être utilisées.</p>
-
-<p>Si les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a> ne possèdent pas d'attribut <code>autocomplete</code>, le navigateur utilisera l'attribut <code>autocomplete</code> du formulaire associé (c-à-d. l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a> qui est l'ancêtre de l'élément <code>&lt;input&gt;</code> ou l'élément <code>&lt;form&gt;</code> dont la valeur de l'attribut <code>id</code> correspond à celle indiquée, dans l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-form"><code>form</code></a> de l'élément <code>&lt;input&gt;</code>).</p>
-
-<p>Pour plus d'informations, voir la documentation de l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-autocomplete"><code>autocomplete</code></a> pour l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments <code>&lt;input&gt;</code>/<code>&lt;select&gt;</code>/<code>&lt;textarea&gt;</code>:</p>
-
-  <ol>
-    <li>Que ceux-ci aient un attribut <code>name</code> et/ou <code>id</code></li>
-    <li>Que ceux-ci descendent d'un élément <code>&lt;form&gt;</code></li>
-    <li>Que le formulaire associé ait un bouton <a href="/fr/docs/Web/HTML/Element/Input/submit">submit</a></li>
-  </ol>
-</div>
-
-<h2 id="values">Valeurs</h2>
-
-<dl>
-  <dt><code>off</code></dt>
-  <dd>Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement.
-    <div class="note">
-      <p><strong>Note :</strong> Pour la plupart des navigateurs modernes, utiliser <code>autocomplete="off"</code> n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir <a href="/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields">l'article sur l'attribut <code>autocomplete</code> et les champs des formulaires de connexion</a>.</p>
-    </div>
-  </dd>
-  <dt><code>on</code></dt>
-  <dd>Le navigateur est autorisé à compléter automatiquement le champ. Aucune indication supplémentaire n'est fournie quant au type de donnée attendu et c'est donc au navigateur d'utiliser une heuristique pour proposer des valeurs pertinentes.</dd>
-  <dt><code>name</code></dt>
-  <dd>Le champ correspondant doit recevoir le nom complet de la personne. Utiliser cette valeur plutôt que les différents composants est une méthode souvent privilégiée car on évite ainsi de gérer les différentes structures des différentes locales. Toutefois, on peut utiliser les composants suivants si on souhaite décomposer l'identité de la personne :
-    <dl>
-      <dt><code>honorific-prefix</code></dt>
-      <dd>Le préfixe ou le titre, par exemple « M. », « Mme. », « Me. » , etc.</dd>
-      <dt><code>given-name</code></dt>
-      <dd>Le prénom.</dd>
-      <dt><code>additional-name</code></dt>
-      <dd>Le deuxième prénom.</dd>
-      <dt><code>family-name</code></dt>
-      <dd>Le nom de famille.</dd>
-      <dt><code>honorific-suffix</code></dt>
-      <dd>Un suffixe (par exemple "Jr.").</dd>
-      <dt><code>nickname</code></dt>
-      <dd>Un surnom.</dd>
-    </dl>
-  </dd>
-  <dt><code>email</code></dt>
-  <dd>Une adresse électronique.</dd>
-  <dt><code>username</code></dt>
-  <dd>Un nom de compte ou un nom d'utilisateur.</dd>
-  <dt><code>new-password</code></dt>
-  <dd>Un nouveau mot de passe. Lors de la création d'un compte ou lors d'un changement de mot de passe, cette valeur pourra être utilisée pour le champ où saisir le nouveau mot de passe. Ainsi, on évitera au navigateur de saisir automatiquement le mot de passe actuel ou le navigateur pourra même proposer un outil permettant de créer un mot de passe sécurisé (voir aussi <a href="/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#preventing_autofilling_with_autocompletenew-password">Empêcher le remplissage automatique avec autocomplete="new-password"</a>).</dd>
-  <dt><code>current-password</code></dt>
-  <dd>Le mot de passe actuel de l'utilisateur.</dd>
-  <dt><code>one-time-code</code></dt>
-  <dd>Un code à usage unique, utilisé pour vérifier l'identité de l'utilisateur.</dd>
-  <dt><code>organization-title</code></dt>
-  <dd>Un titre de poste tel que « Directeur général », « Assistant technique » ou « Ingénieur ».</dd>
-  <dt><code>organization</code></dt>
-  <dd>Le nom d'une entreprise ou d'une organisation.</dd>
-  <dt><code>street-address</code></dt>
-  <dd>Une adresse postale. Cette adresse peut être un texte sur plusieurs lignes et devrait permettre d'identifier complètement l'emplacement de l'adresse au sein d'une ville. Cette valeur n'inclut pas le nom de la ville, le code postal ou le nom du pays.</dd>
-  <dt><code>address-line1</code>, <code>address-line2</code>, <code>address-line3</code></dt>
-  <dd>Des lignes individuelles pour décrire l'adresse postale. Ces valeurs peuvent être utilisées seulement lorsque la valeur <code>street-address</code> est absente.</dd>
-  <dt><code>address-level4</code></dt>
-  <dd>Le niveau d'adresse le plus fin (<a href="#administrative_levels_in_addresses">niveau administratif</a>) lorsque les adresses ont quatre niveaux.</dd>
-  <dt><code>address-level3</code></dt>
-  <dd>Le troisième niveau de précision d'une adresse de <a href="#administrative_levels_in_addresses">niveau administratif</a> lorsque les adresses ont au moins trois niveaux administratifs.</dd>
-  <dt><code>address-level2</code></dt>
-  <dd>Le deuxième niveau de précision d'une adresse de <a href="#administrative_levels_in_addresses">niveau administratif</a> lorsque les adresses ont au moins deux niveaux administratifs. Pour les pays avec deux niveaux administratifs, cela correspond généralement à la ville, au village ou à la localité de l'adresse.</dd>
-  <dt><code>address-level1</code></dt>
-  <dd>Le premier niveau de précision d'une adresse de <a href="#administrative_levels_in_addresses">niveau administratif</a>. C'est généralement la région ou l'état dans lequel se situe l'adresse.</dd>
-  <dt><code>country</code></dt>
-  <dd>Un code de pays.</dd>
-  <dt><code>country-name</code></dt>
-  <dd>Un nom de pays.</dd>
-  <dt><code>postal-code</code></dt>
-  <dd>Un code postal.</dd>
-  <dt><code>cc-name</code></dt>
-  <dd>Le nom complet tel qu'indiqué sur une carte bancaire. On préfèrera généralement utiliser le nom complet plutôt que de le décomposer en fragments.</dd>
-  <dt><code>cc-given-name</code></dt>
-  <dd>Le prénom tel qu'indiqué sur une carte bancaire.</dd>
-  <dt><code>cc-additional-name</code></dt>
-  <dd>Le deuxième prénom tel qu'indiqué sur une carte bancaire.</dd>
-  <dt><code>cc-family-name</code></dt>
-  <dd>Le nom de famille tel qu'indiqué sur une carte bancaire.</dd>
-  <dt><code>cc-number</code></dt>
-  <dd>Le numéro de la carte bancaire ou tout autre numéro identifiant une méthode de paiement (ce peut être un numéro de compte par exemple).</dd>
-  <dt><code>cc-exp</code></dt>
-  <dd>La date d'expiration de la méthode de paiement telle qu'indiquée sur une carte bancaire (généralement sous la forme MM/YY ou sous la forme MM/YYYYY où MM correspond aux deux chiffres du mois et où YY ou YYYY correspondent aux chiffres de l'année).</dd>
-  <dt><code>cc-exp-month</code></dt>
-  <dd>Le mois d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.</dd>
-  <dt><code>cc-exp-year</code></dt>
-  <dd>L'année d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.</dd>
-  <dt><code>cc-csc</code></dt>
-  <dd>Le cryptogramme du moyen de paiement tel qu'indiqué sur une carte bancaire. Il s'agit généralement du code à trois chiffres de vérification situé au dos de la carte bancaire.</dd>
-  <dt><code>cc-type</code></dt>
-  <dd>Le type de moyen de paiement ("Visa" ou "Master Card").</dd>
-  <dt><code>transaction-currency</code></dt>
-  <dd>La devise utilisée pour la transaction courante.</dd>
-  <dt><code>transaction-amount</code></dt>
-  <dd>Le montant de la transaction, pour un formulaire de paiement, exprimé dans la devise fournie par <code>transaction-currency</code>.</dd>
-  <dt><code>language</code></dt>
-  <dd>La langue préférée, indiquée sous la forme <a href="https://fr.wikipedia.org/wiki/%C3%89tiquette_d%27identification_de_langues_IETF">d'une balise de langue valide selon BCP 47</a>.</dd>
-  <dt><code>bday</code></dt>
-  <dd>Une date de naissance complète.</dd>
-  <dt><code>bday-day</code></dt>
-  <dd>Le jour du mois de la date de naissance.</dd>
-  <dt><code>bday-month</code></dt>
-  <dd>Le mois de l'année de la date de naissance.</dd>
-  <dt><code>bday-year</code></dt>
-  <dd>L'année de la date de naissance.</dd>
-  <dt><code>sex</code></dt>
-  <dd>Un genre (tel que « femme », « homme », « Fa'afafine » etc.) sous la forme d'un texte libre sans passage à la ligne.</dd>
-  <dt><code>tel</code></dt>
-  <dd>Un numéro de téléphone complet qui inclut l'identifiant du pays. Si le numéro de téléphone doit être décomposé en composants, on pourra utiliser les valeurs suivantes :
-    <dl>
-      <dt><code>tel-country-code</code></dt>
-      <dd>L'indicateur du pays pour le numéro de téléphone (33 pour la France ou 1 pour les États-Unis par exemple).</dd>
-      <dt><code>tel-national</code></dt>
-      <dd>Le numéro de téléphone complet sans l'indicateur du pays.</dd>
-      <dt><code>tel-area-code</code></dt>
-      <dd>Le code de la zone pour le numéro de téléphone avec un préfixe interne au pays si nécessaire.</dd>
-      <dt><code>tel-local</code></dt>
-      <dd>Le numéro de téléphone sans l'indicateur de pays ni l'indicateur de zone.</dd>
-    </dl>
-  </dd>
-  <dt><code>tel-extension</code></dt>
-  <dd>Une extension au numéro de téléphone qui permet par exemple d'indiquer le numéro de chambre dans un hôtel ou le numéro d'un bureau au sein d'une entreprise.</dd>
-  <dt><code>impp</code></dt>
-  <dd>Une URL pour un protocole de messagerie instantannée (par exemple "xmpp:username@example.net").</dd>
-  <dt><code>url</code></dt>
-  <dd>Une URL, pertinente dans le contexte du formulaire.</dd>
-  <dt><code>photo</code></dt>
-  <dd>L'URL d'une image représentant la personne, l'entreprise ou l'information de contact pour ce formulaire.</dd>
-</dl>
-
-<p>Voir <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">la spécification WHATWG</a> pour plus de détails.</p>
-
-<div class="note">
-  <p><strong>Note :</strong> À la différence des autres navigateurs, pour Firefox, l'attribut <code>autocomplete</code> contrôlera également si <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page</a> pour un champ <code>&lt;input&gt;</code>. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut <code>autocomplete</code> avec la valeur <code>off</code>, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut <code>autocomplete</code> ne devrait pas s'appliquer à l'élément <code>&lt;input&gt;</code> d'après son type. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">bug 654072</a>.</p>
+{{HTMLSidebar}}
+
+L'attribut `autocomplete` est disponible sur les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) qui prennent une valeur textuelle ou numérique en entrée, mais aussi pour les éléments [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea), [`<select>`](/fr/docs/Web/HTML/Element/select) et [`<form>`](/fr/docs/Web/HTML/Element/Form). `autocomplete` permet aux développeuses et développeurs web de spécifier quelle est l'autorisation éventuelle, pour l'[agent utilisateur](/fr/docs/Glossary/User_agent), de fournir une assistance automatisée afin de remplir les valeurs des champs de formulaire, ainsi que des indications au navigateur quant au type d'informations attendues dans le champ.
+
+La source fournissant les valeurs suggérées pour l'autocomplétion dépend du navigateur. Généralement, celle-ci est constituée des valeurs saisies précédemment par l'utilisateur. Des valeurs préconfigurées peuvent aussi être utilisées. Ainsi, un navigateur pourra permettre à un utilisateur d'enregistrer son nom, son adresse, son numéro de téléphone et des adresses électroniques pour l'aider lors de l'autocomplétion. Le navigateur pourrait également fournir le stockage chiffré des informations de cartes bancaires et déclencher une procédure d'authentification lorsque ces informations doivent être récupérées pour être utilisées.
+
+Si les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), [`<select>`](/fr/docs/Web/HTML/Element/select) ou [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea) ne possèdent pas d'attribut `autocomplete`, le navigateur utilisera l'attribut `autocomplete` du formulaire associé (c-à-d. l'élément [`<form>`](/fr/docs/Web/HTML/Element/Form) qui est l'ancêtre de l'élément `<input>` ou l'élément `<form>` dont la valeur de l'attribut `id` correspond à celle indiquée, dans l'attribut [`form`](/fr/docs/Web/HTML/Element/Input#attr-form) de l'élément `<input>`).
+
+Pour plus d'informations, voir la documentation de l'attribut [`autocomplete`](/fr/docs/Web/HTML/Element/Form#attr-autocomplete) pour l'élément [`<form>`](/fr/docs/Web/HTML/Element/Form).
+
+> **Note :** Afin de fournir des fonctionnalités d'autocomplétion, un agent utilisateur pourra utiliser les prérequis suivants quant aux éléments `<input>`/`<select>`/`<textarea>`:
+>
+> 1.  Que ceux-ci aient un attribut `name` et/ou `id`
+> 2.  Que ceux-ci descendent d'un élément `<form>`
+> 3.  Que le formulaire associé ait un bouton [submit](/fr/docs/Web/HTML/Element/Input/submit)
+
+## Valeurs
+
+- `off`
+
+  - : Le navigateur n'est pas autorisé à saisir automatiquement des valeurs pour ce champ. Cette valeur peut être utilisée lorsque le document ou l'application fournit son propre mécanisme d'autocomplétion ou lorsque des raisons de sécurité imposent de ne pas pouvoir saisir la valeur automatiquement.
+
+    > **Note :** Pour la plupart des navigateurs modernes, utiliser `autocomplete="off"` n'empêchera pas un gestionnaire de mots de passe de demander à l'utilisateur s'il souhaite sauvegarder le nom d'utilisateur et le mot de passe ou de renseigner automatiquement les informations pour un formulaire de connexion. Voir [l'article sur l'attribut `autocomplete` et les champs des formulaires de connexion](/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields).
+
+- `on`
+  - : Le navigateur est autorisé à compléter automatiquement le champ. Aucune indication supplémentaire n'est fournie quant au type de donnée attendu et c'est donc au navigateur d'utiliser une heuristique pour proposer des valeurs pertinentes.
+- `name`
+
+  - : Le champ correspondant doit recevoir le nom complet de la personne. Utiliser cette valeur plutôt que les différents composants est une méthode souvent privilégiée car on évite ainsi de gérer les différentes structures des différentes locales. Toutefois, on peut utiliser les composants suivants si on souhaite décomposer l'identité de la personne :
+
+    - `honorific-prefix`
+      - : Le préfixe ou le titre, par exemple « M. », « Mme. », « Me. » , etc.
+    - `given-name`
+      - : Le prénom.
+    - `additional-name`
+      - : Le deuxième prénom.
+    - `family-name`
+      - : Le nom de famille.
+    - `honorific-suffix`
+      - : Un suffixe (par exemple "Jr.").
+    - `nickname`
+      - : Un surnom.
+
+- `email`
+  - : Une adresse électronique.
+- `username`
+  - : Un nom de compte ou un nom d'utilisateur.
+- `new-password`
+  - : Un nouveau mot de passe. Lors de la création d'un compte ou lors d'un changement de mot de passe, cette valeur pourra être utilisée pour le champ où saisir le nouveau mot de passe. Ainsi, on évitera au navigateur de saisir automatiquement le mot de passe actuel ou le navigateur pourra même proposer un outil permettant de créer un mot de passe sécurisé (voir aussi [Empêcher le remplissage automatique avec autocomplete="new-password"](/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#preventing_autofilling_with_autocompletenew-password)).
+- `current-password`
+  - : Le mot de passe actuel de l'utilisateur.
+- `one-time-code`
+  - : Un code à usage unique, utilisé pour vérifier l'identité de l'utilisateur.
+- `organization-title`
+  - : Un titre de poste tel que « Directeur général », « Assistant technique » ou « Ingénieur ».
+- `organization`
+  - : Le nom d'une entreprise ou d'une organisation.
+- `street-address`
+  - : Une adresse postale. Cette adresse peut être un texte sur plusieurs lignes et devrait permettre d'identifier complètement l'emplacement de l'adresse au sein d'une ville. Cette valeur n'inclut pas le nom de la ville, le code postal ou le nom du pays.
+- `address-line1`, `address-line2`, `address-line3`
+  - : Des lignes individuelles pour décrire l'adresse postale. Ces valeurs peuvent être utilisées seulement lorsque la valeur `street-address` est absente.
+- `address-level4`
+  - : Le niveau d'adresse le plus fin ([niveau administratif](#administrative_levels_in_addresses)) lorsque les adresses ont quatre niveaux.
+- `address-level3`
+  - : Le troisième niveau de précision d'une adresse de [niveau administratif](#administrative_levels_in_addresses) lorsque les adresses ont au moins trois niveaux administratifs.
+- `address-level2`
+  - : Le deuxième niveau de précision d'une adresse de [niveau administratif](#administrative_levels_in_addresses) lorsque les adresses ont au moins deux niveaux administratifs. Pour les pays avec deux niveaux administratifs, cela correspond généralement à la ville, au village ou à la localité de l'adresse.
+- `address-level1`
+  - : Le premier niveau de précision d'une adresse de [niveau administratif](#administrative_levels_in_addresses). C'est généralement la région ou l'état dans lequel se situe l'adresse.
+- `country`
+  - : Un code de pays.
+- `country-name`
+  - : Un nom de pays.
+- `postal-code`
+  - : Un code postal.
+- `cc-name`
+  - : Le nom complet tel qu'indiqué sur une carte bancaire. On préfèrera généralement utiliser le nom complet plutôt que de le décomposer en fragments.
+- `cc-given-name`
+  - : Le prénom tel qu'indiqué sur une carte bancaire.
+- `cc-additional-name`
+  - : Le deuxième prénom tel qu'indiqué sur une carte bancaire.
+- `cc-family-name`
+  - : Le nom de famille tel qu'indiqué sur une carte bancaire.
+- `cc-number`
+  - : Le numéro de la carte bancaire ou tout autre numéro identifiant une méthode de paiement (ce peut être un numéro de compte par exemple).
+- `cc-exp`
+  - : La date d'expiration de la méthode de paiement telle qu'indiquée sur une carte bancaire (généralement sous la forme MM/YY ou sous la forme MM/YYYYY où MM correspond aux deux chiffres du mois et où YY ou YYYY correspondent aux chiffres de l'année).
+- `cc-exp-month`
+  - : Le mois d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
+- `cc-exp-year`
+  - : L'année d'expiration du moyen de paiement tel qu'indiqué sur une carte bancaire.
+- `cc-csc`
+  - : Le cryptogramme du moyen de paiement tel qu'indiqué sur une carte bancaire. Il s'agit généralement du code à trois chiffres de vérification situé au dos de la carte bancaire.
+- `cc-type`
+  - : Le type de moyen de paiement ("Visa" ou "Master Card").
+- `transaction-currency`
+  - : La devise utilisée pour la transaction courante.
+- `transaction-amount`
+  - : Le montant de la transaction, pour un formulaire de paiement, exprimé dans la devise fournie par `transaction-currency`.
+- `language`
+  - : La langue préférée, indiquée sous la forme [d'une balise de langue valide selon BCP 47](https://fr.wikipedia.org/wiki/%C3%89tiquette_d%27identification_de_langues_IETF).
+- `bday`
+  - : Une date de naissance complète.
+- `bday-day`
+  - : Le jour du mois de la date de naissance.
+- `bday-month`
+  - : Le mois de l'année de la date de naissance.
+- `bday-year`
+  - : L'année de la date de naissance.
+- `sex`
+  - : Un genre (tel que « femme », « homme », « Fa'afafine » etc.) sous la forme d'un texte libre sans passage à la ligne.
+- `tel`
+
+  - : Un numéro de téléphone complet qui inclut l'identifiant du pays. Si le numéro de téléphone doit être décomposé en composants, on pourra utiliser les valeurs suivantes :
+
+    - `tel-country-code`
+      - : L'indicateur du pays pour le numéro de téléphone (33 pour la France ou 1 pour les États-Unis par exemple).
+    - `tel-national`
+      - : Le numéro de téléphone complet sans l'indicateur du pays.
+    - `tel-area-code`
+      - : Le code de la zone pour le numéro de téléphone avec un préfixe interne au pays si nécessaire.
+    - `tel-local`
+      - : Le numéro de téléphone sans l'indicateur de pays ni l'indicateur de zone.
+
+- `tel-extension`
+  - : Une extension au numéro de téléphone qui permet par exemple d'indiquer le numéro de chambre dans un hôtel ou le numéro d'un bureau au sein d'une entreprise.
+- `impp`
+  - : Une URL pour un protocole de messagerie instantannée (par exemple "xmpp:username\@example.net").
+- `url`
+  - : Une URL, pertinente dans le contexte du formulaire.
+- `photo`
+  - : L'URL d'une image représentant la personne, l'entreprise ou l'information de contact pour ce formulaire.
+
+Voir [la spécification WHATWG](https://html.spec.whatwg.org/multipage/forms.html#autofill) pour plus de détails.
+
+> **Note :** À la différence des autres navigateurs, pour Firefox, l'attribut `autocomplete` contrôlera également si [l'état de désactivation ou de coche dynamique persiste lors d'un rechargement de la page](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) pour un champ `<input>`. Par défaut, un élément reste désactivé ou coché/décoché lors des rechargements. En utilisant l'attribut `autocomplete` avec la valeur `off`, on désactive cette fonctionnalité. Cela fonctionne, y compris lorsque l'attribut `autocomplete` ne devrait pas s'appliquer à l'élément `<input>` d'après son type. Voir [bug 654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072).
+
+## Exemples
+
+```html
+<div>
+  <label for="cc-number">Entrez votre numéro de carte de crédit</label>
+  <input name="cc-number" id="cc-number" autocomplete="off">
 </div>
+```
 
-<h2 id="examples">Exemples</h2>
-
-<pre class="brush: html">&lt;div&gt;
-  &lt;label for="cc-number"&gt;Entrez votre numéro de carte de crédit&lt;/label&gt;
-  &lt;input name="cc-number" id="cc-number" autocomplete="off"&gt;
-&lt;/div&gt;</pre>
-
-<h2 id="administrative_levels_in_addresses">Les niveaux administratifs pour les adresses</h2>
+## Les niveaux administratifs pour les adresses
 
-<p>Les quatre niveaux administratifs pour les adresses (<code>address-level1</code> jusqu'à <code>address-level4</code>) décrivent l'adresse avec un niveau de précision croissant au sein du pays dans lequel l'adresse est situé. Chaque pays possède son propre système de division administrative et peut donc organiser les niveaux selon un ordre différent pour l'écriture des adresses.</p>
+Les quatre niveaux administratifs pour les adresses (`address-level1` jusqu'à `address-level4`) décrivent l'adresse avec un niveau de précision croissant au sein du pays dans lequel l'adresse est situé. Chaque pays possède son propre système de division administrative et peut donc organiser les niveaux selon un ordre différent pour l'écriture des adresses.
 
-<p><code>address-level1</code> représente toujours le niveau le plus large : c'est la composante la moins spécifique de l'adresse après la maille du pays.</p>
+`address-level1` représente toujours le niveau le plus large : c'est la composante la moins spécifique de l'adresse après la maille du pays.
 
-<h3 id="form_layout_flexibility">Disposition du formulaire</h3>
+### Disposition du formulaire
 
-<p>Étant donné qu'une adresse s'écrit différemment selon le pays, il peut être utile, si possible, de fournir différentes dispositions de formulaires pour les utilisateurs (éventuellement en fonction de leur locale) pour faciliter la saisie de leur adresse pour leur pays.</p>
+Étant donné qu'une adresse s'écrit différemment selon le pays, il peut être utile, si possible, de fournir différentes dispositions de formulaires pour les utilisateurs (éventuellement en fonction de leur locale) pour faciliter la saisie de leur adresse pour leur pays.
 
-<h3 id="variations">Variations</h3>
+### Variations
 
-<p>La façon d'utiliser les niveaux administratifs varie d'un pays à l'autre. Voici quelques exemples non exhaustifs.</p>
+La façon d'utiliser les niveaux administratifs varie d'un pays à l'autre. Voici quelques exemples non exhaustifs.
 
-<h4 id="united_states">États-Unis</h4>
+#### États-Unis
 
-<p>Aux États-Unis, une adresse s'écrit généralement comme suit :</p>
+Aux États-Unis, une adresse s'écrit généralement comme suit :
 
-<p>432 Anywhere St<br>
- Exampleville CA 95555</p>
+432 Anywhere St
+Exampleville CA 95555
 
-<p>Dans ce cas, la portion la moins précise est le code "CA" (qui correspond au code postal pour l'état de Californie) et on a donc <code>address-level1</code> qui correspond à ce niveau (ici l'état et plus particulièrement : "CA").</p>
+Dans ce cas, la portion la moins précise est le code "CA" (qui correspond au code postal pour l'état de Californie) et on a donc `address-level1` qui correspond à ce niveau (ici l'état et plus particulièrement : "CA").
 
-<p>La deuxième partie de l'adresse la moins précise est le nom de la ville et c'est donc cette information (ici "Exampleville") qui sera utilisée pour <code>address-level2</code>.</p>
+La deuxième partie de l'adresse la moins précise est le nom de la ville et c'est donc cette information (ici "Exampleville") qui sera utilisée pour `address-level2`.
 
-<p>Les niveaux 3 et 4 ne sont pas utilisés aux États-Unis.</p>
+Les niveaux 3 et 4 ne sont pas utilisés aux États-Unis.
 
-<h4 id="united_kingdom">Royaume-Uni</h4>
+#### Royaume-Uni
 
-<p>Le Royaume-Uni utilise un ou deux niveaux d'adresse selon l'adresse. Il s'agit de la ville postale et, dans certains cas, de la localité. Une adresse complète ressemblerait à ceci :</p>
+Le Royaume-Uni utilise un ou deux niveaux d'adresse selon l'adresse. Il s'agit de la ville postale et, dans certains cas, de la localité. Une adresse complète ressemblerait à ceci :
 
-<p>103 Frogmarch Street<br>
-Upper-Wapping<br>
-Winchelsea<br>
-TN99 8ZZ</p>
+103 Frogmarch Street
+Upper-Wapping
+Winchelsea
+TN99 8ZZ
 
-<p>Les niveaux d'adresse sont les suivants :</p>
+Les niveaux d'adresse sont les suivants :
 
-<ul>
-	<li><code>address-level1</code> : La ville postale — "Winchelsea" dans ce cas.</li>
-	<li><code>address-line2</code> : La localité — "Upper-Wapping" dans ce cas.</li>
-	<li><code>address-line1</code> : Les détails de la maison/rue — "103 Frogmarch Street"</li>
-</ul>
+- `address-level1` : La ville postale — "Winchelsea" dans ce cas.
+- `address-line2` : La localité — "Upper-Wapping" dans ce cas.
+- `address-line1` : Les détails de la maison/rue — "103 Frogmarch Street"
 
-<p>Le code postal est séparé. Notez que vous pouvez en fait utiliser uniquement le code postal et <code>address-line1</code> pour réussir à distribuer du courrier au Royaume-Uni, ils devraient donc être les seuls éléments obligatoires, mais les gens ont généralement tendance à fournir plus de détails.</p>
+Le code postal est séparé. Notez que vous pouvez en fait utiliser uniquement le code postal et `address-line1` pour réussir à distribuer du courrier au Royaume-Uni, ils devraient donc être les seuls éléments obligatoires, mais les gens ont généralement tendance à fournir plus de détails.
 
-<h4 id="china">Chine</h4>
+#### Chine
 
-<p>La Chine utilise jusqu'à trois niveaux administratifs : la province, la ville et le district.</p>
+La Chine utilise jusqu'à trois niveaux administratifs : la province, la ville et le district.
 
-<p>Le code postal à 6 chiffres n'est pas toujours nécessaire mais lorsqu'il est fourni, il est placé séparément avec une étiquette pour plus de clarté. Par exemple :</p>
+Le code postal à 6 chiffres n'est pas toujours nécessaire mais lorsqu'il est fourni, il est placé séparément avec une étiquette pour plus de clarté. Par exemple :
 
-<p>北京市东城区建国门北大街8号华润大厦17层1708单元<br>
-邮编：100005</p>
+北京市东城区建国门北大街 8 号华润大厦 17 层 1708 单元
+邮编：100005
 
-<h4 id="japan">Japon</h4>
+#### Japon
 
-<p>Une adresse au Japon est généralement <strong>écrite sur une ligne</strong>, dans un ordre allant des parties les moins spécifiques aux plus spécifiques (dans <strong>l'ordre inverse des États-Unis</strong>). Il y a deux ou trois niveaux administratifs dans une adresse. Une ligne supplémentaire peut être utilisée pour indiquer les noms des bâtiments et les numéros des pièces. Le code postal est séparé. Par exemple :</p>
+Une adresse au Japon est généralement **écrite sur une ligne**, dans un ordre allant des parties les moins spécifiques aux plus spécifiques (dans **l'ordre inverse des États-Unis**). Il y a deux ou trois niveaux administratifs dans une adresse. Une ligne supplémentaire peut être utilisée pour indiquer les noms des bâtiments et les numéros des pièces. Le code postal est séparé. Par exemple :
 
-<p>〒381-0000<br>
-長野県長野市某町123</p>
+〒 381-0000
+長野県長野市某町 123
 
-<p>« 〒 » et les sept chiffres suivants indiquent le code postal.</p>
+« 〒 » et les sept chiffres suivants indiquent le code postal.
 
-<p><code>address-level1</code> est utilisé pour les préfectures ou la métropole de Tokyo ; « 長野県 » (préfecture de Nagano) dans ce cas. <code>address-level2</code> est généralement utilisé pour les villes, les comtés, les communes et les villages ; « 長野市 » (ville de Nagano) dans ce cas. « 某町123 » est<code>address-line1</code> qui se compose d'un nom de zone et d'un numéro de colis.</p>
+`address-level1` est utilisé pour les préfectures ou la métropole de Tokyo ; « 長野県 » (préfecture de Nagano) dans ce cas. `address-level2` est généralement utilisé pour les villes, les comtés, les communes et les villages ; « 長野市 » (ville de Nagano) dans ce cas. « 某町 123 » est`address-line1` qui se compose d'un nom de zone et d'un numéro de colis.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', "#attr-fe-autocomplete", "autocomplete")}}</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                |
+| -------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "#attr-fe-autocomplete", "autocomplete")}} |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.global_attributes.autocomplete")}}</p>
+{{Compat("html.global_attributes.autocomplete")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément HTML <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></li>
- <li>L'élément HTML <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a></li>
- <li>L'élément HTML <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></li>
- <li>L'élément HTML <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></li>
- <li><a href="/fr/docs/Learn/Forms">Les formulaires HTML</a></li>
- <li><a href="/fr/docs/Web/HTML/Global_attributes">Les attributs universels</a>.</li>
-</ul>
+- L'élément HTML [`<input>`](/fr/docs/Web/HTML/Element/Input)
+- L'élément HTML [`<select>`](/fr/docs/Web/HTML/Element/select)
+- L'élément HTML [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea)
+- L'élément HTML [`<form>`](/fr/docs/Web/HTML/Element/Form)
+- [Les formulaires HTML](/fr/docs/Learn/Forms)
+- [Les attributs universels](/fr/docs/Web/HTML/Global_attributes).
diff --git a/files/fr/web/html/attributes/capture/index.md b/files/fr/web/html/attributes/capture/index.md
index c55c1a05e9..887afc93fd 100644
--- a/files/fr/web/html/attributes/capture/index.md
+++ b/files/fr/web/html/attributes/capture/index.md
@@ -10,81 +10,54 @@ tags:
   - HTML
 translation_of: Web/HTML/Attributes/capture
 ---
-<p>{{HTMLSidebar}}</p>
+{{HTMLSidebar}}
 
-<p>L'attribut <strong><code>capture</code></strong> spécifie que, facultativement, un nouveau fichier doit être capturé, et le périphérique qui devrait être utilisé pour capturer ce nouveau média d'un type défini par l'attribut <code><a href="accept">accept</a></code>. Les valeurs comprennent <code>user</code> et <code>environment</code>. L'attribut capture est pris en charge sur les champs de formulaire de type <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>.</p>
+L'attribut **`capture`** spécifie que, facultativement, un nouveau fichier doit être capturé, et le périphérique qui devrait être utilisé pour capturer ce nouveau média d'un type défini par l'attribut [`accept`](accept). Les valeurs comprennent `user` et `environment`. L'attribut capture est pris en charge sur les champs de formulaire de type [`file`](/fr/docs/Web/HTML/Element/Input/file).
 
-<p>L'attribut <code>capture</code> prend pour valeur une chaîne de caractères qui spécifie quelle caméra utiliser pour la capture des données d'image ou de vidéo, si l'attribut <a href="accept"><code>accept</code></a> indique que l'entrée doit être de l'un de ces types.</p>
+L'attribut `capture` prend pour valeur une chaîne de caractères qui spécifie quelle caméra utiliser pour la capture des données d'image ou de vidéo, si l'attribut [`accept`](accept) indique que l'entrée doit être de l'un de ces types.
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Valeur</th>
-      <th scope="col">Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>user</code></td>
-      <td>La caméra et/ou le microphone faisant face à l'utilisateur devraient être utilisés.</td>
-    </tr>
-    <tr>
-      <td><code>environment</code></td>
-      <td>La caméra et/ou le microphone orientés vers l'extérieur devraient être utilisés.</td>
-    </tr>
-  </tbody>
-</table>
+| Valeur        | Description                                                                         |
+| ------------- | ----------------------------------------------------------------------------------- |
+| `user`        | La caméra et/ou le microphone faisant face à l'utilisateur devraient être utilisés. |
+| `environment` | La caméra et/ou le microphone orientés vers l'extérieur devraient être utilisés.    |
 
-<div class="note">
-  <p><strong>Note :</strong> Capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiqué que les périphériques de capture de l'appareil (comme la caméra ou le micro) devaient être utilisés plutôt que de demander à l'utilisateur de sélectionner un fichier.</p>
-</div>
+> **Note :** Capture était auparavant un attribut booléen qui, lorsqu'il était présent, indiqué que les périphériques de capture de l'appareil (comme la caméra ou le micro) devaient être utilisés plutôt que de demander à l'utilisateur de sélectionner un fichier.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>Lorsqu'ils sont définis sur un type d'entrée de fichier, les systèmes d'exploitation dotés de microphones et de caméras affichent une interface utilisateur permettant la sélection à partir d'un fichier existant ou la création d'un nouveau fichier.</p>
+Lorsqu'ils sont définis sur un type d'entrée de fichier, les systèmes d'exploitation dotés de microphones et de caméras affichent une interface utilisateur permettant la sélection à partir d'un fichier existant ou la création d'un nouveau fichier.
 
-<pre class="brush: html">&lt;p&gt;
-  &lt;label for="soundFile"&gt;Quel est le son de votre voix ?&lt;/label&gt;
-  &lt;input type="file" id="soundFile" capture="user" accept="audio/*"&gt;
-&lt;/p&gt;
-&lt;p&gt;
-  &lt;label for="videoFile"&gt;Téléchargez une vidéo :&lt;/label&gt;
-  &lt;input type="file" id="videoFile" capture="environment" accept="video/*"&gt;
-&lt;/p&gt;
-&lt;p&gt;
-  &lt;label for="imageFile"&gt;Téléchargez une photo de vous :&lt;/label&gt;
-  &lt;input type="file" id="imageFile" capture="user" accept="image/*"&gt;
-&lt;/p&gt;</pre>
+```html
+<p>
+  <label for="soundFile">Quel est le son de votre voix ?</label>
+  <input type="file" id="soundFile" capture="user" accept="audio/*">
+</p>
+<p>
+  <label for="videoFile">Téléchargez une vidéo :</label>
+  <input type="file" id="videoFile" capture="environment" accept="video/*">
+</p>
+<p>
+  <label for="imageFile">Téléchargez une photo de vous :</label>
+  <input type="file" id="imageFile" capture="user" accept="image/*">
+</p>
+```
 
-<p>{{EmbedLiveSample('examples', '', 200)}}</p>
+{{EmbedLiveSample('examples', '', 200)}}
 
-<p>Notez que ceux-ci fonctionnent mieux sur les appareils mobiles ; si votre appareil est un ordinateur de bureau, vous obtiendrez probablement un sélecteur de fichiers classique.</p>
+Notez que ceux-ci fonctionnent mieux sur les appareils mobiles ; si votre appareil est un ordinateur de bureau, vous obtiendrez probablement un sélecteur de fichiers classique.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}}</td>
-      <td>{{Spec2('HTML Media Capture')}}</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                | Statut                                   |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- |
+| {{SpecName('HTML Media Capture', '#the-capture-attribute','capture attribute')}} | {{Spec2('HTML Media Capture')}} |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.attribute.capture")}}</p>
+{{Compat("html.elements.attribute.capture")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/File/Using_files_from_web_applications">Utilisation de fichiers à partir d'applications web</a></li>
-  <li><a href="/fr/docs/Web/API/File">File API</a></li>
-  <li>La propriété <a href="/fr/docs/Web/API/HTMLInputElement"><code>HTMLInputElement.files</code></a></li>
-</ul>
+- [Utilisation de fichiers à partir d'applications web](/fr/docs/Web/API/File/Using_files_from_web_applications)
+- [File API](/fr/docs/Web/API/File)
+- La propriété [`HTMLInputElement.files`](/fr/docs/Web/API/HTMLInputElement)
diff --git a/files/fr/web/html/attributes/crossorigin/index.md b/files/fr/web/html/attributes/crossorigin/index.md
index 6d9a19c6c6..97e481cdb3 100644
--- a/files/fr/web/html/attributes/crossorigin/index.md
+++ b/files/fr/web/html/attributes/crossorigin/index.md
@@ -12,96 +12,66 @@ tags:
 translation_of: Web/HTML/Attributes/crossorigin
 original_slug: Web/HTML/Reglages_des_attributs_CORS
 ---
-<div>{{HTMLSidebar}}</div>
+{{HTMLSidebar}}
 
-<p>L'attribut <strong><code>crossorigin</code></strong>, valable sur les éléments <a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>, fournit la prise en charge de <a href="/en-US/docs/Web/HTTP/CORS">CORS</a>, définissant la manière dont l'élément traite les demandes d'origine croisée, permettant ainsi la configuration des demandes CORS pour les données extraites de l'élément. Selon l'élément, l'attribut peut être un attribut de paramètres CORS.</p>
+L'attribut **`crossorigin`**, valable sur les éléments [`<audio>`](/fr/docs/Web/HTML/Element/audio), [`<img>`](/fr/docs/Web/HTML/Element/Img), [`<link>`](/fr/docs/Web/HTML/Element/link), [`<script>`](/fr/docs/Web/HTML/Element/script) et [`<video>`](/fr/docs/Web/HTML/Element/video), fournit la prise en charge de [CORS](/en-US/docs/Web/HTTP/CORS), définissant la manière dont l'élément traite les demandes d'origine croisée, permettant ainsi la configuration des demandes CORS pour les données extraites de l'élément. Selon l'élément, l'attribut peut être un attribut de paramètres CORS.
 
-<p>L'attribut de contenu <code>crossorigin</code> sur les éléments médias est un attribut de paramétrage CORS.</p>
+L'attribut de contenu `crossorigin` sur les éléments médias est un attribut de paramétrage CORS.
 
-<p>Ces attributs sont énumérés, et ont les valeurs possibles suivantes :</p>
+Ces attributs sont énumérés, et ont les valeurs possibles suivantes :
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Mot-clé</th>
-      <th scope="col">Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>anonymous</code></td>
-      <td>Les requêtes CORS pour cet élément auront le marqueur d'authentification (<em>credentials flag</em>) avec la valeur <code>'same-origin'</code>.</td>
-    </tr>
-    <tr>
-      <td><code>use-credentials</code></td>
-      <td>Les requêtes CORS pour cet élément auront le marqueur d'authentification (<em>credentials flag</em>) avec la valeur <code>'include'</code>.</td>
-    </tr>
-    <tr>
-      <td><code>""</code></td>
-      <td>Utiliser la chaîne vide (<code>crossorigin=""</code>) ou l'attribut seul (<code>crossorigin</code>) sera équivalent à l'utilisation de la valeur <code>anonymous</code>.</td>
-    </tr>
-  </tbody>
-</table>
+| Mot-clé           | Description                                                                                                                             |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `anonymous`       | Les requêtes CORS pour cet élément auront le marqueur d'authentification (_credentials flag_) avec la valeur `'same-origin'`.           |
+| `use-credentials` | Les requêtes CORS pour cet élément auront le marqueur d'authentification (_credentials flag_) avec la valeur `'include'`.               |
+| `""`              | Utiliser la chaîne vide (`crossorigin=""`) ou l'attribut seul (`crossorigin`) sera équivalent à l'utilisation de la valeur `anonymous`. |
 
-<p>Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé « anonymous » signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d<strong>'informations d'authentification de l'utilisateur</strong> via des cookies, ni des certificats TLS côté client ou des authentifications HTTP comme détaillé dans la <a href="https://www.w3.org/TR/cors/#user-credentials">section terminologique de la spécification CORS</a>.</p>
+Par défaut (quand l'attribut n'est pas spécifié), le CORS n'est pas du tout utilisé. Le mot-clé « anonymous » signifie que, lorsqu'il n'y a pas la même origine, il n'y aura ni échange d**'informations d'authentification de l'utilisateur** via des cookies, ni des certificats TLS côté client ou des authentifications HTTP comme détaillé dans la [section terminologique de la spécification CORS](https://www.w3.org/TR/cors/#user-credentials).
 
-<p>Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé <code>anonymous</code>.</p>
+Un mot-clé invalide ou une chaîne de caractères vide seront interprétés comme le mot-clé `anonymous`.
 
-<div class="note">
-  <p><strong>Note :</strong> Avant Firefox 83, l'attribut <code>crossorigin</code> n'était pas pris en charge pour <code>rel="icon"</code> ; il existe également <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">un bug sur Chrome</a>.</p>
-</div>
+> **Note :** Avant Firefox 83, l'attribut `crossorigin` n'était pas pris en charge pour `rel="icon"` ; il existe également [un bug sur Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=1121645).
 
-<h2 id="examples">Exemples</h2>
-<h3 id="example_crossorigin_with_the_script_element">Utiliser <code>crossorigin</code> avec l'élément <code>script</code></h3>
+## Exemples
 
-<p>On peut utiliser l'élément <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a> afin d'indiquer au navigateur d'exécuter un script (ici, <code>https://exemple.com/framework-exemple.js</code>) sans envoyer les informations d'authentification de l'utilisateur.</p>
+### Utiliser `crossorigin` avec l'élément `script`
 
-<pre class="brush: html">&lt;script src="https://exemple.com/framework-exemple.js" crossorigin="anonymous"&gt;&lt;/script&gt;</pre>
+On peut utiliser l'élément [`<script>`](/fr/docs/Web/HTML/Element/script) afin d'indiquer au navigateur d'exécuter un script (ici, `https://exemple.com/framework-exemple.js`) sans envoyer les informations d'authentification de l'utilisateur.
 
-<h3 id="example_webmanifest_with_credentials">Utiliser des informations d'authentification avec un manifeste</h3>
+```html
+<script src="https://exemple.com/framework-exemple.js" crossorigin="anonymous"></script>
+```
 
-<p>La valeur <code>use-credentials</code> doit être utilisée lorsqu'on récupère un <a href="/fr/docs/Web/Manifest">manifeste</a> nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :</p>
+### Utiliser des informations d'authentification avec un manifeste
 
-<pre class="brush: html">&lt;link rel="manifest" href="/app.manifest" crossorigin="use-credentials"&gt;</pre>
+La valeur `use-credentials` doit être utilisée lorsqu'on récupère un [manifeste](/fr/docs/Web/Manifest) nécessitant des informations d'authentification, y compris lorsque le fichier provient de la même origine :
 
-<h2 id="specifications">Spécifications</h2>
+```html
+<link rel="manifest" href="/app.manifest" crossorigin="use-credentials">
+```
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-  </tbody>
-</table>
+## Spécifications
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+| Spécification                                                                                                                            | Statut                           |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}} | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}                     | {{Spec2('HTML WHATWG')}} |
 
-<h3 id="script_crossorigin">Pour l'élément script</h3>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.script.crossorigin")}}</p>
+### Pour l'élément script
 
-<h3 id="video_crossorigin">Pour l'élément video</h3>
+{{Compat("html.elements.script.crossorigin")}}
 
-<p>{{Compat("html.elements.video.crossorigin")}}</p>
+### Pour l'élément video
 
-<h3 id="link_crossorigin">Pour l'élément link</h3>
+{{Compat("html.elements.video.crossorigin")}}
 
-<p>{{Compat("html.elements.link.crossorigin")}}</p>
+### Pour l'élément link
 
-<h2 id="see_also">Voir aussi</h2>
+{{Compat("html.elements.link.crossorigin")}}
 
-<ul>
-	<li><a href="/fr/docs/Web/HTTP/CORS">Partage des ressources entre origines (CORS)</a></li>
-	<li><a href="/fr/docs/Web/HTML/Attributes/rel">L'attribut HTML <code>rel</code></a></li>
-</ul>
+## Voir aussi
+
+- [Partage des ressources entre origines (CORS)](/fr/docs/Web/HTTP/CORS)
+- [L'attribut HTML `rel`](/fr/docs/Web/HTML/Attributes/rel)
diff --git a/files/fr/web/html/attributes/disabled/index.md b/files/fr/web/html/attributes/disabled/index.md
index 7bc4989a26..9ce0368c12 100644
--- a/files/fr/web/html/attributes/disabled/index.md
+++ b/files/fr/web/html/attributes/disabled/index.md
@@ -9,131 +9,110 @@ tags:
   - required
 translation_of: Web/HTML/Attributes/disabled
 ---
-<p>{{HTMLSidebar}}</p>
+{{HTMLSidebar}}
 
-<p>L'attribut booléen <code><strong>disabled</strong></code>, lorsqu'il est présent, rend l'élément non mutable, non focusable, ou même non soumis avec le formulaire. L'utilisateur ne peut ni modifier ni cibler le contrôle, ni les descendants du contrôle de formulaire. Si l'attribut <code>disabled</code> est spécifié sur un contrôle de formulaire, l'élément et ses descendants de contrôle de formulaire ne participent pas à la validation des contraintes. Souvent, les navigateurs grisent ces contrôles et ils ne reçoivent aucun événement de navigation, comme les clics de souris ou les événements liés au focus.</p>
-
-<p>L'attribut <code>disabled</code> est utilisé par <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Fieldset"><code>&lt;fieldset&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Keygen"><code>&lt;keygen&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Optgroup"><code>&lt;optgroup&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>.</p>
-
-<p>Cet attribut booléen indique que l'utilisateur ne peut pas interagir avec le contrôle ou ses contrôles descendants. Si cet attribut n'est pas spécifié, le contrôle hérite ce paramètre de l'élément contenant, par exemple <code>fieldset</code> ; s'il n'y a pas d'élément contenant avec l'attribut <code>disabled</code> défini, et que le contrôle lui-même ne possède pas cet attribut, alors le contrôle est activé. S'il est déclaré sur un <a href="/fr/docs/Web/HTML/Element/Optgroup"><code>&lt;optgroup&gt;</code></a>, le sélecteur est toujours interactif (sauf s'il est désactivé autrement), mais aucun des éléments du groupe d'options n'est sélectionnable.</p>
-
-<div class="note">
-  <p><strong>Note :</strong>Si un <a href="/fr/docs/Web/HTML/Element/Fieldset"><code>&lt;fieldset&gt;</code></a> est désactivé, les contrôles de formulaire descendants sont tous désactivés, à l'exception des contrôles de formulaire dans la légende (<a href="/fr/docs/Web/HTML/Element/Legend"><code>&lt;legend&gt;</code></a>).</p>
-</div>
-
-<p>Lorsqu'un élément de support a l'attribut <code>disabled</code> est appliqué, la pseudo-classe <a href="/fr/docs/Web/CSS/:disabled"><code>:disabled</code></a> s'y applique également. Inversement, les éléments qui prennent en charge l'attribut <code>disabled</code> mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe <a href="/fr/docs/Web/CSS/:enabled"><code>:enabled</code></a>.</p>
-
-<p>Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton. Si cet attribut n'est pas défini, le bouton peut toujours être désactivé à partir d'un élément contenant, par exemple <a href="/fr/docs/Web/HTML/Element/Fieldset"><code>&lt;fieldset&gt;</code></a> ; s'il n'y a pas d'élément contenant avec l'attribut <code>disabled</code> défini, alors le bouton est activé.</p>
-
-<p>Firefox va, contrairement aux autres navigateurs, faire persister l'état désactivé dynamique d'un <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a> à travers les chargements de pages. Utilisez l'attribut <a href="/fr/docs/Web/HTML/Attributes/autocomplete"><code>autocomplete</code></a> pour contrôler cette fonctionnalité.</p>
-
-<h3 id="attribute_interactions">Interactions entre attributs</h3>
-
-<p>La différence entre <code>disabled</code> et <a href="/fr/docs/Web/HTML/Attributes/readonly"><code>readonly</code></a> est que les contrôles en lecture seule peuvent toujours fonctionner et sont toujours focusables, alors que les contrôles désactivés ne peuvent pas recevoir de focus et ne sont pas soumis avec le formulaire et ne fonctionnent généralement pas comme contrôles jusqu'à ce qu'ils soient activés.</p>
-
-<p>Étant donné qu'un champ désactivé ne peut pas voir sa valeur modifiée, <a href="/fr/docs/Web/HTML/Attributes/required"><code>required</code></a> n'a aucun effet sur les entrées dont l'attribut <code>disabled</code> est également spécifié. De plus, puisque les éléments deviennent immuables, la plupart des autres attributs, tels que <a href="/fr/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>, n'ont aucun effet, tant que le contrôle n'est pas activé.</p>
-
-<div class="note">
-  <p><strong>Note :</strong>L'attribut <code>required</code> n'est pas autorisé sur les entrées pour lesquelles l'attribut <code>disabled</code> est spécifié.</p>
-</div>
-
-<h3 id="usability">Utilisation</h3>
-
-<p>Les navigateurs affichent les contrôles de formulaire désactivés en grisé, car les contrôles de formulaire désactivés sont immuables, ne reçoivent pas de focus ou d'événements de navigation, comme les clics de souris ou les événements liés au focus, et ne sont pas soumis avec le formulaire.</p>
-
-<p>S'il est présent sur un élément de support, la pseudo-classe <a href="/fr/docs/Web/CSS/:disabled"><code>:disabled</code></a> correspondra. Si l'attribut n'est pas inclus, la pseudo-classe <a href="/fr/docs/Web/CSS/:enabled"><code>:enabled</code></a> correspondra. Si l'élément ne prend pas en charge l'attribut disabled, l'attribut n'aura aucun effet, y compris celui de ne pas être apparié par les pseudo-classes <code>:disabled</code> et <code>:enabled</code>.</p>
-
-<h3 id="constraint_validation">Validation des contraintes</h3>
-
-<p>Si l'élément est <code>disabled</code>, alors la valeur de l'élément ne peut pas recevoir de focus et ne peut pas être mis à jour par l'utilisateur, et ne participe pas à la validation des contraintes.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<p>Lorsque les contrôles de formulaire sont désactivés, de nombreux navigateurs les affichent par défaut dans une couleur plus claire et grisée. Voici des exemples de case à cocher, bouton radio, <a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/Optgroup"><code>&lt;optgroup&gt;</code></a>, ainsi que certains contrôles de formulaire qui sont désactivés via l'attribut <code>disabled</code> défini sur l'élément ancêtre <a href="/fr/docs/Web/HTML/Element/Fieldset"><code>&lt;fieldset&gt;</code></a>. Les <a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a> sont désactivés, mais le <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> lui-même ne l'est pas. Nous aurions pu désactiver l'ensemble de <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> en ajoutant l'attribut à cet élément plutôt qu'à ses descendants.</p>
-
-<pre class="brush: html">&lt;fieldset&gt;
-  &lt;legend&gt;Cases à cocher&lt;/legend&gt;
-  &lt;p&gt;&lt;label&gt;
-    &lt;input type="checkbox" name="chbox" value="regular"&gt; Régulier
-  &lt;/label&gt;&lt;/p&gt;
-  &lt;p&gt;&lt;label&gt;
-    &lt;input type="checkbox" name="chbox" value="disabled" disabled&gt; désactivé
-  &lt;/label&gt;&lt;/p&gt;
-&lt;/fieldset&gt;
-
-&lt;fieldset&gt;
-  &lt;legend&gt;Boutons radio&lt;/legend&gt;
-  &lt;p&gt;&lt;label&gt;
-    &lt;input type="radio" name="radio" value="regular"&gt; Régulier
-  &lt;/label&gt;&lt;/p&gt;
-  &lt;p&gt;&lt;label&gt;
-    &lt;input type="radio" name="radio" value="disabled" disabled&gt; désactivé
-  &lt;/label&gt;&lt;/p&gt;
-&lt;/fieldset&gt;
-
-&lt;p&gt;
-  &lt;label&gt;Sélectionnez une option :
-    &lt;select&gt;
-      &lt;optgroup label="Groupe 1"&gt;
-        &lt;option&gt;Option 1.1&lt;/option&gt;
-      &lt;/optgroup&gt;
-      &lt;optgroup label="Groupe 2"&gt;
-        &lt;option&gt;Option 2.1&lt;/option&gt;
-        &lt;option disabled&gt;Option 2.2&lt;/option&gt;
-        &lt;option&gt;Option 2.3&lt;/option&gt;
-      &lt;/optgroup&gt;
-      &lt;optgroup label="Groupe 3" disabled&gt;
-        &lt;option&gt;Désactivé 3.1&lt;/option&gt;
-        &lt;option&gt;Désactivé 3.2&lt;/option&gt;
-        &lt;option&gt;Désactivé 3.3&lt;/option&gt;
-      &lt;/optgroup&gt;
-    &lt;/select&gt;
-  &lt;/label&gt;
-&lt;/p&gt;
-
-&lt;fieldset disabled&gt;
-  &lt;legend&gt;Champ désactivé&lt;/legend&gt;
-  &lt;p&gt;
-    &lt;label&gt;Nom : &lt;input type="name" name="radio" value="régulier"&gt; Régulier&lt;/label&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label&gt;Nombre : &lt;input type="number"&gt;&lt;/label&gt;
-  &lt;/p&gt;
-&lt;/fieldset&gt;</pre>
-
-<div>{{EmbedLiveSample('examples', '', 460)}}</div>
-
-<h2 id="specifications">Spécifications</h2>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-disabled', 'disabled attribute')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-disabled', 'disabled attribute')}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5.1', 'sec-forms.html#the-disabled-attribute', 'disabled attribute')}}</td>
-      <td>{{Spec2('HTML5.1')}}</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.elements.attributes.disabled")}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li>Les pseudo-classes <a href="/fr/docs/Web/CSS/:disabled"><code>:disabled</code></a> et <a href="/fr/docs/Web/CSS/:enabled"><code>:enabled</code></a></li>
-</ul>
+L'attribut booléen **`disabled`**, lorsqu'il est présent, rend l'élément non mutable, non focusable, ou même non soumis avec le formulaire. L'utilisateur ne peut ni modifier ni cibler le contrôle, ni les descendants du contrôle de formulaire. Si l'attribut `disabled` est spécifié sur un contrôle de formulaire, l'élément et ses descendants de contrôle de formulaire ne participent pas à la validation des contraintes. Souvent, les navigateurs grisent ces contrôles et ils ne reçoivent aucun événement de navigation, comme les clics de souris ou les événements liés au focus.
+
+L'attribut `disabled` est utilisé par [`<button>`](/fr/docs/Web/HTML/Element/Button), [`<fieldset>`](/fr/docs/Web/HTML/Element/Fieldset), [`<keygen>`](/fr/docs/Web/HTML/Element/Keygen), [`<optgroup>`](/fr/docs/Web/HTML/Element/Optgroup), [`<option>`](/fr/docs/Web/HTML/Element/Option), [`<select>`](/fr/docs/Web/HTML/Element/select), [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea) et [`<input>`](/fr/docs/Web/HTML/Element/Input).
+
+Cet attribut booléen indique que l'utilisateur ne peut pas interagir avec le contrôle ou ses contrôles descendants. Si cet attribut n'est pas spécifié, le contrôle hérite ce paramètre de l'élément contenant, par exemple `fieldset` ; s'il n'y a pas d'élément contenant avec l'attribut `disabled` défini, et que le contrôle lui-même ne possède pas cet attribut, alors le contrôle est activé. S'il est déclaré sur un [`<optgroup>`](/fr/docs/Web/HTML/Element/Optgroup), le sélecteur est toujours interactif (sauf s'il est désactivé autrement), mais aucun des éléments du groupe d'options n'est sélectionnable.
+
+> **Note :**Si un [`<fieldset>`](/fr/docs/Web/HTML/Element/Fieldset) est désactivé, les contrôles de formulaire descendants sont tous désactivés, à l'exception des contrôles de formulaire dans la légende ([`<legend>`](/fr/docs/Web/HTML/Element/Legend)).
+
+Lorsqu'un élément de support a l'attribut `disabled` est appliqué, la pseudo-classe [`:disabled`](/fr/docs/Web/CSS/:disabled) s'y applique également. Inversement, les éléments qui prennent en charge l'attribut `disabled` mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe [`:enabled`](/fr/docs/Web/CSS/:enabled).
+
+Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton. Si cet attribut n'est pas défini, le bouton peut toujours être désactivé à partir d'un élément contenant, par exemple [`<fieldset>`](/fr/docs/Web/HTML/Element/Fieldset) ; s'il n'y a pas d'élément contenant avec l'attribut `disabled` défini, alors le bouton est activé.
+
+Firefox va, contrairement aux autres navigateurs, faire persister l'état désactivé dynamique d'un [`<button>`](/fr/docs/Web/HTML/Element/Button) à travers les chargements de pages. Utilisez l'attribut [`autocomplete`](/fr/docs/Web/HTML/Attributes/autocomplete) pour contrôler cette fonctionnalité.
+
+### Interactions entre attributs
+
+La différence entre `disabled` et [`readonly`](/fr/docs/Web/HTML/Attributes/readonly) est que les contrôles en lecture seule peuvent toujours fonctionner et sont toujours focusables, alors que les contrôles désactivés ne peuvent pas recevoir de focus et ne sont pas soumis avec le formulaire et ne fonctionnent généralement pas comme contrôles jusqu'à ce qu'ils soient activés.
+
+Étant donné qu'un champ désactivé ne peut pas voir sa valeur modifiée, [`required`](/fr/docs/Web/HTML/Attributes/required) n'a aucun effet sur les entrées dont l'attribut `disabled` est également spécifié. De plus, puisque les éléments deviennent immuables, la plupart des autres attributs, tels que [`pattern`](/fr/docs/Web/HTML/Attributes/pattern), n'ont aucun effet, tant que le contrôle n'est pas activé.
+
+> **Note :**L'attribut `required` n'est pas autorisé sur les entrées pour lesquelles l'attribut `disabled` est spécifié.
+
+### Utilisation
+
+Les navigateurs affichent les contrôles de formulaire désactivés en grisé, car les contrôles de formulaire désactivés sont immuables, ne reçoivent pas de focus ou d'événements de navigation, comme les clics de souris ou les événements liés au focus, et ne sont pas soumis avec le formulaire.
+
+S'il est présent sur un élément de support, la pseudo-classe [`:disabled`](/fr/docs/Web/CSS/:disabled) correspondra. Si l'attribut n'est pas inclus, la pseudo-classe [`:enabled`](/fr/docs/Web/CSS/:enabled) correspondra. Si l'élément ne prend pas en charge l'attribut disabled, l'attribut n'aura aucun effet, y compris celui de ne pas être apparié par les pseudo-classes `:disabled` et `:enabled`.
+
+### Validation des contraintes
+
+Si l'élément est `disabled`, alors la valeur de l'élément ne peut pas recevoir de focus et ne peut pas être mis à jour par l'utilisateur, et ne participe pas à la validation des contraintes.
+
+## Exemples
+
+Lorsque les contrôles de formulaire sont désactivés, de nombreux navigateurs les affichent par défaut dans une couleur plus claire et grisée. Voici des exemples de case à cocher, bouton radio, [`<option>`](/fr/docs/Web/HTML/Element/Option) et [`<optgroup>`](/fr/docs/Web/HTML/Element/Optgroup), ainsi que certains contrôles de formulaire qui sont désactivés via l'attribut `disabled` défini sur l'élément ancêtre [`<fieldset>`](/fr/docs/Web/HTML/Element/Fieldset). Les [`<option>`](/fr/docs/Web/HTML/Element/Option) sont désactivés, mais le [`<select>`](/fr/docs/Web/HTML/Element/select) lui-même ne l'est pas. Nous aurions pu désactiver l'ensemble de [`<select>`](/fr/docs/Web/HTML/Element/select) en ajoutant l'attribut à cet élément plutôt qu'à ses descendants.
+
+```html
+<fieldset>
+  <legend>Cases à cocher</legend>
+  <p><label>
+    <input type="checkbox" name="chbox" value="regular"> Régulier
+  </label></p>
+  <p><label>
+    <input type="checkbox" name="chbox" value="disabled" disabled> désactivé
+  </label></p>
+</fieldset>
+
+<fieldset>
+  <legend>Boutons radio</legend>
+  <p><label>
+    <input type="radio" name="radio" value="regular"> Régulier
+  </label></p>
+  <p><label>
+    <input type="radio" name="radio" value="disabled" disabled> désactivé
+  </label></p>
+</fieldset>
+
+<p>
+  <label>Sélectionnez une option :
+    <select>
+      <optgroup label="Groupe 1">
+        <option>Option 1.1</option>
+      </optgroup>
+      <optgroup label="Groupe 2">
+        <option>Option 2.1</option>
+        <option disabled>Option 2.2</option>
+        <option>Option 2.3</option>
+      </optgroup>
+      <optgroup label="Groupe 3" disabled>
+        <option>Désactivé 3.1</option>
+        <option>Désactivé 3.2</option>
+        <option>Désactivé 3.3</option>
+      </optgroup>
+    </select>
+  </label>
+</p>
+
+<fieldset disabled>
+  <legend>Champ désactivé</legend>
+  <p>
+    <label>Nom : <input type="name" name="radio" value="régulier"> Régulier</label>
+  </p>
+  <p>
+    <label>Nombre : <input type="number"></label>
+  </p>
+</fieldset>
+```
+
+{{EmbedLiveSample('examples', '', 460)}}
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                           |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#attr-input-disabled', 'disabled attribute')}}     | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5 W3C', 'forms.html#attr-input-disabled', 'disabled attribute')}}         | {{Spec2('HTML5 W3C')}}     |
+| {{SpecName('HTML5.1', 'sec-forms.html#the-disabled-attribute', 'disabled attribute')}} | {{Spec2('HTML5.1')}}     |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.elements.attributes.disabled")}}
+
+## Voir aussi
+
+- Les pseudo-classes [`:disabled`](/fr/docs/Web/CSS/:disabled) et [`:enabled`](/fr/docs/Web/CSS/:enabled)
diff --git a/files/fr/web/html/attributes/elementtiming/index.md b/files/fr/web/html/attributes/elementtiming/index.md
index 36cf4b9628..d98ff151a0 100644
--- a/files/fr/web/html/attributes/elementtiming/index.md
+++ b/files/fr/web/html/attributes/elementtiming/index.md
@@ -10,56 +10,45 @@ tags:
   - Reference
 translation_of: Web/HTML/Attributes/elementtiming
 ---
-<p>{{HTMLSidebar}}</p>
+{{HTMLSidebar}}
 
-<p>L'attribut <strong><code>elementtiming</code></strong> est utilisé pour indiquer qu'un élément est marqué pour le suivi par l'API <a href="/fr/docs/Web/API/Element_timing_API">Element Timing</a>. Cet attribut peut être appliqué aux éléments <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/SVG/Element/image"><code>&lt;image&gt;</code></a> à l'intérieur d'un <a href="/fr/docs/Web/SVG/Element/svg"><code>&lt;svg&gt;</code></a>, aux vignettes des éléments <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>, aux éléments qui ont un <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a> et aux éléments contenant des noeuds de texte, comme un <a href="/fr/docs/Web/HTML/Element/p">paragraphe (<code>&lt;p&gt;)</code></a>.</p>
+L'attribut **`elementtiming`** est utilisé pour indiquer qu'un élément est marqué pour le suivi par l'API [Element Timing](/fr/docs/Web/API/Element_timing_API). Cet attribut peut être appliqué aux éléments [`<img>`](/fr/docs/Web/HTML/Element/Img), [`<image>`](/fr/docs/Web/SVG/Element/image) à l'intérieur d'un [`<svg>`](/fr/docs/Web/SVG/Element/svg), aux vignettes des éléments [`<video>`](/fr/docs/Web/HTML/Element/video), aux éléments qui ont un [`background-image`](/fr/docs/Web/CSS/background-image) et aux éléments contenant des noeuds de texte, comme un [paragraphe (`<p>)`](/fr/docs/Web/HTML/Element/p).
 
-<h2 id="usage">Utilisation</h2>
+## Utilisation
 
-<p>La valeur donnée pour <code>elementtiming</code> devient un identifiant pour l'élément observé.</p>
+La valeur donnée pour `elementtiming` devient un identifiant pour l'élément observé.
 
-<pre class="brush: html">&lt;img alt="alt" src="img.jpg" elementtiming="étiquette pour l'élément"&gt;</pre>
+```html
+<img alt="alt" src="img.jpg" elementtiming="étiquette pour l'élément">
+```
 
-<p>De bons candidats pour les éléments que vous pourriez vouloir observer sont :</p>
+De bons candidats pour les éléments que vous pourriez vouloir observer sont :
 
-<ul>
-  <li>L'image principale d'un article.</li>
-  <li>Le titre d'un article de blog.</li>
-  <li>Les images dans un carrousel pour un site d'achat.</li>
-  <li>L'image de l'affiche de la vidéo principale d'une page.</li>
-</ul>
+- L'image principale d'un article.
+- Le titre d'un article de blog.
+- Les images dans un carrousel pour un site d'achat.
+- L'image de l'affiche de la vidéo principale d'une page.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;img alt="Alt pour l'image principale d'un article de blog"
+```html
+<img alt="Alt pour l'image principale d'un article de blog"
      src="my-massive-image.jpg"
-     elementtiming="Image principale"&gt;
+     elementtiming="Image principale">
 
-&lt;p elementtiming="important-text"&gt;Quelques informations importantes.&lt;/p"&gt;</pre>
+<p elementtiming="important-text">Quelques informations importantes.</p">
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Element Timing API', '#sec-modifications-DOM', 'elementtiming')}}</td>
-   <td>{{Spec2('Element Timing API')}}</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                            | Statut                                   |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- |
+| {{SpecName('Element Timing API', '#sec-modifications-DOM', 'elementtiming')}} | {{Spec2('Element Timing API')}} |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.attribute.elementtiming")}}</p>
+{{Compat("html.elements.attribute.elementtiming")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="https://web.dev/custom-metrics/">Métriques personnalisées</a> <small>(en anglais)</small></li>
-</ul>
+- [Métriques personnalisées](https://web.dev/custom-metrics/) (en anglais)
diff --git a/files/fr/web/html/attributes/for/index.md b/files/fr/web/html/attributes/for/index.md
index 4622351ac0..32c16f9eef 100644
--- a/files/fr/web/html/attributes/for/index.md
+++ b/files/fr/web/html/attributes/for/index.md
@@ -9,62 +9,46 @@ tags:
   - Reference
 translation_of: Web/HTML/Attributes/for
 ---
-<p>{{HTMLSidebar}}</p>
+{{HTMLSidebar}}
 
-<p>L'attribut <strong><code>for</code></strong> est un attribut autorisé pour <a href="/fr/docs/Web/HTML/Element/label"><code>&lt;label&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/output"><code>&lt;output&gt;</code></a>. Lorsqu'il est utilisé sur un élément <code>&lt;label&gt;</code>, il indique l'élément de formulaire que ce label décrit. Lorsqu'il est utilisé sur un élément <code>&lt;output&gt;</code>, il permet une relation explicite entre les éléments, qui représentent les valeurs, qui sont utilisées dans le résultat représenté par <code>&lt;output&gt;</code>.</p>
+L'attribut **`for`** est un attribut autorisé pour [`<label>`](/fr/docs/Web/HTML/Element/label) et [`<output>`](/fr/docs/Web/HTML/Element/output). Lorsqu'il est utilisé sur un élément `<label>`, il indique l'élément de formulaire que ce label décrit. Lorsqu'il est utilisé sur un élément `<output>`, il permet une relation explicite entre les éléments, qui représentent les valeurs, qui sont utilisées dans le résultat représenté par `<output>`.
 
-<h2 id="usage">Utilisation</h2>
+## Utilisation
 
-<p>Lorsqu'il est utilisé comme attribut de <code>&lt;label&gt;</code>, l'attribut <code>for</code> a une valeur qui est l'<code>id</code> de l'élément de formulaire, auquel il se rapporte.</p>
+Lorsqu'il est utilisé comme attribut de `<label>`, l'attribut `for` a une valeur qui est l'`id` de l'élément de formulaire, auquel il se rapporte.
 
-<pre class="brush: html">&lt;label for="username"&gt;Votre nom&lt;/label&gt;
-&lt;input type="text" id="username"&gt;</pre>
+```html
+<label for="username">Votre nom</label>
+<input type="text" id="username">
+```
 
-<p>Lorsqu'il est utilisé comme attribut de <code>&lt;output&gt;</code>, l'attribut <code>for</code> a une valeur qui est une liste séparée, par des espaces, des valeurs <code>id</code> des éléments, qui sont utilisés pour créer l'output.</p>
+Lorsqu'il est utilisé comme attribut de `<output>`, l'attribut `for` a une valeur qui est une liste séparée, par des espaces, des valeurs `id` des éléments, qui sont utilisés pour créer l'output.
 
-<pre class="brush: html">&lt;input type="range" id="b" name="b" value="50"&gt; +
-&lt;input type="number" id="a" name="a" value="10"&gt; =
-&lt;output name="result" for="a b">60&lt;/output&gt;</pre>
+```html
+<input type="range" id="b" name="b" value="50"> +
+<input type="number" id="a" name="a" value="10"> =
+<output name="result" for="a b">60</output>
+```
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>Voir des exemples d'utilisation sur les pages des éléments pour <a href="/fr/docs/Web/HTML/Element/label"><code>&lt;label&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/output"><code>&lt;output&gt;</code></a>.</p>
+Voir des exemples d'utilisation sur les pages des éléments pour [`<label>`](/fr/docs/Web/HTML/Element/label) et [`<output>`](/fr/docs/Web/HTML/Element/output).
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'forms.html#attr-label-for', 'for as used with label')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'form-elements.html#attr-output-for', 'for as used with output')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', 'sec-forms.html#element-attrdef-label-for', 'for as used with label')}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', 'sec-forms.html#element-attrdef-output-for', 'for as used with output')}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                                    | Statut                           |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#attr-label-for', 'for as used with label')}}                     | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML WHATWG', 'form-elements.html#attr-output-for', 'for as used with output')}}     | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5 W3C', 'sec-forms.html#element-attrdef-label-for', 'for as used with label')}} | {{Spec2('HTML5 W3C')}}     |
+| {{SpecName('HTML5 W3C', 'sec-forms.html#element-attrdef-output-for', 'for as used with output')}} | {{Spec2('HTML5 W3C')}}     |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<h3>Prise en charge pour label</h3>
+### Prise en charge pour label
 
-<p>{{Compat("html.elements.label.for")}}</p>
+{{Compat("html.elements.label.for")}}
 
-<h3>Prise en charge pour output</h3>
+### Prise en charge pour output
 
-<p>{{Compat("html.elements.output.for")}}</p>
+{{Compat("html.elements.output.for")}}
diff --git a/files/fr/web/html/attributes/index.md b/files/fr/web/html/attributes/index.md
index c77e29a6ed..b08fd8fe34 100644
--- a/files/fr/web/html/attributes/index.md
+++ b/files/fr/web/html/attributes/index.md
@@ -15,11 +15,11 @@ tags:
 translation_of: Web/HTML/Attributes
 original_slug: Web/HTML/Attributs
 ---
-<div>{{HTMLSidebar}}</div>
+{{HTMLSidebar}}
 
-<p>Les éléments HTML ont des <strong>attributs</strong> ; ce sont des valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement de différentes manières pour répondre aux critères souhaités par les utilisateurs.</p>
+Les éléments HTML ont des **attributs** ; ce sont des valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement de différentes manières pour répondre aux critères souhaités par les utilisateurs.
 
-<h2 id="attribute_list">Liste des attributs</h2>
+## Liste des attributs
 
 <table class="standard-table">
   <thead>
@@ -31,735 +31,2154 @@ original_slug: Web/HTML/Attributs
   </thead>
   <tbody>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/accept"><code>accept</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></td>
-      <td>La liste des types acceptés par le serveur. Généralement, il s'agit de types de fichier.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/accept"><code>accept</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a>
+      </td>
+      <td>
+        La liste des types acceptés par le serveur. Généralement, il s'agit de
+        types de fichier.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Form#attr-accept-charset"><code>accept-charset</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form#attr-accept-charset"
+          ><code>accept-charset</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
       <td>La liste des jeux de caractères pris en charge.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/accesskey"><code>accesskey</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
-      <td>Cet attribut permet de définir un raccourci clavier pour activer un élément ou lui passer le focus.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/accesskey"
+          ><code>accesskey</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
+      <td>
+        Cet attribut permet de définir un raccourci clavier pour activer un
+        élément ou lui passer le focus.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/action"><code>action</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
-      <td>L'URI d'un programme qui traite les informations envoyées par le formulaire.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/action"><code>action</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
+      <td>
+        L'URI d'un programme qui traite les informations envoyées par le
+        formulaire.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/align"><code>align</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/applet"><code>&lt;applet&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/caption"><code>&lt;caption&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/col"><code>&lt;col&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/hr"><code>&lt;hr&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/tbody"><code>&lt;tbody&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/tfoot"><code>&lt;tfoot&gt;</code></a> , <a href="/fr/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/thead"><code>&lt;thead&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/tr"><code>&lt;tr&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/align"><code>align</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/applet"><code>&#x3C;applet></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/caption"
+          ><code>&#x3C;caption></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/col"><code>&#x3C;col></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/colgroup"
+          ><code>&#x3C;colgroup></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/hr"><code>&#x3C;hr></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/iframe"><code>&#x3C;iframe></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/table"><code>&#x3C;table></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/tbody"><code>&#x3C;tbody></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/td"><code>&#x3C;td></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/tfoot"><code>&#x3C;tfoot></code></a>
+        , <a href="/fr/docs/Web/HTML/Element/th"><code>&#x3C;th></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/thead"><code>&#x3C;thead></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/tr"><code>&#x3C;tr></code></a>
+      </td>
       <td>Cet attribut définit l'alignement horizontal de l'élément.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/iframe#attr-allow"><code>allow</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a></td>
-      <td>Cet attribut définit les règles des fonctionnalités pour cette <em>iframe</em>.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/iframe#attr-allow"
+          ><code>allow</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/iframe"
+          ><code>&#x3C;iframe></code></a
+        >
+      </td>
+      <td>
+        Cet attribut définit les règles des fonctionnalités pour cette
+        <em>iframe</em>.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/alt"><code>alt</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/applet"><code>&lt;applet&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></td>
-      <td>Un texte alternatif à afficher lorsque l'élément ne peut pas être affiché.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/alt"><code>alt</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/applet"><code>&#x3C;applet></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a>
+      </td>
+      <td>
+        Un texte alternatif à afficher lorsque l'élément ne peut pas être
+        affiché.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/script#attr-async"><code>async</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a></td>
-      <td>Cet attribut indique que le script devrait être exécuté de façon asynchrone.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/script#attr-async"
+          ><code>async</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/script"
+          ><code>&#x3C;script></code></a
+        >
+      </td>
+      <td>
+        Cet attribut indique que le script devrait être exécuté de façon
+        asynchrone.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/autocapitalize"><code>autocapitalize</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
-      <td>Cet attribut contrôle la façon dont un champ texte est saisi en majuscules de façon automatique.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/autocapitalize"
+          ><code>autocapitalize</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
+      <td>
+        Cet attribut contrôle la façon dont un champ texte est saisi en
+        majuscules de façon automatique.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/autocomplete"><code>autocomplete</code></a></td>
       <td>
-      <p><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></p>
-    </td>
-      <td>Cet attribut indique que ces contrôles ou que ce formulaire peuvent être remplis automatiquement par le navigateur.</td>
+        <a href="/fr/docs/Web/HTML/Attributes/autocomplete"
+          ><code>autocomplete</code></a
+        >
+      </td>
+      <td>
+        <p>
+          <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a
+          >,
+          <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+          >,
+          <a href="/fr/docs/Web/HTML/Element/select"
+            ><code>&#x3C;select></code></a
+          >,
+          <a href="/fr/docs/Web/HTML/Element/Textarea"
+            ><code>&#x3C;textarea></code></a
+          >
+        </p>
+      </td>
+      <td>
+        Cet attribut indique que ces contrôles ou que ce formulaire peuvent être
+        remplis automatiquement par le navigateur.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/autofocus"><code>autofocus</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Keygen"><code>&lt;keygen&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></td>
-      <td>Cet attribut indique que l'élément doit recevoir le focus automatiquement une fois que la page est chargée.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/autofocus"
+          ><code>autofocus</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Button"><code>&#x3C;button></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Keygen"><code>&#x3C;keygen></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/select"><code>&#x3C;select></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >
+      </td>
+      <td>
+        Cet attribut indique que l'élément doit recevoir le focus
+        automatiquement une fois que la page est chargée.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/autoplay"><code>autoplay</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a></td>
-      <td>Cet attribut indique que l'élément audio ou vidéo doit être lancé dès que possible.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/autoplay"
+          ><code>autoplay</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/audio"><code>&#x3C;audio></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/video"><code>&#x3C;video></code></a>
+      </td>
+      <td>
+        Cet attribut indique que l'élément audio ou vidéo doit être lancé dès
+        que possible.
+      </td>
     </tr>
     <tr>
       <td><code>background</code></td>
-      <td><a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a></td>
       <td>
-      <p>Définit l'URL vers un fichier qui est une image.</p>
-
-      <div class="note">
-        <p><strong>Note :</strong>Bien que les navigateurs et les clients <em>e-mails</em> prennent en charge cet attribut, cet attribut est obsolète. On utilisera plutôt la propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>.</p>
-      </div>
-    </td>
+        <a href="/fr/docs/Web/HTML/Element/body"><code>&#x3C;body></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/table"><code>&#x3C;table></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/td"><code>&#x3C;td></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/th"><code>&#x3C;th></code></a>
+      </td>
+      <td>
+        <p>Définit l'URL vers un fichier qui est une image.</p>
+        <div class="note">
+          <p>
+            <strong>Note :</strong>Bien que les navigateurs et les clients
+            <em>e-mails</em> prennent en charge cet attribut, cet attribut est
+            obsolète. On utilisera plutôt la propriété
+            <a href="/fr/docs/Web/CSS/background-image"
+              ><code>background-image</code></a
+            >.
+          </p>
+        </div>
+      </td>
     </tr>
     <tr>
       <td><code>bgcolor</code></td>
-      <td><a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/col"><code>&lt;col&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/marquee"><code>&lt;marquee&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/tbody"><code>&lt;tbody&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/tfoot"><code>&lt;tfoot&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/tr"><code>&lt;tr&gt;</code></a></td>
       <td>
-      <p>Cet attribut indique la couleur d'arrière-plan pour l'élément.</p>
-
-      <div class="note">
-        <p><strong>Note :</strong>Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</p>
-      </div>
-    </td>
+        <a href="/fr/docs/Web/HTML/Element/body"><code>&#x3C;body></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/col"><code>&#x3C;col></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/colgroup"
+          ><code>&#x3C;colgroup></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/marquee"
+          ><code>&#x3C;marquee></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/table"><code>&#x3C;table></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/tbody"><code>&#x3C;tbody></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/tfoot"><code>&#x3C;tfoot></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/td"><code>&#x3C;td></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/th"><code>&#x3C;th></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/tr"><code>&#x3C;tr></code></a>
+      </td>
+      <td>
+        <p>Cet attribut indique la couleur d'arrière-plan pour l'élément.</p>
+        <div class="note">
+          <p>
+            <strong>Note :</strong>Cet attribut est un attribut historique.
+            Veuillez utiliser la propriété CSS standard
+            <a href="/fr/docs/Web/CSS/background-color"
+              ><code>background-color</code></a
+            >.
+          </p>
+        </div>
+      </td>
     </tr>
     <tr>
       <td><code>border</code></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a></td>
       <td>
-      <p>Cet attribut indique la largeur de la bordure.</p>
-
-      <div class="note">
-        <p><strong>Note :</strong>Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/border"><code>border</code></a>.</p>
-      </div>
-    </td>
+        <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/object"><code>&#x3C;object></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/table"><code>&#x3C;table></code></a>
+      </td>
+      <td>
+        <p>Cet attribut indique la largeur de la bordure.</p>
+        <div class="note">
+          <p>
+            <strong>Note :</strong>Cet attribut est un attribut historique.
+            Veuillez utiliser la propriété CSS standard
+            <a href="/fr/docs/Web/CSS/border"><code>border</code></a
+            >.
+          </p>
+        </div>
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/buffered"><code>buffered</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a></td>
-      <td>Cet attribut contient la valeur de l'intervalle de temps d'ores et déjà mis en mémoire tampon pour le média de l'élément.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/buffered"
+          ><code>buffered</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/audio"><code>&#x3C;audio></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/video"><code>&#x3C;video></code></a>
+      </td>
+      <td>
+        Cet attribut contient la valeur de l'intervalle de temps d'ores et déjà
+        mis en mémoire tampon pour le média de l'élément.
+      </td>
     </tr>
     <tr>
-        <td><code><a href="/fr/docs/Web/HTML/Attributes/capture">capture</a></code></td>
-        <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></td>
-        <td>À partir de la spécification {{SpecName('HTML Media Capture', '#the-capture-attribute', 'media capture')}}, spécifie qu'un nouveau fichier peut être capturé.</td>
+      <td>
+        <code><a href="/fr/docs/Web/HTML/Attributes/capture">capture</a></code>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a>
+      </td>
+      <td>
+        À partir de la spécification
+        {{SpecName('HTML Media Capture', '#the-capture-attribute', 'media capture')}},
+        spécifie qu'un nouveau fichier peut être capturé.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Keygen#attr-challenge"><code>challenge</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Keygen"><code>&lt;keygen&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Keygen#attr-challenge"
+          ><code>challenge</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Keygen"
+          ><code>&#x3C;keygen></code></a
+        >
+      </td>
       <td>Une chaîne de challenge qui est envoyée avec la clef publique.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/charset"><code>charset</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/meta"><code>&lt;meta&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a></td>
-      <td>Cet attribut déclare l'encodage de caractères utilisé pour la page ou le script.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/charset"><code>charset</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/meta"><code>&#x3C;meta></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/script"
+          ><code>&#x3C;script></code></a
+        >
+      </td>
+      <td>
+        Cet attribut déclare l'encodage de caractères utilisé pour la page ou le
+        script.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/checked"><code>checked</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/command"><code>&lt;command&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></td>
-      <td>Cet attribut indique si l'élément doit être vérifié au chargement de la page.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/checked"><code>checked</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/command"
+          ><code>&#x3C;command></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a>
+      </td>
+      <td>
+        Cet attribut indique si l'élément doit être vérifié au chargement de la
+        page.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/cite"><code>cite</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/blockquote"><code>&lt;blockquote&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/del"><code>&lt;del&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/ins"><code>&lt;ins&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/q"><code>&lt;q&gt;</code></a></td>
-      <td>Cet attribut est une URI qui pointe vers la source de la citation ou de la modification.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/cite"><code>cite</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/blockquote"
+          ><code>&#x3C;blockquote></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/del"><code>&#x3C;del></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/ins"><code>&#x3C;ins></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/q"><code>&#x3C;q></code></a>
+      </td>
+      <td>
+        Cet attribut est une URI qui pointe vers la source de la citation ou de
+        la modification.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/class"><code>class</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
-      <td>Cet attribut permet de définir la ou les classes auxquelles appartient un élément afin de le manipuler en script ou de le mettre en forme avec CSS.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/class"
+          ><code>class</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
+      <td>
+        Cet attribut permet de définir la ou les classes auxquelles appartient
+        un élément afin de le manipuler en script ou de le mettre en forme avec
+        CSS.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/applet#attr-code"><code>code</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/applet"><code>&lt;applet&gt;</code></a></td>
-      <td>Cet attribut définit l'URL du fichier de classe qui doit être utilisé pour le chargement et l'exécution de l'applet.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/applet#attr-code"
+          ><code>code</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/applet"
+          ><code>&#x3C;applet></code></a
+        >
+      </td>
+      <td>
+        Cet attribut définit l'URL du fichier de classe qui doit être utilisé
+        pour le chargement et l'exécution de l'applet.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/applet#attr-codebase"><code>codebase</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/applet"><code>&lt;applet&gt;</code></a></td>
-      <td>Cet attribut fournit une URL absolue ou relative du dossier contenant les fichiers <code>.class</code> de l'applet.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/applet#attr-codebase"
+          ><code>codebase</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/applet"
+          ><code>&#x3C;applet></code></a
+        >
+      </td>
+      <td>
+        Cet attribut fournit une URL absolue ou relative du dossier contenant
+        les fichiers <code>.class</code> de l'applet.
+      </td>
     </tr>
     <tr>
       <td><code>color</code></td>
-      <td><a href="/fr/docs/Web/HTML/Element/basefont"><code>&lt;basefont&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/font"><code>&lt;font&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/hr"><code>&lt;hr&gt;</code></a></td>
       <td>
-      <p>Cet attribut définit la couleur du texte grâce à un nom de couleur ou grâce à un code hexadécimal dans le format #RRGGBB.</p>
-
-      <div class="note">
-        <p><strong>Note :</strong>Cet attribut est un attribut historique. Veuillez utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/color"><code>color</code></a>.</p>
-      </div>
-    </td>
+        <a href="/fr/docs/Web/HTML/Element/basefont"
+          ><code>&#x3C;basefont></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/font"><code>&#x3C;font></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/hr"><code>&#x3C;hr></code></a>
+      </td>
+      <td>
+        <p>
+          Cet attribut définit la couleur du texte grâce à un nom de couleur ou
+          grâce à un code hexadécimal dans le format #RRGGBB.
+        </p>
+        <div class="note">
+          <p>
+            <strong>Note :</strong>Cet attribut est un attribut historique.
+            Veuillez utiliser la propriété CSS standard
+            <a href="/fr/docs/Web/CSS/color"><code>color</code></a
+            >.
+          </p>
+        </div>
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Textarea#attr-cols"><code>cols</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></td>
-      <td>Cet attribut définit le nombre de colonnes pour le texte contenu dans un<code> textarea</code>.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Textarea#attr-cols"
+          ><code>cols</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >
+      </td>
+      <td>
+        Cet attribut définit le nombre de colonnes pour le texte contenu dans
+        un<code> textarea</code>.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/colspan"><code>colspan</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a></td>
-      <td>Cet attribut définit le nombre de colonnes sur lequel une cellule doit s'étendre.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/colspan"><code>colspan</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/td"><code>&#x3C;td></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/th"><code>&#x3C;th></code></a>
+      </td>
+      <td>
+        Cet attribut définit le nombre de colonnes sur lequel une cellule doit
+        s'étendre.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/meta#attr-content"><code>content</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/meta"><code>&lt;meta&gt;</code></a></td>
-      <td>Une valeur associée avec <code>http-equiv</code> ou <code>name</code> selon le contexte.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/meta#attr-content"
+          ><code>content</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/meta"><code>&#x3C;meta></code></a>
+      </td>
+      <td>
+        Une valeur associée avec <code>http-equiv</code> ou
+        <code>name</code> selon le contexte.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/contenteditable"
+          ><code>contenteditable</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
       <td>Cet attribut indique si le contenu de l'élément peut être édité.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/contextmenu"><code>contextmenu</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
-      <td>Cet attribut fait référence à l'identifiant d'un élément <a href="/fr/docs/Web/HTML/Element/menu"><code>&lt;menu&gt;</code></a> qui sera utilisé comme menu contextuel pour l'élément.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/contextmenu"
+          ><code>contextmenu</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
+      <td>
+        Cet attribut fait référence à l'identifiant d'un élément
+        <a href="/fr/docs/Web/HTML/Element/menu"><code>&#x3C;menu></code></a>
+        qui sera utilisé comme menu contextuel pour l'élément.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/controls"><code>controls</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a></td>
-      <td>Cet attribut indique si le navigateur doit afficher les contrôles de lecture du média pour l'utilisateur.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/controls"
+          ><code>controls</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/audio"><code>&#x3C;audio></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/video"><code>&#x3C;video></code></a>
+      </td>
+      <td>
+        Cet attribut indique si le navigateur doit afficher les contrôles de
+        lecture du média pour l'utilisateur.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/area#attr-coords"><code>coords</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a></td>
-      <td>Un ensemble de valeurs qui définit les coordonnées de la zone d'intérêt.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/area#attr-coords"
+          ><code>coords</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a>
+      </td>
+      <td>
+        Un ensemble de valeurs qui définit les coordonnées de la zone d'intérêt.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/crossorigin"><code>crossorigin</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/crossorigin"
+          ><code>crossorigin</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/audio"><code>&#x3C;audio></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/script"><code>&#x3C;script></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/video"><code>&#x3C;video></code></a>
+      </td>
       <td>Cet attribut gère les requêtes de différentes origines.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/API/HTMLIFrameElement/csp"><code>csp</code></a> {{experimental_inline}}</td>
-      <td><a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a></td>
-      <td>Cet attribut définit la politique de sécurité de contenu que le document intégré doit respecter.</td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLIFrameElement/csp"><code>csp</code></a>
+        {{experimental_inline}}
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/iframe"
+          ><code>&#x3C;iframe></code></a
+        >
+      </td>
+      <td>
+        Cet attribut définit la politique de sécurité de contenu que le document
+        intégré doit respecter.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/object#attr-data"><code>data</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/object#attr-data"
+          ><code>data</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/object"
+          ><code>&#x3C;object></code></a
+        >
+      </td>
       <td>Cet attribut définit l'URL de la ressource.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/data-*"><code>data-*</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
-      <td>Grâce aux attributs de donnée, on peut associer des attributs personnalisés afin de transporter des informations spécifiques.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/data-*"
+          ><code>data-*</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
+      <td>
+        Grâce aux attributs de donnée, on peut associer des attributs
+        personnalisés afin de transporter des informations spécifiques.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/datetime"><code>datetime</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/del"><code>&lt;del&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/ins"><code>&lt;ins&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/time"><code>&lt;time&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/datetime"
+          ><code>datetime</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/del"><code>&#x3C;del></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/ins"><code>&#x3C;ins></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/time"><code>&#x3C;time></code></a>
+      </td>
       <td>Cet attribut indique la date et l'heure associées à l'élément.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Img#attr-decoding"><code>decoding</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Img#attr-decoding"
+          ><code>decoding</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a>
+      </td>
       <td>Cet attribut indique la méthode préférée pour décoder l'image.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/track#attr-default"><code>default</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/track"><code>&lt;track&gt;</code></a></td>
-      <td>Cet attribut indique que la piste devrait être activée sauf si les préférences de l'utilisateur indiquent un autre choix.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/track#attr-default"
+          ><code>default</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/track"><code>&#x3C;track></code></a>
+      </td>
+      <td>
+        Cet attribut indique que la piste devrait être activée sauf si les
+        préférences de l'utilisateur indiquent un autre choix.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/script#attr-defer"><code>defer</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a></td>
-      <td>Cet attribut indique que le script doit être exécuté une fois que la page a été analysée.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/script#attr-defer"
+          ><code>defer</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/script"
+          ><code>&#x3C;script></code></a
+        >
+      </td>
+      <td>
+        Cet attribut indique que le script doit être exécuté une fois que la
+        page a été analysée.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/dir"><code>dir</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
-      <td>Cet attribut définit la direction du texte (gauche à droite ou droite à gauche).</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/dir"><code>dir</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
+      <td>
+        Cet attribut définit la direction du texte (gauche à droite ou droite à
+        gauche).
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/dirname"><code>dirname</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/dirname"><code>dirname</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/disabled"><code>disabled</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/command"><code>&lt;command&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Fieldset"><code>&lt;fieldset&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Keygen"><code>&lt;keygen&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Optgroup"><code>&lt;optgroup&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></td>
-      <td>Cet attribut indique si l'utilisateur peut interagir avec l'élément.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/disabled"
+          ><code>disabled</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Button"><code>&#x3C;button></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/command"
+          ><code>&#x3C;command></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Fieldset"
+          ><code>&#x3C;fieldset></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Keygen"><code>&#x3C;keygen></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Optgroup"
+          ><code>&#x3C;optgroup></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Option"><code>&#x3C;option></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/select"><code>&#x3C;select></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >
+      </td>
+      <td>
+        Cet attribut indique si l'utilisateur peut interagir avec l'élément.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/download"><code>download</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a></td>
-      <td>Cet attribut indique si l'hyperlien est utilisé afin de télécharger une ressource.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/download"
+          ><code>download</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a>
+      </td>
+      <td>
+        Cet attribut indique si l'hyperlien est utilisé afin de télécharger une
+        ressource.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/draggable"><code>draggable</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/draggable"
+          ><code>draggable</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
       <td>Cet attribut indique si l'élément peut être déplacé/glissé.</td>
     </tr>
+    <tr></tr>
     <tr>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Form#attr-enctype"><code>enctype</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
-      <td>Cet attribut définit le type de contenu des données de formulaire envoyées lorsque la méthode utilisée est <code>POST</code>.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form#attr-enctype"
+          ><code>enctype</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
+      <td>
+        Cet attribut définit le type de contenu des données de formulaire
+        envoyées lorsque la méthode utilisée est <code>POST</code>.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/enterkeyhint"><code>enterkeyhint</code></a> {{experimental_inline}}</td>
-      <td><a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a>, <a href="/fr/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td>
-      <td>Cet attribut indique le libellé ou l'icône à afficher sur la touche entrée des claviers virtuels. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut <code>contenteditable</code>).</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/enterkeyhint"
+          ><code>enterkeyhint</code></a
+        >
+        {{experimental_inline}}
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Global_attributes/contenteditable"
+          ><code>contenteditable</code></a
+        >
+      </td>
+      <td>
+        Cet attribut indique le libellé ou l'icône à afficher sur la touche
+        entrée des claviers virtuels. Cet attribut peut être utilisé sur les
+        contrôles de formulaires ou sur les éléments qui sont éditables (par
+        exemple avec l'attribut <code>contenteditable</code>).
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/for"><code>for</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Label"><code>&lt;label&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/output"><code>&lt;output&gt;</code></a></td>
-      <td>Cet attribut décrit l'élément auquel se rapporte l'élément courant.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/for"><code>for</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Label"><code>&#x3C;label></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/output"
+          ><code>&#x3C;output></code></a
+        >
+      </td>
+      <td>
+        Cet attribut décrit l'élément auquel se rapporte l'élément courant.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/form"><code>form</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Fieldset"><code>&lt;fieldset&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Keygen"><code>&lt;keygen&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Label"><code>&lt;label&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/output"><code>&lt;output&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Progress"><code>&lt;progress&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/form"><code>form</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Button"><code>&#x3C;button></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Fieldset"
+          ><code>&#x3C;fieldset></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Keygen"><code>&#x3C;keygen></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Label"><code>&#x3C;label></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Meter"><code>&#x3C;meter></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/object"><code>&#x3C;object></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/output"><code>&#x3C;output></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Progress"
+          ><code>&#x3C;progress></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/select"><code>&#x3C;select></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >
+      </td>
       <td>Cet attribut indique le formulaire auquel l'élément se rapporte.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/formaction"><code>formaction</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a></td>
-      <td>Cet attribut est l'URI du programme qui traite les données pour ces champs du formulaire. Il prend le pas sur l'attribut <code>action</code> défini pour <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/formaction"
+          ><code>formaction</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Button"
+          ><code>&#x3C;button></code></a
+        >
+      </td>
+      <td>
+        Cet attribut est l'URI du programme qui traite les données pour ces
+        champs du formulaire. Il prend le pas sur l'attribut
+        <code>action</code> défini pour
+        <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a
+        >.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/formenctype"><code>formenctype</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a></td>
-      <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique l'encodage utilisé pour l'envoi des données. Si cet attribut est indiqué, il surcharge l'attribut <code>enctype</code> du <a href="/fr/docs/Web/HTML/Element/Form">formulaire</a> auquel est rattaché le bouton/champ.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/formenctype"
+          ><code>formenctype</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Button"
+          ><code>&#x3C;button></code></a
+        >
+      </td>
+      <td>
+        Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>),
+        cet attribut indique l'encodage utilisé pour l'envoi des données. Si cet
+        attribut est indiqué, il surcharge l'attribut <code>enctype</code> du
+        <a href="/fr/docs/Web/HTML/Element/Form">formulaire</a> auquel est
+        rattaché le bouton/champ.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/formmethod"><code>formmethod</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a></td>
-      <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique la méthode HTTP pour envoyer les données (<code>GET</code>, <code>POST</code>, etc.). Si cet attribut est indiqué, il surcharge l'attribut <code>method</code> du formulaire auquel est rattaché le bouton/champ.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/formmethod"
+          ><code>formmethod</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Button"
+          ><code>&#x3C;button></code></a
+        >
+      </td>
+      <td>
+        Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>),
+        cet attribut indique la méthode HTTP pour envoyer les données
+        (<code>GET</code>, <code>POST</code>, etc.). Si cet attribut est
+        indiqué, il surcharge l'attribut <code>method</code> du formulaire
+        auquel est rattaché le bouton/champ.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/formnovalidate"><code>formnovalidate</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a></td>
-      <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut booléen indique que le formulaire ne doit pas être validé à l'envoi. Si cet attribut est indiqué, il surcharge l'attribut <code>novalidate</code> du formulaire auquel est rattaché le bouton/champ.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/formnovalidate"
+          ><code>formnovalidate</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Button"
+          ><code>&#x3C;button></code></a
+        >
+      </td>
+      <td>
+        Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>),
+        cet attribut booléen indique que le formulaire ne doit pas être validé à
+        l'envoi. Si cet attribut est indiqué, il surcharge l'attribut
+        <code>novalidate</code> du formulaire auquel est rattaché le
+        bouton/champ.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/formtarget"><code>formtarget</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a></td>
-      <td>Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>), cet attribut indique le contexte de navigation (onglet, fenêtre ou <em>iframe</em>) dans lequel afficher la réponse après l'envoi du formulaire. Si cet attribut est indiqué, il surcharge l'attribut <code>target</code> du formulaire auquel est rattaché le bouton/champ.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/formtarget"
+          ><code>formtarget</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Button"
+          ><code>&#x3C;button></code></a
+        >
+      </td>
+      <td>
+        Si le bouton ou le champ sert à l'envoi (<code>type="submit"</code>),
+        cet attribut indique le contexte de navigation (onglet, fenêtre ou
+        <em>iframe</em>) dans lequel afficher la réponse après l'envoi du
+        formulaire. Si cet attribut est indiqué, il surcharge l'attribut
+        <code>target</code> du formulaire auquel est rattaché le bouton/champ.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/headers"><code>headers</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a></td>
-      <td>Les identifiants des éléments <code>&lt;th&gt;</code> qui s'appliquent à cet élément.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/headers"><code>headers</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/td"><code>&#x3C;td></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/th"><code>&#x3C;th></code></a>
+      </td>
+      <td>
+        Les identifiants des éléments <code>&#x3C;th></code> qui s'appliquent à
+        cet élément.
+      </td>
     </tr>
     <tr>
       <td><code>height</code></td>
-      <td><a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/embed"><code>&lt;embed&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a></td>
       <td>
-      <p>Pour ces éléments, cet attribut définit la hauteur occupée par l'élément. Pour les autres éléments, on utilisera <a href="/fr/docs/Web/CSS/height"><code>height</code></a> property.</p>
-
-      <div class="note">
-        <p><strong>Note :</strong>Pour certains éléments comme <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a>,cet attribut est un reliquat et ne devrait plus être utilisé. C'est la propriété CSS <a href="/fr/docs/Web/CSS/height"><code>height</code></a> qui est la méthode standard pour définir la hauteur d'un élément.</p>
-      </div>
-    </td>
+        <a href="/fr/docs/Web/HTML/Element/canvas"><code>&#x3C;canvas></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/embed"><code>&#x3C;embed></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/iframe"><code>&#x3C;iframe></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/object"><code>&#x3C;object></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/video"><code>&#x3C;video></code></a>
+      </td>
+      <td>
+        <p>
+          Pour ces éléments, cet attribut définit la hauteur occupée par
+          l'élément. Pour les autres éléments, on utilisera
+          <a href="/fr/docs/Web/CSS/height"><code>height</code></a> property.
+        </p>
+        <div class="note">
+          <p>
+            <strong>Note :</strong>Pour certains éléments comme
+            <a href="/fr/docs/Web/HTML/Element/div"><code>&#x3C;div></code></a
+            >,cet attribut est un reliquat et ne devrait plus être utilisé.
+            C'est la propriété CSS
+            <a href="/fr/docs/Web/CSS/height"><code>height</code></a> qui est la
+            méthode standard pour définir la hauteur d'un élément.
+          </p>
+        </div>
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/hidden"><code>hidden</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
-      <td>Cet attribut empêche le rendu d'un élément sur une page tout en conservant les éléments fils actifs.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/hidden"
+          ><code>hidden</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
+      <td>
+        Cet attribut empêche le rendu d'un élément sur une page tout en
+        conservant les éléments fils actifs.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Meter#attr-high"><code>high</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Meter#attr-high"
+          ><code>high</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Meter"><code>&#x3C;meter></code></a>
+      </td>
       <td>Cet attribut indique la borne inférieure de l'intervalle haut.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/href"><code>href</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/base"><code>&lt;base&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/href"><code>href</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/base"><code>&#x3C;base></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
       <td>L'URL de la ressource liée.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/hreflang"><code>hreflang</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/hreflang"
+          ><code>hreflang</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
       <td>Cet attribut indique la langue utilisée pour la ressource liée.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/meta#attr-http-equiv"><code>http-equiv</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/meta"><code>&lt;meta&gt;</code></a></td>
-      <td>Définit une directive <a href="/fr/docs/Web/HTTP/Headers/Pragma">Pragma</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/meta#attr-http-equiv"
+          ><code>http-equiv</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/meta"><code>&#x3C;meta></code></a>
+      </td>
+      <td>
+        Définit une directive
+        <a href="/fr/docs/Web/HTTP/Headers/Pragma">Pragma</a>.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/command#attr-icon"><code>icon</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/command"><code>&lt;command&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/command#attr-icon"
+          ><code>icon</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/command"
+          ><code>&#x3C;command></code></a
+        >
+      </td>
       <td>Cet attribut indique une image qui représente la commande.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/id"><code>id</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
-      <td>Cet attribut permet d'identifier un élément d'un document de façon unique. Il est généralement utilisé pour manipuler l'élément avec des scripts ou pour le mettre en forme avec CSS.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/id"><code>id</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
+      <td>
+        Cet attribut permet d'identifier un élément d'un document de façon
+        unique. Il est généralement utilisé pour manipuler l'élément avec des
+        scripts ou pour le mettre en forme avec CSS.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/importance"><code>importance</code></a> {{experimental_inline}}</td>
-      <td><a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a></td>
-      <td>Cet attribut indique la priorité relative pour la récupération (<em>fetch</em>) des ressources.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/importance"
+          ><code>importance</code></a
+        >
+        {{experimental_inline}}
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/iframe"><code>&#x3C;iframe></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/script"
+          ><code>&#x3C;script></code></a
+        >
+      </td>
+      <td>
+        Cet attribut indique la priorité relative pour la récupération
+        (<em>fetch</em>) des ressources.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/Security/Subresource_Integrity"><code>integrity</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a></td>
       <td>
-      <p>Une fonctionnalité relative à la sécurité qui permet aux navigateurs de vérifier les fichiers qu'ils récupèrent.</p>
-    </td>
+        <a href="/fr/docs/Web/Security/Subresource_Integrity"
+          ><code>integrity</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/script"
+          ><code>&#x3C;script></code></a
+        >
+      </td>
+      <td>
+        <p>
+          Une fonctionnalité relative à la sécurité qui permet aux navigateurs
+          de vérifier les fichiers qu'ils récupèrent.
+        </p>
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Img#attr-intrinsicsize"><code>intrinsicsize</code></a> {{deprecated_inline}}</td>
-      <td><a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a></td>
-      <td>Cet attribut indique au navigateur qu'il faut ignorer la taille intrinsèque de l'image et qu'il faut utiliser la taille indiquée avec les attributs.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Img#attr-intrinsicsize"
+          ><code>intrinsicsize</code></a
+        >
+        {{deprecated_inline}}
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a>
+      </td>
+      <td>
+        Cet attribut indique au navigateur qu'il faut ignorer la taille
+        intrinsèque de l'image et qu'il faut utiliser la taille indiquée avec
+        les attributs.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a>, <a href="/fr/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></td>
-      <td>Cet attribut fournit une indication sur le type de donnée qui pourrait être saisi par l'utilisateur lors de l'édition du formulaire ou de l'élément. Cet attribut peut être utilisé sur les contrôles de formulaires ou sur les éléments qui sont éditables (par exemple avec l'attribut <code>contenteditable</code>).</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/inputmode"
+          ><code>inputmode</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Global_attributes/contenteditable"
+          ><code>contenteditable</code></a
+        >
+      </td>
+      <td>
+        Cet attribut fournit une indication sur le type de donnée qui pourrait
+        être saisi par l'utilisateur lors de l'édition du formulaire ou de
+        l'élément. Cet attribut peut être utilisé sur les contrôles de
+        formulaires ou sur les éléments qui sont éditables (par exemple avec
+        l'attribut <code>contenteditable</code>).
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Img#attr-ismap"><code>ismap</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a></td>
-      <td>Cet attribut indique que l'image contribue à une mosaïque d'images interactive côté serveur.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Img#attr-ismap"
+          ><code>ismap</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a>
+      </td>
+      <td>
+        Cet attribut indique que l'image contribue à une mosaïque d'images
+        interactive côté serveur.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/itemprop"><code>itemprop</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/itemprop"
+          ><code>itemprop</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Keygen#attr-keytype"><code>keytype</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Keygen"><code>&lt;keygen&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Keygen#attr-keytype"
+          ><code>keytype</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Keygen"
+          ><code>&#x3C;keygen></code></a
+        >
+      </td>
       <td>Cet attribut définit le type de clé qui est généré.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/track#attr-kind"><code>kind</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/track"><code>&lt;track&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/track#attr-kind"
+          ><code>kind</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/track"><code>&#x3C;track></code></a>
+      </td>
       <td>Cet attribut définit le type de piste textuelle.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/label"><code>label</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Optgroup"><code>&lt;optgroup&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/track"><code>&lt;track&gt;</code></a></td>
-      <td>Cet attribut définit un titre, lisible par un utilisateur, pour l'élément.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/label"><code>label</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Optgroup"
+          ><code>&#x3C;optgroup></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Option"><code>&#x3C;option></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/track"><code>&#x3C;track></code></a>
+      </td>
+      <td>
+        Cet attribut définit un titre, lisible par un utilisateur, pour
+        l'élément.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/lang"><code>lang</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/lang"><code>lang</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
       <td>Cet attribut définit la langue utilisée dans l'élément.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/script#attr-language"><code>language</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/script#attr-language"
+          ><code>language</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/script"
+          ><code>&#x3C;script></code></a
+        >
+      </td>
       <td>Cet attribut définit le langage de script utilisé dans l'élément.</td>
     </tr>
     <tr>
       <td><code>loading</code> {{experimental_inline}}</td>
-      <td><a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/iframe"
+          ><code>&#x3C;iframe></code></a
+        >
+      </td>
       <td>Cet attribut indique que l'élément doit être chargé à la demande.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></td>
-      <td>Cet attribut constitue une liste d'options prédéfinie qui est suggérée à l'utilisateur.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input#attr-list"
+          ><code>list</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a>
+      </td>
+      <td>
+        Cet attribut constitue une liste d'options prédéfinie qui est suggérée à
+        l'utilisateur.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/loop"><code>loop</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/bgsound"><code>&lt;bgsound&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/marquee"><code>&lt;marquee&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a></td>
-      <td>Cet attribut indique si le média courant doit recommencer au début une fois que sa lecture est terminée.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/loop"><code>loop</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/audio"><code>&#x3C;audio></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/bgsound"
+          ><code>&#x3C;bgsound></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/marquee"
+          ><code>&#x3C;marquee></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/video"><code>&#x3C;video></code></a>
+      </td>
+      <td>
+        Cet attribut indique si le média courant doit recommencer au début une
+        fois que sa lecture est terminée.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Meter#attr-low"><code>low</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Meter#attr-low"><code>low</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Meter"><code>&#x3C;meter></code></a>
+      </td>
       <td>Cet attribut indique la borne supérieure de l'intervalle bas.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/html#attr-manifest"><code>manifest</code></a> {{obsolete_inline}}</td>
-      <td><a href="/fr/docs/Web/HTML/Element/html"><code>&lt;html&gt;</code></a></td>
-      <td>Cet attribut définit l'URL du manifeste du document pour la gestion du cache.
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/html#attr-manifest"
+          ><code>manifest</code></a
+        >
+        {{obsolete_inline}}
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/html"><code>&#x3C;html></code></a>
+      </td>
+      <td>
+        Cet attribut définit l'URL du manifeste du document pour la gestion du
+        cache.
         <div class="note">
-          <p><strong>Note :</strong>Cet attribut est obsolète, utilisez <a href="/fr/docs/Web/Manifest"><code>&lt;link rel="manifest"&gt;</code></a> à la place.</p>
+          <p>
+            <strong>Note :</strong>Cet attribut est obsolète, utilisez
+            <a href="/fr/docs/Web/Manifest"
+              ><code>&#x3C;link rel="manifest"></code></a
+            >
+            à la place.
+          </p>
         </div>
-    </td>
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Progress"><code>&lt;progress&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Meter"><code>&#x3C;meter></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Progress"
+          ><code>&#x3C;progress></code></a
+        >
+      </td>
       <td>Cet attribut indique la valeur maximale autorisée.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></td>
-      <td>Cet attribut définit le nombre maximal de caractères autorisé dans l'élément.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/maxlength"
+          ><code>maxlength</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >
+      </td>
+      <td>
+        Cet attribut définit le nombre maximal de caractères autorisé dans
+        l'élément.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></td>
-      <td>Cet attribut définit le nombre minimal de caractères qui doivent être saisis dans l'élément.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/minlength"
+          ><code>minlength</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >
+      </td>
+      <td>
+        Cet attribut définit le nombre minimal de caractères qui doivent être
+        saisis dans l'élément.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/media"><code>media</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Source"><code>&lt;source&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a></td>
-      <td>Cet attribut est indication à propos du type de média pour la ressource liée.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/media"><code>media</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Source"><code>&#x3C;source></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/style"><code>&#x3C;style></code></a>
+      </td>
+      <td>
+        Cet attribut est indication à propos du type de média pour la ressource
+        liée.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Form#attr-method"><code>method</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
-      <td>Cet attribut définit la méthode <a href="/fr/docs/Web/HTTP">HTTP</a> à utiliser pour l'envoi des données du formulaire (<code>GET</code> par défaut ou <code>POST</code>)</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form#attr-method"
+          ><code>method</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
+      <td>
+        Cet attribut définit la méthode <a href="/fr/docs/Web/HTTP">HTTP</a> à
+        utiliser pour l'envoi des données du formulaire (<code>GET</code> par
+        défaut ou <code>POST</code>)
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Meter"><code>&#x3C;meter></code></a>
+      </td>
       <td>Cet attribut indique la valeur minimale autorisée.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a></td>
-      <td>Cet attribut indique si plusieurs valeurs peuvent être saisies pour des entrées de type <code>email</code> ou <code>file</code>.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/multiple"
+          ><code>multiple</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/select"
+          ><code>&#x3C;select></code></a
+        >
+      </td>
+      <td>
+        Cet attribut indique si plusieurs valeurs peuvent être saisies pour des
+        entrées de type <code>email</code> ou <code>file</code>.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/muted"><code>muted</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a></td>
-      <td>Cet attribut indique si le son de la vidéo doit être coupé lorsque la page est chargée initialement.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/muted"><code>muted</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/audio"><code>&#x3C;audio></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/video"><code>&#x3C;video></code></a>
+      </td>
+      <td>
+        Cet attribut indique si le son de la vidéo doit être coupé lorsque la
+        page est chargée initialement.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/name"><code>name</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Fieldset"><code>&lt;fieldset&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Keygen"><code>&lt;keygen&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/output"><code>&lt;output&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/map"><code>&lt;map&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/meta"><code>&lt;meta&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/param"><code>&lt;param&gt;</code></a></td>
-      <td>Le nom de l'élément qui peut être utilisé par le serveur pour identifier le champ d'un formulaire.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/name"><code>name</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Button"><code>&#x3C;button></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Fieldset"
+          ><code>&#x3C;fieldset></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/iframe"><code>&#x3C;iframe></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Keygen"><code>&#x3C;keygen></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/object"><code>&#x3C;object></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/output"><code>&#x3C;output></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/select"><code>&#x3C;select></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/map"><code>&#x3C;map></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/meta"><code>&#x3C;meta></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/param"><code>&#x3C;param></code></a>
+      </td>
+      <td>
+        Le nom de l'élément qui peut être utilisé par le serveur pour identifier
+        le champ d'un formulaire.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Form#attr-novalidate"><code>novalidate</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
-      <td>Cet attribut indique que les données du formulaire ne doivent pas être validées lors de l'envoi.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form#attr-novalidate"
+          ><code>novalidate</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
+      <td>
+        Cet attribut indique que les données du formulaire ne doivent pas être
+        validées lors de l'envoi.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/details#attr-open"><code>open</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/details"><code>&lt;details&gt;</code></a></td>
-      <td>Cet attribut indique si les détails seront affichés lors du chargement de la page.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/details#attr-open"
+          ><code>open</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/details"
+          ><code>&#x3C;details></code></a
+        >
+      </td>
+      <td>
+        Cet attribut indique si les détails seront affichés lors du chargement
+        de la page.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Meter#attr-optimum"><code>optimum</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Meter#attr-optimum"
+          ><code>optimum</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Meter"><code>&#x3C;meter></code></a>
+      </td>
       <td>Cet attribut indique la valeur numérique optimale.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></td>
-      <td>Cet attribut définit une expression rationnelle contre laquelle valider la valeur de l'élément.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a>
+      </td>
+      <td>
+        Cet attribut définit une expression rationnelle contre laquelle valider
+        la valeur de l'élément.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/a#attr-ping"><code>ping</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a#attr-ping"><code>ping</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a>
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/placeholder"><code>placeholder</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></td>
-      <td>Cet attribut fournit une indication à l'utilisateur sur ce qu'il peut saisir dans le champ.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/placeholder"
+          ><code>placeholder</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >
+      </td>
+      <td>
+        Cet attribut fournit une indication à l'utilisateur sur ce qu'il peut
+        saisir dans le champ.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/video#attr-poster"><code>poster</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a></td>
-      <td>Cet attribut est une URL qui indique l'image à afficher tant que l'utilisateur n'a pas lancé la vidéo ou déplacé le curseur.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/video#attr-poster"
+          ><code>poster</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/video"><code>&#x3C;video></code></a>
+      </td>
+      <td>
+        Cet attribut est une URL qui indique l'image à afficher tant que
+        l'utilisateur n'a pas lancé la vidéo ou déplacé le curseur.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/preload"><code>preload</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a></td>
-      <td>Cet attribut indique si toute ou partie, voire aucune partie de la ressource doit être téléchargée en avance.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/preload"><code>preload</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/audio"><code>&#x3C;audio></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/video"><code>&#x3C;video></code></a>
+      </td>
+      <td>
+        Cet attribut indique si toute ou partie, voire aucune partie de la
+        ressource doit être téléchargée en avance.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/command#attr-radiogroup"><code>radiogroup</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/command"><code>&lt;command&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/command#attr-radiogroup"
+          ><code>radiogroup</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/command"
+          ><code>&#x3C;command></code></a
+        >
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/readonly"><code>readonly</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/readonly"
+          ><code>readonly</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >
+      </td>
       <td>Cet attribut indique si l'élément peut être édité.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/referralpolicy"><code>referrerpolicy</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a></td>
-      <td>Définit le référent (<em>referrer</em>) envoyé lors de la récupération de la ressource.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/referralpolicy"
+          ><code>referrerpolicy</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/iframe"><code>&#x3C;iframe></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/script"
+          ><code>&#x3C;script></code></a
+        >
+      </td>
+      <td>
+        Définit le référent (<em>referrer</em>) envoyé lors de la récupération
+        de la ressource.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/rel"><code>rel</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td>Cet attribut définit la relation entre l'objet cible et l'objet du lien.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/rel"><code>rel</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        Cet attribut définit la relation entre l'objet cible et l'objet du lien.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/required"><code>required</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></td>
-      <td>Cet attribut indique si l'élément doit obligatoirement être renseigné dans le formulaire.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/required"
+          ><code>required</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/select"><code>&#x3C;select></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >
+      </td>
+      <td>
+        Cet attribut indique si l'élément doit obligatoirement être renseigné
+        dans le formulaire.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/ol#attr-reversed"><code>reversed</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/ol"><code>&lt;ol&gt;</code></a></td>
-      <td>Cet attribut indique si la liste doit être affichée dans un ordre décroissant plutôt que dans un ordre croissant.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/ol#attr-reversed"
+          ><code>reversed</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/ol"><code>&#x3C;ol></code></a>
+      </td>
+      <td>
+        Cet attribut indique si la liste doit être affichée dans un ordre
+        décroissant plutôt que dans un ordre croissant.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Textarea#attr-rows"><code>rows</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Textarea#attr-rows"
+          ><code>rows</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >
+      </td>
       <td>Cet attribut définit le nombre de lignes pour la zone de texte.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/rowspan"><code>rowspan</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a></td>
-      <td>Cet attribut définit le nombre de lignes sur lesquelles une cellule doit s'étendre.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/rowspan"><code>rowspan</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/td"><code>&#x3C;td></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/th"><code>&#x3C;th></code></a>
+      </td>
+      <td>
+        Cet attribut définit le nombre de lignes sur lesquelles une cellule doit
+        s'étendre.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/iframe#attr-sandbox"><code>sandbox</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a></td>
-      <td>Empêche un élément chargé dans une <em>iframe</em> d'utiliser certaines fonctionnalités (envoyer des formulaires ou ouvrir de nouvelles fenêtres par exemples).</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/iframe#attr-sandbox"
+          ><code>sandbox</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/iframe"
+          ><code>&#x3C;iframe></code></a
+        >
+      </td>
+      <td>
+        Empêche un élément chargé dans une <em>iframe</em> d'utiliser certaines
+        fonctionnalités (envoyer des formulaires ou ouvrir de nouvelles fenêtres
+        par exemples).
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/th#attr-scope"><code>scope</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/th#attr-scope"><code>scope</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/th"><code>&#x3C;th></code></a>
+      </td>
       <td>Définit les cellules sur lesquelles porte la cellule d'en-tête.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/style#attr-scoped"><code>scoped</code></a>{{non-standard_inline}} {{deprecated_inline}}</td>
-      <td><a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/style#attr-scoped"
+          ><code>scoped</code></a
+        >{{non-standard_inline}} {{deprecated_inline}}
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/style"><code>&#x3C;style></code></a>
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Option#attr-selected"><code>selected</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a></td>
-      <td>Cet attribut définit la valeur qui sera sélectionnée au chargement de la page.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Option#attr-selected"
+          ><code>selected</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Option"
+          ><code>&#x3C;option></code></a
+        >
+      </td>
+      <td>
+        Cet attribut définit la valeur qui sera sélectionnée au chargement de la
+        page.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/shape"><code>shape</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/shape"><code>shape</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a>
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/size"><code>size</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a></td>
-      <td>Cet attribut définit la largeur de l'élément en pixels, si l'attribut <code>type</code> de l'élément vaut <code>text</code> ou <code>password</code>, cela correspond au nombre de caractères du champ.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/size"><code>size</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/select"
+          ><code>&#x3C;select></code></a
+        >
+      </td>
+      <td>
+        Cet attribut définit la largeur de l'élément en pixels, si l'attribut
+        <code>type</code> de l'élément vaut <code>text</code> ou
+        <code>password</code>, cela correspond au nombre de caractères du champ.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/sizes"><code>sizes</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Source"><code>&lt;source&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/sizes"><code>sizes</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Source"
+          ><code>&#x3C;source></code></a
+        >
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/slot"><code>slot</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
-      <td>Cet attribut affecte un créneau pour un élément dans le <em>shadow DOM</em>.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/slot"><code>slot</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
+      <td>
+        Cet attribut affecte un créneau pour un élément dans le
+        <em>shadow DOM</em>.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/span"><code>span</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/col"><code>&lt;col&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/span"><code>span</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/col"><code>&#x3C;col></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/colgroup"
+          ><code>&#x3C;colgroup></code></a
+        >
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/spellcheck"><code>spellcheck</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
-      <td>Cet attribut indique si la vérification orthographique est activée pour l'élément courant.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/spellcheck"
+          ><code>spellcheck</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
+      <td>
+        Cet attribut indique si la vérification orthographique est activée pour
+        l'élément courant.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/src"><code>src</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/embed"><code>&lt;embed&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Source"><code>&lt;source&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/track"><code>&lt;track&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/src"><code>src</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/audio"><code>&#x3C;audio></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/embed"><code>&#x3C;embed></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/iframe"><code>&#x3C;iframe></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/script"><code>&#x3C;script></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Source"><code>&#x3C;source></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/track"><code>&#x3C;track></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/video"><code>&#x3C;video></code></a>
+      </td>
       <td>Cet attribut indique l'URL du contenu embarqué.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/iframe#attr-srcdoc"><code>srcdoc</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/iframe#attr-srcdoc"
+          ><code>srcdoc</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/iframe"
+          ><code>&#x3C;iframe></code></a
+        >
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/track#attr-srclang"><code>srclang</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/track"><code>&lt;track&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/track#attr-srclang"
+          ><code>srclang</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/track"><code>&#x3C;track></code></a>
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/srcset"><code>srcset</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/source"><code>&lt;source&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/srcset"><code>srcset</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/source"
+          ><code>&#x3C;source></code></a
+        >
+      </td>
       <td>Une ou plusieurs images candidates adaptatives.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/ol#attr-start"><code>start</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/ol"><code>&lt;ol&gt;</code></a></td>
-      <td>Cet attribut définit le premier nombre de la liste si celui-ci est différent de 1.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/ol#attr-start"><code>start</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/ol"><code>&#x3C;ol></code></a>
+      </td>
+      <td>
+        Cet attribut définit le premier nombre de la liste si celui-ci est
+        différent de 1.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/step"><code>step</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/step"><code>step</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a>
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/style"><code>style</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
-      <td>Cet attribut définit des styles CSS qui auront la priorité sur ceux définis précédemment. Il ne devrait être utilisé qu'à des fins de tests, car il est conseillé d'utiliser un/des fichier(s) à part pour gérer la mise en forme.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/style"
+          ><code>style</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
+      <td>
+        Cet attribut définit des styles CSS qui auront la priorité sur ceux
+        définis précédemment. Il ne devrait être utilisé qu'à des fins de tests,
+        car il est conseillé d'utiliser un/des fichier(s) à part pour gérer la
+        mise en forme.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/table#attr-summary"><code>summary</code></a>{{deprecated_inline}}</td>
-      <td><a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/table#attr-summary"
+          ><code>summary</code></a
+        >{{deprecated_inline}}
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/table"><code>&#x3C;table></code></a>
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/tabindex"><code>tabindex</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
-      <td>Cet attribut permet de modifier l'ordre dans la navigation à la tabulation.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/tabindex"
+          ><code>tabindex</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
+      <td>
+        Cet attribut permet de modifier l'ordre dans la navigation à la
+        tabulation.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/target"><code>target</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/base"><code>&lt;base&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/target"><code>target</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/base"><code>&#x3C;base></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/title"><code>title</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
-      <td>Cet attribut définit un texte expliquant le contenu de l'élément et qui est généralement affiché sous la forme d'une bulle d'information au survol de l'élément.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/title"
+          ><code>title</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
+      <td>
+        Cet attribut définit un texte expliquant le contenu de l'élément et qui
+        est généralement affiché sous la forme d'une bulle d'information au
+        survol de l'élément.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes/translate"><code>translate</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a></td>
-      <td>Cet attribut indique si le contenu textuel de l'élément doit être traduit ou non.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes/translate"
+          ><code>translate</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Global_attributes">Attribut universel</a>
+      </td>
+      <td>
+        Cet attribut indique si le contenu textuel de l'élément doit être
+        traduit ou non.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/type"><code>type</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/command"><code>&lt;command&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/embed"><code>&lt;embed&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Source"><code>&lt;source&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/menu"><code>&lt;menu&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/type"><code>type</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Button"><code>&#x3C;button></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/command"
+          ><code>&#x3C;command></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/embed"><code>&#x3C;embed></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/object"><code>&#x3C;object></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/script"><code>&#x3C;script></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Source"><code>&#x3C;source></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/style"><code>&#x3C;style></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/menu"><code>&#x3C;menu></code></a>
+      </td>
       <td>Cet attribut définit le type de l'élément.</td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/usemap"><code>usemap</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/usemap"><code>usemap</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/object"
+          ><code>&#x3C;object></code></a
+        >
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/value"><code>value</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/li"><code>&lt;li&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Progress"><code>&lt;progress&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/param"><code>&lt;param&gt;</code></a></td>
-      <td>Cet attribut définit la valeur par défaut qui sera affichée dans l'élément au chargement de la page.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/value"><code>value</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Button"><code>&#x3C;button></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Option"><code>&#x3C;option></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/li"><code>&#x3C;li></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Meter"><code>&#x3C;meter></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Progress"
+          ><code>&#x3C;progress></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/param"><code>&#x3C;param></code></a>
+      </td>
+      <td>
+        Cet attribut définit la valeur par défaut qui sera affichée dans
+        l'élément au chargement de la page.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Attributes/width"><code>width</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/embed"><code>&lt;embed&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a></td>
-      <td>Pour ces éléments, cet attribut définit la largeur occupée sur l'écran.
+      <td>
+        <a href="/fr/docs/Web/HTML/Attributes/width"><code>width</code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/canvas"><code>&#x3C;canvas></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/embed"><code>&#x3C;embed></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/iframe"><code>&#x3C;iframe></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Img"><code>&#x3C;img></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/object"><code>&#x3C;object></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/video"><code>&#x3C;video></code></a>
+      </td>
+      <td>
+        Pour ces éléments, cet attribut définit la largeur occupée sur l'écran.
         <div class="note">
-          <p><strong>Note :</strong>Pour tous les autres éléments, comme <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a>, il faut utiliser la propriété CSS standard <a href="/fr/docs/Web/CSS/width"><code>width</code></a> afin de définir la largeur.</p>
+          <p>
+            <strong>Note :</strong>Pour tous les autres éléments, comme
+            <a href="/fr/docs/Web/HTML/Element/div"><code>&#x3C;div></code></a
+            >, il faut utiliser la propriété CSS standard
+            <a href="/fr/docs/Web/CSS/width"><code>width</code></a> afin de
+            définir la largeur.
+          </p>
         </div>
-    </td>
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Textarea#attr-wrap"><code>wrap</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a></td>
-      <td>Cet attribut indique l'utilisation du retour automatique à la ligne pour le texte de l'élément.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Textarea#attr-wrap"
+          ><code>wrap</code></a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Textarea"
+          ><code>&#x3C;textarea></code></a
+        >
+      </td>
+      <td>
+        Cet attribut indique l'utilisation du retour automatique à la ligne pour
+        le texte de l'élément.
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="content_versus_idl_attributes">Attribut de contenu ou attribut IDL ?</h2>
+## Attribut de contenu ou attribut IDL ?
 
-<p>En HTML, la plupart des attributs ont deux aspects : l'<strong>attribut de contenu</strong> et l'<strong>attribut IDL</strong> (pour <em>Interface Definition Language</em> ou langage de définition des interfaces).</p>
+En HTML, la plupart des attributs ont deux aspects : l'**attribut de contenu** et l'**attribut IDL** (pour _Interface Definition Language_ ou langage de définition des interfaces).
 
-<p>L'attribut de contenu est l'attribut qu'on définit via le contenu (le code HTML) et qu'on obtient et/ou définit via les méthodes <a href="/fr/docs/Web/API/Element/setAttribute"><code>element.setAttribute()</code></a> et <a href="/fr/docs/Web/API/Element/getAttribute"><code>element.getAttribute()</code></a>. L'attribut de contenu sera toujours une chaîne de caractères, y compris lorsque la valeur attendue est un entier. Ainsi, pour indiquer une <code>maxlength</code> d'un élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> à 42, on utilisera <code>setAttribute("maxlength", "42")</code> sur cet élément.</p>
+L'attribut de contenu est l'attribut qu'on définit via le contenu (le code HTML) et qu'on obtient et/ou définit via les méthodes [`element.setAttribute()`](/fr/docs/Web/API/Element/setAttribute) et [`element.getAttribute()`](/fr/docs/Web/API/Element/getAttribute). L'attribut de contenu sera toujours une chaîne de caractères, y compris lorsque la valeur attendue est un entier. Ainsi, pour indiquer une `maxlength` d'un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) à 42, on utilisera `setAttribute("maxlength", "42")` sur cet élément.
 
-<p>L'attribut IDL est également connu sous la forme d'une propriété JavaScript. Ce sont les attributs qu'on peut obtenir ou modifier via JavaScript sous la forme <code>élément.toto</code>. L'attribut IDL utilisera toujours la valeur de l'attribut de contenu sous-jacent, éventuellement en la modifiant pour renvoyer une valeur ou pour la modifier. Autrement dit, les attributs IDL, reflètent les attributs de contenu.</p>
+L'attribut IDL est également connu sous la forme d'une propriété JavaScript. Ce sont les attributs qu'on peut obtenir ou modifier via JavaScript sous la forme `élément.toto`. L'attribut IDL utilisera toujours la valeur de l'attribut de contenu sous-jacent, éventuellement en la modifiant pour renvoyer une valeur ou pour la modifier. Autrement dit, les attributs IDL, reflètent les attributs de contenu.
 
-<p>La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut <code>type</code>) par défaut des éléments <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> vaut <code>"text"</code>, et si on définit <code>input.type="tototruc"</code>, l'élément <code>&lt;input&gt;</code> se comportera comme un élément de type <code>text</code> (en termes d'apparence et de comportement) mais le contenu de l'attribut <code>type</code> sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne <code>"text"</code>.</p>
+La plupart du temps, les attributs IDL renverront leurs valeurs, telles qu'elles sont utilisées. Par exemple, le type (l'attribut `type`) par défaut des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) vaut `"text"`, et si on définit `input.type="tototruc"`, l'élément `<input>` se comportera comme un élément de type `text` (en termes d'apparence et de comportement) mais le contenu de l'attribut `type` sera "tototruc". Cependant, l'attribut de type IDL renverra la chaîne `"text"`.
 
-<p>Les attributs IDL ne sont pas toujours des chaînes de caractères. <code>input.maxlength</code> est un nombre par exemple (un entier long signé pour être précis). Lorsqu'on manipule des attributs IDL on utilisera toujours le type défini pour l'interface. Ainsi, <code>input.maxlength</code> renverra toujours un nombre et si on souhaite le définir, il faudra le faire avec un nombre, si on passe une valeur d'un autre type, cette valeur sera convertie grâce aux mécanismes de conversion habituels de JavaScript.</p>
+Les attributs IDL ne sont pas toujours des chaînes de caractères. `input.maxlength` est un nombre par exemple (un entier long signé pour être précis). Lorsqu'on manipule des attributs IDL on utilisera toujours le type défini pour l'interface. Ainsi, `input.maxlength` renverra toujours un nombre et si on souhaite le définir, il faudra le faire avec un nombre, si on passe une valeur d'un autre type, cette valeur sera convertie grâce aux mécanismes de conversion habituels de JavaScript.
 
-<p>Les attributs IDL peuvent <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">refléter d'autres types</a> tels que les unsigned long, les URL, les booléens, etc. Malheureusement, il n'existe pas de règles claires et la façon dont les attributs IDL se comportent en conjonction avec leurs attributs de contenu correspondants, cela dépend de l'attribut. La plupart du temps, il suivra <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes">les règles énoncées dans la spécification</a>, mais parfois, il ne le fera pas. Les spécifications HTML essaient de rendre cela aussi convivial que possible pour les développeurs, mais pour diverses raisons (principalement historiques), certains attributs se comportent bizarrement (<code>select.size</code>, par exemple) et vous devriez lire les spécifications pour comprendre comment ils se comportent exactement.</p>
+Les attributs IDL peuvent [refléter d'autres types](https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes) tels que les unsigned long, les URL, les booléens, etc. Malheureusement, il n'existe pas de règles claires et la façon dont les attributs IDL se comportent en conjonction avec leurs attributs de contenu correspondants, cela dépend de l'attribut. La plupart du temps, il suivra [les règles énoncées dans la spécification](https://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes), mais parfois, il ne le fera pas. Les spécifications HTML essaient de rendre cela aussi convivial que possible pour les développeurs, mais pour diverses raisons (principalement historiques), certains attributs se comportent bizarrement (`select.size`, par exemple) et vous devriez lire les spécifications pour comprendre comment ils se comportent exactement.
 
-<h2 id="boolean_attributes">Attributs booléens</h2>
+## Attributs booléens
 
-<p>Certains attributs de contenu (ex. <code>required</code>, <code>readonly</code>, <code>disabled</code>) sont des <a href="https://www.w3.org/TR/html52/infrastructure.html#sec-boolean-attributes">attributs booléens</a>. Si un attribut booléen est présent, sa valeur correspondra à <em>vrai</em> (<em>true</em>), s'il est absent, sa valeur correspondra à <em>faux</em> (<em>false</em>).</p>
+Certains attributs de contenu (ex. `required`, `readonly`, `disabled`) sont des [attributs booléens](https://www.w3.org/TR/html52/infrastructure.html#sec-boolean-attributes). Si un attribut booléen est présent, sa valeur correspondra à _vrai_ (_true_), s'il est absent, sa valeur correspondra à _faux_ (_false_).
 
-<p>HTML5 définit des restrictions sur les valeurs autorisées des attributs booléens : Si l'attribut est présent, sa valeur doit être soit la chaîne vide (équivalente, l'attribut peut avoir une valeur non attribuée), soit une valeur qui est une correspondance ASCII insensible à la casse pour le nom canonique de l'attribut, sans espace avant ou après. Les exemples suivants sont des façons valides de baliser un attribut booléen :</p>
+HTML5 définit des restrictions sur les valeurs autorisées des attributs booléens : Si l'attribut est présent, sa valeur doit être soit la chaîne vide (équivalente, l'attribut peut avoir une valeur non attribuée), soit une valeur qui est une correspondance ASCII insensible à la casse pour le nom canonique de l'attribut, sans espace avant ou après. Les exemples suivants sont des façons valides de baliser un attribut booléen :
 
-<pre class="brush: html">&lt;div itemscope&gt;Ce fragment est du HTML valide mais du XML invalide.&lt;/div&gt;
-&lt;div itemscope=itemscope&gt;Ce fragment est du HTML valide mais du XML invalide.&lt;/div&gt;
-&lt;div itemscope=""&gt;Ce fragment est du HTML valide et du XML valide.&lt;/div&gt;
-&lt;div itemscope="itemscope"&gt;Ce fragment est du HTML et du XML valide mais est plus verbeux.&lt;/div&gt;</pre>
+```html
+<div itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
+<div itemscope=itemscope>Ce fragment est du HTML valide mais du XML invalide.</div>
+<div itemscope="">Ce fragment est du HTML valide et du XML valide.</div>
+<div itemscope="itemscope">Ce fragment est du HTML et du XML valide mais est plus verbeux.</div>
+```
 
-<p>Pour être tout à fait explicite, les valeurs <code>"true"</code> et <code>"false"</code> ne sont pas autorisées pour les attributs booléens. Pour représenter une valeur fausse, il faudra ne pas écrire l'attribut du tout. Cette règle peut entraîner quelques incompréhensions : si on écrit <code>checked="false"</code> l'attribut <code>checked</code> sera présent et donc considéré comme <em>vrai</em> (<em>true</em>).</p>
+Pour être tout à fait explicite, les valeurs `"true"` et `"false"` ne sont pas autorisées pour les attributs booléens. Pour représenter une valeur fausse, il faudra ne pas écrire l'attribut du tout. Cette règle peut entraîner quelques incompréhensions : si on écrit `checked="false"` l'attribut `checked` sera présent et donc considéré comme _vrai_ (_true_).
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/HTML/Element">Les éléments HTML</a></li>
-</ul>
+- [Les éléments HTML](/fr/docs/Web/HTML/Element)
diff --git a/files/fr/web/html/attributes/max/index.md b/files/fr/web/html/attributes/max/index.md
index 2db1bd554b..507203f245 100644
--- a/files/fr/web/html/attributes/max/index.md
+++ b/files/fr/web/html/attributes/max/index.md
@@ -10,18 +10,24 @@ tags:
   - Reference
 translation_of: Web/HTML/Attributes/max
 ---
-<p>{{HTMLSidebar}}</p>
+{{HTMLSidebar}}
 
-<p>L'attribut <strong><code>max</code></strong> définit la valeur maximale acceptable et valide pour le champ de saisie contenant l'attribut. Si la <a href="/fr/docs/Web/HTML/Element/Input#attr-value"><code>valeur</code></a> de l'élément est supérieure à cette valeur, l'élément échoue à <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation des contraintes</a>. Cette valeur doit être supérieure ou égale à la valeur de l'attribut <a href="min"><code>min</code></a>. Si l'attribut <code>max</code> est présent mais n'est pas spécifié ou est invalide, aucune valeur <code>max</code> n'est appliquée. Si l'attribut <code>max</code> est valide et qu'une valeur non vide est supérieure au maximum autorisé par l'attribut <code>max</code>, la validation des contraintes empêchera la soumission du formulaire.</p>
+L'attribut **`max`** définit la valeur maximale acceptable et valide pour le champ de saisie contenant l'attribut. Si la [`valeur`](/fr/docs/Web/HTML/Element/Input#attr-value) de l'élément est supérieure à cette valeur, l'élément échoue à [la validation des contraintes](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Cette valeur doit être supérieure ou égale à la valeur de l'attribut [`min`](min). Si l'attribut `max` est présent mais n'est pas spécifié ou est invalide, aucune valeur `max` n'est appliquée. Si l'attribut `max` est valide et qu'une valeur non vide est supérieure au maximum autorisé par l'attribut `max`, la validation des contraintes empêchera la soumission du formulaire.
 
-<p>Valable pour les types de saisie numérique, y compris les <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>, ainsi que les deux éléments <a href="/fr/docs/Web/HTML/Element/Progress"><code>&lt;progress&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a>, l'attribut <code>max</code> est un nombre qui spécifie la valeur la plus positive qu'un contrôle de formulaire doit considérer comme valide.</p>
+Valable pour les types de saisie numérique, y compris les [`date`](/fr/docs/Web/HTML/Element/Input/date), [`month`](/fr/docs/Web/HTML/Element/Input/month), [`week`](/fr/docs/Web/HTML/Element/Input/week), [`time`](/fr/docs/Web/HTML/Element/Input/time), [`datetime-local`](/fr/docs/Web/HTML/Element/Input/datetime-local), [`number`](/fr/docs/Web/HTML/Element/Input/number) et [`range`](/fr/docs/Web/HTML/Element/Input/range), ainsi que les deux éléments [`<progress>`](/fr/docs/Web/HTML/Element/Progress) et [`<meter>`](/fr/docs/Web/HTML/Element/Meter), l'attribut `max` est un nombre qui spécifie la valeur la plus positive qu'un contrôle de formulaire doit considérer comme valide.
 
-<p>Si la valeur dépasse la valeur maximale autorisée, l'attribut JavaScript <a href="/fr/docs/Web/API/validityState/rangeOverflow"><code>validityState.rangeOverflow</code></a> sera vrai, et le contrôle sera assorti des pseudo-classes <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a> et <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a>.</p>
+Si la valeur dépasse la valeur maximale autorisée, l'attribut JavaScript [`validityState.rangeOverflow`](/fr/docs/Web/API/validityState/rangeOverflow) sera vrai, et le contrôle sera assorti des pseudo-classes [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range) et [`:invalid`](/fr/docs/Web/CSS/:invalid).
 
-<h3 id="syntax">Syntaxe</h3>
+### Syntaxe
 
 <table class="standard-table">
-  <caption>Syntaxe pour les valeurs <code>max</code> par <code>type</code> de saisie.</caption>
+  <caption>
+    Syntaxe pour les valeurs
+    <code>max</code>
+    par
+    <code>type</code>
+    de saisie.
+  </caption>
   <thead>
     <tr>
       <th>Type de saisie</th>
@@ -31,129 +37,125 @@ translation_of: Web/HTML/Attributes/max
   </thead>
   <tbody>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>
+      </td>
       <td><pre class="brush: html">yyyy-mm-dd</pre></td>
-      <td><pre class="brush: html">&lt;input type="date" max="2019-12-25" step="1"&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="date" max="2019-12-25" step="1"></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>
+      </td>
       <td><pre class="brush: html">yyyy-mm</pre></td>
-      <td><pre class="brush: html">&lt;input type="month" max="2019-12" step="12"&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="month" max="2019-12" step="12"></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>
+      </td>
       <td><pre class="brush: html">yyyy-W##</pre></td>
-      <td><pre class="brush: html">&lt;input type="week" max="2019-W23" step=""&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="week" max="2019-W23" step=""></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>
+      </td>
       <td><pre class="brush: html">hh:mm</pre></td>
-      <td><pre class="brush: html">&lt;input type="time" max="17:00" step="900"&gt;</pre></td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="time" max="17:00" step="900"></pre
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"
+          ><code>datetime-local</code></a
+        >
+      </td>
       <td><code>yyyy-mm-ddThh:mm</code></td>
-      <td><pre class="brush: html">&lt;input type="datetime-local" max="2019-12-25T23:59"&gt;</pre></td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a></td>
-      <td><a href="/fr/docs/Web/CSS/number">&lt;number&gt;</a></td>
-      <td><pre class="brush: html">&lt;input type="number" min="0" step="5" max="100"&gt;</pre></td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a></td>
-      <td><a href="/fr/docs/Web/CSS/number">&lt;number&gt;</a></td>
-      <td><pre class="brush: html">&lt;input type="range" min="60" step="5" max="100"&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="datetime-local" max="2019-12-25T23:59"></pre
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a>
+      </td>
+      <td><a href="/fr/docs/Web/CSS/number">&#x3C;number></a></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="number" min="0" step="5" max="100"></pre
+        >
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>
+      </td>
+      <td><a href="/fr/docs/Web/CSS/number">&#x3C;number></a></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="range" min="60" step="5" max="100"></pre
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong>Lorsque les données saisies par l'utilisateur ne respectent pas la valeur maximale fixée, la valeur est considérée comme invalide dans la validation des contraintes et correspondra aux pseudo-classes <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> et <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>.</p>
-</div>
+> **Note :**Lorsque les données saisies par l'utilisateur ne respectent pas la valeur maximale fixée, la valeur est considérée comme invalide dans la validation des contraintes et correspondra aux pseudo-classes [`:invalid`](/fr/docs/Web/CSS/:invalid) et [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range).
 
-<p>Voir la <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation côté client</a> et <a href="/fr/docs/Web/API/ValidityState/rangeOverflow"><code>rangeOverflow</code></a> pour plus d'informations.</p>
+Voir la [validation côté client](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) et [`rangeOverflow`](/fr/docs/Web/API/ValidityState/rangeOverflow) pour plus d'informations.
 
-<p>Pour l'élément <a href="/fr/docs/Web/HTML/Element/Progress"><code>&lt;progress&gt;</code></a>, l'attribut <code>max</code> décrit la quantité de travail que nécessite la tâche indiquée par l'élément <code>progress</code>. S'il est présent, il doit avoir une valeur supérieure à zéro et être un nombre à virgule flottante valide. Pour l'élément <a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a>, l'attribut <code>max</code> définit la limite numérique supérieure de la plage mesurée. Celle-ci doit être supérieure à la valeur minimale (<a href="/fr/docs/Web/HTML/Attributes/min">code>min</code></a> attribut), si elle est spécifiée. Dans les deux cas, si elle est omise, la valeur est égale à 1 par défaut.</p>
+Pour l'élément [`<progress>`](/fr/docs/Web/HTML/Element/Progress), l'attribut `max` décrit la quantité de travail que nécessite la tâche indiquée par l'élément `progress`. S'il est présent, il doit avoir une valeur supérieure à zéro et être un nombre à virgule flottante valide. Pour l'élément [`<meter>`](/fr/docs/Web/HTML/Element/Meter), l'attribut `max` définit la limite numérique supérieure de la plage mesurée. Celle-ci doit être supérieure à la valeur minimale ([code>min](/fr/docs/Web/HTML/Attributes/min) attribut), si elle est spécifiée. Dans les deux cas, si elle est omise, la valeur est égale à 1 par défaut.
 
-<table class="standard-table">
-  <caption>Syntaxe des valeurs <code>max</code> pour les autres éléments</caption>
-  <thead>
-    <tr>
-      <th>Type d'entrée</th>
-      <th>Syntaxe</th>
-      <th>Exemple</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Progress"><code>&lt;progress&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/CSS/number">&lt;number&gt;</a></td>
-      <td><code>&lt;progress id="file" max="100" value="70"&gt; 70% &lt;/progress&gt;</code></td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/CSS/number">&lt;number&gt;</a></td>
-      <td><code>&lt;meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"&gt; à 40/100&lt;/meter&gt;</code></td>
-    </tr>
-  </tbody>
-</table>
+| Type d'entrée                                      | Syntaxe                             | Exemple                                                                                           |
+| -------------------------------------------------- | ----------------------------------- | ------------------------------------------------------------------------------------------------- |
+| [`<progress>`](/fr/docs/Web/HTML/Element/Progress) | [<number>](/fr/docs/Web/CSS/number) | `<progress id="file" max="100" value="70"> 70% </progress>`                                       |
+| [`<meter>`](/fr/docs/Web/HTML/Element/Meter)       | [<number>](/fr/docs/Web/CSS/number) | `<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> à 40/100</meter>` |
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut <code>max</code>, assurez-vous que cette exigence maximale est comprise par l'utilisateur. Fournir des instructions dans le <a href="/fr/docs/Web/HTML/Element/Label"><code>&lt;label&gt;</code></a> peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus flexibles, envisagez d'utiliser <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute"><code>aria-labelledby</code></a> ou <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute"><code>aria-describedby</code></a>.</p>
+Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut `max`, assurez-vous que cette exigence maximale est comprise par l'utilisateur. Fournir des instructions dans le [`<label>`](/fr/docs/Web/HTML/Element/Label) peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus flexibles, envisagez d'utiliser [`aria-labelledby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) ou [`aria-describedby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'max attribute')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'max attribute')}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', 'progress element')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', 'progress element')}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', 'meter element')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', 'meter element')}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'max attribute')}} | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'max attribute')}} | {{Spec2('HTML5 W3C')}}     |
+| {{SpecName('HTML WHATWG', 'forms.html#the-progress-element', 'progress element')}}     | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5 W3C', 'forms.html#the-progress-element', 'progress element')}}     | {{Spec2('HTML5 W3C')}}     |
+| {{SpecName('HTML WHATWG', 'forms.html#the-meter-element', 'meter element')}}             | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5 W3C', 'forms.html#the-meter-element', 'meter element')}}             | {{Spec2('HTML5 W3C')}}     |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.attributes.max")}}</p>
+{{Compat("html.elements.attributes.max")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/step"><code>step</code></a></li>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a></li>
-  <li>Les autres attributs de mesure : <a href="/fr/docs/Web/HTML/Element/Meter#attr-low"><code>low</code></a>, <a href="/fr/docs/Web/HTML/Element/Meter#attr-high"><code>high</code></a>, <a href="/fr/docs/Web/HTML/Element/Meter#attr-optimum"><code>optimum</code></a></li>
-  <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation des contraintes</a></li>
-  <li>L'API <a href="/fr/docs/Web/API/Constraint_validation">Constraint validation</a></li>
-  <li>L'attribut JavaScript <a href="/fr/docs/Web/API/validityState/rangeOverflow"><code>validityState.rangeOverflow</code></a></li>
-  <li><a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></li>
-  <li>Les valeurs de l'attribut type <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>, et l'élement <a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a></li>
-</ul>
+- L'attribut [`step`](/fr/docs/Web/HTML/Attributes/step)
+- L'attribut [`min`](/fr/docs/Web/HTML/Attributes/min)
+- Les autres attributs de mesure : [`low`](/fr/docs/Web/HTML/Element/Meter#attr-low), [`high`](/fr/docs/Web/HTML/Element/Meter#attr-high), [`optimum`](/fr/docs/Web/HTML/Element/Meter#attr-optimum)
+- [Validation des contraintes](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation)
+- L'API [Constraint validation](/fr/docs/Web/API/Constraint_validation)
+- L'attribut JavaScript [`validityState.rangeOverflow`](/fr/docs/Web/API/validityState/rangeOverflow)
+- [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range)
+- L'élément [`<input>`](/fr/docs/Web/HTML/Element/Input)
+- Les valeurs de l'attribut type [`date`](/fr/docs/Web/HTML/Element/Input/date), [`month`](/fr/docs/Web/HTML/Element/Input/month), [`week`](/fr/docs/Web/HTML/Element/Input/week), [`time`](/fr/docs/Web/HTML/Element/Input/time), [`datetime-local`](/fr/docs/Web/HTML/Element/Input/datetime-local), [`number`](/fr/docs/Web/HTML/Element/Input/number) et [`range`](/fr/docs/Web/HTML/Element/Input/range), et l'élement [`<meter>`](/fr/docs/Web/HTML/Element/Meter)
diff --git a/files/fr/web/html/attributes/maxlength/index.md b/files/fr/web/html/attributes/maxlength/index.md
index 5ad331ca73..1be9f67ab1 100644
--- a/files/fr/web/html/attributes/maxlength/index.md
+++ b/files/fr/web/html/attributes/maxlength/index.md
@@ -12,54 +12,40 @@ tags:
   - textarea
 translation_of: Web/HTML/Attributes/maxlength
 ---
-<p>{{HTMLSidebar}}</p>
+{{HTMLSidebar}}
 
-<p>L'attribut <strong><code>maxlength</code></strong> définit le nombre maximal de caractères (en unités de code UTF-16) que l'utilisateur peut saisir dans un <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> ou un <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a>. Il doit s'agir d'un nombre entier égal ou supérieur à 0. Si aucune longueur maximale n'est spécifiée, ou si une valeur non valide est spécifiée, l'entrée ou la zone de texte n'a pas de longueur maximale.</p>
+L'attribut **`maxlength`** définit le nombre maximal de caractères (en unités de code UTF-16) que l'utilisateur peut saisir dans un [`<input>`](/fr/docs/Web/HTML/Element/Input) ou un [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea). Il doit s'agir d'un nombre entier égal ou supérieur à 0. Si aucune longueur maximale n'est spécifiée, ou si une valeur non valide est spécifiée, l'entrée ou la zone de texte n'a pas de longueur maximale.
 
-<p>Toute valeur de <code>maxlength</code> doit être supérieure ou égale à la valeur de <a href="/fr/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a>, si elle est présente et valide. L'entrée échoue à la validation des contraintes si la longueur de la valeur textuelle du champ est supérieure à la longueur maximale des unités de code UTF-16. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur.</p>
+Toute valeur de `maxlength` doit être supérieure ou égale à la valeur de [`minlength`](/fr/docs/Web/HTML/Attributes/minlength), si elle est présente et valide. L'entrée échoue à la validation des contraintes si la longueur de la valeur textuelle du champ est supérieure à la longueur maximale des unités de code UTF-16. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur.
 
-<h3 id="constraint_validation">Validation des contraintes</h3>
+### Validation des contraintes
 
-<p>Bien que le navigateur empêche généralement l'utilisateur de saisir plus de texte que ne l'autorise l'attribut <code>maxlength</code>, si la longueur est supérieure à ce dernier, la propriété en lecture seule <a href="/fr/docs/Web/API/ValidityState/tooLong"><code>tooLong</code></a> d'un objet <a href="/fr/docs/Web/API/ValidityState"><code>ValidityState</code></a> sera vraie.</p>
+Bien que le navigateur empêche généralement l'utilisateur de saisir plus de texte que ne l'autorise l'attribut `maxlength`, si la longueur est supérieure à ce dernier, la propriété en lecture seule [`tooLong`](/fr/docs/Web/API/ValidityState/tooLong) d'un objet [`ValidityState`](/fr/docs/Web/API/ValidityState) sera vraie.
 
-<h2 id="examples">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;input type="password" maxlength="4"/&gt;</pre>
+```html
+<input type="password" maxlength="4"/>
+```
 
-<div>{{EmbedLiveSample('examples', '', 100)}}</div>
+{{EmbedLiveSample('examples', '', 100)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-maxlength', 'maxlength attribute')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5.1', 'input.html#attr-maxlength-accept', 'maxlength attribute')}}</td>
-      <td>{{Spec2('HTML5.1')}}</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'input.html#attr-input-maxlength', 'maxlength attribute')}} | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5.1', 'input.html#attr-maxlength-accept', 'maxlength attribute')}}     | {{Spec2('HTML5.1')}}     |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.attribute.maxlength")}}</p>
+{{Compat("html.elements.attribute.maxlength")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a></li>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/size"><code>size</code></a></li>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a></li>
-  <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation des contraintes</a></li>
-  <li>L'API <a href="/fr/docs/Web/API/Constraint_validation">Constraint validation</a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></li>
-</ul>
+- L'attribut [`minlength`](/fr/docs/Web/HTML/Attributes/minlength)
+- L'attribut [`size`](/fr/docs/Web/HTML/Attributes/size)
+- L'attribut [`pattern`](/fr/docs/Web/HTML/Attributes/pattern)
+- [Validation des contraintes](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation)
+- L'API [Constraint validation](/fr/docs/Web/API/Constraint_validation)
+- L'élément [`<input>`](/fr/docs/Web/HTML/Element/Input)
diff --git a/files/fr/web/html/attributes/min/index.md b/files/fr/web/html/attributes/min/index.md
index 9a142deaeb..f0d824c0af 100644
--- a/files/fr/web/html/attributes/min/index.md
+++ b/files/fr/web/html/attributes/min/index.md
@@ -10,16 +10,22 @@ tags:
   - Reference
 translation_of: Web/HTML/Attributes/min
 ---
-<p>{{HTMLSidebar}}</p>
+{{HTMLSidebar}}
 
-<p>L'attribut <strong><code>min</code></strong> définit la valeur minimale qui est acceptable et valide pour l'entrée contenant l'attribut. Si la <a href="/fr/docs/Web/HTML/Element/Input#attr-value">valeur</a> de l'élément est inférieure à cette valeur, l'élément échoue lors de la <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation des contraintes</a>. Cette valeur doit être inférieure ou égale à la valeur de l'attribut <code>max</code>. Si une valeur est spécifiée pour <code>min</code> qui n'est pas un nombre valide, l'entrée n'a pas de valeur minimale.</p>
+L'attribut **`min`** définit la valeur minimale qui est acceptable et valide pour l'entrée contenant l'attribut. Si la [valeur](/fr/docs/Web/HTML/Element/Input#attr-value) de l'élément est inférieure à cette valeur, l'élément échoue lors de la [validation des contraintes](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Cette valeur doit être inférieure ou égale à la valeur de l'attribut `max`. Si une valeur est spécifiée pour `min` qui n'est pas un nombre valide, l'entrée n'a pas de valeur minimale.
 
-<p>Valable pour les types de saisie numérique, y compris les types <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>, et l'élément <a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a>, l'attribut <code>min</code> est un nombre qui spécifie la valeur la plus négative qu'un contrôle de formulaire doit considérer comme valide.</p>
+Valable pour les types de saisie numérique, y compris les types [`date`](/fr/docs/Web/HTML/Element/Input/date), [`month`](/fr/docs/Web/HTML/Element/Input/month), [`week`](/fr/docs/Web/HTML/Element/Input/week), [`time`](/fr/docs/Web/HTML/Element/Input/time), [`datetime-local`](/fr/docs/Web/HTML/Element/Input/datetime-local), [`number`](/fr/docs/Web/HTML/Element/Input/number) et [`range`](/fr/docs/Web/HTML/Element/Input/range), et l'élément [`<meter>`](/fr/docs/Web/HTML/Element/Meter), l'attribut `min` est un nombre qui spécifie la valeur la plus négative qu'un contrôle de formulaire doit considérer comme valide.
 
-<h2 id="syntax">Syntaxe</h3>
+## Syntaxe
 
 <table class="standard-table">
-  <caption>Syntaxe pour les valeurs <code>min</code> par <code>type</code> de saisie.</caption>
+  <caption>
+    Syntaxe pour les valeurs
+    <code>min</code>
+    par
+    <code>type</code>
+    de saisie.
+  </caption>
   <thead>
     <tr>
       <th scope="col">Type de saisie</th>
@@ -29,128 +35,144 @@ translation_of: Web/HTML/Attributes/min
   </thead>
   <tbody>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>
+      </td>
       <td><pre class="brush: html">yyyy-mm-dd</pre></td>
-      <td><pre class="brush: html">&lt;input type="date" min="2019-12-25" step="1"&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="date" min="2019-12-25" step="1"></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>
+      </td>
       <td><pre class="brush: html">yyyy-mm</pre></td>
-      <td><pre class="brush: html">&lt;input type="month" min="2019-12" step="12"&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="month" min="2019-12" step="12"></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>
+      </td>
       <td><pre class="brush: html">yyyy-W##</pre></td>
-      <td><pre class="brush: html">&lt;input type="week" min="2019-W23" step=""&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="week" min="2019-W23" step=""></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>
+      </td>
       <td><pre class="brush: html">hh:mm</pre></td>
-      <td><pre class="brush: html">&lt;input type="time" min="09:00" step="900"&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="time" min="09:00" step="900"></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"
+          ><code>datetime-local</code></a
+        >
+      </td>
       <td><code>yyyy-mm-ddThh:mm</code></td>
-      <td><pre class="brush: html">&lt;input type="datetime-local" min="2019-12-25T19:30"&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="datetime-local" min="2019-12-25T19:30"></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a></td>
-      <td><a href="/fr/docs/Web/CSS/number">&lt;number&gt;</a></td>
-      <td><pre class="brush: html">&lt;input type="number" min="0" step="5" max="100"&gt;</pre></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a>
+      </td>
+      <td><a href="/fr/docs/Web/CSS/number">&#x3C;number></a></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="number" min="0" step="5" max="100"></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a></td>
-      <td><a href="/fr/docs/Web/CSS/number">&lt;number&gt;</a></td>
-      <td><pre class="brush: html">&lt;input type="range" min="60" step="5" max="100"&gt;</pre></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>
+      </td>
+      <td><a href="/fr/docs/Web/CSS/number">&#x3C;number></a></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="range" min="60" step="5" max="100"></pre
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<div class="note">
-  <p><strong>Note :</strong>Lorsque les données saisies par l'utilisateur ne respectent pas la valeur minimale définie, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudo-classes <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> et <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>.</p>
-</div>
+> **Note :**Lorsque les données saisies par l'utilisateur ne respectent pas la valeur minimale définie, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudo-classes [`:invalid`](/fr/docs/Web/CSS/:invalid) et [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range).
 
-<p>Voir la <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">validation côté client</a> et <a href="/fr/docs/Web/API/ValidityState/rangeUnderflow"><code>rangeUnderflow</code></a> pour plus d'informations.</p>
+Voir la [validation côté client](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) et [`rangeUnderflow`](/fr/docs/Web/API/ValidityState/rangeUnderflow) pour plus d'informations.
 
-<p>Pour l'élément <a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a>, l'attribut <code>min</code> définit la limite numérique inférieure de la plage mesurée. Celle-ci doit être inférieure à la valeur minimale (attribut <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a>), si elle est spécifiée. Dans les deux cas, si elle est omise, la valeur est égale à 1 par défaut.</p>
+Pour l'élément [`<meter>`](/fr/docs/Web/HTML/Element/Meter), l'attribut `min` définit la limite numérique inférieure de la plage mesurée. Celle-ci doit être inférieure à la valeur minimale (attribut [`max`](/fr/docs/Web/HTML/Attributes/max)), si elle est spécifiée. Dans les deux cas, si elle est omise, la valeur est égale à 1 par défaut.
 
-<table class="standard-table">
-  <caption>Syntaxe de <code>min</code> pour les autres éléments</caption>
-  <thead>
-    <tr>
-      <th scope="col">Élément</th>
-      <th scope="col">Syntaxe</th>
-      <th scope="col">Exemple</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/CSS/number">&lt;number&gt;</a></td>
-      <td><code>&lt;meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"&gt; at 40/100&lt;/meter&gt;</code></td>
-    </tr>
-  </tbody>
-</table>
+| Élément                                      | Syntaxe                             | Exemple                                                                                            |
+| -------------------------------------------- | ----------------------------------- | -------------------------------------------------------------------------------------------------- |
+| [`<meter>`](/fr/docs/Web/HTML/Element/Meter) | [<number>](/fr/docs/Web/CSS/number) | `<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter>` |
 
-<h3 id="impact_on_step">Impact sur <code>step</code></h3>
+### Impact sur `step`
 
-<p>Les valeurs de <code>min</code> et <code>step</code> définissent ce que sont les valeurs valides, même si l'attribut <code>step</code> n'est pas inclus, car <code>step</code> a par défaut la valeur <code>0</code>.</p>
+Les valeurs de `min` et `step` définissent ce que sont les valeurs valides, même si l'attribut `step` n'est pas inclus, car `step` a par défaut la valeur `0`.
 
-<p>Nous ajoutons une grande bordure rouge autour des entrées invalides :</p>
+Nous ajoutons une grande bordure rouge autour des entrées invalides :
 
-<pre class="brush: css">input:invalid {
+```css
+input:invalid {
   border: solid red 3px;
-}</pre>
+}
+```
 
-<p>Nous définissons ensuite une entrée avec une valeur minimale de 7,2, en omettant l'attribut « step », qui a la valeur 1 par défaut.</p>
+Nous définissons ensuite une entrée avec une valeur minimale de 7,2, en omettant l'attribut « step », qui a la valeur 1 par défaut.
 
-<pre class="brush: html">&lt;input id="myNumber" name="myNumber" type="number" min="7.2" value="8"&gt;</pre>
+```html
+<input id="myNumber" name="myNumber" type="number" min="7.2" value="8">
+```
 
-<p>Comme <code>step</code> a pour valeur 1 par défaut, les valeurs valides comprennent <code>7,2</code>, <code>8,2</code>, <code>9,2</code>, et ainsi de suite. La valeur 8 n'est pas valide. Comme nous avons inclus une valeur non valide, les navigateurs compatibles afficheront la valeur comme non valide.</p>
+Comme `step` a pour valeur 1 par défaut, les valeurs valides comprennent `7,2`, `8,2`, `9,2`, et ainsi de suite. La valeur 8 n'est pas valide. Comme nous avons inclus une valeur non valide, les navigateurs compatibles afficheront la valeur comme non valide.
 
-<div>{{EmbedLiveSample("impact_on_step", "", 55)}}</div>
+{{EmbedLiveSample("impact_on_step", "", 55)}}
 
-<p>S'il n'est pas explicitement inclus, <code>step</code> prend par défaut la valeur 1 pour <code>number</code> et <code>range</code>, et 1 type d'unité (seconde, semaine, mois, jour) pour les types d'entrée date/heure.</p>
+S'il n'est pas explicitement inclus, `step` prend par défaut la valeur 1 pour `number` et `range`, et 1 type d'unité (seconde, semaine, mois, jour) pour les types d'entrée date/heure.
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut <code>min</code>, assurez-vous que cette exigence minimale est comprise par l'utilisateur. Fournir des instructions à l'intérieur des <a href="/fr/docs/Web/HTML/Element/label"><code>&lt;label&gt;</code></a> peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus souples, envisagez d'utiliser <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute"><code>aria-labelledby</code></a> ou <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute"><code>aria-describedby</code></a>.</p>
+Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut `min`, assurez-vous que cette exigence minimale est comprise par l'utilisateur. Fournir des instructions à l'intérieur des [`<label>`](/fr/docs/Web/HTML/Element/label) peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus souples, envisagez d'utiliser [`aria-labelledby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) ou [`aria-describedby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                    | Statut                           |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}} | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}} | {{Spec2('HTML5 W3C')}}     |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.attributes.min")}}</p>
+{{Compat("html.elements.attributes.min")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/step"><code>step</code></a></li>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a></li>
-  <li>Les autres attributs de mesure : <a href="/fr/docs/Web/HTML/Element/meter#attr-low"><code>low</code></a>, <a href="/fr/docs/Web/HTML/Element/meter#attr-high"><code>high</code></a>, <a href="/fr/docs/Web/HTML/Element/meter#attr-optimum"><code>optimum</code></a></li>
-  <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation des contraintes</a></li>
-  <li>L'API <a href="/fr/docs/Web/API/Constraint_validation">Constraint validation</a></li>
-  <li>L'attribut JavaScript <a href="/fr/docs/Web/API/validityState/rangeUnderflow"><code>validityState.rangeUnderflow</code></a></li>
-  <li>La pseudo-classe <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a></li>
-  <li>Les valeurs de l'attribut type <a href="/fr/docs/Web/HTML/Element/input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/input/range"><code>range</code></a>, et l'élément <a href="/fr/docs/Web/HTML/Element/meter"><code>&lt;meter&gt;</code></a></li>
-</ul>
+- L'attribut [`step`](/fr/docs/Web/HTML/Attributes/step)
+- L'attribut [`max`](/fr/docs/Web/HTML/Attributes/max)
+- Les autres attributs de mesure : [`low`](/fr/docs/Web/HTML/Element/meter#attr-low), [`high`](/fr/docs/Web/HTML/Element/meter#attr-high), [`optimum`](/fr/docs/Web/HTML/Element/meter#attr-optimum)
+- [Validation des contraintes](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation)
+- L'API [Constraint validation](/fr/docs/Web/API/Constraint_validation)
+- L'attribut JavaScript [`validityState.rangeUnderflow`](/fr/docs/Web/API/validityState/rangeUnderflow)
+- La pseudo-classe [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range)
+- L'élément [`<input>`](/fr/docs/Web/HTML/Element/input)
+- Les valeurs de l'attribut type [`date`](/fr/docs/Web/HTML/Element/input/date), [`month`](/fr/docs/Web/HTML/Element/input/month), [`week`](/fr/docs/Web/HTML/Element/input/week), [`time`](/fr/docs/Web/HTML/Element/input/time), [`datetime-local`](/fr/docs/Web/HTML/Element/input/datetime-local), [`number`](/fr/docs/Web/HTML/Element/input/number) et [`range`](/fr/docs/Web/HTML/Element/input/range), et l'élément [`<meter>`](/fr/docs/Web/HTML/Element/meter)
diff --git a/files/fr/web/html/attributes/minlength/index.md b/files/fr/web/html/attributes/minlength/index.md
index 2e3960b93f..d85cac2cda 100644
--- a/files/fr/web/html/attributes/minlength/index.md
+++ b/files/fr/web/html/attributes/minlength/index.md
@@ -12,22 +12,25 @@ tags:
   - textarea
 translation_of: Web/HTML/Attributes/minlength
 ---
-<p>{{HTMLSidebar}}</p>
+{{HTMLSidebar}}
 
-<p>L'attribut <strong><code>minlength</code></strong> définit le nombre minimal de caractères (sous forme d'unités de code UTF-16) que l'utilisateur peut saisir dans un élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a>. Il doit s'agir d'une valeur entière égale ou supérieure à 0. Si aucune longueur minimale n'est spécifiée, ou si une valeur invalide est spécifiée, l'entrée n'a pas de longueur minimale. Cette valeur doit être inférieure ou égale à la valeur de <a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a>, sinon la valeur ne sera jamais valide, car il est impossible de satisfaire aux deux critères.</p>
+L'attribut **`minlength`** définit le nombre minimal de caractères (sous forme d'unités de code UTF-16) que l'utilisateur peut saisir dans un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) ou [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea). Il doit s'agir d'une valeur entière égale ou supérieure à 0. Si aucune longueur minimale n'est spécifiée, ou si une valeur invalide est spécifiée, l'entrée n'a pas de longueur minimale. Cette valeur doit être inférieure ou égale à la valeur de [`maxlength`](/fr/docs/Web/HTML/Attributes/maxlength), sinon la valeur ne sera jamais valide, car il est impossible de satisfaire aux deux critères.
 
-<p>L'entrée échouera à la validation des contraintes si la longueur de la valeur textuelle du champ est inférieure à <code>minlength</code> unités de code UTF-16, avec <a href="/fr/docs/Web/API/validityState/tooShort"><code>validityState.tooShort</code></a> retournant <code>true</code>. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur. En cas d'échec de la soumission, certains navigateurs affichent un message d'erreur indiquant la longueur minimale requise et la longueur actuelle.</p>
+L'entrée échouera à la validation des contraintes si la longueur de la valeur textuelle du champ est inférieure à `minlength` unités de code UTF-16, avec [`validityState.tooShort`](/fr/docs/Web/API/validityState/tooShort) retournant `true`. La validation des contraintes n'est appliquée que lorsque la valeur est modifiée par l'utilisateur. En cas d'échec de la soumission, certains navigateurs affichent un message d'erreur indiquant la longueur minimale requise et la longueur actuelle.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>En ajoutant <code>minlength="5"</code>, la valeur doit soit être vide, soit comporter cinq caractères ou plus pour être valide.</p>
+En ajoutant `minlength="5"`, la valeur doit soit être vide, soit comporter cinq caractères ou plus pour être valide.
 
-<pre class="brush: html">&lt;label for="fruit"&gt;Entrez un nom de fruit d'au moins 5 lettres.&lt;/label&gt;
-&lt;input type="text" minlength="5" id="fruit"&gt;</pre>
+```html
+<label for="fruit">Entrez un nom de fruit d'au moins 5 lettres.</label>
+<input type="text" minlength="5" id="fruit">
+```
 
-<p>Nous pouvons utiliser des pseudo-classes pour donner un style à l'élément en fonction de la validité de la valeur. La valeur sera valide tant qu'elle sera soit nulle (vide), soit longue de cinq caractères ou plus. <em>Vert</em> est invalide, <em>Citron</em> est valide.</p>
+Nous pouvons utiliser des pseudo-classes pour donner un style à l'élément en fonction de la validité de la valeur. La valeur sera valide tant qu'elle sera soit nulle (vide), soit longue de cinq caractères ou plus. _Vert_ est invalide, _Citron_ est valide.
 
-<pre class="brush: css">input {
+```css
+input {
   border: 2px solid currentcolor;
 }
 input:invalid {
@@ -35,42 +38,27 @@ input:invalid {
 }
 input:invalid:focus {
   background-image: linear-gradient(pink, lightgreen);
-}</pre>
+}
+```
 
-<div>{{EmbedLiveSample('examples', '', 40)}}</div>
+{{EmbedLiveSample('examples', '', 40)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'l\'attribut minlength')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'l\'attribut minlength')}}</td>
-      <td>{{Spec2('HTML5.1')}}</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                        | Statut                           |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'l\'attribut minlength')}} | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'l\'attribut minlength')}}     | {{Spec2('HTML5.1')}}     |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.attribute.minlength")}}</p>
+{{Compat("html.elements.attribute.minlength")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a></li>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/size"><code>size</code></a></li>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a></li>
-  <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation des contraintes</a></li>
-  <li>L'API <a href="/fr/docs/Web/API/Constraint_validation">Constraint validation</a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></li>
-</ul>
+- L'attribut [`maxlength`](/fr/docs/Web/HTML/Attributes/maxlength)
+- L'attribut [`size`](/fr/docs/Web/HTML/Attributes/size)
+- L'attribut [`pattern`](/fr/docs/Web/HTML/Attributes/pattern)
+- [Validation des contraintes](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation)
+- L'API [Constraint validation](/fr/docs/Web/API/Constraint_validation)
+- L'élément [`<input>`](/fr/docs/Web/HTML/Element/Input)
diff --git a/files/fr/web/html/attributes/multiple/index.md b/files/fr/web/html/attributes/multiple/index.md
index f5dbe76289..ca583d7900 100644
--- a/files/fr/web/html/attributes/multiple/index.md
+++ b/files/fr/web/html/attributes/multiple/index.md
@@ -8,128 +8,143 @@ tags:
   - HTML
 translation_of: Web/HTML/Attributes/multiple
 ---
-<p>{{HTMLSidebar}}</p>
+{{HTMLSidebar}}
 
-<p>L'attribut booléen <strong><code>multiple</code></strong>, s'il est défini, signifie que le contrôle de formulaire accepte une ou plusieurs valeurs. Valable pour les types de saisie <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a> et l'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a>, la manière dont l'utilisateur opte pour plusieurs valeurs dépend du contrôle de formulaire.</p>
+L'attribut booléen **`multiple`**, s'il est défini, signifie que le contrôle de formulaire accepte une ou plusieurs valeurs. Valable pour les types de saisie [`email`](/fr/docs/Web/HTML/Element/Input/email) et [`file`](/fr/docs/Web/HTML/Element/Input/file) et l'élément [`<select>`](/fr/docs/Web/HTML/Element/select), la manière dont l'utilisateur opte pour plusieurs valeurs dépend du contrôle de formulaire.
 
-<p>Selon le type, le contrôle de formulaire peut avoir une apparence différente si l'attribut <code>multiple</code> est défini. Pour le type de saisie de fichier, la messagerie native fournie par le navigateur diffère. Dans Firefox, l'entrée de fichier indique « Aucun fichier sélectionné » lorsque l'attribut est présent et « Aucun fichier sélectionné » dans le cas contraire, lorsqu'aucun fichier n'est sélectionné. La plupart des navigateurs affichent une zone de liste déroulante pour un contrôle <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> avec l'attribut <code>multiple</code> défini contre une liste déroulante à une ligne lorsque l'attribut est omis. L'entrée <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a> s'affiche de la même manière, mais correspondra à la pseudo-classe <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> si plus d'une adresse électronique séparée par des virgules est incluse en l'absence de l'attribut.</p>
+Selon le type, le contrôle de formulaire peut avoir une apparence différente si l'attribut `multiple` est défini. Pour le type de saisie de fichier, la messagerie native fournie par le navigateur diffère. Dans Firefox, l'entrée de fichier indique « Aucun fichier sélectionné » lorsque l'attribut est présent et « Aucun fichier sélectionné » dans le cas contraire, lorsqu'aucun fichier n'est sélectionné. La plupart des navigateurs affichent une zone de liste déroulante pour un contrôle [`<select>`](/fr/docs/Web/HTML/Element/select) avec l'attribut `multiple` défini contre une liste déroulante à une ligne lorsque l'attribut est omis. L'entrée [`email`](/fr/docs/Web/HTML/Element/Input/email) s'affiche de la même manière, mais correspondra à la pseudo-classe [`:invalid`](/fr/docs/Web/CSS/:invalid) si plus d'une adresse électronique séparée par des virgules est incluse en l'absence de l'attribut.
 
-<p>Lorsque <code>multiple</code> est défini sur le type de saisie <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, l'utilisateur peut inclure zéro (si ce n'est pas également <a href="/fr/docs/Web/HTML/Attributes/required"><code>required</code></a>), une ou plusieurs adresses électroniques séparées par des virgules.</p>
+Lorsque `multiple` est défini sur le type de saisie [`email`](/fr/docs/Web/HTML/Element/Input/email), l'utilisateur peut inclure zéro (si ce n'est pas également [`required`](/fr/docs/Web/HTML/Attributes/required)), une ou plusieurs adresses électroniques séparées par des virgules.
 
-<pre class="brush: html">&lt;input type="email" multiple name="emails" id="emails"&gt;</pre>
+```html
+<input type="email" multiple name="emails" id="emails">
+```
 
-<p>Si et seulement si l'attribut <code>multiple</code> est spécifié, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste.</p>
+Si et seulement si l'attribut `multiple` est spécifié, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste.
 
-<p>Lorsque <code>multiple</code> est défini sur le type d'entrée <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>, l'utilisateur peut sélectionner un ou plusieurs fichiers. L'utilisateur peut choisir plusieurs fichiers dans le sélecteur de fichiers de n'importe quelle manière que la plateforme qu'il a choisie permet (par exemple, en maintenant la touche <kbd>Maj</kbd> ou <kbd>Ctrl</kbd> enfoncée, puis en cliquant).</p>
+Lorsque `multiple` est défini sur le type d'entrée [`file`](/fr/docs/Web/HTML/Element/Input/file), l'utilisateur peut sélectionner un ou plusieurs fichiers. L'utilisateur peut choisir plusieurs fichiers dans le sélecteur de fichiers de n'importe quelle manière que la plateforme qu'il a choisie permet (par exemple, en maintenant la touche <kbd>Maj</kbd> ou <kbd>Ctrl</kbd> enfoncée, puis en cliquant).
 
-<pre class="brush: html">&lt;input type="file" multiple name="uploads" id="uploads"&gt;</pre>
+```html
+<input type="file" multiple name="uploads" id="uploads">
+```
 
-<p>Lorsque l'attribut est omis, l'utilisateur ne peut sélectionner qu'un seul fichier par <code>&lt;input&gt;</code>.</p>
+Lorsque l'attribut est omis, l'utilisateur ne peut sélectionner qu'un seul fichier par `<input>`.
 
-<p>L'attribut <code>multiple</code> de l'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> représente un contrôle permettant de sélectionner zéro ou plusieurs options dans la liste d'options. Sinon, l'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> représente un contrôle permettant de sélectionner une seule <a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a> dans la liste d'options.</p>
+L'attribut `multiple` de l'élément [`<select>`](/fr/docs/Web/HTML/Element/select) représente un contrôle permettant de sélectionner zéro ou plusieurs options dans la liste d'options. Sinon, l'élément [`<select>`](/fr/docs/Web/HTML/Element/select) représente un contrôle permettant de sélectionner une seule [`<option>`](/fr/docs/Web/HTML/Element/Option) dans la liste d'options.
 
-<pre class="brush: html">&lt;select multiple name="dwarfs" id="dwarfs"&gt;
-  &lt;option&gt;Grincheux&lt;/option&gt;
-  &lt;option&gt;Joyeux&lt;/option&gt;
-  &lt;option&gt;Dormeur&lt;/option&gt;
-  &lt;option&gt;Timide&lt;/option&gt;
-  &lt;option&gt;Atchoum&lt;/option&gt;
-  &lt;option&gt;Simplet&lt;/option&gt;
-  &lt;option&gt;Doc&lt;/option&gt;
-&lt;/select&gt;</pre>
+```html
+<select multiple name="dwarfs" id="dwarfs">
+  <option>Grincheux</option>
+  <option>Joyeux</option>
+  <option>Dormeur</option>
+  <option>Timide</option>
+  <option>Atchoum</option>
+  <option>Simplet</option>
+  <option>Doc</option>
+</select>
+```
 
-<p>Lorsque <code>multiple</code> est spécifié, la plupart des navigateurs affichent une boîte de liste défilante au lieu d'une liste déroulante à ligne unique.</p>
+Lorsque `multiple` est spécifié, la plupart des navigateurs affichent une boîte de liste défilante au lieu d'une liste déroulante à ligne unique.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="email_input">Saisie d'adresses électroniques</h3>
+### Saisie d'adresses électroniques
 
-<pre class="brush: html">&lt;label for="emails"&gt;A qui voulez-vous adresser un courriel ?&lt;/label&gt;
-&lt;input type="email" multiple name="emails" id="emails" list="dwarfemails" required size="64"&gt;
+```html
+<label for="emails">A qui voulez-vous adresser un courriel ?</label>
+<input type="email" multiple name="emails" id="emails" list="dwarfemails" required size="64">
 
-&lt;datalist id="dwarfemails"&gt;
-  &lt;option value="grincheux@menuisiers.fr"&gt;Grincheux&lt;/option&gt;
-  &lt;option value="joyeux@menuisiers.fr"&gt;Joyeux&lt;/option&gt;
-  &lt;option value="dormeur@menuisiers.fr"&gt;Dormeur&lt;/option&gt;
-  &lt;option value="timide@menuisiers.fr"&gt;Timide&lt;/option&gt;
-  &lt;option value="atchoum@menuisiers.fr"&gt;Atchoum&lt;/option&gt;
-  &lt;option value="simplet@menuisiers.fr"&gt;Simplet&lt;/option&gt;
-  &lt;option value="doc@menuisiers.fr"&gt;Doc&lt;/option&gt;
-&lt;/datalist&gt;</pre>
+<datalist id="dwarfemails">
+  <option value="grincheux@menuisiers.fr">Grincheux</option>
+  <option value="joyeux@menuisiers.fr">Joyeux</option>
+  <option value="dormeur@menuisiers.fr">Dormeur</option>
+  <option value="timide@menuisiers.fr">Timide</option>
+  <option value="atchoum@menuisiers.fr">Atchoum</option>
+  <option value="simplet@menuisiers.fr">Simplet</option>
+  <option value="doc@menuisiers.fr">Doc</option>
+</datalist>
+```
 
-<pre class="brush: css">input:invalid {border: red solid 3px;}</pre>
+```css
+input:invalid {border: red solid 3px;}
+```
 
-<p>Si et seulement si l'attribut <code>multiple</code> est spécifié, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste. Si l'attribut <a href="/fr/docs/Web/HTML/Attributs/required"><code>required</code></a> est présent, au moins une adresse électronique est requise.</p>
+Si et seulement si l'attribut `multiple` est spécifié, la valeur peut être une liste d'adresses électroniques correctement formées et séparées par des virgules. Tout espace blanc de queue et de tête est supprimé de chaque adresse de la liste. Si l'attribut [`required`](/fr/docs/Web/HTML/Attributs/required) est présent, au moins une adresse électronique est requise.
 
-<p>Certains navigateurs prennent en charge l'apparition de la <a href="/fr/docs/Web/HTML/Attributes/list">liste</a> d'options de la <a href="/fr/docs/Web/HTML/Element/datalist"><code>&lt;datalist&gt;</code></a> pour les adresses électroniques ultérieures lorsque <code>multiple</code> est présent. D'autres ne le font pas.</p>
+Certains navigateurs prennent en charge l'apparition de la [liste](/fr/docs/Web/HTML/Attributes/list) d'options de la [`<datalist>`](/fr/docs/Web/HTML/Element/datalist) pour les adresses électroniques ultérieures lorsque `multiple` est présent. D'autres ne le font pas.
 
-<div>{{EmbedLiveSample("email_input", '', 80)}}</div>
+{{EmbedLiveSample("email_input", '', 80)}}
 
-<h3 id="file_input">Saisie de fichiers</h3>
+### Saisie de fichiers
 
-<p>Lorsque <code>multiple</code> est défini sur le type de saisie <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>, l'utilisateur peut sélectionner un ou plusieurs fichiers :</p>
+Lorsque `multiple` est défini sur le type de saisie [`file`](/fr/docs/Web/HTML/Element/Input/file), l'utilisateur peut sélectionner un ou plusieurs fichiers :
 
-<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
-  &lt;p&gt;
-    &lt;label for="uploads"&gt;
+```html
+<form method="post" enctype="multipart/form-data">
+  <p>
+    <label for="uploads">
       Choisissez les images que vous voulez télécharger :
-    &lt;/label&gt;
-    &lt;input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="text"&gt;Choisissez un fichier texte à télécharger :&lt;/label&gt;
-    &lt;input type="file" id="text" name="text" accept=".txt"&gt;
- &lt;/p&gt;
-  &lt;p&gt;
-    &lt;input type="submit" value="Soumettre"&gt;
-  &lt;/p&gt;
-&lt;/form&gt;</pre>
-
-<div>{{EmbedLiveSample("file_input", '', 160)}}</div>
-
-<p>Notez la différence d'aspect entre l'exemple avec <code>multiple</code> défini et l'autre entrée <code>file</code> sans.</p>
-
-<p>Lorsque le formulaire est soumis, si nous avions utilisé <a href="/fr/docs/Web/HTML/Element/Form"><code>method="get"</code></a> le nom de chaque fichier sélectionné aurait été ajouté aux paramètres de l'URL sous la forme <code>?uploads=img1.jpg&amp;uploads=img2.svg</code>. Cependant, étant donné que nous sommes en train d'additionner les données du formulaire <a href="/fr/docs/Web/API/XMLHttpRequest/multipart">multipart</a>, nous devons utiliser POST. Voir l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a> et <a href="/fr/docs/Learn/Forms/Sending_and_retrieving_form_data#the_method_attribute">l'envoi de données de formulaire</a> pour plus d'informations.</p>
-
-<h3 id="select">Saisir plusieurs options</h3>
-
-<p>L'attribut <code>multiple</code> de l'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> représente un contrôle permettant de sélectionner zéro ou plusieurs options dans la liste d'options. Sinon, l'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> représente un contrôle permettant de sélectionner une seule <a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a> dans la liste des options. L'apparence du contrôle varie généralement en fonction de la présence de l'attribut multiple, la plupart des navigateurs affichant une liste déroulante à défilement au lieu d'une liste déroulante à ligne unique lorsque l'attribut est présent.</p>
-
-<pre class="brush: html">&lt;form method="get" action="#"&gt;
-&lt;p&gt;
- &lt;label for="dwarfs"&gt;Sélectionnez les menuisiers que vous aimez :&lt;/label&gt;
-  &lt;select multiple name="dwarfs" id="dwarfs"&gt;
-    &lt;option&gt;grincheux@menuisiers.fr&lt;/option&gt;
-    &lt;option&gt;joyeux@menuisiers.fr&lt;/option&gt;
-    &lt;option&gt;dormeur@menuisiers.fr&lt;/option&gt;
-    &lt;option&gt;timide@menuisiers.fr&lt;/option&gt;
-    &lt;option&gt;atchoum@menuisiers.fr&lt;/option&gt;
-    &lt;option&gt;simplet@menuisiers.fr&lt;/option&gt;
-    &lt;option&gt;doc@menuisiers.fr&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/p&gt;
-&lt;p&gt;
- &lt;label for="favoriteOnly"&gt;Sélectionnez votre préféré :&lt;/label&gt;
-  &lt;select name="favoriteOnly" id="favoriteOnly"&gt;
-    &lt;option&gt;grincheux@menuisiers.fr&lt;/option&gt;
-    &lt;option&gt;joyeux@menuisiers.fr&lt;/option&gt;
-    &lt;option&gt;dormeur@menuisiers.fr&lt;/option&gt;
-    &lt;option&gt;timide@menuisiers.fr&lt;/option&gt;
-    &lt;option&gt;atchoum@menuisiers.fr&lt;/option&gt;
-    &lt;option&gt;simplet@menuisiers.fr&lt;/option&gt;
-    &lt;option&gt;doc@menuisiers.fr&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/p&gt;
-&lt;p&gt;
-  &lt;input type="submit" value="Soumettre"&gt;
-&lt;/p&gt;
-&lt;/form&gt;</pre>
-
-<div>{{EmbedLiveSample("select", '', 220)}}</div>
-
-<p>Notez la différence d'apparence entre les deux contrôles de formulaire.</p>
-
-<pre class="brush: css">/* Décommentez ce CSS pour que le sélecteur multiple ait la même hauteur que le simple. */
+    </label>
+    <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple>
+  </p>
+  <p>
+    <label for="text">Choisissez un fichier texte à télécharger :</label>
+    <input type="file" id="text" name="text" accept=".txt">
+ </p>
+  <p>
+    <input type="submit" value="Soumettre">
+  </p>
+</form>
+```
+
+{{EmbedLiveSample("file_input", '', 160)}}
+
+Notez la différence d'aspect entre l'exemple avec `multiple` défini et l'autre entrée `file` sans.
+
+Lorsque le formulaire est soumis, si nous avions utilisé [`method="get"`](/fr/docs/Web/HTML/Element/Form) le nom de chaque fichier sélectionné aurait été ajouté aux paramètres de l'URL sous la forme `?uploads=img1.jpg&uploads=img2.svg`. Cependant, étant donné que nous sommes en train d'additionner les données du formulaire [multipart](/fr/docs/Web/API/XMLHttpRequest/multipart), nous devons utiliser POST. Voir l'élément [`<form>`](/fr/docs/Web/HTML/Element/Form) et [l'envoi de données de formulaire](/fr/docs/Learn/Forms/Sending_and_retrieving_form_data#the_method_attribute) pour plus d'informations.
+
+### Saisir plusieurs options
+
+L'attribut `multiple` de l'élément [`<select>`](/fr/docs/Web/HTML/Element/select) représente un contrôle permettant de sélectionner zéro ou plusieurs options dans la liste d'options. Sinon, l'élément [`<select>`](/fr/docs/Web/HTML/Element/select) représente un contrôle permettant de sélectionner une seule [`<option>`](/fr/docs/Web/HTML/Element/Option) dans la liste des options. L'apparence du contrôle varie généralement en fonction de la présence de l'attribut multiple, la plupart des navigateurs affichant une liste déroulante à défilement au lieu d'une liste déroulante à ligne unique lorsque l'attribut est présent.
+
+```html
+<form method="get" action="#">
+<p>
+ <label for="dwarfs">Sélectionnez les menuisiers que vous aimez :</label>
+  <select multiple name="dwarfs" id="dwarfs">
+    <option>grincheux@menuisiers.fr</option>
+    <option>joyeux@menuisiers.fr</option>
+    <option>dormeur@menuisiers.fr</option>
+    <option>timide@menuisiers.fr</option>
+    <option>atchoum@menuisiers.fr</option>
+    <option>simplet@menuisiers.fr</option>
+    <option>doc@menuisiers.fr</option>
+  </select>
+</p>
+<p>
+ <label for="favoriteOnly">Sélectionnez votre préféré :</label>
+  <select name="favoriteOnly" id="favoriteOnly">
+    <option>grincheux@menuisiers.fr</option>
+    <option>joyeux@menuisiers.fr</option>
+    <option>dormeur@menuisiers.fr</option>
+    <option>timide@menuisiers.fr</option>
+    <option>atchoum@menuisiers.fr</option>
+    <option>simplet@menuisiers.fr</option>
+    <option>doc@menuisiers.fr</option>
+  </select>
+</p>
+<p>
+  <input type="submit" value="Soumettre">
+</p>
+</form>
+```
+
+{{EmbedLiveSample("select", '', 220)}}
+
+Notez la différence d'apparence entre les deux contrôles de formulaire.
+
+```css
+/* Décommentez ce CSS pour que le sélecteur multiple ait la même hauteur que le simple. */
 
 /*
 select[multiple] {
@@ -140,41 +155,26 @@ select[multiple]:focus,
 select[multiple]:active {
   height: auto;
 }
-*/</pre>
-
-<p>Il existe plusieurs façons de sélectionner plusieurs options dans un élément <code>&lt;select&gt;</code> avec un attribut <code>multiple</code>. Selon le système d'exploitation, les utilisateurs de souris peuvent maintenir les touches <kbd>Ctrl</kbd>, <kbd>Commande</kbd> ou <kbd>Maj</kbd> enfoncées, puis cliquer sur plusieurs options pour les sélectionner/désélectionner. Les utilisateurs du clavier peuvent sélectionner plusieurs éléments contigus en ciblant l'élément <code>&lt;select&gt;</code>, en sélectionnant un élément en haut ou en bas de la plage qu'ils souhaitent sélectionner à l'aide des touches de curseur <kbd>Haut</kbd> et <kbd>Bas</kbd> pour monter et descendre dans les options. La sélection de non-contigus n'est pas aussi bien supportée : les éléments devraient pouvoir être sélectionnés et désélectionnés en appuyant sur <kbd>Espace</kbd> , mais le support varie selon les navigateurs.</p>
-
-<h2 id="accessibility_concerns">Accessibilité</h2>
-
-<p>Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut <code>multiple</code>, informez l'utilisateur que plusieurs valeurs sont autorisées et donnez des indications sur la manière de fournir plusieurs valeurs, par exemple « séparez les adresses électroniques par une virgule ».</p>
-
-<p>Définir <code><a href="/fr/docs/Web/HTML/Attributes/size">size</a>="1"</code> sur une sélection multiple peut la faire apparaître comme une sélection unique dans certains navigateurs, mais elle ne s'étend alors pas au focus, ce qui nuit à la convivialité. Ne faites pas cela. Si vous modifiez l'apparence d'une sélection, et même si vous ne le faites pas, veillez à informer l'utilisateur que plusieurs options peuvent être sélectionnées par une autre méthode.</p>
-
-<h2 id="specifications">Spécifications</h2>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'l\'attribut multiple')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'l\'attribut multiple')}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/Input/email#allowing_multiple_e-mail_addresses">Autoriser les adresses électroniques multiples</a></li>
-</ul>
+*/
+```
+
+Il existe plusieurs façons de sélectionner plusieurs options dans un élément `<select>` avec un attribut `multiple`. Selon le système d'exploitation, les utilisateurs de souris peuvent maintenir les touches <kbd>Ctrl</kbd>, <kbd>Commande</kbd> ou <kbd>Maj</kbd> enfoncées, puis cliquer sur plusieurs options pour les sélectionner/désélectionner. Les utilisateurs du clavier peuvent sélectionner plusieurs éléments contigus en ciblant l'élément `<select>`, en sélectionnant un élément en haut ou en bas de la plage qu'ils souhaitent sélectionner à l'aide des touches de curseur <kbd>Haut</kbd> et <kbd>Bas</kbd> pour monter et descendre dans les options. La sélection de non-contigus n'est pas aussi bien supportée : les éléments devraient pouvoir être sélectionnés et désélectionnés en appuyant sur <kbd>Espace</kbd> , mais le support varie selon les navigateurs.
+
+## Accessibilité
+
+Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut `multiple`, informez l'utilisateur que plusieurs valeurs sont autorisées et donnez des indications sur la manière de fournir plusieurs valeurs, par exemple « séparez les adresses électroniques par une virgule ».
+
+Définir `size="1"` sur une sélection multiple peut la faire apparaître comme une sélection unique dans certains navigateurs, mais elle ne s'étend alors pas au focus, ce qui nuit à la convivialité. Ne faites pas cela. Si vous modifiez l'apparence d'une sélection, et même si vous ne le faites pas, veillez à informer l'utilisateur que plusieurs options peuvent être sélectionnées par une autre méthode.
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                           |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'l\'attribut multiple')}} | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'l\'attribut multiple')}} | {{Spec2('HTML5 W3C')}}     |
+
+## Voir aussi
+
+- L'élément [`<input>`](/fr/docs/Web/HTML/Element/Input)
+- L'élément [`<select>`](/fr/docs/Web/HTML/Element/select)
+- [Autoriser les adresses électroniques multiples](/fr/docs/Web/HTML/Element/Input/email#allowing_multiple_e-mail_addresses)
diff --git a/files/fr/web/html/attributes/pattern/index.md b/files/fr/web/html/attributes/pattern/index.md
index c5e53db9ef..ed34e38b19 100644
--- a/files/fr/web/html/attributes/pattern/index.md
+++ b/files/fr/web/html/attributes/pattern/index.md
@@ -10,76 +10,82 @@ tags:
 translation_of: Web/HTML/Attributes/pattern
 original_slug: Web/HTML/Attributs/pattern
 ---
-<div>{{HTMLSidebar}}</div>
+{{HTMLSidebar}}
 
-<p>L'attribut <strong><code>pattern</code></strong> indique une <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions">expression rationnelle</a> que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas <code>null</code>) ne respecte pas les contraintes portées par <code>pattern</code>, la propriété <a href="/fr/docs/Web/API/ValidityState/patternMismatch"><code>patternMismatch</code></a> en lecture seule, rattachée à l'objet <a href="/fr/docs/Web/API/ValidityState"><code>ValidityState</code></a>, vaudra <code>true</code>.</p>
+L'attribut **`pattern`** indique une [expression rationnelle](/fr/docs/Web/JavaScript/Guide/Regular_Expressions) que doit respecter la valeur du contrôle du formulaire. Si une valeur non nulle (qui n'est pas `null`) ne respecte pas les contraintes portées par `pattern`, la propriété [`patternMismatch`](/fr/docs/Web/API/ValidityState/patternMismatch) en lecture seule, rattachée à l'objet [`ValidityState`](/fr/docs/Web/API/ValidityState), vaudra `true`.
 
-<p>L'attribut <code>pattern</code> peut être utilisé pour les champs de type <a href="/fr/docs/Web/HTML/Element/Input/text"><code>text</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/tel"><code>tel</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/password"><code>password</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/search"><code>search</code></a>.</p>
+L'attribut `pattern` peut être utilisé pour les champs de type [`text`](/fr/docs/Web/HTML/Element/Input/text), [`tel`](/fr/docs/Web/HTML/Element/Input/tel), [`email`](/fr/docs/Web/HTML/Element/Input/email), [`url`](/fr/docs/Web/HTML/Element/Input/url), [`password`](/fr/docs/Web/HTML/Element/Input/password), [`search`](/fr/docs/Web/HTML/Element/Input/search).
 
-<p>La valeur de cet attribut doit être une expression rationnelle JavaScript valide (voir la documentation de <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp"><code>RegExp</code></a> et <a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions">le guide sur les expressions rationnelles</a>). Le marqueur (<em>flag</em>) <code>'u'</code> pour être utilisé afin d'indiquer que l'expression rationnelle est une séquence de codets Unicode et non ASCII. On n'utilisera pas de barres obliques (<em>slashes</em>) autour du texte du motif de l'expression rationnelle.</p>
+La valeur de cet attribut doit être une expression rationnelle JavaScript valide (voir la documentation de [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) et [le guide sur les expressions rationnelles](/fr/docs/Web/JavaScript/Guide/Regular_Expressions)). Le marqueur (_flag_) `'u'` pour être utilisé afin d'indiquer que l'expression rationnelle est une séquence de codets Unicode et non ASCII. On n'utilisera pas de barres obliques (_slashes_) autour du texte du motif de l'expression rationnelle.
 
-<p>Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.</p>
+Si le motif n'est pas indiqué ou est invalide, aucune expression rationnelle ne sera appliquée et l'attribut sera ignoré.
 
-<div class="note">
-  <p><strong>Note :</strong>On pourra utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-title"><code>title</code></a> afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.</p>
-</div>
+> **Note :**On pourra utiliser l'attribut [`title`](/fr/docs/Web/HTML/Element/Input#attr-title) afin de fournir aux utilisateurs des explications quant aux règles à respecter pour que la valeur soit valide. Attention, on ne doit pas utiliser uniquement cet attribut pour fournir ces explications. Voir ci-après quant à l'utilisabilité.
 
-<p>Certains types d'<code>&lt;input&gt;</code> qui prennent en charge l'attribut <code>pattern</code> (notamment <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>) ont des contraintes particulières qui doivent également être respectées. Si l'attribut <code>pattern</code> n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule <a href="/fr/docs/Web/API/ValidityState/typeMismatch"><code>typeMismatch</code></a> vaudra <code>true</code>.</p>
+Certains types d'`<input>` qui prennent en charge l'attribut `pattern` (notamment [`email`](/fr/docs/Web/HTML/Element/Input/email) et [`url`](/fr/docs/Web/HTML/Element/Input/url)) ont des contraintes particulières qui doivent également être respectées. Si l'attribut `pattern` n'est pas présent et que la valeur saisie ne respecte pas la syntaxe attendue pour ce type de champ, la propriété en lecture seule [`typeMismatch`](/fr/docs/Web/API/ValidityState/typeMismatch) vaudra `true`.
 
-<h3 id="usability">Utilisabilité</h3>
+### Utilisabilité
 
-<p>Lorsqu'on utilise l'attribut <code>pattern</code>, il est nécessaire de fournir une description du format attendu avec un texte visible près du contrôle. On pourra en plus utiliser l'attribut <a href="/fr/docs/Web/HTML/Global_attributes/title"><code>title</code></a> afin de fournir une description. Les agents utilisateurs peuvent utiliser la valeur de <code>title</code> lors de la validation des contraintes afin d'indiquer à l'utilisateur que le motif n'est pas respecté. Certains navigateurs pourront afficher une bulle d'information et certains outils d'assistance pourront énoncer le contenu de <code>title</code> à voix haute lorsque le focus arrive sur le contrôle. Toutefois, l'utilisation seule de cet attribut ne suffit pas pour fournir une accessibilité suffisante.</p>
+Lorsqu'on utilise l'attribut `pattern`, il est nécessaire de fournir une description du format attendu avec un texte visible près du contrôle. On pourra en plus utiliser l'attribut [`title`](/fr/docs/Web/HTML/Global_attributes/title) afin de fournir une description. Les agents utilisateurs peuvent utiliser la valeur de `title` lors de la validation des contraintes afin d'indiquer à l'utilisateur que le motif n'est pas respecté. Certains navigateurs pourront afficher une bulle d'information et certains outils d'assistance pourront énoncer le contenu de `title` à voix haute lorsque le focus arrive sur le contrôle. Toutefois, l'utilisation seule de cet attribut ne suffit pas pour fournir une accessibilité suffisante.
 
-<h3 id="constraint_validation">Validation des contraintes</h3>
+### Validation des contraintes
 
-<p>Si la valeur du champ n'est pas la chaîne vide et que la valeur ne respecte pas l'expression rationnelle, on aura une incohérence, portée par <a href="/fr/docs/Web/API/ValidityState/patternMismatch"><code>patternMismatch</code></a>.<br>
- L'expression rationnelle indiquée doit correspondre pour toute la chaîne (depuis son début jusqu'à la fin. Autrement dit, c'est comme si on enveloppait l'expression entre <code>^(?:</code> et <code>)$</code> afin d'indiquer que c'est toute la chaîne qui est considérée (et pas une de ses sous-partie).</p>
+Si la valeur du champ n'est pas la chaîne vide et que la valeur ne respecte pas l'expression rationnelle, on aura une incohérence, portée par [`patternMismatch`](/fr/docs/Web/API/ValidityState/patternMismatch).
+L'expression rationnelle indiquée doit correspondre pour toute la chaîne (depuis son début jusqu'à la fin. Autrement dit, c'est comme si on enveloppait l'expression entre `^(?:` et `)$` afin d'indiquer que c'est toute la chaîne qui est considérée (et pas une de ses sous-partie).
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple 1">Exemple 1</h3>
-<p>Avec le fragment de code HTML suivant :</p>
+### Exemple 1
 
-<pre class="brush: html">&lt;p&gt;
- &lt;label&gt;Veuillez saisir votre numéro de téléphone au format (123)456-7890
-  (&lt;input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/&gt;)-
-   &lt;input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/&gt; -
-   &lt;input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/&gt;
- &lt;/label&gt;
-&lt;/p&gt;</pre>
+Avec le fragment de code HTML suivant :
 
-<p>Ici, nous avons 3 sections pour un numéro de téléphone nord-américain avec une étiquette implicite englobant les trois composants du numéro de téléphone, s'attendant respectivement à 3 chiffres, 3 chiffres et 4 chiffres, comme défini par l'attribut <a href="pattern"><code>pattern</code></a> défini sur chacun.</p>
+```html
+<p>
+ <label>Veuillez saisir votre numéro de téléphone au format (123)456-7890
+  (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)-
+   <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> -
+   <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/>
+ </label>
+</p>
+```
 
-<p>Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attribut <code>patternMismatch</code> sera <code>true</code>. On aura également l'activation de la pseudo-classe CSS <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a>.</p>
+Ici, nous avons 3 sections pour un numéro de téléphone nord-américain avec une étiquette implicite englobant les trois composants du numéro de téléphone, s'attendant respectivement à 3 chiffres, 3 chiffres et 4 chiffres, comme défini par l'attribut [`pattern`](pattern) défini sur chacun.
 
-<pre class="brush: css">input:invalid {
+Si les valeurs saisies sont trop longues ou trop courtes ou si elles contiennent des caractères qui ne sont pas des chiffres, la valeur de l'attribut `patternMismatch` sera `true`. On aura également l'activation de la pseudo-classe CSS [`:invalid`](/fr/docs/Web/CSS/:invalid).
+
+```css
+input:invalid {
   border: red solid 3px;
-}</pre>
+}
+```
 
-<div>{{EmbedLiveSample("Exemple_1", 300, 80)}}</div>
+{{EmbedLiveSample("Exemple_1", 300, 80)}}
 
-<p>En utilisant les attributs <a href="/fr/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> et <a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a> à la place, on aurait eu les propriétés <a href="/fr/docs/Web/API/validityState/tooLong"><code>validityState.tooLong</code></a> ou <a href="/fr/docs/Web/API/validityState/tooShort"><code>validityState.tooShort</code></a> qui auraient valu <code>true</code>.</p>
+En utilisant les attributs [`minlength`](/fr/docs/Web/HTML/Attributes/minlength) et [`maxlength`](/fr/docs/Web/HTML/Attributes/maxlength) à la place, on aurait eu les propriétés [`validityState.tooLong`](/fr/docs/Web/API/validityState/tooLong) ou [`validityState.tooShort`](/fr/docs/Web/API/validityState/tooShort) qui auraient valu `true`.
 
-<h3 id="specifying_a_pattern">Indiquer un motif</h3>
+### Indiquer un motif
 
-<p>On pourra utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-pattern"><code>pattern</code></a> afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voir <a href="/fr/docs/Learn/Forms/Form_validation#validating_against_a_regular_expression">ce guide sur la validation avec les expressions rationnelles</a> pour une introduction).</p>
+On pourra utiliser l'attribut [`pattern`](/fr/docs/Web/HTML/Element/Input#attr-pattern) afin d'indiquer une expression rationnelle qui devra être respectée par la valeur saisie pour que celle-ci soit considérée comme valide (voir [ce guide sur la validation avec les expressions rationnelles](/fr/docs/Learn/Forms/Form_validation#validating_against_a_regular_expression) pour une introduction).
 
-<p>L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.</p>
+L'exemple qui suit permet de restreindre les valeurs saisies entre 4 et 8 caractères qui doivent également être des lettres minuscules.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="uname"&gt;Veuillez choisir un nom d'utilisateur : &lt;/label&gt;
-    &lt;input type="text" id="uname" name="name" required size="45"
-           pattern="[a-z]{4,8}" title="4 à 8 lettres en minuscules"&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-    &lt;p&gt;Les noms d'utilisateurs doivent être en minuscules et contenir 4 à 8 caractères.&lt;/p&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
+    <input type="text" id="uname" name="name" required size="45"
+           pattern="[a-z]{4,8}" title="4 à 8 lettres en minuscules">
+    <span class="validity"></span>
+    <p>Les noms d'utilisateurs doivent être en minuscules et contenir 4 à 8 caractères.</p>
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -103,51 +109,33 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}</pre>
-
-<p>Cela donne le résultat suivant :</p>
-
-<div>{{EmbedLiveSample('specifying_a_pattern', '', 130)}}</div>
-
-<h2 id="accessibility_concerns">Accessibilité</h2>
-
-<p>Lorsqu'un contrôle dispose de l'attribut <code>pattern</code>, l'attribut <code>title</code>, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut <code>title</code> pour fournir une aide visuelle n'est pas souhaitable, car la plupart des agents utilisateurs n'exposent pas cet attribut de façon accessible. Certains navigateurs affichent une bulle d'information lorsqu'on survole l'élément avec un pointeur mais cela laisse de côté les utilisateurs qui naviguent avec le clavier ou ceux qui utilisent une interface tactile. Il faut donc inclure au moins autrement des informations sur la façon de saisir des valeurs qui respectent les contraintes.</p>
-
-<p>L'attribut <code>title</code> est utilisé par certains navigateurs pour écrire les messages d'erreur. Attention toutefois, car les navigateurs affichent également le contenu de cet attribut au survol de l'élément y compris lorsqu'il n'y a pas d'erreur. La formulation doit être choisie avec précaution pour ne pas induire l'utilisateur en erreur.</p>
-
-<h2 id="specifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'l\'attribut pattern')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'l\'attribut pattern')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'l\'attribut pattern')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.elements.attributes.pattern")}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Les contraintes de validation</a></li>
-  <li><a href="/fr/docs/Learn/Forms/Form_validation">La validation des données de formulaires</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Regular_Expressions">Les expressions rationnelles (ou expressions régulières / <em>regexp</em>)</a></li>
-</ul>
+}
+```
+
+Cela donne le résultat suivant :
+
+{{EmbedLiveSample('specifying_a_pattern', '', 130)}}
+
+## Accessibilité
+
+Lorsqu'un contrôle dispose de l'attribut `pattern`, l'attribut `title`, s'il est utilisé, doit décrire le motif souhaité. Attention, reposer uniquement sur l'attribut `title` pour fournir une aide visuelle n'est pas souhaitable, car la plupart des agents utilisateurs n'exposent pas cet attribut de façon accessible. Certains navigateurs affichent une bulle d'information lorsqu'on survole l'élément avec un pointeur mais cela laisse de côté les utilisateurs qui naviguent avec le clavier ou ceux qui utilisent une interface tactile. Il faut donc inclure au moins autrement des informations sur la façon de saisir des valeurs qui respectent les contraintes.
+
+L'attribut `title` est utilisé par certains navigateurs pour écrire les messages d'erreur. Attention toutefois, car les navigateurs affichent également le contenu de cet attribut au survol de l'élément y compris lorsqu'il n'y a pas d'erreur. La formulation doit être choisie avec précaution pour ne pas induire l'utilisateur en erreur.
+
+## Spécifications
+
+| Spécification                                                                                                    | Statut                           |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'l\'attribut pattern')}} | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'l\'attribut pattern')}}         | {{Spec2('HTML5.1')}}     |
+| {{SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'l\'attribut pattern')}}     | {{Spec2('HTML5 W3C')}}     |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.elements.attributes.pattern")}}
+
+## Voir aussi
+
+- [Les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation)
+- [La validation des données de formulaires](/fr/docs/Learn/Forms/Form_validation)
+- [Les expressions rationnelles (ou expressions régulières / _regexp_)](/fr/docs/Web/JavaScript/Guide/Regular_Expressions)
diff --git a/files/fr/web/html/attributes/readonly/index.md b/files/fr/web/html/attributes/readonly/index.md
index 9eba1c737c..0b76f76e6e 100644
--- a/files/fr/web/html/attributes/readonly/index.md
+++ b/files/fr/web/html/attributes/readonly/index.md
@@ -9,99 +9,77 @@ tags:
   - required
 translation_of: Web/HTML/Attributes/readonly
 ---
-<div>{{HTMLSidebar}}</div>
+{{HTMLSidebar}}
 
-<p>L'attribut booléen <strong><code>readonly</code></strong>, lorsqu'il est présent, rend l'élément non mutable, ce qui signifie que l'utilisateur ne peut pas modifier le contrôle. Si l'attribut <code>readonly</code> est spécifié sur un élément de saisie, comme l'utilisateur ne peut pas modifier la saisie, l'élément ne participe pas à la validation des contraintes.</p>
+L'attribut booléen **`readonly`**, lorsqu'il est présent, rend l'élément non mutable, ce qui signifie que l'utilisateur ne peut pas modifier le contrôle. Si l'attribut `readonly` est spécifié sur un élément de saisie, comme l'utilisateur ne peut pas modifier la saisie, l'élément ne participe pas à la validation des contraintes.
 
-<p>L'attribut <code>readonly</code> est pris en charge par les types <a href="/fr/docs/Web/HTML/Element/Input/text"><code>text</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/search"><code>search</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/tel"><code>tel</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/password"><code>password</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>mois</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, et <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> de <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> et les éléments de contrôle de formulaire <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a>. S'il est présent sur l'un de ces types de saisie et éléments, la pseudo-classe <a href="/fr/docs/Web/CSS/:read-only"><code>:read-only</code></a> correspondra. Si l'attribut n'est pas inclus, la pseudo-classe <a href="/fr/docs/Web/CSS/:read-write"><code>:read-write</code></a> correspondra.</p>
+L'attribut `readonly` est pris en charge par les types [`text`](/fr/docs/Web/HTML/Element/Input/text), [`search`](/fr/docs/Web/HTML/Element/Input/search), [`url`](/fr/docs/Web/HTML/Element/Input/url), [`tel`](/fr/docs/Web/HTML/Element/Input/tel), [`email`](/fr/docs/Web/HTML/Element/Input/email), [`password`](/fr/docs/Web/HTML/Element/Input/password), [`date`](/fr/docs/Web/HTML/Element/Input/date), [`mois`](/fr/docs/Web/HTML/Element/Input/month), [`week`](/fr/docs/Web/HTML/Element/Input/week), [`time`](/fr/docs/Web/HTML/Element/Input/time), [`datetime-local`](/fr/docs/Web/HTML/Element/Input/datetime-local), et [`number`](/fr/docs/Web/HTML/Element/Input/number) de [`<input>`](/fr/docs/Web/HTML/Element/Input) et les éléments de contrôle de formulaire [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea). S'il est présent sur l'un de ces types de saisie et éléments, la pseudo-classe [`:read-only`](/fr/docs/Web/CSS/:read-only) correspondra. Si l'attribut n'est pas inclus, la pseudo-classe [`:read-write`](/fr/docs/Web/CSS/:read-write) correspondra.
 
-<p>L'attribut n'est pas pris en charge ou pertinent pour <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> ou les types d'entrée qui ne sont déjà pas mutables, comme <a href="/fr/docs/Web/HTML/Element/Input/checkbox"><code>checkbox</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/radio"><code>radio</code></a> ou ne peuvent pas, par définition, commencer par une valeur, comme le type d'entrée <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>. <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/color"><code>color</code></a>, car tous deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur <a href="/fr/docs/Web/HTML/Element/Input/hidden"><code>hidden</code></a>, car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur des types de boutons, y compris <code>image</code>.</p>
+L'attribut n'est pas pris en charge ou pertinent pour [`<select>`](/fr/docs/Web/HTML/Element/select) ou les types d'entrée qui ne sont déjà pas mutables, comme [`checkbox`](/fr/docs/Web/HTML/Element/Input/checkbox) et [`radio`](/fr/docs/Web/HTML/Element/Input/radio) ou ne peuvent pas, par définition, commencer par une valeur, comme le type d'entrée [`file`](/fr/docs/Web/HTML/Element/Input/file). [`range`](/fr/docs/Web/HTML/Element/Input/range) et [`color`](/fr/docs/Web/HTML/Element/Input/color), car tous deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur [`hidden`](/fr/docs/Web/HTML/Element/Input/hidden), car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur des types de boutons, y compris `image`.
 
-<div class="note">
-  <p><strong>Note :</strong>Seuls les contrôles de texte peuvent être rendus en lecture seule, car pour les autres contrôles (comme les cases à cocher et les boutons), il n'y a pas de distinction utile entre être en lecture seule et être désactivé, donc l'attribut <code>readonly</code> ne s'applique pas.</p>
-</div>
+> **Note :**Seuls les contrôles de texte peuvent être rendus en lecture seule, car pour les autres contrôles (comme les cases à cocher et les boutons), il n'y a pas de distinction utile entre être en lecture seule et être désactivé, donc l'attribut `readonly` ne s'applique pas.
+
+Lorsqu'une entrée possède l'attribut `readonly`, la pseudo-classe [`:read-only`](/fr/docs/Web/CSS/:read-only) s'y applique également. Inversement, les entrées qui prennent en charge l'attribut `readonly` mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe [`:read-write`](/fr/docs/Web/CSS/:read-write).
+
+### Interactions entre attributs
+
+La différence entre [`disabled`](/fr/docs/Web/HTML/Attributes/disabled) et `readonly` est que les contrôles en lecture seule peuvent toujours fonctionner et sont toujours focusables, alors que les contrôles désactivés ne peuvent pas recevoir de focus et ne sont pas soumis avec le formulaire et ne fonctionnent généralement pas comme contrôles jusqu'à ce qu'ils soient activés.
+
+Comme un champ en lecture seule ne peut pas voir sa valeur modifiée par une interaction avec l'utilisateur, [`required`](required) n'a aucun effet sur les entrées pour lesquelles l'attribut `readonly` est également spécifié.
 
-<p>Lorsqu'une entrée possède l'attribut <code>readonly</code>, la pseudo-classe <a href="/fr/docs/Web/CSS/:read-only"><code>:read-only</code></a> s'y applique également. Inversement, les entrées qui prennent en charge l'attribut <code>readonly</code> mais qui n'ont pas l'attribut défini correspondent à la pseudo-classe <a href="/fr/docs/Web/CSS/:read-write"><code>:read-write</code></a>.</p>
+Le seul moyen de modifier dynamiquement la valeur de l'attribut readonly est d'utiliser un script.
 
-<h3 id="attribute_interactions">Interactions entre attributs</h3>
+> **Note :**L'attribut `required` n'est pas autorisé sur les entrées pour lesquelles l'attribut `readonly` est spécifié.
 
-<p>La différence entre <a href="/fr/docs/Web/HTML/Attributes/disabled"><code>disabled</code></a> et <code>readonly</code> est que les contrôles en lecture seule peuvent toujours fonctionner et sont toujours focusables, alors que les contrôles désactivés ne peuvent pas recevoir de focus et ne sont pas soumis avec le formulaire et ne fonctionnent généralement pas comme contrôles jusqu'à ce qu'ils soient activés.</p>
+### Validation des contraintes
 
-<p>Comme un champ en lecture seule ne peut pas voir sa valeur modifiée par une interaction avec l'utilisateur, <a href="required"><code>required</code></a> n'a aucun effet sur les entrées pour lesquelles l'attribut <code>readonly</code> est également spécifié.</p>
+Si l'élément est en lecture seule, la valeur de l'élément ne peut pas être mise à jour par l'utilisateur et ne participe pas à la validation des contraintes.
 
-<p>Le seul moyen de modifier dynamiquement la valeur de l'attribut readonly est d'utiliser un script.</p>
+## Exemples
 
-<div class="note">
-  <p><strong>Note :</strong>L'attribut <code>required</code> n'est pas autorisé sur les entrées pour lesquelles l'attribut <code>readonly</code> est spécifié.</p>
+### HTML
+
+```html
+<div class="group">
+  <input type="textbox" value="Some value" readonly="readonly"/>
+  <label>Textbox</label>
+</div>
+<div class="group">
+  <input type="date" value="2020-01-01" readonly="readonly"/>
+  <label>Date</label>
+</div>
+<div class="group">
+  <input type="email" value="Some value" readonly="readonly"/>
+  <label>Email</label>
+</div>
+<div class="group">
+  <input type="password" value="Some value" readonly="readonly"/>
+  <label>Password</label>
 </div>
+<div class="group">
+  <textarea readonly="readonly">Some value</textarea>
+  <label>Message</label>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample('examples')}}
+
+## Spécifications
+
+| Spécification                                                                                                        | Statut                           |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#attr-input-readonly', 'l\'attribut readonly')}}     | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5 W3C', 'forms.html#attr-input-readonly', 'l\'attribut readonly')}}     | {{Spec2('HTML5 W3C')}}     |
+| {{SpecName('HTML5.1', 'sec-forms.html#the-readonly-attribute', 'l\'attribut readonly')}} | {{Spec2('HTML5.1')}}     |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.elements.attributes.readonly")}}
+
+## Voir aussi
 
-<h3 id="constraint_validation">Validation des contraintes</h3>
-
-<p>Si l'élément est en lecture seule, la valeur de l'élément ne peut pas être mise à jour par l'utilisateur et ne participe pas à la validation des contraintes.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="html">HTML</h3>
-
-<pre class="brush: html">&lt;div class="group"&gt;
-  &lt;input type="textbox" value="Some value" readonly="readonly"/&gt;
-  &lt;label&gt;Textbox&lt;/label&gt;
-&lt;/div&gt;
-&lt;div class="group"&gt;
-  &lt;input type="date" value="2020-01-01" readonly="readonly"/&gt;
-  &lt;label&gt;Date&lt;/label&gt;
-&lt;/div&gt;
-&lt;div class="group"&gt;
-  &lt;input type="email" value="Some value" readonly="readonly"/&gt;
-  &lt;label&gt;Email&lt;/label&gt;
-&lt;/div&gt;
-&lt;div class="group"&gt;
-  &lt;input type="password" value="Some value" readonly="readonly"/&gt;
-  &lt;label&gt;Password&lt;/label&gt;
-&lt;/div&gt;
-&lt;div class="group"&gt;
-  &lt;textarea readonly="readonly"&gt;Some value&lt;/textarea&gt;
-  &lt;label&gt;Message&lt;/label&gt;
-&lt;/div&gt;
-</pre>
-
-<h3 id="result">Résultat</h3>
-
-<div>{{EmbedLiveSample('examples')}}</div>
-
-<h2 id="specifications">Spécifications</h2>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-readonly', 'l\'attribut readonly')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-readonly', 'l\'attribut readonly')}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5.1', 'sec-forms.html#the-readonly-attribute', 'l\'attribut readonly')}}</td>
-      <td>{{Spec2('HTML5.1')}}</td>
-    </tr>
-  </tbody>
-</table>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.elements.attributes.readonly")}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li>Les pseudo-classses <a href="/fr/docs/Web/CSS/:read-only"><code>:read-only</code></a> et <a href="/fr/docs/Web/CSS/:read-write"><code>:read-write</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a></li>
-</ul>
+- Les pseudo-classses [`:read-only`](/fr/docs/Web/CSS/:read-only) et [`:read-write`](/fr/docs/Web/CSS/:read-write)
+- L'élément [`<input>`](/fr/docs/Web/HTML/Element/Input)
+- L'élément [`<select>`](/fr/docs/Web/HTML/Element/select)
diff --git a/files/fr/web/html/attributes/rel/index.md b/files/fr/web/html/attributes/rel/index.md
index c2f3fbde6d..71f03ecc8f 100644
--- a/files/fr/web/html/attributes/rel/index.md
+++ b/files/fr/web/html/attributes/rel/index.md
@@ -10,356 +10,198 @@ tags:
   - rel
 translation_of: Web/HTML/Attributes/rel
 ---
-<div>{{HTMLSidebar}}</div>
+{{HTMLSidebar}}
 
-<p>L'attribut <strong><code>rel</code></strong> définit la relation entre une ressource liée et le document actuel. Valable sur <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, et <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, les valeurs supportées dépendent de l'élément sur lequel se trouve l'attribut.</p>
+L'attribut **`rel`** définit la relation entre une ressource liée et le document actuel. Valable sur [`<link>`](/fr/docs/Web/HTML/Element/link), [`<a>`](/fr/docs/Web/HTML/Element/a), [`<area>`](/fr/docs/Web/HTML/Element/area), et [`<form>`](/fr/docs/Web/HTML/Element/Form), les valeurs supportées dépendent de l'élément sur lequel se trouve l'attribut.
 
-<p>Le type de relations est donné par la valeur de l'attribut <code>rel</code>, qui, s'il est présent, doit avoir une valeur qui est un ensemble non ordonné de mots-clés uniques séparés par des espaces. À la différence d'un nom de <code>class</code>, qui n'exprime pas de sémantique, l'attribut <code>rel</code> doit exprimer des mots-clés qui sont sémantiquement valides pour les machines et les humains. Les registres actuels des valeurs possibles de l'attribut <code>rel</code> sont le <a href="https://www.iana.org/assignments/link-relations/link-relations.xhtml">registre de relations de liens de l'IANA</a>, le <a href="https://html.spec.whatwg.org/multipage/links.html#linkTypes">HTML Living Standard</a>, et la page <a href="https://microformats.org/wiki/existing-rel-values">existing-rel-values</a> librement modifiable dans le wiki microformats, <a href="https://html.spec.whatwg.org/multipage/links.html#other-link-types">comme suggéré</a> par le Living Standard. Si un attribut <code>rel</code> non présent dans l'une des trois sources ci-dessus est utilisé, certains validateurs HTML (tels que le <a href="https://validator.w3.org/">W3C Markup Validation Service</a>) généreront un avertissement.</p>
+Le type de relations est donné par la valeur de l'attribut `rel`, qui, s'il est présent, doit avoir une valeur qui est un ensemble non ordonné de mots-clés uniques séparés par des espaces. À la différence d'un nom de `class`, qui n'exprime pas de sémantique, l'attribut `rel` doit exprimer des mots-clés qui sont sémantiquement valides pour les machines et les humains. Les registres actuels des valeurs possibles de l'attribut `rel` sont le [registre de relations de liens de l'IANA](https://www.iana.org/assignments/link-relations/link-relations.xhtml), le [HTML Living Standard](https://html.spec.whatwg.org/multipage/links.html#linkTypes), et la page [existing-rel-values](https://microformats.org/wiki/existing-rel-values) librement modifiable dans le wiki microformats, [comme suggéré](https://html.spec.whatwg.org/multipage/links.html#other-link-types) par le Living Standard. Si un attribut `rel` non présent dans l'une des trois sources ci-dessus est utilisé, certains validateurs HTML (tels que le [W3C Markup Validation Service](https://validator.w3.org/)) généreront un avertissement.
 
-<p>Le tableau suivant énumère quelques-uns des principaux mots-clés existants. Chaque mot-clé dans une valeur séparée par un espace doit être unique dans cette valeur.</p>
+Le tableau suivant énumère quelques-uns des principaux mots-clés existants. Chaque mot-clé dans une valeur séparée par un espace doit être unique dans cette valeur.
 
-<table class="standard-table">
-  <caption>Valeurs de l'attribut <code>rel</code>, et les éléments pour lesquels chacun est pertinent.</caption>
-  <thead>
-    <tr>
-      <th scope="col">Valeur pour <code>rel</code></th>
-      <th scope="col">Description</th>
-      <th scope="col"><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></th>
-      <th scope="col"><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a></th>
-      <th scope="col"><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><a href="#alternate"><code>alternate</code></a></td>
-      <td>Représentations alternatives du document actuel.</td>
-      <td>Lien</td>
-      <td>Lien</td>
-      <td>Non autorisé</td>
-    </tr>
-    <tr>
-      <td><a href="#author"><code>author</code></a></td>
-      <td>Auteur du document ou de l'article en cours.</td>
-      <td>Lien</td>
-      <td>Lien</td>
-      <td>Non autorisé</td>
-    </tr>
-    <tr>
-      <td><a href="#bookmark"><code>bookmark</code></a></td>
-      <td>Lien permanent pour la section de l'ancêtre le plus proche.</td>
-      <td>Non autorisé</td>
-      <td>Lien</td>
-      <td>Non autorisé</td>
-    </tr>
-    <tr>
-      <td><a href="#canonical"><code>canonical</code></a></td>
-      <td>URL préférée pour le document actuel.</td>
-      <td>Lien</td>
-      <td>Non autorisé</td>
-      <td>Non autorisé</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Link_types/dns-prefetch"><code>dns-prefetch</code></a></td>
-      <td>Indique au navigateur d'effectuer de manière préemptive la résolution DNS pour l'origine de la ressource cible.</td>
-      <td>Ressource externe</td>
-      <td>Non autorisé</td>
-      <td>Non autorisé</td>
-    </tr>
-    <tr>
-      <td><a href="#external"><code>external</code></a></td>
-      <td>Le document référencé ne fait pas partie du même site que le document actuel.</td>
-      <td>Non autorisé</td>
-      <td>Annotation</td>
-      <td>Annotation</td>
-    </tr>
-    <tr>
-      <td><a href="#help"><code>help</code></a></td>
-      <td>Lien vers l'aide contextuelle.</td>
-      <td>Lien</td>
-      <td>Lien</td>
-      <td>Lien</td>
-    </tr>
-    <tr>
-      <td><a href="#icon"><code>icon</code></a></td>
-      <td>Une icône représentant le document actuel.</td>
-      <td>Ressource externe</td>
-      <td>Non autorisé</td>
-      <td>Non autorisé</td>
-    </tr>
-    <tr>
-      <td><a href="#license"><code>license</code></a></td>
-      <td>Indique que le contenu principal du document actuel est couvert par la licence de copyright décrite par le document référencé.</td>
-      <td>Lien</td>
-      <td>Lien</td>
-      <td>Lien</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Link_types/manifest"><code>manifest</code></a></td>
-      <td>Manifeste de l'application web.</td>
-      <td>Lien</td>
-      <td>Non autorisé</td>
-      <td>Non autorisé</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Link_types/modulepreload"><code>modulepreload</code></a></td>
-      <td>Indique au navigateur de récupérer le script de manière préemptive et de le stocker dans la carte des modules du document pour une évaluation ultérieure. En option, les dépendances du module peuvent également être récupérées.</td>
-      <td>Ressource externe</td>
-      <td>Non autorisé</td>
-      <td>Non autorisé</td>
-    </tr>
-    <tr>
-      <td><a href="#next"><code>next</code></a></td>
-      <td>Indique que le document actuel fait partie d'une série et que le document suivant dans la série est le document référencé.</td>
-      <td>Lien</td>
-      <td>Lien</td>
-      <td>Lien</td>
-    </tr>
-    <tr>
-      <td><a href="#nofollow"><code>nofollow</code></a></td>
-      <td>Indique que l'auteur ou l'éditeur original du document actuel n'approuve pas le document référencé.</td>
-      <td>Non autorisé</td>
-      <td>Annotation</td>
-      <td>Annotation</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Link_types/noopener"><code>noopener</code></a></td>
-      <td>Crée un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire si l'hyperlien créerait l'un ou l'autre, pour commencer (c'est-à-dire qu'il a une valeur d'attribut <code>target</code> appropriée).</td>
-      <td>Non autorisé</td>
-      <td>Annotation</td>
-      <td>Annotation</td>
-    </tr>
-    <tr>
-      <td><a href="#noreferrer"><code>noreferrer</code></a></td>
-      <td>Aucun en-tête <code>Referer</code> ne sera inclus. En outre, a le même effet que <code>noopener</code>.</td>
-      <td>Non autorisé</td>
-      <td>Annotation</td>
-      <td>Annotation</td>
-    </tr>
-    <tr>
-      <td><a href="#opener"><code>opener</code></a></td>
-      <td>Crée un contexte de navigation auxiliaire si l'hyperlien créerait autrement un contexte de navigation de premier niveau qui n'est pas un contexte de navigation auxiliaire (c'est-à-dire qui a « <code>_blank</code> » comme valeur d'attribut <code>target</code>).</td>
-      <td>Non autorisé</td>
-      <td>Annotation</td>
-      <td>Annotation</td>
-    </tr>
-    <tr>
-      <td><a href="#pingback"><code>pingback</code></a></td>
-      <td>Donne l'adresse du serveur de retour d'appel qui gère les retours d'appel pour le document actuel.</td>
-      <td>Ressource externe</td>
-      <td>Non autorisé</td>
-      <td>Non autorisé</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Link_types/preconnect"><code>preconnect</code></a></td>
-      <td>Spécifie que l'agent utilisateur doit se connecter de manière préemptive à l'origine de la ressource cible.</td>
-      <td>Ressource externe</td>
-      <td>Non autorisé</td>
-      <td>Non autorisé</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Link_types/prefetch"><code>prefetch</code></a></td>
-      <td>Indique que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible, car elle est susceptible d'être requise pour une navigation ultérieure.</td>
-      <td>Ressource externe</td>
-      <td>Non autorisé</td>
-      <td>Non autorisé</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Link_types/preload"><code>preload</code></a></td>
-      <td>Spécifie que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible pour la navigation actuelle en fonction de la destination potentielle donnée par l'attribut <a href="as"><code>as</code></a> (et la priorité associée à la destination correspondante).</td>
-      <td>Ressource externe</td>
-      <td>Non autorisé</td>
-      <td>Non autorisé</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/HTML/Link_types/prerender"><code>prerender</code></a></td>
-      <td>Spécifie que l'agent utilisateur doit récupérer de manière préemptive la ressource cible et la traiter de manière à fournir une réponse plus rapide à l'avenir.</td>
-      <td>Ressource externe</td>
-      <td>Non autorisé</td>
-      <td>Non autorisé</td>
-    </tr>
-    <tr>
-      <td><a href="#prev"><code>prev</code></a></td>
-      <td>Indique que le document actuel fait partie d'une série et que le document précédent dans la série est le document référencé.</td>
-      <td>Lien</td>
-      <td>Lien</td>
-      <td>Lien</td>
-    </tr>
-    <tr>
-      <td><a href="#search"><code>search</code></a></td>
-      <td>Donne un lien vers une ressource qui peut être utilisée pour effectuer une recherche dans le document actuel et ses pages connexes.</td>
-      <td>Lien</td>
-      <td>Lien</td>
-      <td>Lien</td>
-    </tr>
-    <tr>
-      <td><a href="#stylesheet"><code>stylesheet</code></a></td>
-      <td>Importe une feuille de style.</td>
-      <td>Ressource externe</td>
-      <td>Non autorisé</td>
-      <td>Non autorisé</td>
-    </tr>
-    <tr>
-      <td><a href="#tag"><code>tag</code></a></td>
-      <td>Donne une balise (identifiée par l'adresse donnée) qui s'applique au document actuel.</td>
-      <td>Non autorisé</td>
-      <td>Lien</td>
-      <td>Non autorisé</td>
-    </tr>
-  </tbody>
-</table>
+| Valeur pour `rel`                                             | Description                                                                                                                                                                                                                                                                   | [`<link>`](/fr/docs/Web/HTML/Element/link) | [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area) | [`<form>`](/fr/docs/Web/HTML/Element/Form) |
+| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------- | ------------------------------------------ |
+| [`alternate`](#alternate)                                     | Représentations alternatives du document actuel.                                                                                                                                                                                                                              | Lien                                       | Lien                                                                               | Non autorisé                               |
+| [`author`](#author)                                           | Auteur du document ou de l'article en cours.                                                                                                                                                                                                                                  | Lien                                       | Lien                                                                               | Non autorisé                               |
+| [`bookmark`](#bookmark)                                       | Lien permanent pour la section de l'ancêtre le plus proche.                                                                                                                                                                                                                   | Non autorisé                               | Lien                                                                               | Non autorisé                               |
+| [`canonical`](#canonical)                                     | URL préférée pour le document actuel.                                                                                                                                                                                                                                         | Lien                                       | Non autorisé                                                                       | Non autorisé                               |
+| [`dns-prefetch`](/fr/docs/Web/HTML/Link_types/dns-prefetch)   | Indique au navigateur d'effectuer de manière préemptive la résolution DNS pour l'origine de la ressource cible.                                                                                                                                                               | Ressource externe                          | Non autorisé                                                                       | Non autorisé                               |
+| [`external`](#external)                                       | Le document référencé ne fait pas partie du même site que le document actuel.                                                                                                                                                                                                 | Non autorisé                               | Annotation                                                                         | Annotation                                 |
+| [`help`](#help)                                               | Lien vers l'aide contextuelle.                                                                                                                                                                                                                                                | Lien                                       | Lien                                                                               | Lien                                       |
+| [`icon`](#icon)                                               | Une icône représentant le document actuel.                                                                                                                                                                                                                                    | Ressource externe                          | Non autorisé                                                                       | Non autorisé                               |
+| [`license`](#license)                                         | Indique que le contenu principal du document actuel est couvert par la licence de copyright décrite par le document référencé.                                                                                                                                                | Lien                                       | Lien                                                                               | Lien                                       |
+| [`manifest`](/fr/docs/Web/HTML/Link_types/manifest)           | Manifeste de l'application web.                                                                                                                                                                                                                                               | Lien                                       | Non autorisé                                                                       | Non autorisé                               |
+| [`modulepreload`](/fr/docs/Web/HTML/Link_types/modulepreload) | Indique au navigateur de récupérer le script de manière préemptive et de le stocker dans la carte des modules du document pour une évaluation ultérieure. En option, les dépendances du module peuvent également être récupérées.                                             | Ressource externe                          | Non autorisé                                                                       | Non autorisé                               |
+| [`next`](#next)                                               | Indique que le document actuel fait partie d'une série et que le document suivant dans la série est le document référencé.                                                                                                                                                    | Lien                                       | Lien                                                                               | Lien                                       |
+| [`nofollow`](#nofollow)                                       | Indique que l'auteur ou l'éditeur original du document actuel n'approuve pas le document référencé.                                                                                                                                                                           | Non autorisé                               | Annotation                                                                         | Annotation                                 |
+| [`noopener`](/fr/docs/Web/HTML/Link_types/noopener)           | Crée un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire si l'hyperlien créerait l'un ou l'autre, pour commencer (c'est-à-dire qu'il a une valeur d'attribut `target` appropriée).                                                    | Non autorisé                               | Annotation                                                                         | Annotation                                 |
+| [`noreferrer`](#noreferrer)                                   | Aucun en-tête `Referer` ne sera inclus. En outre, a le même effet que `noopener`.                                                                                                                                                                                             | Non autorisé                               | Annotation                                                                         | Annotation                                 |
+| [`opener`](#opener)                                           | Crée un contexte de navigation auxiliaire si l'hyperlien créerait autrement un contexte de navigation de premier niveau qui n'est pas un contexte de navigation auxiliaire (c'est-à-dire qui a « `_blank` » comme valeur d'attribut `target`).                                | Non autorisé                               | Annotation                                                                         | Annotation                                 |
+| [`pingback`](#pingback)                                       | Donne l'adresse du serveur de retour d'appel qui gère les retours d'appel pour le document actuel.                                                                                                                                                                            | Ressource externe                          | Non autorisé                                                                       | Non autorisé                               |
+| [`preconnect`](/fr/docs/Web/HTML/Link_types/preconnect)       | Spécifie que l'agent utilisateur doit se connecter de manière préemptive à l'origine de la ressource cible.                                                                                                                                                                   | Ressource externe                          | Non autorisé                                                                       | Non autorisé                               |
+| [`prefetch`](/fr/docs/Web/HTML/Link_types/prefetch)           | Indique que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible, car elle est susceptible d'être requise pour une navigation ultérieure.                                                                                           | Ressource externe                          | Non autorisé                                                                       | Non autorisé                               |
+| [`preload`](/fr/docs/Web/HTML/Link_types/preload)             | Spécifie que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible pour la navigation actuelle en fonction de la destination potentielle donnée par l'attribut [`as`](as) (et la priorité associée à la destination correspondante). | Ressource externe                          | Non autorisé                                                                       | Non autorisé                               |
+| [`prerender`](/fr/docs/Web/HTML/Link_types/prerender)         | Spécifie que l'agent utilisateur doit récupérer de manière préemptive la ressource cible et la traiter de manière à fournir une réponse plus rapide à l'avenir.                                                                                                               | Ressource externe                          | Non autorisé                                                                       | Non autorisé                               |
+| [`prev`](#prev)                                               | Indique que le document actuel fait partie d'une série et que le document précédent dans la série est le document référencé.                                                                                                                                                  | Lien                                       | Lien                                                                               | Lien                                       |
+| [`search`](#search)                                           | Donne un lien vers une ressource qui peut être utilisée pour effectuer une recherche dans le document actuel et ses pages connexes.                                                                                                                                           | Lien                                       | Lien                                                                               | Lien                                       |
+| [`stylesheet`](#stylesheet)                                   | Importe une feuille de style.                                                                                                                                                                                                                                                 | Ressource externe                          | Non autorisé                                                                       | Non autorisé                               |
+| [`tag`](#tag)                                                 | Donne une balise (identifiée par l'adresse donnée) qui s'applique au document actuel.                                                                                                                                                                                         | Non autorisé                               | Lien                                                                               | Non autorisé                               |
+
+L'attribut `rel` concerne les éléments [`<link>`](/fr/docs/Web/HTML/Element/link), [`<a>`](/fr/docs/Web/HTML/Element/a), [`<area>`](/fr/docs/Web/HTML/Element/area) et [`<form>`](/fr/docs/Web/HTML/Element/Form), mais certaines valeurs ne concernent qu'un sous-ensemble de ces éléments. Comme toutes les valeurs d'attributs de mots-clés HTML, ces valeurs sont insensibles à la casse.
+
+L'attribut `rel` n'a pas de valeur par défaut. Si l'attribut est omis ou si aucune des valeurs de l'attribut n'est prise en charge, alors le document n'a pas de relation particulière avec la ressource de destination autre que l'existence d'un lien hypertexte entre les deux. Dans ce cas, sur [`<link>`](/fr/docs/Web/HTML/Element/link) et [`<form>`](/fr/docs/Web/HTML/Element/Form), si l'attribut `rel` est absent, n'a pas de mots-clés, ou s'il ne s'agit pas d'un ou plusieurs des mots-clés séparés par des espaces ci-dessus, alors l'élément ne crée aucun lien. [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area) créeront quand même des liens, mais sans relation définie.
+
+## Valeurs
 
-<p>L'attribut <code>rel</code> concerne les éléments <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, mais certaines valeurs ne concernent qu'un sous-ensemble de ces éléments. Comme toutes les valeurs d'attributs de mots-clés HTML, ces valeurs sont insensibles à la casse.</p>
-
-<p>L'attribut <code>rel</code> n'a pas de valeur par défaut. Si l'attribut est omis ou si aucune des valeurs de l'attribut n'est prise en charge, alors le document n'a pas de relation particulière avec la ressource de destination autre que l'existence d'un lien hypertexte entre les deux. Dans ce cas, sur <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, si l'attribut <code>rel</code> est absent, n'a pas de mots-clés, ou s'il ne s'agit pas d'un ou plusieurs des mots-clés séparés par des espaces ci-dessus, alors l'élément ne crée aucun lien. <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a> créeront quand même des liens, mais sans relation définie.</p>
-
-<h2 id="values">Valeurs</h2>
-
-<p>S'il existe plusieurs <code>&lt;link rel="icon"&gt;</code>, le navigateur utilise leur attribut <a href="media"><code>media</code></a>, <a href="type"><code>type</code></a> et <a href="sizes"><code>sizes</code></a> pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.</p>
-
-<p><b>Note :</b> L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut <a href="sizes"><code>sizes</code></a>, comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise les attributs non standard <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> et <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a> respectivement.</p>
-
-<div class="note">
-  <p><strong>Note :</strong>Le type de lien <code>shortcut</code> est souvent vu avant <code>icon</code>, mais ce type de lien est non conforme, ignoré et <strong>les auteurs web ne doivent plus l'utiliser</strong>.</p>
-</div>
-
-<dl>
-  <dt><code>alternate</code></dt>
-  <dd>Indique une représentation alternative du document actuel. Valable pour <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, la signification dépend des valeurs des autres attributs.
-    <ul>
-      <li>Avec le mot clé <a href="#stylesheet"><code>stylesheet</code></a> sur un <code>&lt;link&gt;</code>, il crée une feuille de style alternative.
-      <pre class="brush:html">&lt;!-- une feuille de style persistante --&gt;
-&lt;link rel="stylesheet" href="default.css"&gt;
-&lt;!-- feuilles de style alternativement --&gt;
-&lt;link rel="alternate stylesheet" href="highcontrast.css" title="Contraste élevé"&gt;</pre>
-      </li>
-      <li>Avec un attribut <a href="hreflang"><code>hreflang</code></a> qui diffère de la langue du document, cela indique une traduction.</li>
-      <li>Avec l'attribut <a href="type"><code>type</code></a>, il indique que le document référencé est le même contenu dans un format différent. Par exemple, avec <code>type="application/rss+xml"</code>, il crée un lien hypertexte référençant un flux de syndication.
-      <pre class="brush:html">&lt;link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog"&gt;</pre>
-      </li>
-      <li>Les attributs <a href="hreflang"><code>hreflang</code></a> et <a href="type"><code>type</code></a> spécifient des liens vers des versions du document dans un format et une langue alternatifs, destinés à d'autres médias :
-      <pre class="brush:html">&lt;link rel="alternate" href="/fr/html/print" hreflang="fr" type="text/html" media="print" title="HTML français (pour l'impression)"&gt;
-&lt;link rel="alternate" href="/fr/pdf" hreflang="fr" type=application/pdf title="PDF Français"&gt;</pre>
-      </li>
-    </ul>
-    <div class="note">
-      <p><strong>Note :</strong>L'attribut obsolète <code>rev="made"</code> est traité comme <code>rel="alternate"</code>.</p>
-    </div>
-  </dd>
-  <dt><code>author</code></dt>
-  <dd>Indique l'auteur du document ou de l'article en cours. Pertinent pour les éléments <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, le mot-clé <code>author</code> crée un lien hypertexte. Avec <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, il indique que le document lié (ou <code>mailto:</code>) fournit des informations sur l'auteur de l'ancêtre le plus proche d'un élément <a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a> s'il en existe un, sinon le document entier. Pour <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, il représente l'auteur du document entier.</dd>
-  <dt><code>bookmark</code></dt>
-  <dd>Pertinent comme valeur de l'attribut <code>rel</code> pour les éléments <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, le signet fournit un permalien pour la section ancêtre, qui est l'ancêtre le plus proche d'un élément <a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a>, s'il y en a au moins un, sinon, le parent le plus proche de l'en-tête ou l'ancêtre descendant, jusqu'au suivant.</dd>
-  <dt><code>canonical</code></dt>
-  <dd>Valable pour <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, elle définit l'URL préférée du document actuel, ce qui est utile pour les moteurs de recherche.</dd>
-  <dt><code>dns-prefetch</code></dt>
-  <dd>Pertinent pour l'élément <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> à la fois dans les éléments <a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a>, il indique au navigateur d'effectuer de manière préemptive la résolution DNS pour l'origine de la ressource cible. Utile pour les ressources dont l'utilisateur aura probablement besoin, elle permet de réduire la latence et donc d'améliorer les performances lorsque l'utilisateur accède effectivement aux ressources car le navigateur a effectué de manière préemptive la résolution DNS pour l'origine de la ressource spécifiée. Voir <a href="/fr/docs/Web/Performance/dns-prefetch">dns-prefetch</a> décrit dans les conseils.</dd>
-  <dt><code>external</code></dt>
-  <dd>S'appliquant à <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, elle indique que le document référencé ne fait pas partie du site actuel. Il peut être utilisé avec des sélecteurs d'attributs pour donner un style aux liens externes d'une manière qui indique à l'utilisateur qu'il va quitter le site actuel.</dd>
-  <dt><code>help</code></dt>
-  <dd>Concerne les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, le mot clé <code>help</code> indique que le contenu lié fournit une aide contextuelle, fournissant des informations pour le parent de l'élément définissant l'hyperlien, et ses enfants. Lorsqu'il est utilisé dans <code>&lt;link&gt;</code>, l'aide concerne l'ensemble du document. Lorsqu'elle est incluse avec <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a> et qu'elle est prise en charge, le <a href="/fr/docs/Web/CSS/cursor"><code>cursor</code></a> par défaut sera <code>help</code> au lieu de <code>pointer</code>.</dd>
-  <dt><code>icon</code></dt>
-  <dd>
-    <p>Valable avec <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, la ressource liée représente l'icône, ressource de représentation de la page dans l'interface utilisateur, pour le document courant.</p>
-
-    <p>L'utilisation la plus courante de la valeur <code>icon</code> est le favicon :</p>
-
-    <pre class="brush: html">&lt;link rel="icon" href="favicon.ico"&gt;</pre>
-
-    <p>S'il existe plusieurs <code>&lt;link rel="icon"&gt;</code>, le navigateur utilise leurs attributs <a href="media"><code>media</code></a>, <a href="type"><code>type</code></a>, et <a href="sizes"><code>sizes</code></a> pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.</p>
-
-    <div class="note">
-      <p><strong>Note :</strong>Avant Firefox 83, l'attribut <a href="/fr/docs/Web/HTML/Attributes/crossorigin">crossorigin</a> n'était pas pris en charge pour <code>rel="icon"</code> ; il existe également <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1121645">un problème pour Chrome</a>.</p>
-      
-      <p>L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut <a href="sizes"><code>sizes</code></a>, comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise respectivement le type non standard <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"><code>apple-touch-icon</code></a> et <a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"><code>apple-touch-startup-image</code></a>.</p>
-      
-      <p>Le type de lien <code>shortcut</code> est souvent vu avant <code>icon</code>, mais ce type de lien est non conforme, ignoré et <strong>les auteurs web ne doivent plus l'utiliser</strong>.</p>
-    </div>
-  </dd>
-  <dt><code>license</code></dt>
-  <dd>
-    <p>Valable sur les éléments <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, la valeur <code>license</code> indique que l'hyperlien mène à un document décrivant les informations relatives à la licence ; que le contenu principal du document actuel est couvert par la licence de droit d'auteur décrite par le document référencé. Si elle ne se trouve pas à l'intérieur de l'élément <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a>, la norme ne fait pas de distinction entre un hyperlien s'appliquant à une partie spécifique du document ou au document dans son ensemble. Seules les données de la page peuvent l'indiquer.</p>
-
-    <pre class="brush: html">&lt;link rel="license" href="#license"&gt;</pre>
-
-    <div class="note">
-      <p><strong>Note :</strong>Bien que reconnu, le synonyme <code>copyright</code> est incorrect et doit être évité.</p>
-    </div>
-  </dd>
-  <dt><code>manifest</code></dt>
-  <dd><a href="/fr/docs/Web/Manifest">Manifeste de l'application Web</a>. Nécessite l'utilisation du protocole CORS pour le « fetching cross-origin ».</dd>
-  <dt><code>modulepreload</code></dt>
-  <dd>Utile pour améliorer les performances, et pertinent pour l'élément <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> n'importe où dans le document, la définition de <code>rel="modulepreload"</code> indique au navigateur de récupérer de manière préemptive le script (et les dépendances) et de le stocker dans la carte des modules du document pour une évaluation ultérieure. Les liens <code>modulepreload</code> peuvent garantir que la récupération du réseau se fait avec le module prêt (mais non évalué) dans la carte des modules avant qu'il ne soit nécessairement nécessaire. Voir aussi <a href="/fr/docs/Web/HTML/Link_types/modulepreload">Types de liens : <code>modulepreload</code></a>.</dd>
-  <dt><code>next</code></dt>
-  <dd>Pertinent pour les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, les valeurs <code>next</code> indiquent que le document actuel fait partie d'une série, et que le document suivant dans la série est le document référencé. Lorsqu'elles sont incluses dans un <code>&lt;link&gt;</code>, les navigateurs peuvent supposer que le document sera récupéré ensuite, et le traiter comme une indication de ressource.</dd>
-  <dt><code>nofollow</code></dt>
-  <dd>Pertinent pour les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, le mot clé <code>nofollow</code> indique aux robots des moteurs de recherche d'ignorer la relation de lien. La relation nofollow peut indiquer que le propriétaire du document actuel ne cautionne pas le document référencé. Elle est souvent incluse par les optimiseurs de moteurs de recherche qui prétendent que leurs fermes de liens ne sont pas des pages de spam.</dd>
-  <dt><code>noopener</code></dt>
-  <dd>Cela concerne <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, elle crée un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire si l'hyperlien créait l'un ou l'autre pour commencer (c.-à-d. a une valeur appropriée de l'attribut <code>target</code>). En d'autres termes, il fait en sorte que le lien se comporte comme si <a href="/fr/docs/Web/API/Window/opener"><code>window.opener</code></a> était nul et que <code><a href="target">target</a>="_parent"</code> était défini.<br>
-  <br>
-  C'est le contraire de <a href="#opener">opener</a>.</dd>
-  <dt><code>noreferrer</code></dt>
-  <dd>Pertinent pour <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, l'inclusion de cette valeur rend le référent inconnu (aucun en-tête <code>Referer</code> ne sera inclus), et crée un contexte de navigation de haut niveau comme si <code>noopener</code> était également défini.</dd>
-  <dt><code>opener</code></dt>
-  <dd>Crée un contexte de navigation auxiliaire si l'hyperlien créerait autrement un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire (c.-à-d. a « <code>_blank</code> » comme valeur d'attribut <code>target</code>). Effectivement, c'est le contraire de <a href="#noopener">noopener</a>.</dd>
-  <dt><code>pingback</code></dt>
-  <dd>Donne l'adresse du serveur de retour d'appel qui gère les retours d'appel pour le document actuel.</dd>
-  <dt><code>preconnect</code></dt>
-  <dd>Spécifie que l'agent utilisateur doit se connecter de manière préemptive à l'origine de la ressource cible.</dd>
-  <dt><code>prefetch</code></dt>
-  <dd>Indique que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible, car elle est susceptible d'être requise pour une navigation ultérieure.</dd>
-  <dt><code>preload</code></dt>
-  <dd>Spécifie que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible pour la navigation actuelle en fonction de la destination potentielle donnée par l'attribut <a href="as"><code>as</code></a> (et la priorité associée à la destination correspondante).</dd>
-  <dt><code>prerender</code></dt>
-  <dd>Spécifie que l'agent utilisateur doit récupérer de manière préemptive la ressource cible et la traiter de manière à fournir une réponse plus rapide à l'avenir.</dd>
-  <dt><code>prev</code></dt>
-  <dd>
-    <p>Similaire au mot-clé <a href="#next">next</a>, pertinent pour les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, les valeurs <code>prev</code> indiquent que le document actuel fait partie d'une série, et que le lien renvoie à un document précédent de la série est le document référencé.</p>
-
-    <div class="note">
-      <p><strong>Note :</strong>Le synonyme <code>previous</code> est incorrect et ne doit pas être utilisé.</p>
-    </div>
-  </dd>
-  <dt><code>search</code></dt>
-  <dd>
-    <p>Concerne les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt area&gt;</code></a>, les mots-clés <code>search</code> indiquent que l'hyperlien fait référence à un document dont l'interface est spécialement conçue pour effectuer des recherches dans le document actuel, le site et les ressources connexes, en fournissant un lien vers une ressource qui peut être utilisée pour effectuer une recherche.</p>
-
-    <p>Si l'attribut <a href="type"><code>type</code></a> est défini à <code>application/opensearchdescription+xml</code>, la ressource est un <a href="/fr/docs/Web/OpenSearch">prolongateur OpenSearch</a> qui peut être facilement ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.</p>
-  </dd>
-  <dt><code>stylesheet</code></dt>
-  <dd>
-    <p>Valable pour l'élément <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, il importe une ressource externe à utiliser comme feuille de style. L'attribut <a href="type"><code>type</code></a> n'est pas nécessaire, car il s'agit d'une feuille de style <code>text/css</code>, puisque c'est la valeur par défaut. S'il ne s'agit pas d'une feuille de style de type <code>text/css</code>, il est préférable de déclarer le type.</p>
-
-    <p>Bien que cet attribut définisse le lien comme étant une feuille de style, l'interaction avec d'autres attributs et d'autres termes clés dans la valeur rel ont un impact sur le téléchargement et/ou l'utilisation de la feuille de style.</p>
-
-    <p>Lorsqu'il est utilisé avec le mot-clé <a href="#alternate">alternate</a>, il définit une feuille de style alternative. Dans ce cas, incluez un <a href="type"><code>title</code></a> non vide.</p>
-
-    <p>La feuille de style externe ne sera pas utilisée ni même téléchargée si le média ne correspond pas à la valeur de l'attribut <a href="media"><code>media</code></a>.</p>
-
-    <p>Nécessite l'utilisation du protocole CORS pour la récupération inter-origine.</p>
-  </dd>
-  <dt><code>tag</code></dt>
-  <dd>Valable pour les éléments <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, il donne une balise (identifiée par l'adresse donnée) qui s'applique au document actuel. La valeur de la balise indique que le lien renvoie à un document, décrivant une balise s'appliquant au document sur lequel il se trouve. Ce type de lien n'est pas destiné aux balises, dans un nuage de balises, car elles s'appliquent à un groupe de pages, alors que la valeur <code>tag</code> de l'attribut <code>rel</code> concerne un seul document.</dd>
-</dl>
-
-<h3 id="non-standard_values">Valeurs non standard</h3>
-
-<dl>
-  <dt>apple-touch-icon-precomposed</dt>
-  <dd><p>Exemple d'utilisation</p>
-  <pre class="brush: html">&lt;!-- iPad de troisième génération avec écran Retina haute résolution : --&gt;
-  &lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/img/favicon144.e7e21ca263ca.png"&gt;
-  &lt;!-- iPhone avec écran Retina haute résolution : --&gt;
-  &lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/img/favicon114.d526f38b09c5.png"&gt;
-  &lt;!-- première et deuxième génération d'iPad: --&gt;
-  &lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/img/favicon72.cc65d1d762a0.png"&gt;
-  &lt;!-- Appareils iPhone non Retina, iPod Touch et Android 2.1+ : --&gt;
-  &lt;link rel="apple-touch-icon-precomposed" href="/static/img/favicon57.de33179910ae.png"&gt;
-  &lt;!-- favicône de base --&gt;
-  &lt;link rel="shortcut icon" href="/static/img/favicon32.7f3da72dcea1.png"&gt;</pre>
-  </dd>
-</dl>
-
-<h2 id="specifications">Spécifications</h2>
+S'il existe plusieurs `<link rel="icon">`, le navigateur utilise leur attribut [`media`](media), [`type`](type) et [`sizes`](sizes) pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.
+
+**Note :** L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut [`sizes`](sizes), comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise les attributs non standard [`apple-touch-icon`](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4) et [`apple-touch-startup-image`](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6) respectivement.
+
+> **Note :**Le type de lien `shortcut` est souvent vu avant `icon`, mais ce type de lien est non conforme, ignoré et **les auteurs web ne doivent plus l'utiliser**.
+
+- `alternate`
+
+  - : Indique une représentation alternative du document actuel. Valable pour [`<link>`](/fr/docs/Web/HTML/Element/link), [`<a>`](/fr/docs/Web/HTML/Element/a), et [`<area>`](/fr/docs/Web/HTML/Element/area), la signification dépend des valeurs des autres attributs.
+
+    - Avec le mot clé [`stylesheet`](#stylesheet) sur un `<link>`, il crée une feuille de style alternative.
+
+      ```html
+      <!-- une feuille de style persistante -->
+      <link rel="stylesheet" href="default.css">
+      <!-- feuilles de style alternativement -->
+      <link rel="alternate stylesheet" href="highcontrast.css" title="Contraste élevé">
+      ```
+
+    - Avec un attribut [`hreflang`](hreflang) qui diffère de la langue du document, cela indique une traduction.
+    - Avec l'attribut [`type`](type), il indique que le document référencé est le même contenu dans un format différent. Par exemple, avec `type="application/rss+xml"`, il crée un lien hypertexte référençant un flux de syndication.
+
+      ```html
+      <link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog">
+      ```
+
+    - Les attributs [`hreflang`](hreflang) et [`type`](type) spécifient des liens vers des versions du document dans un format et une langue alternatifs, destinés à d'autres médias :
+
+      ```html
+      <link rel="alternate" href="/fr/html/print" hreflang="fr" type="text/html" media="print" title="HTML français (pour l'impression)">
+      <link rel="alternate" href="/fr/pdf" hreflang="fr" type=application/pdf title="PDF Français">
+      ```
+
+    > **Note :**L'attribut obsolète `rev="made"` est traité comme `rel="alternate"`.
+
+- `author`
+  - : Indique l'auteur du document ou de l'article en cours. Pertinent pour les éléments [`<link>`](/fr/docs/Web/HTML/Element/link), [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area), le mot-clé `author` crée un lien hypertexte. Avec [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area), il indique que le document lié (ou `mailto:`) fournit des informations sur l'auteur de l'ancêtre le plus proche d'un élément [`<article>`](/fr/docs/Web/HTML/Element/article) s'il en existe un, sinon le document entier. Pour [`<link>`](/fr/docs/Web/HTML/Element/link), il représente l'auteur du document entier.
+- `bookmark`
+  - : Pertinent comme valeur de l'attribut `rel` pour les éléments [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area), le signet fournit un permalien pour la section ancêtre, qui est l'ancêtre le plus proche d'un élément [`<article>`](/fr/docs/Web/HTML/Element/article) ou [`<section>`](/fr/docs/Web/HTML/Element/section), s'il y en a au moins un, sinon, le parent le plus proche de l'en-tête ou l'ancêtre descendant, jusqu'au suivant.
+- `canonical`
+  - : Valable pour [`<link>`](/fr/docs/Web/HTML/Element/link), elle définit l'URL préférée du document actuel, ce qui est utile pour les moteurs de recherche.
+- `dns-prefetch`
+  - : Pertinent pour l'élément [`<link>`](/fr/docs/Web/HTML/Element/link) à la fois dans les éléments [`<body>`](/fr/docs/Web/HTML/Element/body) et [`<head>`](/fr/docs/Web/HTML/Element/head), il indique au navigateur d'effectuer de manière préemptive la résolution DNS pour l'origine de la ressource cible. Utile pour les ressources dont l'utilisateur aura probablement besoin, elle permet de réduire la latence et donc d'améliorer les performances lorsque l'utilisateur accède effectivement aux ressources car le navigateur a effectué de manière préemptive la résolution DNS pour l'origine de la ressource spécifiée. Voir [dns-prefetch](/fr/docs/Web/Performance/dns-prefetch) décrit dans les conseils.
+- `external`
+  - : S'appliquant à [`<form>`](/fr/docs/Web/HTML/Element/Form), [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area), elle indique que le document référencé ne fait pas partie du site actuel. Il peut être utilisé avec des sélecteurs d'attributs pour donner un style aux liens externes d'une manière qui indique à l'utilisateur qu'il va quitter le site actuel.
+- `help`
+  - : Concerne les éléments [`<form>`](/fr/docs/Web/HTML/Element/Form), [`<link>`](/fr/docs/Web/HTML/Element/link), [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area), le mot clé `help` indique que le contenu lié fournit une aide contextuelle, fournissant des informations pour le parent de l'élément définissant l'hyperlien, et ses enfants. Lorsqu'il est utilisé dans `<link>`, l'aide concerne l'ensemble du document. Lorsqu'elle est incluse avec [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area) et qu'elle est prise en charge, le [`cursor`](/fr/docs/Web/CSS/cursor) par défaut sera `help` au lieu de `pointer`.
+- `icon`
+
+  - : Valable avec [`<link>`](/fr/docs/Web/HTML/Element/link), la ressource liée représente l'icône, ressource de représentation de la page dans l'interface utilisateur, pour le document courant.
+
+    L'utilisation la plus courante de la valeur `icon` est le favicon :
+
+    ```html
+    <link rel="icon" href="favicon.ico">
+    ```
+
+    S'il existe plusieurs `<link rel="icon">`, le navigateur utilise leurs attributs [`media`](media), [`type`](type), et [`sizes`](sizes) pour sélectionner l'icône la plus appropriée. Si plusieurs icônes sont également appropriées, la dernière est utilisée. Si l'icône la plus appropriée s'avère ultérieurement inappropriée, par exemple parce qu'elle utilise un format non pris en charge, le navigateur passe à l'icône suivante la plus appropriée, et ainsi de suite.
+
+    > **Note :**Avant Firefox 83, l'attribut [crossorigin](/fr/docs/Web/HTML/Attributes/crossorigin) n'était pas pris en charge pour `rel="icon"` ; il existe également [un problème pour Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=1121645).
+    >
+    > L'iOS d'Apple n'utilise pas ce type de lien, ni l'attribut [`sizes`](sizes), comme le font d'autres navigateurs mobiles, pour sélectionner une icône de page Web pour Web Clip ou un espace réservé au démarrage. Au lieu de cela, il utilise respectivement le type non standard [`apple-touch-icon`](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4) et [`apple-touch-startup-image`](https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6).
+    >
+    > Le type de lien `shortcut` est souvent vu avant `icon`, mais ce type de lien est non conforme, ignoré et **les auteurs web ne doivent plus l'utiliser**.
+
+- `license`
+
+  - : Valable sur les éléments [`<a>`](/fr/docs/Web/HTML/Element/a), [`<area>`](/fr/docs/Web/HTML/Element/area), [`<form>`](/fr/docs/Web/HTML/Element/Form) et [`<link>`](/fr/docs/Web/HTML/Element/link), la valeur `license` indique que l'hyperlien mène à un document décrivant les informations relatives à la licence ; que le contenu principal du document actuel est couvert par la licence de droit d'auteur décrite par le document référencé. Si elle ne se trouve pas à l'intérieur de l'élément [`<head>`](/fr/docs/Web/HTML/Element/head), la norme ne fait pas de distinction entre un hyperlien s'appliquant à une partie spécifique du document ou au document dans son ensemble. Seules les données de la page peuvent l'indiquer.
+
+    ```html
+    <link rel="license" href="#license">
+    ```
+
+    > **Note :**Bien que reconnu, le synonyme `copyright` est incorrect et doit être évité.
+
+- `manifest`
+  - : [Manifeste de l'application Web](/fr/docs/Web/Manifest). Nécessite l'utilisation du protocole CORS pour le « fetching cross-origin ».
+- `modulepreload`
+  - : Utile pour améliorer les performances, et pertinent pour l'élément [`<link>`](/fr/docs/Web/HTML/Element/link) n'importe où dans le document, la définition de `rel="modulepreload"` indique au navigateur de récupérer de manière préemptive le script (et les dépendances) et de le stocker dans la carte des modules du document pour une évaluation ultérieure. Les liens `modulepreload` peuvent garantir que la récupération du réseau se fait avec le module prêt (mais non évalué) dans la carte des modules avant qu'il ne soit nécessairement nécessaire. Voir aussi [Types de liens : `modulepreload`](/fr/docs/Web/HTML/Link_types/modulepreload).
+- `next`
+  - : Pertinent pour les éléments [`<form>`](/fr/docs/Web/HTML/Element/Form), [`<link>`](/fr/docs/Web/HTML/Element/link), [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area), les valeurs `next` indiquent que le document actuel fait partie d'une série, et que le document suivant dans la série est le document référencé. Lorsqu'elles sont incluses dans un `<link>`, les navigateurs peuvent supposer que le document sera récupéré ensuite, et le traiter comme une indication de ressource.
+- `nofollow`
+  - : Pertinent pour les éléments [`<form>`](/fr/docs/Web/HTML/Element/Form), [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area), le mot clé `nofollow` indique aux robots des moteurs de recherche d'ignorer la relation de lien. La relation nofollow peut indiquer que le propriétaire du document actuel ne cautionne pas le document référencé. Elle est souvent incluse par les optimiseurs de moteurs de recherche qui prétendent que leurs fermes de liens ne sont pas des pages de spam.
+- `noopener`
+
+  - : Cela concerne [`<form>`](/fr/docs/Web/HTML/Element/Form), [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area), elle crée un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire si l'hyperlien créait l'un ou l'autre pour commencer (c.-à-d. a une valeur appropriée de l'attribut `target`). En d'autres termes, il fait en sorte que le lien se comporte comme si [`window.opener`](/fr/docs/Web/API/Window/opener) était nul et que `target="_parent"` était défini.
+
+    C'est le contraire de [opener](#opener).
+
+- `noreferrer`
+  - : Pertinent pour [`<form>`](/fr/docs/Web/HTML/Element/Form), [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area), l'inclusion de cette valeur rend le référent inconnu (aucun en-tête `Referer` ne sera inclus), et crée un contexte de navigation de haut niveau comme si `noopener` était également défini.
+- `opener`
+  - : Crée un contexte de navigation auxiliaire si l'hyperlien créerait autrement un contexte de navigation de haut niveau qui n'est pas un contexte de navigation auxiliaire (c.-à-d. a « `_blank` » comme valeur d'attribut `target`). Effectivement, c'est le contraire de [noopener](#noopener).
+- `pingback`
+  - : Donne l'adresse du serveur de retour d'appel qui gère les retours d'appel pour le document actuel.
+- `preconnect`
+  - : Spécifie que l'agent utilisateur doit se connecter de manière préemptive à l'origine de la ressource cible.
+- `prefetch`
+  - : Indique que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible, car elle est susceptible d'être requise pour une navigation ultérieure.
+- `preload`
+  - : Spécifie que l'agent utilisateur doit récupérer et mettre en cache de manière préemptive la ressource cible pour la navigation actuelle en fonction de la destination potentielle donnée par l'attribut [`as`](as) (et la priorité associée à la destination correspondante).
+- `prerender`
+  - : Spécifie que l'agent utilisateur doit récupérer de manière préemptive la ressource cible et la traiter de manière à fournir une réponse plus rapide à l'avenir.
+- `prev`
+
+  - : Similaire au mot-clé [next](#next), pertinent pour les éléments [`<form>`](/fr/docs/Web/HTML/Element/Form), [`<link>`](/fr/docs/Web/HTML/Element/link), [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area), les valeurs `prev` indiquent que le document actuel fait partie d'une série, et que le lien renvoie à un document précédent de la série est le document référencé.
+
+    > **Note :**Le synonyme `previous` est incorrect et ne doit pas être utilisé.
+
+- `search`
+
+  - : Concerne les éléments [`<form>`](/fr/docs/Web/HTML/Element/Form), [`<link>`](/fr/docs/Web/HTML/Element/link), [`<a>`](/fr/docs/Web/HTML/Element/a) et [`< area>`](/fr/docs/Web/HTML/Element/area), les mots-clés `search` indiquent que l'hyperlien fait référence à un document dont l'interface est spécialement conçue pour effectuer des recherches dans le document actuel, le site et les ressources connexes, en fournissant un lien vers une ressource qui peut être utilisée pour effectuer une recherche.
+
+    Si l'attribut [`type`](type) est défini à `application/opensearchdescription+xml`, la ressource est un [prolongateur OpenSearch](/fr/docs/Web/OpenSearch) qui peut être facilement ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.
+
+- `stylesheet`
+
+  - : Valable pour l'élément [`<link>`](/fr/docs/Web/HTML/Element/link), il importe une ressource externe à utiliser comme feuille de style. L'attribut [`type`](type) n'est pas nécessaire, car il s'agit d'une feuille de style `text/css`, puisque c'est la valeur par défaut. S'il ne s'agit pas d'une feuille de style de type `text/css`, il est préférable de déclarer le type.
+
+    Bien que cet attribut définisse le lien comme étant une feuille de style, l'interaction avec d'autres attributs et d'autres termes clés dans la valeur rel ont un impact sur le téléchargement et/ou l'utilisation de la feuille de style.
+
+    Lorsqu'il est utilisé avec le mot-clé [alternate](#alternate), il définit une feuille de style alternative. Dans ce cas, incluez un [`title`](type) non vide.
+
+    La feuille de style externe ne sera pas utilisée ni même téléchargée si le média ne correspond pas à la valeur de l'attribut [`media`](media).
+
+    Nécessite l'utilisation du protocole CORS pour la récupération inter-origine.
+
+- `tag`
+  - : Valable pour les éléments [`<a>`](/fr/docs/Web/HTML/Element/a) et [`<area>`](/fr/docs/Web/HTML/Element/area), il donne une balise (identifiée par l'adresse donnée) qui s'applique au document actuel. La valeur de la balise indique que le lien renvoie à un document, décrivant une balise s'appliquant au document sur lequel il se trouve. Ce type de lien n'est pas destiné aux balises, dans un nuage de balises, car elles s'appliquent à un groupe de pages, alors que la valeur `tag` de l'attribut `rel` concerne un seul document.
+
+### Valeurs non standard
+
+- apple-touch-icon-precomposed
+
+  - : Exemple d'utilisation
+
+    ```html
+    <!-- iPad de troisième génération avec écran Retina haute résolution : -->
+      <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/img/favicon144.e7e21ca263ca.png">
+      <!-- iPhone avec écran Retina haute résolution : -->
+      <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/img/favicon114.d526f38b09c5.png">
+      <!-- première et deuxième génération d'iPad: -->
+      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/img/favicon72.cc65d1d762a0.png">
+      <!-- Appareils iPhone non Retina, iPod Touch et Android 2.1+ : -->
+      <link rel="apple-touch-icon-precomposed" href="/static/img/favicon57.de33179910ae.png">
+      <!-- favicône de base -->
+      <link rel="shortcut icon" href="/static/img/favicon32.7f3da72dcea1.png">
+    ```
+
+## Spécifications
 
 <table class="standard-table">
   <thead>
@@ -371,40 +213,68 @@ translation_of: Web/HTML/Attributes/rel
   </thead>
   <tbody>
     <tr>
-      <td>{{SpecName('HTML WHATWG', 'links.html#linkTypes', 'l\'attribut rel')}}</td>
+      <td>
+        {{SpecName('HTML WHATWG', 'links.html#linkTypes', 'l\'attribut rel')}}
+      </td>
       <td>{{Spec2('HTML WHATWG')}}</td>
-      <td>Ajout de <code>opener</code>. Mise en place de <code>noopener</code> par défaut pour <code>target="_blank"</code>.</td>
+      <td>
+        Ajout de <code>opener</code>. Mise en place de <code>noopener</code> par
+        défaut pour <code>target="_blank"</code>.
+      </td>
     </tr>
     <tr>
-      <td>{{SpecName('HTML5 W3C', 'links.html#linkTypes', 'l\'attribut rel')}}</td>
+      <td>
+        {{SpecName('HTML5 W3C', 'links.html#linkTypes', 'l\'attribut rel')}}
+      </td>
       <td>{{Spec2('HTML5 W3C')}}</td>
-      <td>Ajout de <code>tag</code>, <code>search</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>icon</code> et <code>author</code>.<br>
-        Renommage de <code>copyright</code> en <code>license</code>.<br>
-        Suppression de <code>start</code>, <code>chapitre</code>, <code>section</code>, <code>subsection</code> et <code>appendice</code>.</td>
+      <td>
+        Ajout de <code>tag</code>, <code>search</code>, <code>prefetch</code>,
+        <code>noreferrer</code>, <code>nofollow</code>, <code>icon</code> et
+        <code>author</code>.<br />Renommage de <code>copyright</code> en
+        <code>license</code>.<br />Suppression de <code>start</code>,
+        <code>chapitre</code>, <code>section</code>, <code>subsection</code> et
+        <code>appendice</code>.
+      </td>
     </tr>
     <tr>
-      <td>{{SpecName("Preload", "#x2.link-type-preload", "preload")}}</td>
+      <td>
+        {{SpecName("Preload", "#x2.link-type-preload", "preload")}}
+      </td>
       <td>{{Spec2("Preload")}}</td>
       <td>Ajout de <code>preload</code>.</td>
     </tr>
     <tr>
-      <td>{{SpecName("Resource Hints", "#dfn-preconnect", "preconnect")}}</td>
+      <td>
+        {{SpecName("Resource Hints", "#dfn-preconnect", "preconnect")}}
+      </td>
       <td>{{Spec2("Resource Hints")}}</td>
-      <td>Ajout des valeurs <code>dns-prefetch</code>, <code>preconnect</code> et <code>prerender</code>.</td>
+      <td>
+        Ajout des valeurs <code>dns-prefetch</code>, <code>preconnect</code> et
+        <code>prerender</code>.
+      </td>
     </tr>
     <tr>
-      <td>{{SpecName("HTML4.01", "types.html#type-links", "link types")}}</td>
+      <td>
+        {{SpecName("HTML4.01", "types.html#type-links", "link types")}}
+      </td>
       <td>{{Spec2("HTML4.01")}}</td>
-      <td>Ajout de <code>alternate</code>, <code>stylesheet</code>, <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code>, <code>appendix</code> et <code>bookmark</code>.<br>
-      Renommage de <code>previous</code> par <code>prev</code>.<br>
-      Suppression de <code>top</code> et <code>search</code>.</td>
+      <td>
+        Ajout de <code>alternate</code>, <code>stylesheet</code>,
+        <code>start</code>, <code>chapter</code>, <code>section</code>,
+        <code>subsection</code>, <code>appendix</code> et
+        <code>bookmark</code>.<br />Renommage de <code>previous</code> par
+        <code>prev</code>.<br />Suppression de <code>top</code> et
+        <code>search</code>.
+      </td>
     </tr>
     <tr>
       <td>{{SpecName("HTML3.2", "#link", "&lt;link&gt;")}}</td>
+      <td><p>Obsolète</p></td>
       <td>
-      <p>Obsolète</p>
+        Ajout de <code>top</code>, <code>contents</code>, <code>index</code>,
+        <code>glossary</code>, <code>copyright</code>, <code>next</code>,
+        <code>previous</code>, <code>help</code> et <code>search</code>.
       </td>
-      <td>Ajout de <code>top</code>, <code>contents</code>, <code>index</code>, <code>glossary</code>, <code>copyright</code>, <code>next</code>, <code>previous</code>, <code>help</code> et <code>search</code>.</td>
     </tr>
     <tr>
       <td>{{RFC(1866, "HTML 2.0")}}</td>
@@ -414,14 +284,12 @@ translation_of: Web/HTML/Attributes/rel
   </tbody>
 </table>
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.link.rel")}}</p>
+{{Compat("html.elements.link.rel")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>La propriété <a href="/fr/docs/Web/API/HTMLLinkElement/relList"><code>HTMLLinkElement.relList</code></a></li>
-  <li>La propriété <a href="/fr/docs/Web/API/HTMLAnchorElement/relList"><code>HTMLAnchorElement.relList</code></a></li>
-  <li>La propriété <a href="/fr/docs/Web/API/HTMLAreaElement/relList"><code>HTMLAreaElement.relList</code></a></li>
-</ul>
+- La propriété [`HTMLLinkElement.relList`](/fr/docs/Web/API/HTMLLinkElement/relList)
+- La propriété [`HTMLAnchorElement.relList`](/fr/docs/Web/API/HTMLAnchorElement/relList)
+- La propriété [`HTMLAreaElement.relList`](/fr/docs/Web/API/HTMLAreaElement/relList)
diff --git a/files/fr/web/html/attributes/required/index.md b/files/fr/web/html/attributes/required/index.md
index 56e487c081..9536f5638e 100644
--- a/files/fr/web/html/attributes/required/index.md
+++ b/files/fr/web/html/attributes/required/index.md
@@ -9,93 +9,73 @@ tags:
   - required
 translation_of: Web/HTML/Attributes/required
 ---
-<div>{{HTMLSidebar}}</div>
+{{HTMLSidebar}}
 
-<p>L'attribut booléen <strong><code>required</code></strong>, s'il est présent, indique que l'utilisateur doit spécifier une valeur pour l'entrée avant que le formulaire propriétaire puisse être soumis. L'attribut <code>required</code> est pris en charge pour les éléments <a href="/fr/docs/Web/HTML/Element/Input/text"><code>text</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/search"><code>search</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/url"><code>url</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/tel"><code>tel</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/email"><code>email</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/password"><code>password</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href=" /fr/docs/Web/HTML/Element/Input/month" ><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/checkbox"><code>checkbox</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/radio"><code>radio</code></a>, les éléments <a href="/fr/docs/Web/HTML/Element/Input/file"><code>file</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a> de contrôle de formulaire. Si elle est présente sur l'un de ces types de saisie et éléments, la pseudo-classe <a href="/fr/docs/Web/CSS/:required"><code>:required</code></a> s'appliquera. Si l'attribut n'est pas inclus, la pseudo-classe <a href="/fr/docs/Web/CSS/:optional"><code>:optional</code></a> s'appliquera.</p>
+L'attribut booléen **`required`**, s'il est présent, indique que l'utilisateur doit spécifier une valeur pour l'entrée avant que le formulaire propriétaire puisse être soumis. L'attribut `required` est pris en charge pour les éléments [`text`](/fr/docs/Web/HTML/Element/Input/text), [`search`](/fr/docs/Web/HTML/Element/Input/search), [`url`](/fr/docs/Web/HTML/Element/Input/url), [`tel`](/fr/docs/Web/HTML/Element/Input/tel), [`email`](/fr/docs/Web/HTML/Element/Input/email), [`password`](/fr/docs/Web/HTML/Element/Input/password), [`date`](/fr/docs/Web/HTML/Element/Input/date), [`month`](< /fr/docs/Web/HTML/Element/Input/month>), [`week`](/fr/docs/Web/HTML/Element/Input/week), [`time`](/fr/docs/Web/HTML/Element/Input/time), [`datetime-local`](/fr/docs/Web/HTML/Element/Input/datetime-local), [`number`](/fr/docs/Web/HTML/Element/Input/number), [`checkbox`](/fr/docs/Web/HTML/Element/Input/checkbox), [`radio`](/fr/docs/Web/HTML/Element/Input/radio), les éléments [`file`](/fr/docs/Web/HTML/Element/Input/file), [`<input>`](/fr/docs/Web/HTML/Element/Input), [`<select>`](/fr/docs/Web/HTML/Element/select) et [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea) de contrôle de formulaire. Si elle est présente sur l'un de ces types de saisie et éléments, la pseudo-classe [`:required`](/fr/docs/Web/CSS/:required) s'appliquera. Si l'attribut n'est pas inclus, la pseudo-classe [`:optional`](/fr/docs/Web/CSS/:optional) s'appliquera.
 
-<p>L'attribut n'est pas pris en charge ou n'est pas pertinent pour <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/color"><code>color</code></a>, car les deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur <a href="/fr/docs/Web/HTML/Element/Input/hidden"><code>hidden</code></a> car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur aucun des types de boutons, y compris <code>image</code>.</p>
+L'attribut n'est pas pris en charge ou n'est pas pertinent pour [`range`](/fr/docs/Web/HTML/Element/Input/range) et [`color`](/fr/docs/Web/HTML/Element/Input/color), car les deux ont des valeurs par défaut. Il n'est pas non plus pris en charge sur [`hidden`](/fr/docs/Web/HTML/Element/Input/hidden) car on ne peut pas s'attendre à ce qu'un utilisateur remplisse un formulaire qui est caché. Il n'est pas non plus supporté sur aucun des types de boutons, y compris `image`.
 
-<p>Notez que <code>color</code> et <code>range</code> ne supportent pas <code>required</code>, mais le type <code>color</code> est par défaut <code>#000000</code>, et <code>range</code> prend par défaut le point médian entre <code>min</code> et <code>max</code> — avec <code>min</code> et <code>max</code> prenant par défaut les valeurs 0 et 100 respectivement dans la plupart des navigateurs s'ils ne sont pas déclarés — donc a toujours une valeur.</p>
+Notez que `color` et `range` ne supportent pas `required`, mais le type `color` est par défaut `#000000`, et `range` prend par défaut le point médian entre `min` et `max` — avec `min` et `max` prenant par défaut les valeurs 0 et 100 respectivement dans la plupart des navigateurs s'ils ne sont pas déclarés — donc a toujours une valeur.
 
-<p>Dans le cas d'un groupe de boutons <a href="/fr/docs/Web/HTML/Element/Input/radio"><code>radio</code></a> de même nom, si un seul bouton radio dans le groupe a l'attribut <code>required</code>, un bouton radio dans ce groupe doit être vérifié, bien que ce ne soit pas nécessairement celui où l'attribut est appliqué. Ainsi, pour améliorer la maintenance du code, il est recommandé d'inclure l'attribut <code>required</code> dans chaque bouton radio de même nom dans le groupe, ou bien dans aucun.</p>
+Dans le cas d'un groupe de boutons [`radio`](/fr/docs/Web/HTML/Element/Input/radio) de même nom, si un seul bouton radio dans le groupe a l'attribut `required`, un bouton radio dans ce groupe doit être vérifié, bien que ce ne soit pas nécessairement celui où l'attribut est appliqué. Ainsi, pour améliorer la maintenance du code, il est recommandé d'inclure l'attribut `required` dans chaque bouton radio de même nom dans le groupe, ou bien dans aucun.
 
-<p>Dans le cas d'un même groupe nommé de types d'entrée <a href="/fr/docs/Web/HTML/Element/Input/checkbox"><code>checkbox</code></a>, seules les cases à cocher avec l'attribut <code>required</code> sont obligatoires.</p>
+Dans le cas d'un même groupe nommé de types d'entrée [`checkbox`](/fr/docs/Web/HTML/Element/Input/checkbox), seules les cases à cocher avec l'attribut `required` sont obligatoires.
 
-<div class="note">
-  <p><strong>Note :</strong>Le réglage <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a>="true"</code> indique à un lecteur d'écran qu'un élément (n'importe lequel) est requis, mais n'a aucune incidence sur le caractère facultatif de l'élément.</p>
-</div>
+> **Note :**Le réglage `aria-required="true"` indique à un lecteur d'écran qu'un élément (n'importe lequel) est requis, mais n'a aucune incidence sur le caractère facultatif de l'élément.
 
-<h2 id="attribute_interactions">Interactions entre attributs</h2>
+## Interactions entre attributs
 
-<p>Comme un champ en lecture seule ne peut pas avoir de valeur, <code>required</code> n'a aucun effet sur les entrées dont l'attribut <a href="readonly"><code>readonly</code></a> est également spécifié.</p>
+Comme un champ en lecture seule ne peut pas avoir de valeur, `required` n'a aucun effet sur les entrées dont l'attribut [`readonly`](readonly) est également spécifié.
 
-<h2 id="usability">Utilisabilité</h2>
+## Utilisabilité
 
-<p>Lorsque vous incluez l'attribut <code>required</code>, fournissez une indication visible à proximité du contrôle informant l'utilisateur que les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a> sont obligatoires. En outre, ciblez les contrôles de formulaire requis avec la pseudo-classe <a href="/fr/docs/Web/CSS/:required"><code>:required</code></a>, en les stylisant de manière à indiquer qu'ils sont requis. Cela améliore la convivialité pour les utilisateurs voyants. Les technologies d'assistance doivent informer l'utilisateur que le contrôle de formulaire est obligatoire sur la base de l'attribut required, mais l'ajout de <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute">aria-required</a>="true"</code> ne fait pas de mal, au cas où la combinaison navigateur / lecteur d'écran ne prendrait pas encore en charge <code>required</code>.</p>
+Lorsque vous incluez l'attribut `required`, fournissez une indication visible à proximité du contrôle informant l'utilisateur que les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), [`<select>`](/fr/docs/Web/HTML/Element/select) ou [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea) sont obligatoires. En outre, ciblez les contrôles de formulaire requis avec la pseudo-classe [`:required`](/fr/docs/Web/CSS/:required), en les stylisant de manière à indiquer qu'ils sont requis. Cela améliore la convivialité pour les utilisateurs voyants. Les technologies d'assistance doivent informer l'utilisateur que le contrôle de formulaire est obligatoire sur la base de l'attribut required, mais l'ajout de `aria-required="true"` ne fait pas de mal, au cas où la combinaison navigateur / lecteur d'écran ne prendrait pas encore en charge `required`.
 
-<h2 id="constraint_validation">Validation des contraintes</h2>
+## Validation des contraintes
 
-<p>Si l'élément est requis et que la valeur de l'élément est la chaîne vide, alors l'élément souffre de <a href="/fr/docs/Web/API/ValidityState/valueMissing"><code>valueMissing</code></a> et l'élément correspondra à la pseudo classe <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a>.</p>
+Si l'élément est requis et que la valeur de l'élément est la chaîne vide, alors l'élément souffre de [`valueMissing`](/fr/docs/Web/API/ValidityState/valueMissing) et l'élément correspondra à la pseudo classe [`:invalid`](/fr/docs/Web/CSS/:invalid).
 
-<h2 id="examples">Exemple</h2>
+## Exemple
 
-<h3 id="html">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div class="group"&gt;
-    &lt;input type="text"&gt;
-    &lt;label&gt;Normal&lt;/label&gt;
-  &lt;/div&gt;
-  &lt;div class="group"&gt;
-    &lt;input type="text" required="required"&gt;
-    &lt;label&gt;Requis&lt;/label&gt;
-  &lt;/div&gt;
-  &lt;input type="submit"&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div class="group">
+    <input type="text">
+    <label>Normal</label>
+  </div>
+  <div class="group">
+    <input type="text" required="required">
+    <label>Requis</label>
+  </div>
+  <input type="submit">
+</form>
+```
 
-<h3 id="result">Résultat</h3>
+### Résultat
 
-<div>{{EmbedLiveSample('examples')}}</div>
+{{EmbedLiveSample('examples')}}
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>Fournissez une indication aux utilisateurs pour les informer que le contrôle de formulaire est requis. Veillez à ce que le message soit multiforme (texte, couleur, marquage, attribut, etc.) afin que tous les utilisateurs comprennent les exigences, qu'ils soient daltoniens, qu'ils présentent des différences cognitives ou qu'ils utilisent un lecteur d'écran.</p>
+Fournissez une indication aux utilisateurs pour les informer que le contrôle de formulaire est requis. Veillez à ce que le message soit multiforme (texte, couleur, marquage, attribut, etc.) afin que tous les utilisateurs comprennent les exigences, qu'ils soient daltoniens, qu'ils présentent des différences cognitives ou qu'ils utilisent un lecteur d'écran.
 
+## Spécifications
 
-<h2 id="specifications">Spécifications</h2>
+| Spécification                                                                                                        | Statut                           |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#attr-input-required', 'l\'attribut required')}}     | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5 W3C', 'forms.html#attr-input-required', 'l\'attribut required')}}     | {{Spec2('HTML5 W3C')}}     |
+| {{SpecName('HTML5.1', 'sec-forms.html#the-required-attribute', 'l\'attribut required')}} | {{Spec2('HTML5.1')}}     |
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'forms.html#attr-input-required', 'l\'attribut required')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', 'forms.html#attr-input-required', 'l\'attribut required')}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5.1', 'sec-forms.html#the-required-attribute', 'l\'attribut required')}}</td>
-      <td>{{Spec2('HTML5.1')}}</td>
-    </tr>
-  </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+{{Compat("html.elements.attributes.required")}}
 
-<p>{{Compat("html.elements.attributes.required")}}</p>
+## Voir aussi
 
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li>La propriété <a href="/fr/docs/Web/API/validityState/valueMissing"><code>validityState.valueMissing</code></a></li>
-  <li>Les pseudo-classes <a href="/fr/docs/Web/CSS/:required"><code>:required</code></a> et <a href="/fr/docs/Web/CSS/:optional"><code>:optional</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a></li>
-</ul>
+- La propriété [`validityState.valueMissing`](/fr/docs/Web/API/validityState/valueMissing)
+- Les pseudo-classes [`:required`](/fr/docs/Web/CSS/:required) et [`:optional`](/fr/docs/Web/CSS/:optional)
+- L'élément [`<input>`](/fr/docs/Web/HTML/Element/Input)
+- L'élément [`<select>`](/fr/docs/Web/HTML/Element/select)
diff --git a/files/fr/web/html/attributes/size/index.md b/files/fr/web/html/attributes/size/index.md
index aac800a452..f082e281f3 100644
--- a/files/fr/web/html/attributes/size/index.md
+++ b/files/fr/web/html/attributes/size/index.md
@@ -9,66 +9,52 @@ tags:
   - Select
 translation_of: Web/HTML/Attributes/size
 ---
-<div>{{HTMLSidebar}}</div>
+{{HTMLSidebar}}
 
-<p>L'attribut <strong><code>size</code></strong> définit la largeur de l'élément <a href="/fr/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a> et la hauteur de l'élément <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a>. Pour <code>input</code>, si l'attribut <code>type</code> est <a href="/fr/docs/Web/HTML/Element/input/text"><code>text</code></a> ou <a href="/fr/docs/Web/HTML/Element/input/password"><code>password</code></a> alors c'est le nombre de caractères. Il doit s'agir d'un nombre entier de valeur 0 ou supérieure. Si aucun <code>size</code> n'est spécifié, ou si une valeur invalide est spécifiée, l'entrée n'a pas de taille déclarée, et le contrôle de formulaire aura la largeur par défaut basée sur l'agent utilisateur. Si CSS cible l'élément avec des propriétés ayant un impact sur la largeur, CSS a la priorité.</p>
+L'attribut **`size`** définit la largeur de l'élément [`<input>`](/fr/docs/Web/HTML/Element/input) et la hauteur de l'élément [`<select>`](/fr/docs/Web/HTML/Element/select). Pour `input`, si l'attribut `type` est [`text`](/fr/docs/Web/HTML/Element/input/text) ou [`password`](/fr/docs/Web/HTML/Element/input/password) alors c'est le nombre de caractères. Il doit s'agir d'un nombre entier de valeur 0 ou supérieure. Si aucun `size` n'est spécifié, ou si une valeur invalide est spécifiée, l'entrée n'a pas de taille déclarée, et le contrôle de formulaire aura la largeur par défaut basée sur l'agent utilisateur. Si CSS cible l'élément avec des propriétés ayant un impact sur la largeur, CSS a la priorité.
 
-<p>L'attribut <code>size</code> n'a aucun impact sur la validation des contraintes.</p>
+L'attribut `size` n'a aucun impact sur la validation des contraintes.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>En ajoutant <code>size</code> sur certains types d'entrée, la largeur de l'entrée peut être contrôlée. L'ajout de la taille sur une sélection modifie la hauteur, définissant le nombre d'options visibles à l'état fermé.</p>
+En ajoutant `size` sur certains types d'entrée, la largeur de l'entrée peut être contrôlée. L'ajout de la taille sur une sélection modifie la hauteur, définissant le nombre d'options visibles à l'état fermé.
 
-<pre class="brush: html">&lt;label for="fruit"&gt;Entrez un fruit&lt;/label&gt; &lt;input type="text" size="15" id="fruit"&gt;
-&lt;label for="vegetable"&gt;Entrez un légume&lt;/label&gt; &lt;input type="text" id="vegetable"&gt;
+```html
+<label for="fruit">Entrez un fruit</label> <input type="text" size="15" id="fruit">
+<label for="vegetable">Entrez un légume</label> <input type="text" id="vegetable">
 
-&lt;select name="fruits" size="5"&gt;
-  &lt;option&gt;banane&lt;/option&gt;
-  &lt;option&gt;cerise&lt;/option&gt;
-  &lt;option&gt;fraise&lt;/option&gt;
-  &lt;option&gt;durian&lt;/option&gt;
-  &lt;option&gt;myrtille&lt;/option&gt;
-&lt;/select&gt;
+<select name="fruits" size="5">
+  <option>banane</option>
+  <option>cerise</option>
+  <option>fraise</option>
+  <option>durian</option>
+  <option>myrtille</option>
+</select>
 
-&lt;select name="vegetables" size="5"&gt;
-  &lt;option&gt;carotte&lt;/option&gt;
-  &lt;option&gt;concombre&lt;/option&gt;
-  &lt;option&gt;chou-fleur&lt;/option&gt;
-  &lt;option&gt;céleri&lt;/option&gt;
-  &lt;option&gt;feuilles de collard&lt;/option&gt;
-&lt;/select&gt;</pre>
+<select name="vegetables" size="5">
+  <option>carotte</option>
+  <option>concombre</option>
+  <option>chou-fleur</option>
+  <option>céleri</option>
+  <option>feuilles de collard</option>
+</select>
+```
 
-<p>{{EmbedLiveSample('examples')}}</p>
+{{EmbedLiveSample('examples')}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'input.html#attr-input-size', 'size attribute')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5.1', 'input.html#attr-size-accept', 'size attribute')}}</td>
-      <td>{{Spec2('HTML5.1')}}</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                        | Statut                           |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'input.html#attr-input-size', 'size attribute')}} | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5.1', 'input.html#attr-size-accept', 'size attribute')}}     | {{Spec2('HTML5.1')}}     |
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.attribute.size")}}</p>
+{{Compat("html.elements.attribute.size")}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/maxlength"><code>maxlength</code></a></li>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a></li>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a></li>
-</ul>
+- L'attribut [`maxlength`](/fr/docs/Web/HTML/Attributes/maxlength)
+- L'attribut [`minlength`](/fr/docs/Web/HTML/Attributes/minlength)
+- L'attribut [`pattern`](/fr/docs/Web/HTML/Attributes/pattern)
diff --git a/files/fr/web/html/attributes/step/index.md b/files/fr/web/html/attributes/step/index.md
index c87e0ddc44..47ed3ebe25 100644
--- a/files/fr/web/html/attributes/step/index.md
+++ b/files/fr/web/html/attributes/step/index.md
@@ -10,18 +10,20 @@ tags:
   - step
 translation_of: Web/HTML/Attributes/step
 ---
-<div>{{HTMLSidebar}}</div>
+{{HTMLSidebar}}
 
-<p>L'attribut <strong><code>step</code></strong> est un nombre qui indique l'incrément que la valeur doit suivre ou le mot-clé <code>any</code>. Il est valable pour les types de saisie numérique, notamment les <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>.</p>
+L'attribut **`step`** est un nombre qui indique l'incrément que la valeur doit suivre ou le mot-clé `any`. Il est valable pour les types de saisie numérique, notamment les [`date`](/fr/docs/Web/HTML/Element/Input/date), [`month`](/fr/docs/Web/HTML/Element/Input/month), [`week`](/fr/docs/Web/HTML/Element/Input/week), [`time`](/fr/docs/Web/HTML/Element/Input/time), [`datetime-local`](/fr/docs/Web/HTML/Element/Input/datetime-local), [`number`](/fr/docs/Web/HTML/Element/Input/number) et [`range`](/fr/docs/Web/HTML/Element/Input/range).
 
-<p><code>step</code> définit l'incrément obtenu lors du clic sur les boutons déroulants haut et bas, du déplacement d'un curseur vers la gauche et la droite sur une plage, et de la validation des différents types de date. S'il n'est pas explicitement inclus, <code>step</code> prend par défaut la valeur 1 pour <code>number</code> et <code>range</code>, et 1 type d'unité (minute, semaine, mois, jour) pour les types d'entrée date/heure. La valeur doit être un nombre positif - entier ou flottant - ou la valeur spéciale <code>any</code>, ce qui signifie qu'aucun incrément n'est impliqué et que toute valeur est autorisée (sauf autres contraintes, comme <a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a> et <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a>).</p>
+`step` définit l'incrément obtenu lors du clic sur les boutons déroulants haut et bas, du déplacement d'un curseur vers la gauche et la droite sur une plage, et de la validation des différents types de date. S'il n'est pas explicitement inclus, `step` prend par défaut la valeur 1 pour `number` et `range`, et 1 type d'unité (minute, semaine, mois, jour) pour les types d'entrée date/heure. La valeur doit être un nombre positif - entier ou flottant - ou la valeur spéciale `any`, ce qui signifie qu'aucun incrément n'est impliqué et que toute valeur est autorisée (sauf autres contraintes, comme [`min`](/fr/docs/Web/HTML/Attributes/min) et [`max`](/fr/docs/Web/HTML/Attributes/max)).
 
-<p>La valeur des incréments par défaut pour les entrées <code>number</code> est 1, ce qui permet de ne saisir que des nombres entiers, <em>à moins que</em> la valeur initiale ne soit pas un nombre entier. La valeur de pas par défaut pour les entrées <code>time</code> est de 1 seconde, 900 étant égal à 15 minutes.</p>
+La valeur des incréments par défaut pour les entrées `number` est 1, ce qui permet de ne saisir que des nombres entiers, _à moins que_ la valeur initiale ne soit pas un nombre entier. La valeur de pas par défaut pour les entrées `time` est de 1 seconde, 900 étant égal à 15 minutes.
 
-<h2 id="syntax">Syntaxe</h2>
+## Syntaxe
 
 <table class="standard-table">
-  <caption>Valeurs d'incrémentation par défaut</caption>
+  <caption>
+    Valeurs d'incrémentation par défaut
+  </caption>
   <thead>
     <tr>
       <th scope="col">Type d'entrée</th>
@@ -31,103 +33,133 @@ translation_of: Web/HTML/Attributes/step
   </thead>
   <tbody>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>
+      </td>
       <td>1 (jour)</td>
-      <td><pre class="brush: html">&lt;input type="date" min="2019-12-25" step="1"&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="date" min="2019-12-25" step="1"></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>
+      </td>
       <td>1 (mois)</td>
-      <td><pre class="brush: html">&lt;input type="month" min="2019-12" step="12"&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="month" min="2019-12" step="12"></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>
+      </td>
       <td>1 (semaine)</td>
-      <td><pre class="brush: html">&lt;input type="week" min="2019-W23" step="2"&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="week" min="2019-W23" step="2"></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>
+      </td>
       <td>60 (secondes)</td>
-      <td><pre class="brush: html">&lt;input type="time" min="09:00" step="900"&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="time" min="09:00" step="900"></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"
+          ><code>datetime-local</code></a
+        >
+      </td>
       <td>1 (jour)</td>
-      <td><pre class="brush: html">&lt;input type="datetime-local" min="019-12-25T19:30" step="7"&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="datetime-local" min="019-12-25T19:30" step="7"></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a>
+      </td>
       <td>1</td>
-      <td><pre class="brush: html">&lt;input type="number" min="0" step="0.1" max="10"&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="number" min="0" step="0.1" max="10"></pre
+        >
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>
+      </td>
       <td>1</td>
-      <td><pre class="brush: html">&lt;input type="range" min="0" step="2" max="10"&gt;</pre></td>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="range" min="0" step="2" max="10"></pre
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<p>Si <code>any</code> n'est pas explicitement défini, les valeurs valides pour les types de saisie <code>number</code>, date/heure, et les types d'entrée <code>range</code> sont égales à la base du pas — la valeur <a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a> et les incréments de la valeur du pas, jusqu'à la valeur <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a>, si spécifiée. Par exemple, si on a <code>&lt;input type="number" min="10" step="2"&gt;</code> tout entier pair, 10 ou grand, est valide. S'il est omis, <code>&lt;input type="number"&gt;</code>, tout entier est valide, mais les flottants, comme <code>4,2</code>, ne le sont pas, car <code>step</code> est par défaut à 1. Pour que <code>4,2</code> soit valide, <code>step</code> aurait dû être défini à <code>any</code>, <code>0,1</code>, <code>0,2</code>, et la valeur min aurait dû être un nombre se terminant par .2, comme <code>&lt;input type="number" min="-5.2"&gt;</code>.</p>
+Si `any` n'est pas explicitement défini, les valeurs valides pour les types de saisie `number`, date/heure, et les types d'entrée `range` sont égales à la base du pas — la valeur [`min`](/fr/docs/Web/HTML/Attributes/min) et les incréments de la valeur du pas, jusqu'à la valeur [`max`](/fr/docs/Web/HTML/Attributes/max), si spécifiée. Par exemple, si on a `<input type="number" min="10" step="2">` tout entier pair, 10 ou grand, est valide. S'il est omis, `<input type="number">`, tout entier est valide, mais les flottants, comme `4,2`, ne le sont pas, car `step` est par défaut à 1. Pour que `4,2` soit valide, `step` aurait dû être défini à `any`, `0,1`, `0,2`, et la valeur min aurait dû être un nombre se terminant par .2, comme `<input type="number" min="-5.2">`.
 
-<h3 id="min_impact_on_step">L'impact de min sur step</h3>
+### L'impact de min sur step
 
-<p>Les valeurs de <code>min</code> et <code>step</code> définissent ce que sont les valeurs valides, même si l'attribut <code>step</code> n'est pas inclus, car <code>step</code> a par défaut la valeur <code>0</code>.</p>
+Les valeurs de `min` et `step` définissent ce que sont les valeurs valides, même si l'attribut `step` n'est pas inclus, car `step` a par défaut la valeur `0`.
 
-<p>Nous ajoutons une grande bordure rouge autour des entrées invalides :</p>
+Nous ajoutons une grande bordure rouge autour des entrées invalides :
 
-<pre class="brush: css">input:invalid {
+```css
+input:invalid {
   border: solid red 3px;
-}</pre>
+}
+```
 
-<p>Nous définissons ensuite un champ avec une valeur minimale de 7,2, en omettant l'attribut "step", qui a la valeur 1 par défaut.</p>
+Nous définissons ensuite un champ avec une valeur minimale de 7,2, en omettant l'attribut "step", qui a la valeur 1 par défaut.
 
-<pre class="brush: html">&lt;input id="myNumber" name="myNumber" type="number" step="2" min="1.2"&gt;</pre>
+```html
+<input id="myNumber" name="myNumber" type="number" step="2" min="1.2">
+```
 
-<p>Les valeurs valides comprennent <code>1,2</code>, <code>3,2</code>, <code>5,2</code>, <code>7,2</code>, <code>9,2</code>, <code>11,2</code>, et ainsi de suite. Les nombres entiers et les nombres pairs suivis de .2 ne sont pas valides. Comme nous avons inclus une valeur non valide, les navigateurs qui prennent en charge cette valeur l'afficheront comme non valide. Le compteur de nombres, s'il est présent, n'affichera que les valeurs flottantes valides de <code>1,2</code> et plus.</p>
+Les valeurs valides comprennent `1,2`, `3,2`, `5,2`, `7,2`, `9,2`, `11,2`, et ainsi de suite. Les nombres entiers et les nombres pairs suivis de .2 ne sont pas valides. Comme nous avons inclus une valeur non valide, les navigateurs qui prennent en charge cette valeur l'afficheront comme non valide. Le compteur de nombres, s'il est présent, n'affichera que les valeurs flottantes valides de `1,2` et plus.
 
-<div>{{EmbedLiveSample("min_impact_on_step","",50)}}</div>
+{{EmbedLiveSample("min_impact_on_step","",50)}}
 
-<div class="note">
-  <p><strong>Note :</strong>Lorsque les données saisies par l'utilisateur ne respectent pas la configuration indiquée par l'incrément, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudoclasses <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> et <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>.</p>
-</div>
+> **Note :**Lorsque les données saisies par l'utilisateur ne respectent pas la configuration indiquée par l'incrément, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudoclasses [`:invalid`](/fr/docs/Web/CSS/:invalid) et [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range).
 
-<p>Voir <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation côté client</a> et <a href="/fr/docs/Web/API/ValidityState/stepMismatch"><code>stepMismatch</code></a> pour plus d'informations.</p>
+Voir [Validation côté client](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) et [`stepMismatch`](/fr/docs/Web/API/ValidityState/stepMismatch) pour plus d'informations.
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut <code>min</code>, assurez-vous que cette exigence minimale est comprise par l'utilisateur. Fournir des instructions dans l'élément <a href="/fr/docs/Web/HTML/Element/Label"><code>&lt;label&gt;</code></a> peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus souples, envisagez d'utiliser <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute"><code>aria-labelledby</code></a> ou <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute"><code>aria-describedby</code></a>.</p>
+Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut `min`, assurez-vous que cette exigence minimale est comprise par l'utilisateur. Fournir des instructions dans l'élément [`<label>`](/fr/docs/Web/HTML/Element/Label) peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus souples, envisagez d'utiliser [`aria-labelledby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) ou [`aria-describedby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'input.html#the-step-attribute', 'l\'attribut step')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', 'input.html#the-step-attribute', 'l\'attribut step')}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                                | Statut                           |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- |
+| {{SpecName('HTML WHATWG', 'input.html#the-step-attribute', 'l\'attribut step')}} | {{Spec2('HTML WHATWG')}} |
+| {{SpecName('HTML5 W3C', 'input.html#the-step-attribute', 'l\'attribut step')}}     | {{Spec2('HTML5 W3C')}}     |
+
+## Voir aussi
 
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a></li>
-  <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a></li>
-  <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation des contraintes</a></li>
-  <li>L'API <a href="/fr/docs/Web/API/Constraint_validation">Constraint validation</a></li>
-  <li>La propriété <a href="/fr/docs/Web/API/validityState/stepMismatch"><code>validityState.stepMismatch</code></a></li>
-  <li>La pseudo-classe <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></li>
-  <li>Les types <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>, ainsi que l'élément <a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a></li>
-</ul>
+- L'attribut [`max`](/fr/docs/Web/HTML/Attributes/max)
+- L'attribut [`min`](/fr/docs/Web/HTML/Attributes/min)
+- [Validation des contraintes](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation)
+- L'API [Constraint validation](/fr/docs/Web/API/Constraint_validation)
+- La propriété [`validityState.stepMismatch`](/fr/docs/Web/API/validityState/stepMismatch)
+- La pseudo-classe [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range)
+- L'élément [`<input>`](/fr/docs/Web/HTML/Element/Input)
+- Les types [`date`](/fr/docs/Web/HTML/Element/Input/date), [`month`](/fr/docs/Web/HTML/Element/Input/month), [`week`](/fr/docs/Web/HTML/Element/Input/week), [`time`](/fr/docs/Web/HTML/Element/Input/time), [`datetime-local`](/fr/docs/Web/HTML/Element/Input/datetime-local), [`number`](/fr/docs/Web/HTML/Element/Input/number) et [`range`](/fr/docs/Web/HTML/Element/Input/range), ainsi que l'élément [`<meter>`](/fr/docs/Web/HTML/Element/Meter)
diff --git a/files/fr/web/html/block-level_elements/index.md b/files/fr/web/html/block-level_elements/index.md
index 7b1944d421..30365d9044 100644
--- a/files/fr/web/html/block-level_elements/index.md
+++ b/files/fr/web/html/block-level_elements/index.md
@@ -11,118 +11,113 @@ tags:
 translation_of: Web/HTML/Block-level_elements
 original_slug: Web/HTML/Éléments_en_bloc
 ---
-<p>Les éléments HTML (<strong>Hypertext Markup Language</strong>) étaient historiquement catégorisés comme des éléments de type "block" ou de type "inline". Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans la <a href="/fr/docs/Web/CSS/CSS_Flow_Layout">disposition en flux</a>. Un élément de type bloc occupe tout l'espace horizontal de son élément parent (conteneur), et un espace vertical égal à la hauteur de son contenu, créant ainsi un bloc. Dans cet article, nous examinerons les éléments HTML de type bloc et comment ils diffèrent des <a href="/fr/docs/Web/HTML/Inline_elements">éléments en ligne</a>.</p>
+Les éléments HTML (**Hypertext Markup Language**) étaient historiquement catégorisés comme des éléments de type "block" ou de type "inline". Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans la [disposition en flux](/fr/docs/Web/CSS/CSS_Flow_Layout). Un élément de type bloc occupe tout l'espace horizontal de son élément parent (conteneur), et un espace vertical égal à la hauteur de son contenu, créant ainsi un bloc. Dans cet article, nous examinerons les éléments HTML de type bloc et comment ils diffèrent des [éléments en ligne](/fr/docs/Web/HTML/Inline_elements).
 
-<p>Les navigateurs affichent généralement un élément de type bloc avec une nouvelle ligne avant et après l'élément. Vous pouvez les visualiser comme une pile de boîtes.</p>
+Les navigateurs affichent généralement un élément de type bloc avec une nouvelle ligne avant et après l'élément. Vous pouvez les visualiser comme une pile de boîtes.
 
-<div class="note">
-  <p><strong>Note :</strong> Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).</p>
-</div>
+> **Note :** Un élément de bloc commence toujours sur une nouvelle ligne et prend toute la largeur disponible (autrement dit, il s'étend le plus possible vers la droite et vers la gauche).
 
-<h2 id="Block-level_Example">Éléments de type bloc</h2>
+## Éléments de type bloc
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Ce paragraphe est un élément de bloc.
-Son fond a été coloré pour illustrer son conteneur.&lt;/p&gt;</pre>
+```html
+<p>Ce paragraphe est un élément de bloc.
+Son fond a été coloré pour illustrer son conteneur.</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p {
+```css
+p {
   background-color: #8ABB55;
-}</pre>
-
-<h3 id="Result">Résultat</h3>
-
-<p>{{EmbedLiveSample('Block-level_Example','100%',100)}}</p>
-
-<h2 id="Usage">Utilisation</h2>
-
-<p>Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément <a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a>.</p>
-
-<h2 id="Block-level_vs_inline">Éléments blocs vs éléments en ligne</h2>
-
-<p>Les éléments de bloc diffèrent des éléments en ligne par :</p>
-
-<dl>
-  <dt>La mise en forme par défaut</dt>
-  <dd>Par défaut, les éléments de bloc commencent sur des nouvelles lignes.</dd>
-  <dt>Le modèle de contenu</dt>
-  <dd>De façon générale, les éléments de bloc peuvent contenir des éléments en ligne et d'autres éléments de bloc. L'idée structurelle sous-jacente est que les éléments de bloc créent de plus grandes structures que les éléments en ligne.</dd>
-</dl>
-
-<p>La distinction entre bloc et ligne est utilisée dans les spécifications HTML jusqu'à la version 4.01. En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de <a href="/fr/docs/Web/Guide/HTML/Content_categories">catégories de contenu</a>. La catégorie des éléments en bloc correspond approximativement à la catégorie de <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu de flux</a> en HTML5, celle des éléments en ligne correspond à la catégorie de <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu phrasé</a>. Il y a également d'autres catégories (<a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">le contenu interactif</a> par exemple).</p>
-
-<h2 id="Elements">Éléments</h2>
-
-<p>La liste qui suit contient tous les éléments HTML de type bloc (cette catégorie n'est pas strictement applicable pour les éléments apparus avec HTML5).</p>
-
-<dl>
-  <dt><a href="/fr/docs/Web/HTML/Element/address"><code>&lt;address&gt;</code></a></dt>
-  <dd>Information de contact.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a></dt>
-  <dd>Contenu d'un article.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/aside"><code>&lt;aside&gt;</code></a></dt>
-  <dd>Contenu tangentiel.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/blockquote"><code>&lt;blockquote&gt;</code></a></dt>
-  <dd>Long bloc de citation.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/details"><code>&lt;details&gt;</code></a></dt>
-  <dd>Outil permettant de révéler des informations sur la page.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/dialog"><code>&lt;dialog&gt;</code></a></dt>
-  <dd>Boîte de dialogue.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/dd"><code>&lt;dd&gt;</code></a></dt>
-  <dd>Description d'une définition.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a></dt>
-  <dd>Division d'un document.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a></dt>
-  <dd>Liste de définitions.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/dt"><code>&lt;dt&gt;</code></a></dt>
-  <dd>Définition/description d'un terme.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/Fieldset"><code>&lt;fieldset&gt;</code></a></dt>
-  <dd>Ensemble de champs.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a></dt>
-  <dd>Légende d'une image.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/figure"><code>&lt;figure&gt;</code></a></dt>
-  <dd>Permet de grouper des médias avec une légende (voir <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a>).</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/footer"><code>&lt;footer&gt;</code></a></dt>
-  <dd>Bas de page ou de section.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></dt>
-  <dd>Formulaire.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h1&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h2&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h3&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h4&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h5&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h6&gt;</code></a></dt>
-  <dd>Éléments de titre de niveau 1 à 6.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/header"><code>&lt;header&gt;</code></a></dt>
-  <dd>En-tête de page ou de section.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/hgroup"><code>&lt;hgroup&gt;</code></a></dt>
-  <dd>Information d'en-tête de groupe.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/hr"><code>&lt;hr&gt;</code></a></dt>
-  <dd>Ligne de division horizontale.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/li"><code>&lt;li&gt;</code></a></dt>
-  <dd>Élément d'une liste.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/main"><code>&lt;main&gt;</code></a></dt>
-  <dd>Contient le contenu central unique au document.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/nav"><code>&lt;nav&gt;</code></a></dt>
-  <dd>Contient des liens de navigation.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/ol"><code>&lt;ol&gt;</code></a></dt>
-  <dd>Liste ordonnée.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/p"><code>&lt;p&gt;</code></a></dt>
-  <dd>Paragraphe.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/pre"><code>&lt;pre&gt;</code></a></dt>
-  <dd>Texte pré-formaté.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a></dt>
-  <dd>Section d'une page web.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a></dt>
-  <dd>Tableau.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a></dt>
-  <dd>Liste non-ordonnée.</dd>
-</dl>
-
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/HTML/Inline_elements">Les éléments en ligne</a></li>
-  <li><a href="/fr/docs/Web/CSS/display"><code>display</code></a></li>
-  <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Les éléments de bloc et les éléments en ligne dans le flux normal</a></li>
-</ul>
-
-<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}</div>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample('Block-level_Example','100%',100)}}
+
+## Utilisation
+
+Les éléments de bloc ne peuvent apparaître qu'au sein d'un élément [`<body>`](/fr/docs/Web/HTML/Element/body).
+
+## Éléments blocs vs éléments en ligne
+
+Les éléments de bloc diffèrent des éléments en ligne par :
+
+- La mise en forme par défaut
+  - : Par défaut, les éléments de bloc commencent sur des nouvelles lignes.
+- Le modèle de contenu
+  - : De façon générale, les éléments de bloc peuvent contenir des éléments en ligne et d'autres éléments de bloc. L'idée structurelle sous-jacente est que les éléments de bloc créent de plus grandes structures que les éléments en ligne.
+
+La distinction entre bloc et ligne est utilisée dans les spécifications HTML jusqu'à la version 4.01. En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de [catégories de contenu](/fr/docs/Web/Guide/HTML/Content_categories). La catégorie des éléments en bloc correspond approximativement à la catégorie de [contenu de flux](/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content) en HTML5, celle des éléments en ligne correspond à la catégorie de [contenu phrasé](/fr/docs/Web/Guide/HTML/Content_categories#flow_content). Il y a également d'autres catégories ([le contenu interactif](/fr/docs/Web/Guide/HTML/Content_categories#interactive_content) par exemple).
+
+## Éléments
+
+La liste qui suit contient tous les éléments HTML de type bloc (cette catégorie n'est pas strictement applicable pour les éléments apparus avec HTML5).
+
+- [`<address>`](/fr/docs/Web/HTML/Element/address)
+  - : Information de contact.
+- [`<article>`](/fr/docs/Web/HTML/Element/article)
+  - : Contenu d'un article.
+- [`<aside>`](/fr/docs/Web/HTML/Element/aside)
+  - : Contenu tangentiel.
+- [`<blockquote>`](/fr/docs/Web/HTML/Element/blockquote)
+  - : Long bloc de citation.
+- [`<details>`](/fr/docs/Web/HTML/Element/details)
+  - : Outil permettant de révéler des informations sur la page.
+- [`<dialog>`](/fr/docs/Web/HTML/Element/dialog)
+  - : Boîte de dialogue.
+- [`<dd>`](/fr/docs/Web/HTML/Element/dd)
+  - : Description d'une définition.
+- [`<div>`](/fr/docs/Web/HTML/Element/div)
+  - : Division d'un document.
+- [`<dl>`](/fr/docs/Web/HTML/Element/dl)
+  - : Liste de définitions.
+- [`<dt>`](/fr/docs/Web/HTML/Element/dt)
+  - : Définition/description d'un terme.
+- [`<fieldset>`](/fr/docs/Web/HTML/Element/Fieldset)
+  - : Ensemble de champs.
+- [`<figcaption>`](/fr/docs/Web/HTML/Element/figcaption)
+  - : Légende d'une image.
+- [`<figure>`](/fr/docs/Web/HTML/Element/figure)
+  - : Permet de grouper des médias avec une légende (voir [`<figcaption>`](/fr/docs/Web/HTML/Element/figcaption)).
+- [`<footer>`](/fr/docs/Web/HTML/Element/footer)
+  - : Bas de page ou de section.
+- [`<form>`](/fr/docs/Web/HTML/Element/Form)
+  - : Formulaire.
+- [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h2>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h3>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h4>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h5>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements)
+  - : Éléments de titre de niveau 1 à 6.
+- [`<header>`](/fr/docs/Web/HTML/Element/header)
+  - : En-tête de page ou de section.
+- [`<hgroup>`](/fr/docs/Web/HTML/Element/hgroup)
+  - : Information d'en-tête de groupe.
+- [`<hr>`](/fr/docs/Web/HTML/Element/hr)
+  - : Ligne de division horizontale.
+- [`<li>`](/fr/docs/Web/HTML/Element/li)
+  - : Élément d'une liste.
+- [`<main>`](/fr/docs/Web/HTML/Element/main)
+  - : Contient le contenu central unique au document.
+- [`<nav>`](/fr/docs/Web/HTML/Element/nav)
+  - : Contient des liens de navigation.
+- [`<ol>`](/fr/docs/Web/HTML/Element/ol)
+  - : Liste ordonnée.
+- [`<p>`](/fr/docs/Web/HTML/Element/p)
+  - : Paragraphe.
+- [`<pre>`](/fr/docs/Web/HTML/Element/pre)
+  - : Texte pré-formaté.
+- [`<section>`](/fr/docs/Web/HTML/Element/section)
+  - : Section d'une page web.
+- [`<table>`](/fr/docs/Web/HTML/Element/table)
+  - : Tableau.
+- [`<ul>`](/fr/docs/Web/HTML/Element/ul)
+  - : Liste non-ordonnée.
+
+## Voir aussi
+
+- [Les éléments en ligne](/fr/docs/Web/HTML/Inline_elements)
+- [`display`](/fr/docs/Web/CSS/display)
+- [Les éléments de bloc et les éléments en ligne dans le flux normal](/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow)
+
+{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}
diff --git a/files/fr/web/html/cors_enabled_image/index.md b/files/fr/web/html/cors_enabled_image/index.md
index 0e839a8c73..793798335f 100644
--- a/files/fr/web/html/cors_enabled_image/index.md
+++ b/files/fr/web/html/cors_enabled_image/index.md
@@ -14,79 +14,82 @@ tags:
 translation_of: Web/HTML/CORS_enabled_image
 original_slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP
 ---
-<p>HTML permet d'utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Img#attr-crossorigin"><code>crossorigin</code></a> sur les images. Utilisé avec un en-tête <a href="/fr/docs/Glossary/CORS">CORS</a> adéquat, les images définies par <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a> provenant d'origines étrangères pourront être utilisées au sein d'un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> comme si elles avaient été chargées depuis l'origine courante.</p>
+HTML permet d'utiliser l'attribut [`crossorigin`](/fr/docs/Web/HTML/Element/Img#attr-crossorigin) sur les images. Utilisé avec un en-tête [CORS](/fr/docs/Glossary/CORS) adéquat, les images définies par [`<img>`](/fr/docs/Web/HTML/Element/Img) provenant d'origines étrangères pourront être utilisées au sein d'un élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) comme si elles avaient été chargées depuis l'origine courante.
 
-<p>Pour plus de détails sur l'attribut <code>crossorigin</code>, voir <a href="/fr/docs/Web/HTML/Attributes/crossorigin">les attributs de paramétrage du CORS</a>.</p>
+Pour plus de détails sur l'attribut `crossorigin`, voir [les attributs de paramétrage du CORS](/fr/docs/Web/HTML/Attributes/crossorigin).
 
-<h2 id="Security_and_tainted_canvases">Canevas corrompu et sécurité</h2>
+## Canevas corrompu et sécurité
 
-<p>Les pixels composant un canevas pouvant venir de différentes sources, notamment d'images ou de vidéos récupérées depuis des hôtes tiers, il est nécessaire de se prémunir contre certains problèmes de sécurité.</p>
+Les pixels composant un canevas pouvant venir de différentes sources, notamment d'images ou de vidéos récupérées depuis des hôtes tiers, il est nécessaire de se prémunir contre certains problèmes de sécurité.
 
-<p>Dès que des données sont chargées dans le canevas depuis une autre origine sans avoir été « approuvées » par le CORS, le canevas devient <strong>corrompu</strong> (<i>tainted</i>). Dès qu'un canevas est corrompu, il n'est plus considéré comme sécurisé et toute tentative de récupérer des données depuis les données de l'image résultera en une exception.</p>
+Dès que des données sont chargées dans le canevas depuis une autre origine sans avoir été « approuvées » par le CORS, le canevas devient **corrompu** (_tainted_). Dès qu'un canevas est corrompu, il n'est plus considéré comme sécurisé et toute tentative de récupérer des données depuis les données de l'image résultera en une exception.
 
-<p>Si la source du contenu tiers est un élément HTML <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a> ou SVG <a href="/fr/docs/Web/SVG/Element/svg"><code>&lt;svg&gt;</code></a>, il n'est plus permis de récupérer le contenu du canevas.</p>
+Si la source du contenu tiers est un élément HTML [`<img>`](/fr/docs/Web/HTML/Element/Img) ou SVG [`<svg>`](/fr/docs/Web/SVG/Element/svg), il n'est plus permis de récupérer le contenu du canevas.
 
-<p>Si la source du contenu tiers est une image obtenue à partir d'un <a href="/fr/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a> ou d'une <a href="/fr/docs/Web/API/ImageBitMap"><code>ImageBitMap</code></a> et que la source de l'image ne respecte pas les règles quant à l'unicité de l'origine, il ne sera pas possible de lire le contenu du canevas.</p>
+Si la source du contenu tiers est une image obtenue à partir d'un [`HTMLCanvasElement`](/fr/docs/Web/API/HTMLCanvasElement) ou d'une [`ImageBitMap`](/fr/docs/Web/API/ImageBitMap) et que la source de l'image ne respecte pas les règles quant à l'unicité de l'origine, il ne sera pas possible de lire le contenu du canevas.
 
-<p>Appeler l'une des méthodes suivantes sur un canevas corrompu déclenchera une erreur :</p>
+Appeler l'une des méthodes suivantes sur un canevas corrompu déclenchera une erreur :
 
-<ul>
- <li><a href="/fr/docs/Web/API/CanvasRenderingContext2D/getImageData"><code>getImageData()</code></a> sur le contexte du canevas</li>
- <li><a href="/fr/docs/Web/API/HTMLCanvasElement/toBlob"><code>toBlob()</code></a> sur l'élément <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a></li>
- <li><a href="/fr/docs/Web/API/HTMLCanvasElement/toDataURL"><code>toDataURL()</code></a> sur le canevas</li>
-</ul>
+- [`getImageData()`](/fr/docs/Web/API/CanvasRenderingContext2D/getImageData) sur le contexte du canevas
+- [`toBlob()`](/fr/docs/Web/API/HTMLCanvasElement/toBlob) sur l'élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas)
+- [`toDataURL()`](/fr/docs/Web/API/HTMLCanvasElement/toDataURL) sur le canevas
 
-<p>L'exception levée par de tels appels sera une exception <code>SecurityError</code>. Cette mesure protège les utilisateurs contre l'exposition de données privées via des images provenant de sites tiers sans permission.</p>
+L'exception levée par de tels appels sera une exception `SecurityError`. Cette mesure protège les utilisateurs contre l'exposition de données privées via des images provenant de sites tiers sans permission.
 
-<h2 id="Storing_an_image_from_a_foreign_origin">Stocker une image provenant d'une origine tierce</h2>
+## Stocker une image provenant d'une origine tierce
 
-<p>Dans cet exemple, on souhaite autoriser la récupération et l'enregistrement d'images provenant d'une autre origine. Pour parvenir à ce résultat, il faudra configurer le serveur et également écrire du code pour le site web.</p>
+Dans cet exemple, on souhaite autoriser la récupération et l'enregistrement d'images provenant d'une autre origine. Pour parvenir à ce résultat, il faudra configurer le serveur et également écrire du code pour le site web.
 
-<h3 id="Web_server_configuration">Configuration serveur</h3>
+### Configuration serveur
 
-<p>Pour commencer, configurons le serveur stockant les images avec un en-tête <a href="/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a> qui permet un accès multi-origines aux fichiers images.</p>
+Pour commencer, configurons le serveur stockant les images avec un en-tête [`Access-Control-Allow-Origin`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) qui permet un accès multi-origines aux fichiers images.
 
-<p>Dans la suite de cet exemple, on prendra le cas d'un site est servi via <a href="https://httpd.apache.org/">Apache</a>. On pourra utiliser le fragment <a href="https://github.com/h5bp/server-configs-apache/blob/master/h5bp/cross-origin/images.conf">de configuration serveur Apache pour les images CORS</a> :</p>
+Dans la suite de cet exemple, on prendra le cas d'un site est servi via [Apache](https://httpd.apache.org/). On pourra utiliser le fragment [de configuration serveur Apache pour les images CORS](https://github.com/h5bp/server-configs-apache/blob/master/h5bp/cross-origin/images.conf) :
 
-<pre class="brush: xml">&lt;IfModule mod_setenvif.c&gt;
-  &lt;IfModule mod_headers.c&gt;
-    &lt;FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$"&gt;
+```xml
+<IfModule mod_setenvif.c>
+  <IfModule mod_headers.c>
+    <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$">
       SetEnvIf Origin ":" IS_CORS
       Header set Access-Control-Allow-Origin "*" env=IS_CORS
-    &lt;/FilesMatch&gt;
-  &lt;/IfModule&gt;
-&lt;/IfModule&gt;</pre>
+    </FilesMatch>
+  </IfModule>
+</IfModule>
+```
 
-<p>Pour résumer, cela permet de configurer le serveur afin de pouvoir accéder aux fichiers graphiques (ceux avec les extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") depuis d'autres origines, d'où qu'elles soient sur Internet.</p>
+Pour résumer, cela permet de configurer le serveur afin de pouvoir accéder aux fichiers graphiques (ceux avec les extensions ".bmp", ".cur", ".gif", ".ico", ".jpg", ".jpeg", ".png", ".svg", ".svgz", and ".webp") depuis d'autres origines, d'où qu'elles soient sur Internet.
 
-<h3 id="Implementing_the_save_feature">Implémenter l'enregistrement</h3>
+### Implémenter l'enregistrement
 
-<p>Maintenant que le serveur est configuré pour permettre la récupération d'image depuis plusieurs origines, on peut écrire le code qui permet à l'utilisateur d'enregistrer les images <a href="/fr/docs/Web/API/Web_Storage_API">en stockage local</a> comme si elles étaient servies depuis le même domaine que le code.</p>
+Maintenant que le serveur est configuré pour permettre la récupération d'image depuis plusieurs origines, on peut écrire le code qui permet à l'utilisateur d'enregistrer les images [en stockage local](/fr/docs/Web/API/Web_Storage_API) comme si elles étaient servies depuis le même domaine que le code.
 
-<p>Pour cela, on utilise l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-crossorigin"><code>crossorigin</code></a> en définissant <a href="/fr/docs/Web/API/HTMLImageElement/crossOrigin"><code>crossOrigin</code></a> sur l'élément <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a> sur lequel l'image sera chargée. Ainsi, on indique au navigateur de demander un accès multi-origine lors du téléchargement de l'image.</p>
+Pour cela, on utilise l'attribut [`crossorigin`](/fr/docs/Web/HTML/Global_attributes#attr-crossorigin) en définissant [`crossOrigin`](/fr/docs/Web/API/HTMLImageElement/crossOrigin) sur l'élément [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement) sur lequel l'image sera chargée. Ainsi, on indique au navigateur de demander un accès multi-origine lors du téléchargement de l'image.
 
-<h4 id="Starting_the_download">Démarrer le téléchargement</h4>
+#### Démarrer le téléchargement
 
-<p>Voici le code qui démarre le téléchargement (déclenché par exemple lorsque l'utilisateur clique sur un bouton « Télécharger ») :</p>
+Voici le code qui démarre le téléchargement (déclenché par exemple lorsque l'utilisateur clique sur un bouton « Télécharger ») :
 
-<pre class="brush: js">function startDownload() {
+```js
+function startDownload() {
   let imageURL = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2Fmdn_logo-only_color.svg?1535749917189";
 
   downloadedImg = new Image;
   downloadedImg.crossOrigin = "Anonymous";
   downloadedImg.addEventListener("load", imageReceived, false);
   downloadedImg.src = imageURL;
-}</pre>
+}
+```
 
-<p>Ici, l'URL de l'image à télécharger est codée en dur mais cette valeur pourrait très bien provenir d'un argument passé à la fonction. Pour démarrer le téléchargement, on crée un nouvel objet <a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a> grâce au constructeur <a href="/fr/docs/Web/API/HTMLImageElement/Image"><code>Image()</code></a>. L'image est ensuite configurée afin de permettre un téléchargement multi-origine grâce à l'attribut <code>crossOrigin</code> paramétré avec <code>"Anonymous"</code> (qui permet le téléchargement, non-authentifié, d'une image multi-origine). Un gestionnaire d'évènement est ajouté afin de réagir à l'évènement <a href="/fr/docs/Web/API/Window/load_event"><code>load</code></a> lorsque l'image a été reçue.</p>
+Ici, l'URL de l'image à télécharger est codée en dur mais cette valeur pourrait très bien provenir d'un argument passé à la fonction. Pour démarrer le téléchargement, on crée un nouvel objet [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement) grâce au constructeur [`Image()`](/fr/docs/Web/API/HTMLImageElement/Image). L'image est ensuite configurée afin de permettre un téléchargement multi-origine grâce à l'attribut `crossOrigin` paramétré avec `"Anonymous"` (qui permet le téléchargement, non-authentifié, d'une image multi-origine). Un gestionnaire d'évènement est ajouté afin de réagir à l'évènement [`load`](/fr/docs/Web/API/Window/load_event) lorsque l'image a été reçue.
 
-<p>Enfin, l'attribut <a href="/fr/docs/Web/API/HTMLImageElement/src"><code>src</code></a> de l'image est défini avec l'URL de l'image à télécharger et le téléchargement démarre.</p>
+Enfin, l'attribut [`src`](/fr/docs/Web/API/HTMLImageElement/src) de l'image est défini avec l'URL de l'image à télécharger et le téléchargement démarre.
 
-<h4 id="Receiving_and_saving_the_image">Recevoir et enregistrer l'image</h4>
+#### Recevoir et enregistrer l'image
 
-<p>Voici le fragment de code exécuté lorsque l'image a été téléchargée :</p>
+Voici le fragment de code exécuté lorsque l'image a été téléchargée :
 
-<pre class="brush: js">function imageReceived() {
+```js
+function imageReceived() {
   let canvas = document.createElement("canvas");
   let context = canvas.getContext("2d");
 
@@ -102,22 +105,21 @@ original_slug: Web/HTML/Images_avec_le_contrôle_d_accès_HTTP
   catch(err) {
     console.log("Error: " + err);
   }
-}</pre>
+}
+```
 
-<p><code>imageReceived()</code> est invoquée lorsque l'évènement <code>"load"</code> est déclenché sur l'élément <code>HTMLImageElement</code> qui reçoit l'image téléchargée. Cet évènement se produit lorsque l'ensemble des données téléchargées est disponible. Cette fonction commence par créer un nouvel élément <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> qui sera utilisé afin de convertir l'image en une URL de donnée. On récupère également un accès au contexte du canevas pour dessiner en 2D (<a href="/fr/docs/Web/API/CanvasRenderingContext2D"><code>CanvasRenderingContext2D</code></a>) dans la variable <code>context</code>.</p>
+`imageReceived()` est invoquée lorsque l'évènement `"load"` est déclenché sur l'élément `HTMLImageElement` qui reçoit l'image téléchargée. Cet évènement se produit lorsque l'ensemble des données téléchargées est disponible. Cette fonction commence par créer un nouvel élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) qui sera utilisé afin de convertir l'image en une URL de donnée. On récupère également un accès au contexte du canevas pour dessiner en 2D ([`CanvasRenderingContext2D`](/fr/docs/Web/API/CanvasRenderingContext2D)) dans la variable `context`.
 
-<p>La taille du canevas est ajustée afin que ses dimensions correspondent à celles de l'image. L'image est ensuite dessinée dans le canevas grâce à <a href="/fr/docs/Web/API/CanvasRenderingContext2D/drawImage"><code>drawImage()</code></a>. Le canevas est alors inséré dans le document et l'image y devient visible.</p>
+La taille du canevas est ajustée afin que ses dimensions correspondent à celles de l'image. L'image est ensuite dessinée dans le canevas grâce à [`drawImage()`](/fr/docs/Web/API/CanvasRenderingContext2D/drawImage). Le canevas est alors inséré dans le document et l'image y devient visible.
 
-<p>Enfin, on enregistre l'image dans le stockage local. Pour cela, on utilise les méthodes de l'API <em>Web Storage</em> en passant par la variable globale <a href="/fr/docs/Web/API/Window/localStorage"><code>localStorage</code></a>. La méthode <a href="/fr/docs/Web/API/HTMLCanvasElement/toDataURL"><code>toDataURL()</code></a> est utilisée afin de convertir l'image en une URL de données représentant une image PNG qui est enregistrée dans l'espace local grâce à la méthode <a href="/fr/docs/Web/API/Storage/setItem"><code>setItem()</code></a>.</p>
+Enfin, on enregistre l'image dans le stockage local. Pour cela, on utilise les méthodes de l'API _Web Storage_ en passant par la variable globale [`localStorage`](/fr/docs/Web/API/Window/localStorage). La méthode [`toDataURL()`](/fr/docs/Web/API/HTMLCanvasElement/toDataURL) est utilisée afin de convertir l'image en une URL de données représentant une image PNG qui est enregistrée dans l'espace local grâce à la méthode [`setItem()`](/fr/docs/Web/API/Storage/setItem).
 
-<p>Vous pouvez <a href="https://cors-image-example.glitch.me/">essayer</a> ou <a href="https://glitch.com/edit/#!/remix/cors-image-example">adapter</a> cet exemple sur Glitch.</p>
+Vous pouvez [essayer](https://cors-image-example.glitch.me/) ou [adapter](https://glitch.com/edit/#!/remix/cors-image-example) cet exemple sur Glitch.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html">Utilisation d'images inter-domaines dans WebGL et Chrome 13</a></li>
-  <li><a class="external" href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-crossorigin">Spécification HTML : l'attribut <code>crossorigin</code></a></li>
-  <li><a href="/fr/docs/Web/API/Web_Storage_API">L'API <em>Web Storage</em></a></li>
-</ul>
+- [Utilisation d'images inter-domaines dans WebGL et Chrome 13](http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html)
+- [Spécification HTML : l'attribut `crossorigin`](https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-crossorigin)
+- [L'API _Web Storage_](/fr/docs/Web/API/Web_Storage_API)
 
-<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}</div>
+{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}
diff --git a/files/fr/web/html/date_and_time_formats/index.md b/files/fr/web/html/date_and_time_formats/index.md
index 95aebbdca4..48353fd7b2 100644
--- a/files/fr/web/html/date_and_time_formats/index.md
+++ b/files/fr/web/html/date_and_time_formats/index.md
@@ -22,27 +22,28 @@ tags:
 translation_of: Web/HTML/Date_and_time_formats
 original_slug: Web/HTML/Formats_date_heure_HTML
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Certains éléments HTML manipulent des valeurs temporelles pour des dates ou des heures. Les formats utilisés pour les chaînes de caractères qui définissent ces valeurs sont décrits dans cet article. Les éléments qui utilisent ces données sont notamment les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> qui permettent de choisir une date, une heure ou les deux, les éléments <a href="/fr/docs/Web/HTML/Element/ins"><code>&lt;ins&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/del"><code>&lt;del&gt;</code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/ins#attr-datetime"><code>ins</code></a> indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.</p>
+Certains éléments HTML manipulent des valeurs temporelles pour des dates ou des heures. Les formats utilisés pour les chaînes de caractères qui définissent ces valeurs sont décrits dans cet article. Les éléments qui utilisent ces données sont notamment les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) qui permettent de choisir une date, une heure ou les deux, les éléments [`<ins>`](/fr/docs/Web/HTML/Element/ins) et [`<del>`](/fr/docs/Web/HTML/Element/del) dont l'attribut [`ins`](/fr/docs/Web/HTML/Element/ins#attr-datetime) indique la date (ou la date et l'heure) à laquelle l'ajout ou la suppression de contenu a eu lieu.
 
-<p>Pour les éléments <code>&lt;input&gt;</code>, voici les différents type (cf. <a href="/fr/docs/Web/HTML/Element/Input#attr-type"><code>input</code></a>) pour lesquels l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-value"><code>value</code></a> contient une chaîne de caractères représentant une date ou une heure :</p>
+Pour les éléments `<input>`, voici les différents type (cf. [`input`](/fr/docs/Web/HTML/Element/Input#attr-type)) pour lesquels l'attribut [`value`](/fr/docs/Web/HTML/Global_attributes#attr-value) contient une chaîne de caractères représentant une date ou une heure :
 
-<ul>
-  <li><a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/Input/datetime"><code>datetime</code></a> {{deprecated_inline}}</li>
-  <li><code><a href="/fr/docs/Web/HTML/Element/Input/datetime-local">datetime-local</a></code></li>
-  <li><a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a></li>
-</ul>
+- [`date`](/fr/docs/Web/HTML/Element/Input/date)
+- [`datetime`](/fr/docs/Web/HTML/Element/Input/datetime) {{deprecated_inline}}
+- [`datetime-local`](/fr/docs/Web/HTML/Element/Input/datetime-local)
+- [`month`](/fr/docs/Web/HTML/Element/Input/month)
+- [`time`](/fr/docs/Web/HTML/Element/Input/time)
+- [`week`](/fr/docs/Web/HTML/Element/Input/week)
 
-<h2 id="Examples">Exemples</h2>
+## Exemples
 
-<p>Avant de détailler plus, voyons quelques exemples de chaînes de caractères utilisées en HTML et qui représentent des valeurs temporelles.</p>
+Avant de détailler plus, voyons quelques exemples de chaînes de caractères utilisées en HTML et qui représentent des valeurs temporelles.
 
 <table class="standard-table">
-  <caption>Exemple de chaînes de caractères utilisées en HTML pour représenter des dates et des heures</caption>
+  <caption>
+    Exemple de chaînes de caractères utilisées en HTML pour représenter des
+    dates et des heures
+  </caption>
   <thead>
     <tr>
       <th scope="col">Chaîne de caractères</th>
@@ -53,84 +54,119 @@ original_slug: Web/HTML/Formats_date_heure_HTML
     <tr>
       <td><code>2005-06-07</code></td>
       <td>7 juin 2005</td>
-      <td><a href="/fr/docs/Web/HTML/Date_and_time_formats#date_strings">[détails]</a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Date_and_time_formats#date_strings"
+          >[détails]</a
+        >
+      </td>
     </tr>
     <tr>
       <td><code>08:45</code></td>
       <td>08h45m (le matin)</td>
-      <td><a href="/fr/docs/Web/HTML/Date_and_time_formats#time_strings">[détails]</a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Date_and_time_formats#time_strings"
+          >[détails]</a
+        >
+      </td>
     </tr>
     <tr>
       <td><code>08:45:25</code></td>
       <td>08h45m25s</td>
-      <td><a href="/fr/docs/Web/HTML/Date_and_time_formats#time_strings">[détails]</a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Date_and_time_formats#time_strings"
+          >[détails]</a
+        >
+      </td>
     </tr>
     <tr>
       <td><code>0033-08-04T03:40</code></td>
       <td>03h40 (du matin), le 04 août 33</td>
-      <td><a href="/fr/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings">[détails]</a></td>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings"
+          >[détails]</a
+        >
+      </td>
     </tr>
     <tr>
       <td><code>1977-04-01T14:00:30</code></td>
       <td>30 secondes après 14h00, le premier avril 1977</td>
-      <td><a href="/fr/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings">[détails]</a></td>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings"
+          >[détails]</a
+        >
+      </td>
     </tr>
     <tr>
       <td><code>1901-01-01T00:00Z</code></td>
       <td>Minuit, UTC, le 1er janvier 1901</td>
-      <td><a href="/fr/docs/Web/HTML/Date_and_time_formats#global_date_and_time_strings">[détails]</a></td>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Date_and_time_formats#global_date_and_time_strings"
+          >[détails]</a
+        >
+      </td>
     </tr>
     <tr>
       <td><code>1901-01-01T00:00:01-04:00</code></td>
-      <td>Minuit passé d'une seconde sur l'heure de l'Est (EST), le 1er janvier 1901</td>
-      <td><a href="/fr/docs/Web/HTML/Date_and_time_formats#global_date_and_time_strings">[détails]</a></td>
+      <td>
+        Minuit passé d'une seconde sur l'heure de l'Est (EST), le 1er janvier
+        1901
+      </td>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Date_and_time_formats#global_date_and_time_strings"
+          >[détails]</a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="Basics">Notions essentielles</h2>
+## Notions essentielles
 
-<p>Avant de s'intéresser aux différents formats pour la représentation textuelle des valeurs temporelles en HTML, commençons par décrire comment ces valeurs sont définies formellement. HTML utilise une variation du standard <a class="external" href="https://fr.wikipedia.org/wiki/ISO_8601">ISO 8601</a> pour les chaînes de caractères représentant les dates et les heures. Il est toujours utile de vérifier que le format utilisé est compatible avec HTML, car la spécification HTML utilise des algorithmes pour analyser ces chaînes qui sont plus précis que le standard ISO 8601 (il peut donc y avoir quelques fines différences).</p>
+Avant de s'intéresser aux différents formats pour la représentation textuelle des valeurs temporelles en HTML, commençons par décrire comment ces valeurs sont définies formellement. HTML utilise une variation du standard [ISO 8601](https://fr.wikipedia.org/wiki/ISO_8601) pour les chaînes de caractères représentant les dates et les heures. Il est toujours utile de vérifier que le format utilisé est compatible avec HTML, car la spécification HTML utilise des algorithmes pour analyser ces chaînes qui sont plus précis que le standard ISO 8601 (il peut donc y avoir quelques fines différences).
 
-<h3 id="Character_set">Jeu de caractères</h3>
+### Jeu de caractères
 
-<p>En HTML, les chaînes qui représentent des dates et des heures manipulent uniquement des caractères <a class="external" href="https://fr.wikipedia.org/wiki/ASCII">ASCII</a>.</p>
+En HTML, les chaînes qui représentent des dates et des heures manipulent uniquement des caractères [ASCII](https://fr.wikipedia.org/wiki/ASCII).
 
-<h3 id="Year_numbers">Numérotation des années</h3>
+### Numérotation des années
 
-<p>La spécification HTML indique que les années doivent être exprimées selon le <a href="https://fr.wikipedia.org/wiki/Calendrier_gr%C3%A9gorien">calendrier grégorien</a>. Bien que les interfaces utilisateur permettent éventuellement de saisir des dates grâce à d'autres calendriers, la valeur sous-jacente est toujours représentée à l'aide du calendrier grégorien.</p>
+La spécification HTML indique que les années doivent être exprimées selon le [calendrier grégorien](https://fr.wikipedia.org/wiki/Calendrier_gr%C3%A9gorien). Bien que les interfaces utilisateur permettent éventuellement de saisir des dates grâce à d'autres calendriers, la valeur sous-jacente est toujours représentée à l'aide du calendrier grégorien.
 
-<p>Bien que le calendrier grégorien ait été créé en 1582 afin de remplacer le calendrier julien, la notation grégorienne est « étendue » en HTML jusqu'à 1 après J.C. Aussi, si vous manipulez des dates antérieures à 1582, assurez-vous qu'elles soient bien exprimées selon le calendrier grégorien.</p>
+Bien que le calendrier grégorien ait été créé en 1582 afin de remplacer le calendrier julien, la notation grégorienne est « étendue » en HTML jusqu'à 1 après J.C. Aussi, si vous manipulez des dates antérieures à 1582, assurez-vous qu'elles soient bien exprimées selon le calendrier grégorien.
 
-<p>En HTML, les années sont toujours écrites avec au moins 4 chiffres. Aussi, les années antérieures à l'an 1000 sont complétées avec des zéros : l'an 72 est donc écrit <code>0072</code>. Les années antérieures à l'an 1 ne sont pas prises en charge par HTML.</p>
+En HTML, les années sont toujours écrites avec au moins 4 chiffres. Aussi, les années antérieures à l'an 1000 sont complétées avec des zéros : l'an 72 est donc écrit `0072`. Les années antérieures à l'an 1 ne sont pas prises en charge par HTML.
 
-<p>Une année est normalement constituée de 365 jours, sauf pendant les <strong><a href="#leap_years">années bissextiles</a></strong>.</p>
+Une année est normalement constituée de 365 jours, sauf pendant les **[années bissextiles](#leap_years)**.
 
-<h4 id="leap_years">Années bissextiles</h4>
+#### Années bissextiles
 
-<p>Une année bissextile est une année dont le numéro est :</p>
+Une année bissextile est une année dont le numéro est :
 
-<ul>
-  <li>Divisible par 400 ou,</li>
-  <li>Divisible par 4 mais pas par 100</li>
-</ul>
+- Divisible par 400 ou,
+- Divisible par 4 mais pas par 100
 
-<p>Bien qu'une année calendaire s'étende sur 365 jours, la Terre met environ 365,2422 jours avant d'effectuer une orbite complète autour du soleil. Les années bissextiles permettent d'ajuster le calendrier et de le synchroniser avec la position de la planète le long de l'orbite. Ajouter un jour tous les 4 ans (environ) permet d'avoir une année moyenne longue de 365,25 jours, ce qui est relativement correct.</p>
+Bien qu'une année calendaire s'étende sur 365 jours, la Terre met environ 365,2422 jours avant d'effectuer une orbite complète autour du soleil. Les années bissextiles permettent d'ajuster le calendrier et de le synchroniser avec la position de la planète le long de l'orbite. Ajouter un jour tous les 4 ans (environ) permet d'avoir une année moyenne longue de 365,25 jours, ce qui est relativement correct.
 
-<p>En ajustant l'algorithme avec les contraintes ci-avant (divisible par 400 ou divisible par 4 mais pas par 100), on s'approche plus précisément du nombre correct de jours (365,2425). Des secondes intercalaires sont parfois ajoutées au calendrier afin de compenser les trois millièmes restant et le ralentissement naturel de la rotation de la Terre.</p>
+En ajustant l'algorithme avec les contraintes ci-avant (divisible par 400 ou divisible par 4 mais pas par 100), on s'approche plus précisément du nombre correct de jours (365,2425). Des secondes intercalaires sont parfois ajoutées au calendrier afin de compenser les trois millièmes restant et le ralentissement naturel de la rotation de la Terre.
 
-<p>Le deuxième mois de l'année (février) possède 28 jours pendant les années non-bissextiles et 29 jours pendant les années bissextiles.</p>
+Le deuxième mois de l'année (février) possède 28 jours pendant les années non-bissextiles et 29 jours pendant les années bissextiles.
 
-<h3 id="Months_of_the_year">Mois de l'année</h3>
+### Mois de l'année
 
-<p>Une année comporte 12 mois, numérotés de 1 à 12. Les valeurs des mois sont toujours représentées par une chaîne de caractères se composant de deux chiffres : des valeurs entre <code>01</code> et <code>12</code>. Voir le tableau ci-après pour les numéros des mois et le nombre de jours correspondant.</p>
+Une année comporte 12 mois, numérotés de 1 à 12. Les valeurs des mois sont toujours représentées par une chaîne de caractères se composant de deux chiffres : des valeurs entre `01` et `12`. Voir le tableau ci-après pour les numéros des mois et le nombre de jours correspondant.
 
-<h3 id="Days_of_the_month">Jours du mois</h3>
+### Jours du mois
 
-<p>Les mois numérotés 1, 3, 5, 7, 8, 10 et 12 possèdent 31 jours. Les mois 4, 6, 9 et 11 possèdent 30 jours. Le deuxième mois, février, possède 28 jours sauf pendant les années bissextiles où il possède 29 jours. Le tableau ci-après détaille les mois et leurs noms, ainsi que leur durée en jours.</p>
+Les mois numérotés 1, 3, 5, 7, 8, 10 et 12 possèdent 31 jours. Les mois 4, 6, 9 et 11 possèdent 30 jours. Le deuxième mois, février, possède 28 jours sauf pendant les années bissextiles où il possède 29 jours. Le tableau ci-après détaille les mois et leurs noms, ainsi que leur durée en jours.
 
 <table class="standard-table">
-  <caption>Les mois de l'année et leur durée en jours</caption>
+  <caption>
+    Les mois de l'année et leur durée en jours
+  </caption>
   <thead>
     <tr>
       <th scope="row">Numéro du mois</th>
@@ -202,268 +238,122 @@ original_slug: Web/HTML/Formats_date_heure_HTML
   </tbody>
 </table>
 
-<h2 id="Week_strings">Représentation des semaines</h2>
+## Représentation des semaines
 
-<p>Une chaîne de caractères représentant une semaine correspondra à une semaine d'une année donnée. Aussi, une chaîne de caractères <strong>valide</strong> pour représenter une semaine se compose de 4 chiffres représentant l'année, suivis d'un tiret ("<code>-</code>" ou U+002D), suivi de la lettre majuscule "<code>W</code>" (U+0057), suivie d'un numéro de semaine sur deux chiffres.</p>
+Une chaîne de caractères représentant une semaine correspondra à une semaine d'une année donnée. Aussi, une chaîne de caractères **valide** pour représenter une semaine se compose de 4 chiffres représentant l'année, suivis d'un tiret ("`-`" ou U+002D), suivi de la lettre majuscule "`W`" (U+0057), suivie d'un numéro de semaine sur deux chiffres.
 
-<p>Le numéro de la semaine est une chaîne de caractères, avec deux chiffres, entre <code>01</code> et <code>53</code>. Chaque semaine commence un lundi et se termine un dimanche. Il est ainsi possible que les premiers jours de janvier fassent partie de la dernière semaine de l'année précédente et que les derniers jours fassent partie de la première semaine de l'année suivante. La première semaine de l'année est celle qui contient <em>le premier jeudi de l'année</em>. Ainsi, le premier jeudi de 1953 était le 1er janvier et la semaine contenant ce jour est donc considérée la première semaine de l'année. Ainsi, le 30 décembre 1952 appartient à la semaine <code>1953-W01</code>.</p>
+Le numéro de la semaine est une chaîne de caractères, avec deux chiffres, entre `01` et `53`. Chaque semaine commence un lundi et se termine un dimanche. Il est ainsi possible que les premiers jours de janvier fassent partie de la dernière semaine de l'année précédente et que les derniers jours fassent partie de la première semaine de l'année suivante. La première semaine de l'année est celle qui contient _le premier jeudi de l'année_. Ainsi, le premier jeudi de 1953 était le 1er janvier et la semaine contenant ce jour est donc considérée la première semaine de l'année. Ainsi, le 30 décembre 1952 appartient à la semaine `1953-W01`.
 
-<p>Une année aura 53 semaines si :</p>
+Une année aura 53 semaines si :
 
-<ul>
- <li>Le premier jour de l'année calendaire (le premier janvier) est un jeudi <strong>ou</strong></li>
- <li>Le premier jour de l'année calendaire (le premier janvier) est un mercredi et que l'année est une <a href="#leap_years">année bissextile</a>.</li>
-</ul>
+- Le premier jour de l'année calendaire (le premier janvier) est un jeudi **ou**
+- Le premier jour de l'année calendaire (le premier janvier) est un mercredi et que l'année est une [année bissextile](#leap_years).
 
-<p>Les autres années contiennent 52 semaines.</p>
+Les autres années contiennent 52 semaines.
 
-<table class="standard-table">
-  <caption>Exemples de chaînes de caractères valides pour représenter des semaines</caption>
-  <thead>
-    <tr>
-      <th scope="col">Chaîne de caractères</th>
-      <th scope="col">Semaine et année (intervalle de dates)</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>2001-W37</code></td>
-      <td>Semaine 37 de l'année 2001 (entre le 10 et le 16 septembre 2001)</td>
-    </tr>
-    <tr>
-      <td><code>1953-W01</code></td>
-      <td>Semaine 1 de l'année 1953 (entre le 29 décembre 1952 et le 4 janvier 1953)</td>
-    </tr>
-    <tr>
-      <td><code>1948-W53</code></td>
-      <td>Semaine 53 de l'année 1948 (entre le 27 décembre 1948 et le 2 janvier 1949)</td>
-    </tr>
-    <tr>
-      <td><code>1949-W01</code></td>
-      <td>Semaine 1 de l'année 1949 (entre le 3 janvier et le 9 janvier 1949)</td>
-    </tr>
-    <tr>
-      <td><code>0531-W16</code></td>
-      <td>Semaine 16 de l'année 531 (entre le 13 avril et le 19 avril 531)</td>
-    </tr>
-    <tr>
-      <td><code>0042-W04</code></td>
-      <td>Semaine 4 de l'année 42 (entre le 21 et le 27 janvier 42)</td>
-    </tr>
-  </tbody>
-</table>
+| Chaîne de caractères | Semaine et année (intervalle de dates)                                      |
+| -------------------- | --------------------------------------------------------------------------- |
+| `2001-W37`           | Semaine 37 de l'année 2001 (entre le 10 et le 16 septembre 2001)            |
+| `1953-W01`           | Semaine 1 de l'année 1953 (entre le 29 décembre 1952 et le 4 janvier 1953)  |
+| `1948-W53`           | Semaine 53 de l'année 1948 (entre le 27 décembre 1948 et le 2 janvier 1949) |
+| `1949-W01`           | Semaine 1 de l'année 1949 (entre le 3 janvier et le 9 janvier 1949)         |
+| `0531-W16`           | Semaine 16 de l'année 531 (entre le 13 avril et le 19 avril 531)            |
+| `0042-W04`           | Semaine 4 de l'année 42 (entre le 21 et le 27 janvier 42)                   |
 
-<p>On notera que les deux composantes pour l'année et pour la semaine sont complétées avec des zéros à gauche afin que l'année soit exprimée sur 4 chiffres et que la semaine soit exprimée sur 2 chiffres.</p>
+On notera que les deux composantes pour l'année et pour la semaine sont complétées avec des zéros à gauche afin que l'année soit exprimée sur 4 chiffres et que la semaine soit exprimée sur 2 chiffres.
 
-<h2 id="Month_strings">Représentation des mois</h2>
+## Représentation des mois
 
-<p>Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois «&nbsp;générique&nbsp;»). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972.</p>
+Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972.
 
-<p>Une chaîne de caractères représentant un mois est valide si elle commence par un numéro d'année valide (une chaîne de caractères composée de quatre chiffres), suivie d'un tiret ("<code>-</code>", ou U+002D), suivi d'un nombre sur deux chiffres où <code>01</code> représente janvier et où <code>12</code> représente décembre.</p>
+Une chaîne de caractères représentant un mois est valide si elle commence par un numéro d'année valide (une chaîne de caractères composée de quatre chiffres), suivie d'un tiret ("`-`", ou U+002D), suivi d'un nombre sur deux chiffres où `01` représente janvier et où `12` représente décembre.
 
-<table class="standard-table">
-  <caption>Exemples de chaînes de caractères valides pour la représentation d'un mois</caption>
-  <thead>
-    <tr>
-      <th scope="col">Chaîne de caractères</th>
-      <th scope="col">Le mois et l'année</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>17310-09</code></td>
-      <td>Le mois de septembre de l'année 17310</td>
-    </tr>
-    <tr>
-      <td><code>2019-01</code></td>
-      <td>Le mois de janvier de l'année 2019</td>
-    </tr>
-    <tr>
-      <td><code>1993-11</code></td>
-      <td>Le mois de novembre de l'année 1993</td>
-    </tr>
-    <tr>
-      <td><code>0571-04</code></td>
-      <td>Le mois d'avril de l'année 571</td>
-    </tr>
-    <tr>
-      <td><code>0001-07</code></td>
-      <td>Le mois de juillet de l'an 1</td>
-    </tr>
-  </tbody>
-</table>
+| Chaîne de caractères | Le mois et l'année                    |
+| -------------------- | ------------------------------------- |
+| `17310-09`           | Le mois de septembre de l'année 17310 |
+| `2019-01`            | Le mois de janvier de l'année 2019    |
+| `1993-11`            | Le mois de novembre de l'année 1993   |
+| `0571-04`            | Le mois d'avril de l'année 571        |
+| `0001-07`            | Le mois de juillet de l'an 1          |
 
-<p>On notera que les années sont exprimées sur au moins 4 chiffres et que les années antérieures à 1000 sont préfixées de 0.</p>
+On notera que les années sont exprimées sur au moins 4 chiffres et que les années antérieures à 1000 sont préfixées de 0.
 
-<h2 id="Date_strings">Représentation des dates</h2>
+## Représentation des dates
 
-<p>Une chaîne de caractères représentant une date est valide si elle contient : une année (cf. ci-avant) suivie d'un tiret, suivi d'un mois, suivi d'un tiret ("<code>-</code>" ou U+002D) suivi du numéro du jour dans le mois sur deux chiffres.</p>
+Une chaîne de caractères représentant une date est valide si elle contient : une année (cf. ci-avant) suivie d'un tiret, suivi d'un mois, suivi d'un tiret ("`-`" ou U+002D) suivi du numéro du jour dans le mois sur deux chiffres.
 
-<table class="standard-table">
-  <caption>Exemples de chaînes de caractères valides pour représenter des dates</caption>
-  <thead>
-    <tr>
-      <th scope="col">Chaîne de caractères</th>
-      <th scope="col">Date complète</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>1993-11-01</code></td>
-      <td>1er novembre 1993</td>
-    </tr>
-    <tr>
-      <td><code>1066-10-14</code></td>
-      <td>14 octobre 1066</td>
-    </tr>
-    <tr>
-      <td><code>0571-04-22</code></td>
-      <td>22 avril 571</td>
-    </tr>
-    <tr>
-      <td><code>0062-02-05</code></td>
-      <td>5 février 62</td>
-    </tr>
-  </tbody>
-</table>
+| Chaîne de caractères | Date complète     |
+| -------------------- | ----------------- |
+| `1993-11-01`         | 1er novembre 1993 |
+| `1066-10-14`         | 14 octobre 1066   |
+| `0571-04-22`         | 22 avril 571      |
+| `0062-02-05`         | 5 février 62      |
 
-<h2 id="Time_strings">Représentation des heures</h2>
+## Représentation des heures
 
-<p>Une chaîne de caractères représentant une heure peut décrire différentes précisions : minute, seconde ou milliseconde. Il n'est pas possible d'indiquer uniquement l'heure ou les minutes. Une chaîne valide se compose <em>a minima</em> d'une valeur sur deux chiffres représentant une heure, suivi de deux-points ("<code>:</code>", U+003A) puis d'une valeur sur deux chiffres exprimant les minutes. La valeur des minutes peut ensuite être suivie d'un autre deux-points puis d'une valeur sur deux chiffres pour les secondes. Il est possible d'indiquer les millisecondes en ajoutant un point ("<code>.</code>", U+002E) après les secondes, suivi d'une valeur sur un, deux ou trois chiffres.</p>
+Une chaîne de caractères représentant une heure peut décrire différentes précisions : minute, seconde ou milliseconde. Il n'est pas possible d'indiquer uniquement l'heure ou les minutes. Une chaîne valide se compose _a minima_ d'une valeur sur deux chiffres représentant une heure, suivi de deux-points ("`:`", U+003A) puis d'une valeur sur deux chiffres exprimant les minutes. La valeur des minutes peut ensuite être suivie d'un autre deux-points puis d'une valeur sur deux chiffres pour les secondes. Il est possible d'indiquer les millisecondes en ajoutant un point ("`.`", U+002E) après les secondes, suivi d'une valeur sur un, deux ou trois chiffres.
 
-<p>Voici quelques règles supplémentaires :</p>
+Voici quelques règles supplémentaires :
 
-<ul>
-  <li>L'heure est toujours exprimée selon une horloge sur 24 heures où <code>00</code> correspond à minuit et où <code>23</code> correspond à onze heures du soir. Aucune valeur en dehors de l'intervalle <code>00</code>-<code>23</code> n'est autorisée.</li>
-  <li>La valeur représentant les minutes doit être composée de deux chiffres et être située entre <code>00</code> et <code>59</code>. Les valeurs en dehors de cet intervalle ne sont pas autorisées.</li>
-  <li>Si les secondes ne sont pas exprimées, il ne faut pas que la valeur se termine par un deux-points (après les minutes).</li>
-  <li>Si les secondes sont exprimées, leur nombre doit être entre <code>00</code> et <code>59</code>. Il n'est pas possible d'indiquer des secondes intercalaires à l'aide de valeurs telles que <code>60</code> ou <code>61</code>.</li>
-  <li>Si le nombre de secondes est indiqué et que c'est un entier, il ne doit pas être suivi d'un point.</li>
-  <li>Si les millisecondes sont indiquées, la valeur correspondante peut être composée d'un à trois chiffres.</li>
-</ul>
+- L'heure est toujours exprimée selon une horloge sur 24 heures où `00` correspond à minuit et où `23` correspond à onze heures du soir. Aucune valeur en dehors de l'intervalle `00`-`23` n'est autorisée.
+- La valeur représentant les minutes doit être composée de deux chiffres et être située entre `00` et `59`. Les valeurs en dehors de cet intervalle ne sont pas autorisées.
+- Si les secondes ne sont pas exprimées, il ne faut pas que la valeur se termine par un deux-points (après les minutes).
+- Si les secondes sont exprimées, leur nombre doit être entre `00` et `59`. Il n'est pas possible d'indiquer des secondes intercalaires à l'aide de valeurs telles que `60` ou `61`.
+- Si le nombre de secondes est indiqué et que c'est un entier, il ne doit pas être suivi d'un point.
+- Si les millisecondes sont indiquées, la valeur correspondante peut être composée d'un à trois chiffres.
 
-<table class="standard-table">
-  <caption>Exemples de chaînes de caractères valides pour exprimer une heure</caption>
-  <thead>
-    <tr>
-      <th scope="col">Chaîne de caractères</th>
-      <th scope="col">Heure</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>00:00:30.75</code></td>
-      <td>Minuit passé de 30 secondes et 750 millisecondes</td>
-    </tr>
-    <tr>
-      <td><code>12:15</code></td>
-      <td>Midi passé de quinze minutes</td>
-    </tr>
-    <tr>
-      <td><code>13:44:25</code></td>
-      <td>13 heures 44 et 25 secondes</td>
-    </tr>
-  </tbody>
-</table>
+| Chaîne de caractères | Heure                                            |
+| -------------------- | ------------------------------------------------ |
+| `00:00:30.75`        | Minuit passé de 30 secondes et 750 millisecondes |
+| `12:15`              | Midi passé de quinze minutes                     |
+| `13:44:25`           | 13 heures 44 et 25 secondes                      |
 
-<h2 id="Local_date_and_time_strings">Représentation des dates et heures locales</h2>
+## Représentation des dates et heures locales
 
-<p>Une chaîne de caractères valide pour un élément de saisie <code><a href="/fr/docs/Web/HTML/Element/Input/datetime-local">datetime-local</a></code> se compose d'une chaîne de caractères représentant une date, suivie de la lettre "<code>T</code>" ou d'une espace puis d'une chaîne de caractères représentant une heure. La représentation ne contient aucune information quant au fuseau horaire dont il est question et on présume que la valeur temporelle indiquée est relative au fuseau horaire de l'utilisateur.</p>
+Une chaîne de caractères valide pour un élément de saisie [`datetime-local`](/fr/docs/Web/HTML/Element/Input/datetime-local) se compose d'une chaîne de caractères représentant une date, suivie de la lettre "`T`" ou d'une espace puis d'une chaîne de caractères représentant une heure. La représentation ne contient aucune information quant au fuseau horaire dont il est question et on présume que la valeur temporelle indiquée est relative au fuseau horaire de l'utilisateur.
 
-<p>Lorsqu'on définit la valeur de l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-value"><code>value</code></a> d'un champ <code>&lt;input&gt;</code> de type <code>datetime-local</code>, la chaîne de caractères est normalisée. Les formes normalisées utilisent toujours la lettre T comme séparateur entre la date et l'heure. De plus, les formes normalisées utilisent toujours la forme la plus courte pour exprimer l'heure (les secondes sont omises si leur valeur est <code>:00</code>).</p>
+Lorsqu'on définit la valeur de l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) d'un champ `<input>` de type `datetime-local`, la chaîne de caractères est normalisée. Les formes normalisées utilisent toujours la lettre T comme séparateur entre la date et l'heure. De plus, les formes normalisées utilisent toujours la forme la plus courte pour exprimer l'heure (les secondes sont omises si leur valeur est `:00`).
 
-<table class="standard-table">
-  <caption>Exemples de chaînes de caractères valides pour l'expression de dates/heures</caption>
-  <thead>
-    <tr>
-      <th scope="col">Chaîne de caractères</th>
-      <th scope="col">Version normalisée</th>
-      <th scope="col">Date et heure correspondantes</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>1986-01-28T11:38:00.01</code></td>
-      <td><code>1986-01-28T11:38:00.01</code></td>
-      <td>28 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes</td>
-    </tr>
-    <tr>
-      <td><code>1986-01-28 11:38:00.010</code></td>
-      <td><code>1986-01-28T11:38:00.01</code></td>
-      <td>28 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes</td>
-    </tr>
-    <tr>
-      <td><code>0170-07-31T22:00:00</code></td>
-      <td><code>0170-07-31T22:00</code></td>
-      <td>31 juillet 170 à 22 heures</td>
-    </tr>
-  </tbody>
-</table>
+| Chaîne de caractères      | Version normalisée       | Date et heure correspondantes                                         |
+| ------------------------- | ------------------------ | --------------------------------------------------------------------- |
+| `1986-01-28T11:38:00.01`  | `1986-01-28T11:38:00.01` | 28 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes |
+| `1986-01-28 11:38:00.010` | `1986-01-28T11:38:00.01` | 28 janvier 1986 à 11 heures et 38 minutes passées de 10 millisecondes |
+| `0170-07-31T22:00:00`     | `0170-07-31T22:00`       | 31 juillet 170 à 22 heures                                            |
 
-<ol>
-  <li>On notera qu'après la normalisation, on obtient la même chaîne que sur l'exemple précédent : l'espace séparateur a été remplacé par un <code>"T"</code> et le zéro de terminaison a été supprimé pour raccourcir la chaîne de l'heure.</li>
-  <li>On notera que la forme normalisée de cette date ne contient pas l'expression des secondes.</li>
-</ol>
+1.  On notera qu'après la normalisation, on obtient la même chaîne que sur l'exemple précédent : l'espace séparateur a été remplacé par un `"T"` et le zéro de terminaison a été supprimé pour raccourcir la chaîne de l'heure.
+2.  On notera que la forme normalisée de cette date ne contient pas l'expression des secondes.
 
-<h2 id="Global_date_and_time_strings">Représentation des dates et heures universelles</h2>
+## Représentation des dates et heures universelles
 
-<p>Une valeur de date/heure universelle exprime la date et l'heure mais aussi le fuseau horaire de l'instant. Une chaîne de caractères représentant une telle valeur commence de la même façon qu'une chaîne de caractère représentant une date/heure locale, suivie d'une chaîne de caractères indiquant le décalage horaire.</p>
+Une valeur de date/heure universelle exprime la date et l'heure mais aussi le fuseau horaire de l'instant. Une chaîne de caractères représentant une telle valeur commence de la même façon qu'une chaîne de caractère représentant une date/heure locale, suivie d'une chaîne de caractères indiquant le décalage horaire.
 
-<h3 id="Time_zone_offset_string">Chaîne de caractères exprimant le décalage horaire</h3>
+### Chaîne de caractères exprimant le décalage horaire
 
-<p>La chaîne de caractères qui décrit le décalage horaire contient un décalage positif d'heures et de minutes, relativement à un fuseau de base. Il existe deux points de référence qui sont très proches sans être identiques :</p>
+La chaîne de caractères qui décrit le décalage horaire contient un décalage positif d'heures et de minutes, relativement à un fuseau de base. Il existe deux points de référence qui sont très proches sans être identiques :
 
-<ul>
-  <li>Pour les dates situées après la création du temps coordonné universel (UTC, <a class="external" href="https://fr.wikipedia.org/wiki/Coordinated_Universal_Time">Coordinated Universal Time</a>) au début des années 60, le point de référence est indiqué avec <code>Z</code> et le décalage indique le décalage d'un fuseau horaire par rapport au méridien situé à la longitude 0° (méridien de Greenwich).</li>
-  <li>Pour les dates antérieures à UTC, le point de référence est exprimé en <a class="external" href="https://fr.wikipedia.org/wiki/UT1">UT1</a>, qui correspond au temps solaire au méridien de longitude 0°.</li>
-</ul>
+- Pour les dates situées après la création du temps coordonné universel (UTC, [Coordinated Universal Time](https://fr.wikipedia.org/wiki/Coordinated_Universal_Time)) au début des années 60, le point de référence est indiqué avec `Z` et le décalage indique le décalage d'un fuseau horaire par rapport au méridien situé à la longitude 0° (méridien de Greenwich).
+- Pour les dates antérieures à UTC, le point de référence est exprimé en [UT1](https://fr.wikipedia.org/wiki/UT1), qui correspond au temps solaire au méridien de longitude 0°.
 
-<p>La chaîne de caractères indiquant le décalage est directement ajoutée après la valeur pour la date et l'heure. Si la date et l'heure sont déjà exprimées relativement à UTC, on pourra simplement suffixer <code>"Z"</code>, sinon, on construira le complément de la façon suivante :</p>
+La chaîne de caractères indiquant le décalage est directement ajoutée après la valeur pour la date et l'heure. Si la date et l'heure sont déjà exprimées relativement à UTC, on pourra simplement suffixer `"Z"`, sinon, on construira le complément de la façon suivante :
 
-<ol>
-  <li>Un caractère indiquant le signe du décalage : le plus ("<code>+</code>" ou U+002B) pour les fuseaux situés à l'est du méridien ou le moins ("<code>-</code>" ou U+002D) pour les fuseaux situés à l'ouest.</li>
-  <li>Deux chiffres indiquant le nombre d'heures de décalage par rapport au méridien. Cette valeur doit être comprise entre <code>00</code> et <code>23</code>.</li>
-  <li>Deux-points ("<code>:</code>") (nécessaires uniquement si le décalage contient des minutes)</li>
-  <li>Deux chiffres indiquant les minutes de décalage. Cette valeur doit être comprise entre <code>00</code> et <code>59</code>.</li>
-</ol>
+1.  Un caractère indiquant le signe du décalage : le plus ("`+`" ou U+002B) pour les fuseaux situés à l'est du méridien ou le moins ("`-`" ou U+002D) pour les fuseaux situés à l'ouest.
+2.  Deux chiffres indiquant le nombre d'heures de décalage par rapport au méridien. Cette valeur doit être comprise entre `00` et `23`.
+3.  Deux-points ("`:`") (nécessaires uniquement si le décalage contient des minutes)
+4.  Deux chiffres indiquant les minutes de décalage. Cette valeur doit être comprise entre `00` et `59`.
 
-<p>Bien que ces règles permettent d'exprimer des fuseaux horaires entre -23:59 et +23:59, l'intervalle actuel des décalages horaires est -12:00 à +14:00 et il n'y a pas de fuseau horaire pour lequel le décalage en minutes est différent de <code>00</code>, <code>30</code> ou <code>45</code>. Cela peut en théorie évoluer à tout moment car les pays sont libres de modifier leur fuseau horaire quand ils le souhaitent.</p>
+Bien que ces règles permettent d'exprimer des fuseaux horaires entre -23:59 et +23:59, l'intervalle actuel des décalages horaires est -12:00 à +14:00 et il n'y a pas de fuseau horaire pour lequel le décalage en minutes est différent de `00`, `30` ou `45`. Cela peut en théorie évoluer à tout moment car les pays sont libres de modifier leur fuseau horaire quand ils le souhaitent.
 
-<table class="standard-table">
-  <caption>Exemples de chaînes de caractères valides pour l'expression de dates/heures universelles</caption>
-  <thead>
-    <tr>
-      <th scope="col">Chaîne de caractères</th>
-      <th scope="col">Date/heure universelle</th>
-      <th scope="col">Date/heure sur le méridien solaire</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><code>2005-06-07T00:00Z</code></td>
-      <td>7 juin 2005 à minuit UTC</td>
-      <td>7 juin 2005 à minuit</td>
-    </tr>
-    <tr>
-      <td><code>1789-08-22T12:30:00.1-04:00</code></td>
-      <td>22 août 1789 à midi trente (passé d'un dixième de seconde) selon l'heure avancée de l'Est (<em>Eastern Daylight Time</em> (EDT))</td>
-      <td>22 août 1789 à 16 heures trente passées d'un dixième de seconde</td>
-    </tr>
-    <tr>
-      <td><code>3755-01-01 00:00+10:00</code></td>
-      <td>1er janvier 3755 à minuit pour le fuseau AEST (<em>Australian Eastern Standard Time</em>)</td>
-      <td>31 décembre 3754 à 14h</td>
-    </tr>
-  </tbody>
-</table>
+| Chaîne de caractères          | Date/heure universelle                                                                                                    | Date/heure sur le méridien solaire                              |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------- |
+| `2005-06-07T00:00Z`           | 7 juin 2005 à minuit UTC                                                                                                  | 7 juin 2005 à minuit                                            |
+| `1789-08-22T12:30:00.1-04:00` | 22 août 1789 à midi trente (passé d'un dixième de seconde) selon l'heure avancée de l'Est (_Eastern Daylight Time_ (EDT)) | 22 août 1789 à 16 heures trente passées d'un dixième de seconde |
+| `3755-01-01 00:00+10:00`      | 1er janvier 3755 à minuit pour le fuseau AEST (_Australian Eastern Standard Time_)                                        | 31 décembre 3754 à 14h                                          |
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></li>
-  <li>Les éléments <a href="/fr/docs/Web/HTML/Element/ins"><code>&lt;ins&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/del"><code>&lt;del&gt;</code></a> qui possèdent l'attribut <code>datetime</code> qui permet de définir une date ou une date et une heure locales pour indiquer le moment où le contenu a été inséré ou supprimé</li>
-  <li><a href="https://www.iso.org/iso-8601-date-and-time-format.html">La spécification ISO 8601</a></li>
-  <li><a href="/fr/docs/Web/JavaScript/Guide/Numbers_and_dates">Le chapitre sur les nombres et les dates</a> dans le <a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a></li>
-  <li>L'objet JavaScript <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code></li>
-  <li>L'objet <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat">Intl.DateTimeFormat</a></code> qui permet de formater des dates et des heures pour une locale donnée</li>
-</ul>
+- [`<input>`](/fr/docs/Web/HTML/Element/Input)
+- Les éléments [`<ins>`](/fr/docs/Web/HTML/Element/ins) et [`<del>`](/fr/docs/Web/HTML/Element/del) qui possèdent l'attribut `datetime` qui permet de définir une date ou une date et une heure locales pour indiquer le moment où le contenu a été inséré ou supprimé
+- [La spécification ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html)
+- [Le chapitre sur les nombres et les dates](/fr/docs/Web/JavaScript/Guide/Numbers_and_dates) dans le [Guide JavaScript](/fr/docs/Web/JavaScript/Guide)
+- L'objet JavaScript [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date)
+- L'objet [`Intl.DateTimeFormat`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) qui permet de formater des dates et des heures pour une locale donnée
diff --git a/files/fr/web/html/element/a/index.md b/files/fr/web/html/element/a/index.md
index 786964fa38..145bcd6226 100644
--- a/files/fr/web/html/element/a/index.md
+++ b/files/fr/web/html/element/a/index.md
@@ -16,125 +16,159 @@ tags:
 translation_of: Web/HTML/Element/a
 browser-compat: html.elements.a
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;a&gt;</code></strong> (pour ancre ou <i>anchor</i> en anglais), avec <a href="#href">son attribut <code>href</code></a>, crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la même page, ou tout ce qu'une URL peut adresser. Le contenu de chaque élément <code>&lt;a&gt;</code> <b>doit</b> indiquer la destination du lien. Si <a href="#href">l'attribut <code>href</code></a> est présent, appuyer sur la touche entrée en se concentrant sur l'élément <code>&lt;a&gt;</code> l'activera.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/a.html")}}</div>
-
-<h2 id="attributes">Attributs</h2>
-
-<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p>
-
-<dl>
-  <dt><strong><code>download</code></strong></dt>
-  <dd>
-    <p>Sans valeur, le navigateur proposera un nom de fichier/extension, généré à partir de diverses sources :</p>
-      <ul>
-          <li>L'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Content-Disposition"><code>Content-Disposition</code></a></li>
-          <li>Le segment final dans l'URL : <a href="/fr/docs/Web/API/URL/pathname">path</a></li>
-          <li>Le <a href="/fr/docs/Glossary/MIME_type">Type MIME</a> (de l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a>, le début d'une URL <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs"><code>data:</code></a>, ou <a href="/fr/docs/Web/API/Blob/type"><code>Blob.type</code></a> pour une URL <a href="/fr/docs/Web/API/URL/createObjectURL"><code>blob:</code></a>).</li>
-      </ul>
-      <p>La définition d'une valeur la suggère comme nom de fichier. Les caractères <code>/</code> et <code>\</code> sont convertis en caractères de soulignement (<code>_</code>). Les systèmes de fichiers peuvent interdire d'autres caractères dans les noms de fichiers, les navigateurs ajusteront donc le nom suggéré si nécessaire.</p>
-    <div class="note">
-      <p><strong>Note :</strong></p>
-      <ul>
-        <li><code>download</code> ne fonctionne que pour <a href="/fr/docs/Web/Security/Same-origin_policy">les URLs de même origine</a>, ou les schémas <code>blob:</code> et <code>data:</code>.</li>
-        <li>
-          <p>Si l'en-tête <code>Content-Disposition</code> comporte des informations différentes de celles de l'attribut <code>download</code>, le comportement résultant peut différer :</p>
-          <ul>
-            <li>Si l'en-tête spécifie un <code>nom de fichier</code>, il a priorité sur un nom de fichier spécifié dans l'attribut <code>download</code>.</li>
-            <li>Si l'en-tête spécifie une disposition de <code>inline</code>, Chrome, et Firefox 82+, donnent la priorité à l'attribut et le traitent comme un téléchargement. Les versions de Firefox antérieures à 82 donnent la priorité à l'en-tête et affichent le contenu en ligne.</li>
-          </ul>
-        </li>
-      </ul>
-    </div>
-  </dd>
-  <dt><strong><code>href</code></strong></dt>
-  <dd>
-    <p>L'URL vers laquelle pointe l'hyperlien. Les liens ne sont pas limités aux URL basées sur HTTP - ils peuvent utiliser n'importe quel schéma d'URL pris en charge par les navigateurs :</p>
-    <ul>
-      <li>Sections d'une page avec des fragments d'URL</li>
-      <li>Des morceaux de fichiers médias avec des fragments de médias</li>
-      <li>Les numéros de téléphone avec l'URL <code>tel:</code>.</li>
-      <li>Les adresses électroniques avec l'URL <code>mailto:</code>.</li>
-      <li>Bien que les navigateurs web puissent ne pas prendre en charge d'autres schémas d'URL, les sites web le peuvent avec <a href="/fr/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler()</code></a>.</li>
-    </ul>
-  </dd>
-  <dt><strong><code>hreflang</code></strong></dt>
-  <dd>Donne des indications sur le langage humain de l'URL liée. Aucune fonctionnalité intégrée. Les valeurs autorisées sont les mêmes que <a href="/fr/docs/Web/HTML/Global_attributes/lang">l'attribut global <code>lang</code></a>.</dd>
-  <dt><strong><code>ping</code></strong></dt>
-  <dd>Contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes <a href="/fr/docs/Web/HTTP/Methods/POST"><code>POST</code></a> avec le corps <code>PING</code> lorsque l'utilisateur suit le lien. Cet attribut est généralement utilisé pour tracer un utilisateur.</dd>
-  <dt><strong><code>referrerpolicy</code></strong> {{experimental_inline}}</dt>
-  <dd>La portion du <a href="/fr/docs/Web/HTTP/Headers/Referer">referrer</a> envoyer lors du suivi du lien. Voir <a href="/fr/docs/Web/HTTP/Headers/Referrer-Policy"><code>Referrer-Policy</code></a> pour les valeurs possibles et leurs effets.</dd>
-  <dt><strong><code>rel</code></strong></dt>
-  <dd>Cet attribut indique la relation entre la cible du lien et l'objet faisant le lien. La valeur est une liste de <a href="/fr/docs/Web/HTML/Link_types">types de liens</a> séparés par des espaces.</dd>
-  <dt><strong><code>target</code></strong></dt>
-  <dd>Où afficher l'URL liée, comme nom d'un <em>contexte de navigation</em> (un onglet, une fenêtre ou un <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>). Les mots-clés suivants ont des significations spéciales pour l'endroit où charger l'URL :
-    <ul>
-      <li><code>_self</code> : le contexte de navigation actuel. (Par défaut)</li>
-      <li><code>_blank</code> : généralement un nouvel onglet, mais les utilisateurs peuvent configurer les navigateurs pour ouvrir une nouvelle fenêtre à la place.</li>
-      <li><code>_parent</code> : le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, il se comporte comme <code>_self</code>.</li>
-      <li><code>_top</code> : le contexte de navigation le plus haut (le contexte "le plus haut" qui est un ancêtre du contexte actuel). S'il n'a aucun ancêtre, il se comporte comme <code>_self</code>.</li>
-    </ul>
-    <div class="note">
-      <p><strong>Note :</strong>Définir <code>target="_blank"</code> sur les éléments <code>&lt;a&gt;</code> fournit implicitement le même comportement <code>rel</code> que définir <a href="/fr/docs/Web/HTML/Link_types/noopener"><code>rel="noopener"</code></a> qui ne définit pas <code>window.opener</code>. Voir la <a href="#browser_compatibility">compatibilité des navigateurs</a> pour le support.</p>
-    </div>
-  </dd>
-  <dt><strong><code>type</code></strong></dt>
-  <dd>Donne des indications sur le format de l'URL liée avec un <a href="/fr/docs/Glossary/MIME_type">Type MIME</a>. Aucune fonctionnalité intégrée.</dd>
-</dl>
-
-<h3 id="deprecated_attributes">Attributs obsolètes</h3>
-
-<dl>
-  <dt><strong><code>charset</code></strong> {{Deprecated_Inline}}</dt>
-  <dd>Fait allusion aux <a href="/fr/docs/Glossary/character_encoding">encodages des caractères</a> de l'URL liée.
-    <div class="note">
-      <p><strong>Note :</strong>Cet attribut est déprécié et <strong>ne doit pas être utilisé par les auteurs</strong>. Utilisez l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> sur l'URL liée.</p>
-    </div>
-  </dd>
-  <dt><strong><code>coords</code></strong> {{Deprecated_Inline}}</dt>
-  <dd>Utilisé avec <a href="#shape">l'attribut <code>shape</code></a>. Une liste de coordonnées séparées par des virgules.</dd>
-  <dt><strong><code>name</code></strong> {{Deprecated_Inline}}</dt>
-  <dd>Était nécessaire pour définir un emplacement cible possible dans une page. En HTML 4.01, <code>id</code> et <code>name</code> pouvaient tous deux être utilisés sur <code>&lt;a&gt;</code>, pour autant qu'ils aient des valeurs identiques.
-    <div class="note">
-      <p><strong>Note :</strong>Utilisez l'attribut universel <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> à la place.</p>
-    </div>
-  </dd>
-  <dt><strong><code>rev</code></strong> {{Deprecated_Inline}}</dt>
-  <dd>Spécifiait un lien inverse ; l'opposé de <a href="#rel">l'attribut <code>rel</code></a>. Déprécié pour avoir été très confus.</dd>
-  <dt><strong><code>shape</code></strong> {{Deprecated_Inline}}</dt>
-  <dd>La forme de la région de l'hyperlien dans une carte d'image.
-    <div class="note">
-      <p><strong>Note :</strong>Utilisez plutôt l'élément <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a> pour les cartes d'images.</p>
-    </div>
-  </dd>
-</dl>
-
-<h2 id="properties">Propriétés</h2>
+{{HTMLRef}}
+
+L'élément HTML **`<a>`** (pour ancre ou _anchor_ en anglais), avec [son attribut `href`](#href), crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements se trouvant dans la même page, ou tout ce qu'une URL peut adresser. Le contenu de chaque élément `<a>` **doit** indiquer la destination du lien. Si [l'attribut `href`](#href) est présent, appuyer sur la touche entrée en se concentrant sur l'élément `<a>` l'activera.
+
+{{EmbedInteractiveExample("pages/tabbed/a.html")}}
+
+## Attributs
+
+Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Global_attributes).
+
+- **`download`**
+
+  - : Sans valeur, le navigateur proposera un nom de fichier/extension, généré à partir de diverses sources :
+
+    - L'en-tête HTTP [`Content-Disposition`](/fr/docs/Web/HTTP/Headers/Content-Disposition)
+    - Le segment final dans l'URL : [path](/fr/docs/Web/API/URL/pathname)
+    - Le [Type MIME](/fr/docs/Glossary/MIME_type) (de l'en-tête [`Content-Type`](/fr/docs/Web/HTTP/Headers/Content-Type), le début d'une URL [`data:`](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs), ou [`Blob.type`](/fr/docs/Web/API/Blob/type) pour une URL [`blob:`](/fr/docs/Web/API/URL/createObjectURL)).
+
+    La définition d'une valeur la suggère comme nom de fichier. Les caractères `/` et `\` sont convertis en caractères de soulignement (`_`). Les systèmes de fichiers peuvent interdire d'autres caractères dans les noms de fichiers, les navigateurs ajusteront donc le nom suggéré si nécessaire.
+
+    > **Note :**
+    >
+    > - `download` ne fonctionne que pour [les URLs de même origine](/fr/docs/Web/Security/Same-origin_policy), ou les schémas `blob:` et `data:`.
+    > - Si l'en-tête `Content-Disposition` comporte des informations différentes de celles de l'attribut `download`, le comportement résultant peut différer :
+    >
+    >   - Si l'en-tête spécifie un `nom de fichier`, il a priorité sur un nom de fichier spécifié dans l'attribut `download`.
+    >   - Si l'en-tête spécifie une disposition de `inline`, Chrome, et Firefox 82+, donnent la priorité à l'attribut et le traitent comme un téléchargement. Les versions de Firefox antérieures à 82 donnent la priorité à l'en-tête et affichent le contenu en ligne.
+
+- **`href`**
+
+  - : L'URL vers laquelle pointe l'hyperlien. Les liens ne sont pas limités aux URL basées sur HTTP - ils peuvent utiliser n'importe quel schéma d'URL pris en charge par les navigateurs :
+
+    - Sections d'une page avec des fragments d'URL
+    - Des morceaux de fichiers médias avec des fragments de médias
+    - Les numéros de téléphone avec l'URL `tel:`.
+    - Les adresses électroniques avec l'URL `mailto:`.
+    - Bien que les navigateurs web puissent ne pas prendre en charge d'autres schémas d'URL, les sites web le peuvent avec [`registerProtocolHandler()`](/fr/docs/Web/API/Navigator/registerProtocolHandler).
+
+- **`hreflang`**
+  - : Donne des indications sur le langage humain de l'URL liée. Aucune fonctionnalité intégrée. Les valeurs autorisées sont les mêmes que [l'attribut global `lang`](/fr/docs/Web/HTML/Global_attributes/lang).
+- **`ping`**
+  - : Contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes [`POST`](/fr/docs/Web/HTTP/Methods/POST) avec le corps `PING` lorsque l'utilisateur suit le lien. Cet attribut est généralement utilisé pour tracer un utilisateur.
+- **`referrerpolicy`** {{experimental_inline}}
+  - : La portion du [referrer](/fr/docs/Web/HTTP/Headers/Referer) envoyer lors du suivi du lien. Voir [`Referrer-Policy`](/fr/docs/Web/HTTP/Headers/Referrer-Policy) pour les valeurs possibles et leurs effets.
+- **`rel`**
+  - : Cet attribut indique la relation entre la cible du lien et l'objet faisant le lien. La valeur est une liste de [types de liens](/fr/docs/Web/HTML/Link_types) séparés par des espaces.
+- **`target`**
+
+  - : Où afficher l'URL liée, comme nom d'un _contexte de navigation_ (un onglet, une fenêtre ou un [`<iframe>`](/fr/docs/Web/HTML/Element/iframe)). Les mots-clés suivants ont des significations spéciales pour l'endroit où charger l'URL :
+
+    - `_self` : le contexte de navigation actuel. (Par défaut)
+    - `_blank` : généralement un nouvel onglet, mais les utilisateurs peuvent configurer les navigateurs pour ouvrir une nouvelle fenêtre à la place.
+    - `_parent` : le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, il se comporte comme `_self`.
+    - `_top` : le contexte de navigation le plus haut (le contexte "le plus haut" qui est un ancêtre du contexte actuel). S'il n'a aucun ancêtre, il se comporte comme `_self`.
+
+    > **Note :**Définir `target="_blank"` sur les éléments `<a>` fournit implicitement le même comportement `rel` que définir [`rel="noopener"`](/fr/docs/Web/HTML/Link_types/noopener) qui ne définit pas `window.opener`. Voir la [compatibilité des navigateurs](#browser_compatibility) pour le support.
+
+- **`type`**
+  - : Donne des indications sur le format de l'URL liée avec un [Type MIME](/fr/docs/Glossary/MIME_type). Aucune fonctionnalité intégrée.
+
+### Attributs obsolètes
+
+- **`charset`** {{Deprecated_Inline}}
+
+  - : Fait allusion aux [encodages des caractères](/fr/docs/Glossary/character_encoding) de l'URL liée.
+
+    > **Note :**Cet attribut est déprécié et **ne doit pas être utilisé par les auteurs**. Utilisez l'en-tête HTTP [`Content-Type`](/fr/docs/Web/HTTP/Headers/Content-Type) sur l'URL liée.
+
+- **`coords`** {{Deprecated_Inline}}
+  - : Utilisé avec [l'attribut `shape`](#shape). Une liste de coordonnées séparées par des virgules.
+- **`name`** {{Deprecated_Inline}}
+
+  - : Était nécessaire pour définir un emplacement cible possible dans une page. En HTML 4.01, `id` et `name` pouvaient tous deux être utilisés sur `<a>`, pour autant qu'ils aient des valeurs identiques.
+
+    > **Note :**Utilisez l'attribut universel [`id`](/fr/docs/Web/HTML/Global_attributes#attr-id) à la place.
+
+- **`rev`** {{Deprecated_Inline}}
+  - : Spécifiait un lien inverse ; l'opposé de [l'attribut `rel`](#rel). Déprécié pour avoir été très confus.
+- **`shape`** {{Deprecated_Inline}}
+
+  - : La forme de la région de l'hyperlien dans une carte d'image.
+
+    > **Note :**Utilisez plutôt l'élément [`<area>`](/fr/docs/Web/HTML/Element/area) pour les cartes d'images.
+
+## Propriétés
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu du flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>, contenu palpable.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu du flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content"
+          >contenu interactif</a
+        >, contenu palpable.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#transparent_content_model">Transparent</a>, contenant soit le <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu du flux</a> (à l'exclusion du <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>), soit <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
+      <td>
+        <a
+          href="/fr/docs/Web/Guide/HTML/Content_categories#transparent_content_model"
+          >Transparent</a
+        >, contenant soit le
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu du flux</a
+        >
+        (à l'exclusion du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content"
+          >contenu interactif</a
+        >), soit
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément qui accepte <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">la formulation du contenu</a>, ou tout élément qui accepte <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">le contenu du flux</a>, mais pas les autres éléments <code>&lt;a&gt;</code>.</td>
+      <td>
+        Tout élément qui accepte
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >la formulation du contenu</a
+        >, ou tout élément qui accepte
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >le contenu du flux</a
+        >, mais pas les autres éléments <code>&#x3C;a></code>.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://w3c.github.io/aria/#link">lien</a> lorsque l'attribut <code>href</code> est présent, sinon <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">pas de rôle correspondant</a>.</td>
+      <td>
+        <a href="https://w3c.github.io/aria/#link">lien</a> lorsque l'attribut
+        <code>href</code> est présent, sinon
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >pas de rôle correspondant</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -144,8 +178,16 @@ browser-compat: html.elements.a
           <li><a href="https://w3c.github.io/aria/#button">button</a></li>
           <li><a href="https://w3c.github.io/aria/#checkbox">checkbox</a></li>
           <li><a href="https://w3c.github.io/aria/#menuitem">menuitem</a></li>
-          <li><a href="https://w3c.github.io/aria/#menuitemcheckbox">menuitemcheckbox</a></li>
-          <li><a href="https://w3c.github.io/aria/#menuitemradio">menuitemradio</a></li>
+          <li>
+            <a href="https://w3c.github.io/aria/#menuitemcheckbox"
+              >menuitemcheckbox</a
+            >
+          </li>
+          <li>
+            <a href="https://w3c.github.io/aria/#menuitemradio"
+              >menuitemradio</a
+            >
+          </li>
           <li><a href="https://w3c.github.io/aria/#option">option</a></li>
           <li><a href="https://w3c.github.io/aria/#radio">radio</a></li>
           <li><a href="https://w3c.github.io/aria/#switch">switch</a></li>
@@ -160,95 +202,110 @@ browser-compat: html.elements.a
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLAnchorElement"><code>HTMLAnchorElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLAnchorElement"
+          ><code>HTMLAnchorElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="linking_to_an_absolute_url">Créer un lien vers une URL absolue</h3>
+### Créer un lien vers une URL absolue
 
-<h4 id="html">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;a href="https://www.mozilla.com"&gt;
+```html
+<a href="https://www.mozilla.com">
   Mozilla
-&lt;/a&gt;</pre>
+</a>
+```
 
-<h4 id="result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("linking_to_an_absolute_url", "100%", 50)}}</p>
+{{EmbedLiveSample("linking_to_an_absolute_url", "100%", 50)}}
 
-<h3 id="linking_to_relative_urls">Créer des liens vers des URL relatives</h3>
+### Créer des liens vers des URL relatives
 
-<h4 id="html_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;a href="//example.com"&gt;URL relative au schéma&lt;/a&gt;
-&lt;a href="/fr/docs/Web/HTML"&gt;URL relative à l'origine&lt;/a&gt;
-&lt;a href="./p"&gt;URL relative au répertoire&lt;/a&gt;</pre>
+```html
+<a href="//example.com">URL relative au schéma</a>
+<a href="/fr/docs/Web/HTML">URL relative à l'origine</a>
+<a href="./p">URL relative au répertoire</a>
+```
 
-<pre class="brush: css hidden">a { display: block; margin-bottom: 0.5em }</pre>
+```css hidden
+a { display: block; margin-bottom: 0.5em }
+```
 
-<h4 id="result_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("linking_to_relative_urls", "100%", 120)}}</p>
+{{EmbedLiveSample("linking_to_relative_urls", "100%", 120)}}
 
-<h3 id="linking_to_an_element_on_the_same_page">Créer un lien vers un élément de la même page</h3>
+### Créer un lien vers un élément de la même page
 
-<pre class="brush: html">&lt;!-- &lt;a&gt; élément liens vers la section ci-dessous --&gt;
-&lt;p&gt;&lt;a href="#section_further_down"&gt;
+```html
+<!-- <a> élément liens vers la section ci-dessous -->
+<p><a href="#section_further_down">
   Passez à la rubrique ci-dessous
-&lt;/a&gt;&lt;/p&gt;
+</a></p>
 
-&lt;!-- Rubrique à relier --&gt;
-&lt;h2 id="section_further_down"&gt;Section plus bas&lt;/h2&gt;</pre>
+<!-- Rubrique à relier -->
+<h2 id="section_further_down">Section plus bas</h2>
+```
 
-<div class="note">
-  <p><strong>Note :</strong>Vous pouvez utiliser <code>href="#top"</code> ou le fragment vide (<code>href="#"</code>) pour créer un lien vers le haut de la page actuelle, <a href="https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier">comme défini dans la spécification HTML</a>.</p>
-</div>
+> **Note :**Vous pouvez utiliser `href="#top"` ou le fragment vide (`href="#"`) pour créer un lien vers le haut de la page actuelle, [comme défini dans la spécification HTML](https://html.spec.whatwg.org/multipage/browsing-the-web.html#scroll-to-the-fragment-identifier).
 
-<h3 id="linking_to_an_email_address">Créer un lien avec une adresse électronique</h3>
+### Créer un lien avec une adresse électronique
 
-<p>Pour créer des liens qui s'ouvrent dans le programme de messagerie de l'utilisateur, pour lui permettre d'envoyer un nouveau message, utilisez le schéma <code>mailto:</code> :</p>
+Pour créer des liens qui s'ouvrent dans le programme de messagerie de l'utilisateur, pour lui permettre d'envoyer un nouveau message, utilisez le schéma `mailto:` :
 
-<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org"&gt;Envoyer un courriel nulle part&lt;/a&gt;</pre>
+```html
+<a href="mailto:nowhere@mozilla.org">Envoyer un courriel nulle part</a>
+```
 
-<p>Pour plus de détails sur les URL <code>mailto:</code>, comme l'inclusion d'un sujet ou d'un corps de message, voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#e-mail_links">Liens de courrier électronique</a> ou <a href="https://tools.ietf.org/html/rfc6068">RFC 6068</a>.</p>
+Pour plus de détails sur les URL `mailto:`, comme l'inclusion d'un sujet ou d'un corps de message, voir [Liens de courrier électronique](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#e-mail_links) ou [RFC 6068](https://tools.ietf.org/html/rfc6068).
 
-<h3 id="linking_to_telephone_numbers">Créer un lien avec les numéros de téléphone</h3>
+### Créer un lien avec les numéros de téléphone
 
-<pre class="brush: html">&lt;a href="tel:+49.157.0156"&gt;+49 157 0156&lt;/a&gt;
-&lt;a href="tel:+1(555)5309"&gt;(555) 5309&lt;/a&gt;</pre>
+```html
+<a href="tel:+49.157.0156">+49 157 0156</a>
+<a href="tel:+1(555)5309">(555) 5309</a>
+```
 
-<p><code>tel:</code> le comportement du lien varie en fonction des capacités du périphérique :</p>
+`tel:` le comportement du lien varie en fonction des capacités du périphérique :
 
-<ul>
-  <li>Les appareils cellulaires composent automatiquement le numéro.</li>
-  <li>La plupart des systèmes d'exploitation disposent de programmes permettant de passer des appels, comme Skype ou FaceTime.</li>
-  <li>Les sites web peuvent passer des appels téléphoniques avec <a href="/fr/docs/Web/API/Navigator/registerProtocolHandler"><code>registerProtocolHandler</code></a>, comme <code>web.skype.com</code>.</li>
-  <li>Les autres comportements comprennent l'enregistrement du numéro dans les contacts, ou l'envoi du numéro à un autre appareil.</li>
-</ul>
+- Les appareils cellulaires composent automatiquement le numéro.
+- La plupart des systèmes d'exploitation disposent de programmes permettant de passer des appels, comme Skype ou FaceTime.
+- Les sites web peuvent passer des appels téléphoniques avec [`registerProtocolHandler`](/fr/docs/Web/API/Navigator/registerProtocolHandler), comme `web.skype.com`.
+- Les autres comportements comprennent l'enregistrement du numéro dans les contacts, ou l'envoi du numéro à un autre appareil.
 
-<p>Voir <a href="https://tools.ietf.org/html/rfc3966">RFC 3966</a> pour la syntaxe, les fonctionnalités supplémentaires et d'autres détails sur le schéma URL <code>tel:</code>.</p>
+Voir [RFC 3966](https://tools.ietf.org/html/rfc3966) pour la syntaxe, les fonctionnalités supplémentaires et d'autres détails sur le schéma URL `tel:`.
 
-<h3 id="using_the_download_attribute_to_save_a_canvas_as_a_png">Utilisation de l'attribut de téléchargement pour enregistrer un &lt;canvas&gt; au format PNG.</h3>
+### Utilisation de l'attribut de téléchargement pour enregistrer un \<canvas> au format PNG.
 
-<p>Pour enregistrer le contenu d'un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> sous forme d'image, vous pouvez créer un lien avec un attribut <code>download</code> et les données du canvas sous forme d'une URL <code>data:</code> :</p>
+Pour enregistrer le contenu d'un élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) sous forme d'image, vous pouvez créer un lien avec un attribut `download` et les données du canvas sous forme d'une URL `data:` :
 
-<h4 id="example_painting_app_with_save_link">Exemple d'application de peinture avec lien de sauvegarde</h4>
+#### Exemple d'application de peinture avec lien de sauvegarde
 
-<h5 id="html_3">HTML</h5>
+##### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Peignez en maintenant le bouton de la souris enfoncé et en le déplaçant.
-  &lt;a href="" download="my_painting.png"&gt;Télécharger ma peinture&lt;/a&gt;
-&lt;/p&gt;
+  <a href="" download="my_painting.png">Télécharger ma peinture</a>
+</p>
 
-&lt;canvas width="300" height="300"&gt;&lt;/canvas&gt;</pre>
+<canvas width="300" height="300"></canvas>
+```
 
-<h5 id="css_2">CSS</h5>
+##### CSS
 
-<pre class="brush: css">html {
+```css
+html {
   font-family: sans-serif;
 }
 canvas {
@@ -260,11 +317,13 @@ a {
   background: #69c;
   color: #fff;
   padding: 5px 10px;
-}</pre>
+}
+```
 
-<h5 id="javascript">JavaScript</h5>
+##### JavaScript
 
-<pre class="brush: js">var canvas = document.querySelector('canvas'),
+```js
+var canvas = document.querySelector('canvas'),
     c = canvas.getContext('2d');
 c.fillStyle = 'hotpink';
 
@@ -277,155 +336,157 @@ function draw(x, y) {
   }
 }
 
-canvas.addEventListener('mousemove', event =&gt;
+canvas.addEventListener('mousemove', event =>
   draw(event.offsetX, event.offsetY)
 );
-canvas.addEventListener('mousedown', () =&gt; isDrawing = true);
-canvas.addEventListener('mouseup', () =&gt; isDrawing = false);
+canvas.addEventListener('mousedown', () => isDrawing = true);
+canvas.addEventListener('mouseup', () => isDrawing = false);
 
-document.querySelector('a').addEventListener('click', event =&gt;
+document.querySelector('a').addEventListener('click', event =>
   event.target.href = canvas.toDataURL()
-);</pre>
+);
+```
 
-<h5 id="result_3">Résultat</h5>
+##### Résultat
 
-<p>{{EmbedLiveSample('example_painting_app_with_save_link', '100%', '420')}}</p>
+{{EmbedLiveSample('example_painting_app_with_save_link', '100%', '420')}}
 
-<h2 id="security_and_privacy">Sécurité et vie privée</h2>
+## Sécurité et vie privée
 
-<p>Les éléments <code>&lt;a&gt;</code> peuvent avoir des conséquences sur la sécurité et la vie privée des utilisateurs. Voir <a href="/fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns"><code>Referer</code> header : privacy and security concerns</a> pour plus d'informations.</p>
+Les éléments `<a>` peuvent avoir des conséquences sur la sécurité et la vie privée des utilisateurs. Voir [`Referer` header : privacy and security concerns](/fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns) pour plus d'informations.
 
-<p>L'utilisation de <code>target="_blank"</code> sans <a href="/fr/docs/Web/HTML/Link_types/noreferrer"><code>rel="noreferrer"</code></a> et <a href="/fr/docs/Web/HTML/Link_types/noopener"><code>rel="noopener"</code></a> rend le site web vulnérable aux attaques d'exploitation de l'API <a href="/fr/docs/Web/API/Window/opener"><code>window.opener</code></a> (<a href="https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/">description de la vulnérabilité</a>), bien qu'il faille noter que, dans les versions plus récentes du navigateur, la définition de <code>target="_blank"</code> fournit implicitement la même protection que la définition de <code>rel="noopener"</code>. Voir la <a href="#browser_compatibility">compatibilité des navigateurs</a> pour plus de détails.</p>
+L'utilisation de `target="_blank"` sans [`rel="noreferrer"`](/fr/docs/Web/HTML/Link_types/noreferrer) et [`rel="noopener"`](/fr/docs/Web/HTML/Link_types/noopener) rend le site web vulnérable aux attaques d'exploitation de l'API [`window.opener`](/fr/docs/Web/API/Window/opener) ([description de la vulnérabilité](https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/)), bien qu'il faille noter que, dans les versions plus récentes du navigateur, la définition de `target="_blank"` fournit implicitement la même protection que la définition de `rel="noopener"`. Voir la [compatibilité des navigateurs](#browser_compatibility) pour plus de détails.
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<h3 id="strong_link_text">Texte de lien fort</h3>
+### Texte de lien fort
 
-<p><strong>Le contenu d'un lien doit indiquer où va le lien</strong>, même hors contexte.</p>
+**Le contenu d'un lien doit indiquer où va le lien**, même hors contexte.
 
-<h4 id="inaccessible_weak_link_text">Texte inaccessible, lien faible</h4>
+#### Texte inaccessible, lien faible
 
-<p>Une erreur tristement courante consiste à ne relier que les mots « cliquez ici » ou « ici » :</p>
+Une erreur tristement courante consiste à ne relier que les mots « cliquez ici » ou « ici » :
 
-<pre class="brush: html example-bad">&lt;p&gt;
-  En savoir plus sur nos produits &lt;a href="/products"&gt;ici&lt;/a&gt;.
-&lt;/p&gt;
-</pre>
+```html example-bad
+<p>
+  En savoir plus sur nos produits <a href="/products">ici</a>.
+</p>
+```
 
-<h4 id="strong_link_text_2">Texte de lien fort</h4>
+#### Texte de lien fort
 
-<p>Heureusement, il s'agit d'une solution facile, et elle est en fait plus courte que la version inaccessible !</p>
+Heureusement, il s'agit d'une solution facile, et elle est en fait plus courte que la version inaccessible !
 
-<pre class="brush: html example-good">&lt;p&gt;
-  En savoir plus &lt;a href="/products"&gt;à propos de nos produits&lt;/a&gt;.
-&lt;/p&gt;</pre>
+```html example-good
+<p>
+  En savoir plus <a href="/products">à propos de nos produits</a>.
+</p>
+```
 
-<p>Les logiciels d'assistance disposent de raccourcis permettant de lister tous les liens d'une page. Cependant, un texte de lien fort profite à tous les utilisateurs − le raccourci « liste de tous les liens » imite la façon dont les utilisateurs voyants parcourent rapidement les pages.</p>
+Les logiciels d'assistance disposent de raccourcis permettant de lister tous les liens d'une page. Cependant, un texte de lien fort profite à tous les utilisateurs − le raccourci « liste de tous les liens » imite la façon dont les utilisateurs voyants parcourent rapidement les pages.
 
-<h3 id="onclick_events">Évènements <code>onclick</code></h3>
+### Évènements `onclick`
 
-<p>Les ancres sont souvent détournées avec l'évènement <code>onclick</code> afin de créer des pseudo-boutons avec l'attribut <code>href</code> qui vaut <code>"#"</code> ou <code>"javascript:void(0)"</code> pour empêcher le rafraîchissement de la page.</p>
+Les ancres sont souvent détournées avec l'évènement `onclick` afin de créer des pseudo-boutons avec l'attribut `href` qui vaut `"#"` ou `"javascript:void(0)"` pour empêcher le rafraîchissement de la page.
 
-<p>Ces valeurs produisent des résultats inadéquats lorsqu'on copie/déplace des liens, qu'on ouvre des liens dans de nouveaux onglets ou fenêtres, qu'on ajoute des marque-pages ou lorsque le JavaScript est encore en train d'être téléchargé. De plus, la sémantique exposée par le document, utilisée par les outils d'assistance, est incorrecte.</p>
+Ces valeurs produisent des résultats inadéquats lorsqu'on copie/déplace des liens, qu'on ouvre des liens dans de nouveaux onglets ou fenêtres, qu'on ajoute des marque-pages ou lorsque le JavaScript est encore en train d'être téléchargé. De plus, la sémantique exposée par le document, utilisée par les outils d'assistance, est incorrecte.
 
-<p>Dans ces cas, on privilégiera plutôt l'utilisation d'un bouton <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>. De façon générale, une ancre ne doit être utilisée que pour naviguer vers une URL correcte.</p>
+Dans ces cas, on privilégiera plutôt l'utilisation d'un bouton [`<button>`](/fr/docs/Web/HTML/Element/Button). De façon générale, une ancre ne doit être utilisée que pour naviguer vers une URL correcte.
 
-<h3 id="external_links_and_linking_to_non-html_resources">Liens externes, liens vers des ressources non-HTML</h3>
+### Liens externes, liens vers des ressources non-HTML
 
-<p>Les liens qui ouvrent un nouvel onglet ou une nouvelle fenêtre grâce à <code>target="_blank"</code>, ainsi que les liens qui ouvrent des fichiers devraient fournir une indication sur ce qui se produira lorsqu'on cliquera sur ces liens.</p>
+Les liens qui ouvrent un nouvel onglet ou une nouvelle fenêtre grâce à `target="_blank"`, ainsi que les liens qui ouvrent des fichiers devraient fournir une indication sur ce qui se produira lorsqu'on cliquera sur ces liens.
 
-<p>Les personnes qui utilisent des outils d'assistance à la navigation comme des lecteurs d'écran et/ou qui souffrent de troubles de la vision, cognitifs peuvent être confuses lorsqu'un nouvel onglet, fichier ou une nouvelle fenêtre s'ouvre de façon inattendue. Les anciennes versions des lecteurs d'écran peuvent également ne pas annoncer ce comportement.</p>
+Les personnes qui utilisent des outils d'assistance à la navigation comme des lecteurs d'écran et/ou qui souffrent de troubles de la vision, cognitifs peuvent être confuses lorsqu'un nouvel onglet, fichier ou une nouvelle fenêtre s'ouvre de façon inattendue. Les anciennes versions des lecteurs d'écran peuvent également ne pas annoncer ce comportement.
 
-<h4 id="link_that_opens_a_new_tabwindow">Lien vers un nouvel onglet ou une nouvelle fenêtre</h4>
+#### Lien vers un nouvel onglet ou une nouvelle fenêtre
 
-<pre class="brush: html">&lt;a target="_blank" href="https://www.wikipedia.org/"&gt;
+```html
+<a target="_blank" href="https://www.wikipedia.org/">
   Wikipédia (s'ouvre dans une nouvelle fenêtre)
-&lt;/a&gt;</pre>
+</a>
+```
 
-<h4 id="link_to_a_non-html_resource">Lien vers une ressource non-HTML</h4>
+#### Lien vers une ressource non-HTML
 
-<pre class="brush: html">&lt;a target="_blank" href="2017-rapport-annuel.ppt"&gt;
+```html
+<a target="_blank" href="2017-rapport-annuel.ppt">
   Rapport annuel 2017 (PowerPoint)
-&lt;/a&gt;</pre>
+</a>
+```
 
-<p>Si une icône est utilisée en lieu et place du texte pour indiquer ce comportement, on s'assurera qu'elle contient bien <a href="/fr/docs/Web/HTML/Element/Img#attr-alt">une description alternative</a>.</p>
+Si une icône est utilisée en lieu et place du texte pour indiquer ce comportement, on s'assurera qu'elle contient bien [une description alternative](/fr/docs/Web/HTML/Element/Img#attr-alt).
 
-<pre class="brush: html">&lt;a  target="_blank" href="https://www.wikipedia.org"&gt;
+```html
+<a  target="_blank" href="https://www.wikipedia.org">
   Wikipédia
-  &lt;img alt="(s'ouvre dans un nouvel onglet)" src="newtab.svg"&gt;
-&lt;/a&gt;
+  <img alt="(s'ouvre dans un nouvel onglet)" src="newtab.svg">
+</a>
 
-&lt;a href="2017-annual-report.ppt"&gt;
+<a href="2017-annual-report.ppt">
   Rapport annuel 2017 (PowerPoint)
-  &lt;img alt="(fichier PowerPoint)" src="ppt-icon.svg"&gt;
-&lt;/a&gt;</pre>
+  <img alt="(fichier PowerPoint)" src="ppt-icon.svg">
+</a>
+```
 
-<ul>
-  <li><a href="https://webaim.org/techniques/hypertext/hypertext_links">WebAIM : Liens et hypertexte (en anglais)</a></li>
-  <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_—_predictable_make_web_pages_appear_and_operate_in_predictable_ways">Comprendre les règles WCAG 3.2</a></li>
-  <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html">G200 : Ouvrir de nouvelles fenêtres et onglets à partir d'un lien lorsque c'est strictement nécessaire - WCAG 2.0 (en anglais)</a></li>
-  <li><a href="https://www.w3.org/TR/WCAG20-TECHS/G201.html">G201 : Fournir un avertissement aux utilisateurs lorsqu'ils ouvrent une nouvelle fenêtre WCAG 2.0 (en anglais)</a></li>
-</ul>
+- [WebAIM : Liens et hypertexte (en anglais)](https://webaim.org/techniques/hypertext/hypertext_links)
+- [Comprendre les règles WCAG 3.2](/fr/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_—_predictable_make_web_pages_appear_and_operate_in_predictable_ways)
+- [G200 : Ouvrir de nouvelles fenêtres et onglets à partir d'un lien lorsque c'est strictement nécessaire - WCAG 2.0 (en anglais)](https://www.w3.org/TR/WCAG20-TECHS/G200.html)
+- [G201 : Fournir un avertissement aux utilisateurs lorsqu'ils ouvrent une nouvelle fenêtre WCAG 2.0 (en anglais)](https://www.w3.org/TR/WCAG20-TECHS/G201.html)
 
-<h3 id="skip_links"><i>Skip links</i> - liens pour l'accès rapide au contenu</h3>
+### _Skip links_ - liens pour l'accès rapide au contenu
 
-<p>Un <i>skip link</i> (aussi appelé <i>skipnav</i> en anglais) est un élément <code>a</code> qui est placé le plus près possible de l'élément <a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a> et qui renvoie au début du contenu principal de la page.</p>
+Un _skip link_ (aussi appelé _skipnav_ en anglais) est un élément `a` qui est placé le plus près possible de l'élément [`<body>`](/fr/docs/Web/HTML/Element/body) et qui renvoie au début du contenu principal de la page.
 
-<pre class="brush: html">&lt;body&gt;
-  &lt;a href="#content"&gt;Skip to main content&lt;/a&gt;
+```html
+<body>
+  <a href="#content">Skip to main content</a>
 
-  &lt;header&gt;
+  <header>
     …
-  &lt;/header&gt;
+  </header>
 
-  &lt;main id="content"&gt; &lt;!-- Le lien "skip" renvoie vers ici --&gt;</pre>
+  <main id="content"> <!-- Le lien "skip" renvoie vers ici -->
+```
 
-<p>Ce lien permet alors de passer plus facilement le contenu qui se répète sur l'ensemble des pages (l'en-tête et la barre de navigation par exemple).</p>
+Ce lien permet alors de passer plus facilement le contenu qui se répète sur l'ensemble des pages (l'en-tête et la barre de navigation par exemple).
 
-<p>Les <i>skip links</i> sont particulièrement utiles pour les personnes qui naviguent à l'aide d'outils d'assistance (commande vocale, stylets buccal ou frontal) pour lesquels devoir passer par des liens répétés peut freiner la lecture du document.</p>
+Les _skip links_ sont particulièrement utiles pour les personnes qui naviguent à l'aide d'outils d'assistance (commande vocale, stylets buccal ou frontal) pour lesquels devoir passer par des liens répétés peut freiner la lecture du document.
 
-<ul>
-  <li><em><a href="https://webaim.org/techniques/skipnav/">WebAIM: "Skip Navigation" Links</a></em> (en anglais)</li>
-  <li><a href="https://a11yproject.com/posts/2013-05-11-skip-nav-links/">Comment utiliser les <i>skip links</i> - <i>The A11Y Project</i> (en anglais)</a></li>
-  <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_%e2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">Comprendre les règles WCAG 2.4</a></li>
-  <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html"><i>Understanding Success Criterion 2.4.1 - W3C Understanding WCAG 2.0</i> (en anglais)</a></li>
-</ul>
+- _[WebAIM: "Skip Navigation" Links](https://webaim.org/techniques/skipnav/)_ (en anglais)
+- [Comment utiliser les _skip links_ - _The A11Y Project_ (en anglais)](https://a11yproject.com/posts/2013-05-11-skip-nav-links/)
+- [Comprendre les règles WCAG 2.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_%e2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are)
+- [_Understanding Success Criterion 2.4.1 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html)
 
-<h3 id="size_and_proximity">Dimensionnement et proximité</h3>
+### Dimensionnement et proximité
 
-<h4 id="size">La taille</h4>
+#### La taille
 
-<p>Les éléments interactifs tels que les liens doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">pixels CSS</a>.</p>
+Les éléments interactifs tels que les liens doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 [pixels CSS](https://www.w3.org/TR/WCAG21/#dfn-css-pixels).
 
-<p>Les liens en texte seul dans le contenu en prose sont exemptés de cette exigence, mais il est toujours bon de s'assurer qu'il y a suffisamment de texte hyperlié pour être facilement activé.</p>
+Les liens en texte seul dans le contenu en prose sont exemptés de cette exigence, mais il est toujours bon de s'assurer qu'il y a suffisamment de texte hyperlié pour être facilement activé.
 
-<ul>
-  <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)</a></li>
-  <li><a href="https://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Taille des cibles et critère 2.5.5, (en anglais) d'Adrian Roselli (an anglais)</a></li>
-  <li><a href="https://a11yproject.com/posts/large-touch-targets/">Test rapide : cibles tactiles suffisamment grande - Projet A11Y (en anglais)</a></li>
-</ul>
+- [Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)
+- [Taille des cibles et critère 2.5.5, (en anglais) d'Adrian Roselli (an anglais)](https://adrianroselli.com/2019/06/target-size-and-2-5-5.html)
+- [Test rapide : cibles tactiles suffisamment grande - Projet A11Y (en anglais)](https://a11yproject.com/posts/large-touch-targets/)
 
-<h4 id="proximity">La proximité</h4>
+#### La proximité
 
-<p>Lorsque plusieurs contenus interactifs (y compris les ancres) sont placés les uns à côté des autres, il est nécessaire de les espacer suffisamment pour minimiser le risque d'activer le mauvais contenu lors de la navigation.</p>
+Lorsque plusieurs contenus interactifs (y compris les ancres) sont placés les uns à côté des autres, il est nécessaire de les espacer suffisamment pour minimiser le risque d'activer le mauvais contenu lors de la navigation.
 
-<p>Un tel espacement peut être obtenu grâce à la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</p>
+Un tel espacement peut être obtenu grâce à la propriété CSS [`margin`](/fr/docs/Web/CSS/margin).
 
-<ul>
-  <li><a href="https://axesslab.com/hand-tremors/">Les tremblements de la main et le problème du bouton géant - Axess Lab (en anglais)</a></li>
-</ul>
+- [Les tremblements de la main et le problème du bouton géant - Axess Lab (en anglais)](https://axesslab.com/hand-tremors/)
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> est similaire à <code>&lt;a&gt;</code>, mais représente des hyperliens de métadonnées qui sont invisibles pour les utilisateurs.</li>
-  <li><a href="/fr/docs/Web/CSS/:link"><code>:link</code></a> est une pseudo-classe CSS qui correspondra aux éléments <code>&lt;a&gt;</code> avec des attributs <code>href</code> valides.</li>
-</ul>
+- [`<link>`](/fr/docs/Web/HTML/Element/link) est similaire à `<a>`, mais représente des hyperliens de métadonnées qui sont invisibles pour les utilisateurs.
+- [`:link`](/fr/docs/Web/CSS/:link) est une pseudo-classe CSS qui correspondra aux éléments `<a>` avec des attributs `href` valides.
diff --git a/files/fr/web/html/element/abbr/index.md b/files/fr/web/html/element/abbr/index.md
index 178a8835df..af55af9279 100644
--- a/files/fr/web/html/element/abbr/index.md
+++ b/files/fr/web/html/element/abbr/index.md
@@ -1,5 +1,5 @@
 ---
-title: "<abbr> : l'élément d'abréviation"
+title: '<abbr> : l''élément d''abréviation'
 slug: Web/HTML/Element/abbr
 tags:
   - Acronym
@@ -18,29 +18,57 @@ tags:
 translation_of: Web/HTML/Element/abbr
 browser-compat: html.elements.abbr
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;abbr&gt;</code></strong> (<strong>abréviation</strong> en français) représente une abréviation ou un acronyme ; l'attribut facultatif <a href="/fr/docs/Web/HTML/Global_attributes#attr-title"><code>title</code></a> peut fournir une explication ou une description de l'abréviation. S'il est présent, <code>title</code> doit contenir cette description complète et rien d'autre.</p>
+L'élément HTML **`<abbr>`** (**abréviation** en français) représente une abréviation ou un acronyme ; l'attribut facultatif [`title`](/fr/docs/Web/HTML/Global_attributes#attr-title) peut fournir une explication ou une description de l'abréviation. S'il est présent, `title` doit contenir cette description complète et rien d'autre.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/abbr.html", "tabbed-shorter")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phras.c3.a9">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_tangible">contenu tangible</a>.</td>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/Guide/HTML/Content_categories"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phras.c3.a9"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row"><dfn>Contenu autorisé</dfn></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phras.c3.a9">Contenu phrasé</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phras.c3.a9"
+          >Contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row"><dfn>Omission de balises</dfn></th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row"><dfn>Parents autorisés</dfn></th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phras.c3.a9">contenu phrasé</a>.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phras.c3.a9"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -48,134 +76,141 @@ browser-compat: html.elements.abbr
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>
+      </td>
     </tr>
   </tbody>
- </table>
+</table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p>
+Cet élément n'a pas d'autres attributs que les [attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<p>On notera que l'attribut <strong><code>title</code></strong> possède ici une sémantique spécifique et il représente la description complète de l'abréviation. Souvent, mais pas nécessairement, il s'affiche comme une info-bulle au survol de la souris.</p>
+On notera que l'attribut **`title`** possède ici une sémantique spécifique et il représente la description complète de l'abréviation. Souvent, mais pas nécessairement, il s'affiche comme une info-bulle au survol de la souris.
 
-<p>Chaque élément <code>&lt;abbr&gt;</code> est indépendant, rattacher un titre à l'un ne l'associe pas aux abréviations identiques qui suivent.</p>
+Chaque élément `<abbr>` est indépendant, rattacher un titre à l'un ne l'associe pas aux abréviations identiques qui suivent.
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<h3 id="typical_use_cases">Cas d'usage généraux</h3>
+### Cas d'usage généraux
 
-<p>Il n'est pas obligatoire d'utiliser <code>&lt;abbr&gt;</code> pour toutes les abréviations d'un document mais voici quelques cas où cet élément s'avère pertinent :</p>
+Il n'est pas obligatoire d'utiliser `<abbr>` pour toutes les abréviations d'un document mais voici quelques cas où cet élément s'avère pertinent :
 
-<ul>
-  <li>Lorsqu'une abréviation est utilisée et qu'on souhaite fournir une définition ou une explication en dehors du contenu du document, on utilisera <code>&lt;abbr&gt;</code> avec un attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-title"><code>title</code></a> adéquat.</li>
-  <li>Lorsqu'une abréviation fait partie d'un jargon ou d'un vocabulaire qui risque d'être inconnu du lecteur, un élément <code>&lt;abbr&gt;</code> avec un attribut <code>title</code> explicatif pourra être utilisé.</li>
-  <li>Lorsqu'on souhaite bénéficier de la sémantique liée à l'abréviation (par exemple pour les manipuler en script ou les mettre en forme avec des feuilles de style), on pourra utiliser <code>&lt;abbr&gt;</code> pour identifier ces contenus.</li>
-  <li>Lorsqu'on souhaite définir des termes qui sont des abréviations, on pourra utiliser une combinaison de <code>&lt;abbr&gt;</code> et de <a href="/fr/docs/Web/HTML/Element/dfn"><code>&lt;dfn&gt;</code></a>. Voir ci-après pour un exemple.</li>
-</ul>
+- Lorsqu'une abréviation est utilisée et qu'on souhaite fournir une définition ou une explication en dehors du contenu du document, on utilisera `<abbr>` avec un attribut [`title`](/fr/docs/Web/HTML/Global_attributes#attr-title) adéquat.
+- Lorsqu'une abréviation fait partie d'un jargon ou d'un vocabulaire qui risque d'être inconnu du lecteur, un élément `<abbr>` avec un attribut `title` explicatif pourra être utilisé.
+- Lorsqu'on souhaite bénéficier de la sémantique liée à l'abréviation (par exemple pour les manipuler en script ou les mettre en forme avec des feuilles de style), on pourra utiliser `<abbr>` pour identifier ces contenus.
+- Lorsqu'on souhaite définir des termes qui sont des abréviations, on pourra utiliser une combinaison de `<abbr>` et de [`<dfn>`](/fr/docs/Web/HTML/Element/dfn). Voir ci-après pour un exemple.
 
-<h3 id="grammar_considerations">Grammaire</h3>
+### Grammaire
 
-<p>Lorsqu'il est présent, le nombre (grammatical) du texte de l'attribut <code><strong>title</strong></code> devrait correspondre à celui du contenu de l'élément <code>abbr</code>. C'est également le cas dans les langues avec plus de deux genres grammaticaux (par exemple, l'arabe, en plus des catégories pour le singulier et le pluriel, possède également une catégorie double).</p>
+Lorsqu'il est présent, le nombre (grammatical) du texte de l'attribut **`title`** devrait correspondre à celui du contenu de l'élément `abbr`. C'est également le cas dans les langues avec plus de deux genres grammaticaux (par exemple, l'arabe, en plus des catégories pour le singulier et le pluriel, possède également une catégorie double).
 
-<h2 id="default_styling">Mise en forme par défaut</h2>
+## Mise en forme par défaut
 
-<p>Le but de cet élément est purement explicatif. Tous les navigateurs l'affichent en ligne (<code><a href="/fr/docs/Web/CSS/display">display</a>: inline</code>) par défaut mais le reste de la mise en forme par défaut peut varier d'un navigateur à l'autre :</p>
+Le but de cet élément est purement explicatif. Tous les navigateurs l'affichent en ligne (`display: inline`) par défaut mais le reste de la mise en forme par défaut peut varier d'un navigateur à l'autre :
 
-<ul>
-  <li>Certains navigateurs tels qu'Internet Explore lui appliquent la même mise en forme qu'à un élément <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a>.</li>
-  <li>Opera, Firefox et d'autres navigateurs souligne l'abréviation avec une ligne de points.</li>
-  <li>D'autres navigateurs ne soulignent pas le texte mais l'écrivent en petites majuscules. Pour éviter ce comportement, on pourra utiliser la règle CSS <code><a href="/fr/docs/Web/CSS/font-variant">font-variant</a>: none</code>.</li>
-</ul>
+- Certains navigateurs tels qu'Internet Explore lui appliquent la même mise en forme qu'à un élément [`<span>`](/fr/docs/Web/HTML/Element/span).
+- Opera, Firefox et d'autres navigateurs souligne l'abréviation avec une ligne de points.
+- D'autres navigateurs ne soulignent pas le texte mais l'écrivent en petites majuscules. Pour éviter ce comportement, on pourra utiliser la règle CSS `font-variant: none`.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="marking_up_an_abbreviation_semantically">Baliser une abréviation pour marquer la sémantique</h3>
+### Baliser une abréviation pour marquer la sémantique
 
-<p>On peut baliser une abréviation sans fournir de description ou de définition, il suffit d'utiliser <code>&lt;abbr&gt;</code> sans attribut.</p>
+On peut baliser une abréviation sans fournir de description ou de définition, il suffit d'utiliser `<abbr>` sans attribut.
 
-<h4 id="html">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
-  Nous allons voir le &lt;abbr&gt;HTML&lt;/abbr&gt; qui sert à construire
+```html
+<p>
+  Nous allons voir le <abbr>HTML</abbr> qui sert à construire
   des pages web.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("marking_up_an_abbreviation_semantically", "100%", 80)}}</p>
+{{EmbedLiveSample("marking_up_an_abbreviation_semantically", "100%", 80)}}
 
-<h3 id="styling_abbreviations">Mettre en forme des abréviations</h3>
+### Mettre en forme des abréviations
 
-<p>CSS peut être utilisé pour appliquer une mise en forme particulière sur les abréviations.</p>
+CSS peut être utilisé pour appliquer une mise en forme particulière sur les abréviations.
 
-<h4 id="html_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Avec &lt;abbr&gt;CSS&lt;/abbr&gt;, on peut mettre en forme les éléments.&lt;/p&gt;</pre>
+```html
+<p>Avec <abbr>CSS</abbr>, on peut mettre en forme les éléments.</p>
+```
 
-<h4 id="css">CSS</h4>
+#### CSS
 
-<pre class="brush: css">abbr {
+```css
+abbr {
   font-variant: all-small-caps;
-}</pre>
+}
+```
 
-<h4 id="result_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("styling_abbreviations", "100%", 80)}}</p>
+{{EmbedLiveSample("styling_abbreviations", "100%", 80)}}
 
-<h3 id="providing_an_expansion">Fournir une description</h3>
+### Fournir une description
 
-<p>On peut ajouter un attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-title"><code>title</code></a> afin de fournir une description de l'abréviation ou de l'acronyme.</p>
+On peut ajouter un attribut [`title`](/fr/docs/Web/HTML/Global_attributes#attr-title) afin de fournir une description de l'abréviation ou de l'acronyme.
 
-<h4 id="html_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Et là je lui ai répondu &lt;abbr title="Laugh Out Loud"&gt;LOL&lt;/abbr&gt;.&lt;/p&gt;</pre>
+```html
+<p>Et là je lui ai répondu <abbr title="Laugh Out Loud">LOL</abbr>.</p>
+```
 
-<h4 id="result_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("providing_an_expansion", "100%", 80)}}</p>
+{{EmbedLiveSample("providing_an_expansion", "100%", 80)}}
 
-<h3 id="defining_an_abbreviation">Définir une abréviation</h3>
+### Définir une abréviation
 
-<p>Il est possible d'utiliser l'élément <code>&lt;abbr&gt;</code> avec <a href="/fr/docs/Web/HTML/Element/dfn"><code>&lt;dfn&gt;</code></a> afin de formellement définir une abréviation.</p>
+Il est possible d'utiliser l'élément `<abbr>` avec [`<dfn>`](/fr/docs/Web/HTML/Element/dfn) afin de formellement définir une abréviation.
 
-<h4 id="html_4">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;&lt;dfn id="html"&gt;&lt;abbr title="HyperText Markup Language"&gt;HTML&lt;/abbr&gt;
-&lt;/dfn&gt; est un langage de balise qui permet de créer la structure
-et d'organiser la sémantique d'une page web.&lt;/p&gt;
+```html
+<p><dfn id="html"><abbr title="HyperText Markup Language">HTML</abbr>
+</dfn> est un langage de balise qui permet de créer la structure
+et d'organiser la sémantique d'une page web.</p>
 
-&lt;p&gt;Une &lt;dfn id="spec"&gt;spécification&lt;/dfn&gt;
-(&lt;abbr title="spécification"&gt;spec&lt;/abbr&gt;) est un document qui décrit,
+<p>Une <dfn id="spec">spécification</dfn>
+(<abbr title="spécification">spec</abbr>) est un document qui décrit,
 de façon détaillée comme une technologie ou une API fonctionne et comment
-l'utiliser.&lt;/p&gt;</pre>
+l'utiliser.</p>
+```
 
-<h4 id="result_4">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("defining_an_abbreviation", "100%", 160)}}</p>
+{{EmbedLiveSample("defining_an_abbreviation", "100%", 160)}}
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>C'est une bonne pratique que d'épeler l'acronyme ou l'abréviation lorsqu'elle est utilisée pour la première fois. Cela permet au lecteur de mieux comprendre le terme, notamment si celui-ci est technique ou appartient à un jargon spécifique.</p>
+C'est une bonne pratique que d'épeler l'acronyme ou l'abréviation lorsqu'elle est utilisée pour la première fois. Cela permet au lecteur de mieux comprendre le terme, notamment si celui-ci est technique ou appartient à un jargon spécifique.
 
-<h4 id="example">Exemple</h4>
+#### Exemple
 
-<pre class="brush: html">&lt;p&gt;JavaScript Object Notation (&lt;abbr&gt;JSON&lt;/abbr&gt;) est un format léger
-  d'échange de données.&lt;/p&gt;
-</pre>
+```html
+<p>JavaScript Object Notation (<abbr>JSON</abbr>) est un format léger
+  d'échange de données.</p>
+```
 
-<p>Cela peut servir aux personnes qui découvrent ces concepts pour la première fois ou pour les personnes souffrant de troubles cognitifs.</p>
+Cela peut servir aux personnes qui découvrent ces concepts pour la première fois ou pour les personnes souffrant de troubles cognitifs.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#abbreviations">Utiliser l'élément <code>&lt;abbr&gt;</code></a></li>
-</ul>
+- [Utiliser l'élément `<abbr>`](/fr/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#abbreviations)
diff --git a/files/fr/web/html/element/acronym/index.md b/files/fr/web/html/element/acronym/index.md
index 68ac02fa39..bc09baa877 100644
--- a/files/fr/web/html/element/acronym/index.md
+++ b/files/fr/web/html/element/acronym/index.md
@@ -1,5 +1,5 @@
 ---
-title: "<acronym> : l'élément d'acronyme"
+title: '<acronym> : l''élément d''acronyme'
 slug: Web/HTML/Element/acronym
 tags:
   - Element
@@ -11,60 +11,51 @@ tags:
 translation_of: Web/HTML/Element/acronym
 browser-compat: html.elements.acronym
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p>
-</div>
+> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
 
-<p>L'élément HTML <strong><code>&lt;acronym&gt;</code></strong>, pour les acronymes, permet aux auteurs de pages d'indiquer une suite de caractères composant un acronyme ou l'abréviation d'un mot.</p>
+L'élément HTML **`<acronym>`**, pour les acronymes, permet aux auteurs de pages d'indiquer une suite de caractères composant un acronyme ou l'abréviation d'un mot.
 
-<div class="note">
-  <p><strong>Note :</strong>Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. <strong>Les développeuses et développeurs web devraient utiliser l'élément <a href="/fr/docs/Web/HTML/Element/abbr"><code>&lt;abbr&gt;</code></a> à la place</strong>.</p>
-</div>
+> **Note :**Cet élément n'existe plus en HTML5 et ne devrait plus être utilisé. **Les développeuses et développeurs web devraient utiliser l'élément [`<abbr>`](/fr/docs/Web/HTML/Element/abbr) à la place**.
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>, communs à tous les éléments.</p>
+Cet élément n'a pas d'autres attributs que les [attributs universels](/fr/docs/Web/HTML/Global_attributes), communs à tous les éléments.
 
-<h2 id="DOM_Interface">Interface DOM</h2>
+## Interface DOM
 
-<p>Cet élément implémente l'interface <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</p>
+Cet élément implémente l'interface [`HTMLElement`](/fr/docs/Web/API/HTMLElement).
 
-<div class="note">
-  <p><strong>Note :</strong>Jusqu'à Gecko 1.9.2 (inclus), Firefox implémente l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</p>
-</div>
+> **Note :**Jusqu'à Gecko 1.9.2 (inclus), Firefox implémente l'interface [`HTMLSpanElement`](/fr/docs/Web/API/HTMLSpanElement) pour cet élément.
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<pre class="brush:html">&lt;p&gt;
-   Le &lt;acronym title="World Wide Web" lang="en"&gt;WWW&lt;/acronym&gt;
+```html
+<p>
+   Le <acronym title="World Wide Web" lang="en">WWW</acronym>
    n'est qu'une facette d'Internet.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h2 id="default_styling">Style par défaut</h2>
+## Style par défaut
 
-<p>Bien que le but de cette balise ne soit simplement qu'un avantage pratique pour l'auteur, son style par défaut varie selon les navigateurs :</p>
+Bien que le but de cette balise ne soit simplement qu'un avantage pratique pour l'auteur, son style par défaut varie selon les navigateurs :
 
-<ul>
-  <li>Certains navigateurs comme Internet Explorer lui attribuent le même style qu'un élément <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a>.</li>
-  <li>Opera, Firefox, et quelques autres ajoutent une ligne pointillée sous le contenu de l'élément.</li>
-  <li>Quelques navigateurs ajoutent une ligne pointillée en dessous et mettent le contenu en petites majuscules. Pour éviter ce comportement, il est possible d'ajouter <code><a href="/fr/docs/Web/CSS/font-variant">font-variant</a>: none</code> à la feuille de style CSS.</li>
-</ul>
+- Certains navigateurs comme Internet Explorer lui attribuent le même style qu'un élément [`<span>`](/fr/docs/Web/HTML/Element/span).
+- Opera, Firefox, et quelques autres ajoutent une ligne pointillée sous le contenu de l'élément.
+- Quelques navigateurs ajoutent une ligne pointillée en dessous et mettent le contenu en petites majuscules. Pour éviter ce comportement, il est possible d'ajouter `font-variant: none` à la feuille de style CSS.
 
-<p>Il est donc fortement recommandé que les développeurs web ne s'attendent pas à un comportement uniforme concernant ce style par défaut.</p>
+Il est donc fortement recommandé que les développeurs web ne s'attendent pas à un comportement uniforme concernant ce style par défaut.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément HTML <a href="/fr/docs/Web/HTML/Element/abbr"><code>&lt;abbr&gt;</code></a></li>
-</ul>
+- L'élément HTML [`<abbr>`](/fr/docs/Web/HTML/Element/abbr)
diff --git a/files/fr/web/html/element/address/index.md b/files/fr/web/html/element/address/index.md
index 45ca70e4b9..d58e461f67 100644
--- a/files/fr/web/html/element/address/index.md
+++ b/files/fr/web/html/element/address/index.md
@@ -18,94 +18,163 @@ tags:
 translation_of: Web/HTML/Element/address
 browser-compat: html.elements.address
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;address&gt;</code></strong> indique des informations de contact pour une personne, un groupe de personnes ou une organisation.</p>
+L'élément HTML **`<address>`** indique des informations de contact pour une personne, un groupe de personnes ou une organisation.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/address.html", "tabbed-standard")}}
 
-<p>L'information de contact fournie via cet élément peut prendre n'importe quelle forme pertinente : ce peut être une adresse physique, une URL, une adresse électronique, un numéro de téléphone, des coordonnées géographiques, etc. Ces informations devraient contenir le nom de la personne, du groupe de personne ou de l'organisation à laquelle le contact fait référence.</p>
+L'information de contact fournie via cet élément peut prendre n'importe quelle forme pertinente : ce peut être une adresse physique, une URL, une adresse électronique, un numéro de téléphone, des coordonnées géographiques, etc. Ces informations devraient contenir le nom de la personne, du groupe de personne ou de l'organisation à laquelle le contact fait référence.
 
-<p>Cet élément peut être employé dans un élément <a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a> pour indiquer la personne qui écrit l'article ou être utilisé dans l'en-tête de la page pour fournir une adresse d'entreprise.</p>
+Cet élément peut être employé dans un élément [`<article>`](/fr/docs/Web/HTML/Element/article) pour indiquer la personne qui écrit l'article ou être utilisé dans l'en-tête de la page pour fournir une adresse d'entreprise.
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/Guide/HTML/Content_categories"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, mais sans élément <code>&lt;address&gt;</code> inclus, sans contenu de titre (<a href="/fr/docs/Web/HTML/Element/hgroup"><code>&lt;hgroup&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h1&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h2&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h3&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h4&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h5&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h6&gt;</code></a>), sans contenu de section (<a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/aside"><code>&lt;aside&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code>&lt;nav&gt;</code></a>), et sans <a href="/fr/docs/Web/HTML/Element/header"><code>&lt;header&gt;</code></a> ou élément <a href="/fr/docs/Web/HTML/Element/footer"><code>&lt;footer&gt;</code></a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >, mais sans élément <code>&#x3C;address></code> inclus, sans contenu de
+        titre (<a href="/fr/docs/Web/HTML/Element/hgroup"
+          ><code>&#x3C;hgroup></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Heading_Elements"
+          ><code>&#x3C;h1></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Heading_Elements"
+          ><code>&#x3C;h2></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Heading_Elements"
+          ><code>&#x3C;h3></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Heading_Elements"
+          ><code>&#x3C;h4></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Heading_Elements"
+          ><code>&#x3C;h5></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Heading_Elements"
+          ><code>&#x3C;h6></code></a
+        >), sans contenu de section (<a href="/fr/docs/Web/HTML/Element/article"
+          ><code>&#x3C;article></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/aside"><code>&#x3C;aside></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/section"
+          ><code>&#x3C;section></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/nav"><code>&#x3C;nav></code></a
+        >), et sans
+        <a href="/fr/docs/Web/HTML/Element/header"
+          ><code>&#x3C;header></code></a
+        >
+        ou élément
+        <a href="/fr/docs/Web/HTML/Element/footer"><code>&#x3C;footer></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément qui accepte un <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux">contenu de flux</a> mais pas d'éléments <code>&lt;address&gt;</code>.</td>
+      <td>
+        Tout élément qui accepte un
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux"
+          >contenu de flux</a
+        >
+        mais pas d'éléments <code>&#x3C;address></code>.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Aucun rôle correspondant</a></td>
-     </tr>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Aucun rôle correspondant</a
+        >
+      </td>
+    </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
       <td>Aucun.</td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>. Avant Gecko 2.0 (Firefox 4), Gecko implémentait cet élément en utilisant l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a>.</td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a
+        >. Avant Gecko 2.0 (Firefox 4), Gecko implémentait cet élément en
+        utilisant l'interface
+        <a href="/fr/docs/Web/API/HTMLSpanElement"
+          ><code>HTMLSpanElement</code></a
+        >.
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>, communs à tous les éléments.</p>
+Cet élément n'a pas d'autres attributs que les [attributs universels](/fr/docs/Web/HTML/Global_attributes), communs à tous les éléments.
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<ul>
-  <li>Pour représenter une adresse arbitraire, qui n'est pas relative à l'information de contact, on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/p"><code>&lt;p&gt;</code></a> plutôt que l'élément <code>&lt;address&gt;</code>.</li>
-  <li>Cet élément ne doit pas contenir plus d'informations que l'information de contact, par exemple une date de publication (qui appartiendrait à l'élément <a href="/fr/docs/Web/HTML/Element/time"><code>&lt;time&gt;</code></a>).</li>
-  <li>Typiquement un élément <code>&lt;address&gt;</code> peut être placé dans l'élément <a href="/fr/docs/Web/HTML/Element/footer"><code>&lt;footer&gt;</code></a> de la section courante, s'il y en a une.</li>
-</ul>
+- Pour représenter une adresse arbitraire, qui n'est pas relative à l'information de contact, on utilisera l'élément [`<p>`](/fr/docs/Web/HTML/Element/p) plutôt que l'élément `<address>`.
+- Cet élément ne doit pas contenir plus d'informations que l'information de contact, par exemple une date de publication (qui appartiendrait à l'élément [`<time>`](/fr/docs/Web/HTML/Element/time)).
+- Typiquement un élément `<address>` peut être placé dans l'élément [`<footer>`](/fr/docs/Web/HTML/Element/footer) de la section courante, s'il y en a une.
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;address&gt;
+```html
+<address>
   Vous pouvez contacter l'auteur à l'adresse
-  &lt;a href="http://www.undomaine.com/contact"&gt;www.undomaine.com&lt;/a&gt;.&lt;br&gt;
+  <a href="http://www.undomaine.com/contact">www.undomaine.com</a>.<br>
   Si vous relevez quelques bogues que ce soient, merci de contacter
-  &lt;a href="mailto:webmaster@somedomain.com"&gt;le webmaster&lt;/a&gt;.&lt;br&gt;
-  Vous pouvez aussi venir nous voir :&lt;br&gt;
-  Mozilla Foundation&lt;br&gt;
-  1981 Landings Drive&lt;br&gt;
-  Building K&lt;br&gt;
-  Mountain View, CA 94043-0801&lt;br&gt;
+  <a href="mailto:webmaster@somedomain.com">le webmaster</a>.<br>
+  Vous pouvez aussi venir nous voir :<br>
+  Mozilla Foundation<br>
+  1981 Landings Drive<br>
+  Building K<br>
+  Mountain View, CA 94043-0801<br>
   USA
-&lt;/address&gt;
-</pre>
+</address>
+```
 
-<h3 id="result">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("example", "100%", 190)}}</p>
+{{EmbedLiveSample("example", "100%", 190)}}
 
-<p>Bien que le rendu par défaut du texte de l'élément <code>&lt;address&gt;</code> utilise le même style par défaut que les éléments <a href="/fr/docs/Web/HTML/Element/i"><code>&lt;i&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/em"><code>&lt;em&gt;</code></a>, il est plus approprié d'utiliser cet élément lorsque l'on traite d'informations de contact, étant donné qu'il apporte des informations sémantiques supplémentaires.</p>
+Bien que le rendu par défaut du texte de l'élément `<address>` utilise le même style par défaut que les éléments [`<i>`](/fr/docs/Web/HTML/Element/i) ou [`<em>`](/fr/docs/Web/HTML/Element/em), il est plus approprié d'utiliser cet élément lorsque l'on traite d'informations de contact, étant donné qu'il apporte des informations sémantiques supplémentaires.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>Les autres éléments liés aux sections d'un document : <a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code>&lt;nav&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/aside"><code>&lt;aside&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h1&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h2&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h3&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h4&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h5&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h6&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/hgroup"><code>&lt;hgroup&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/footer"><code>&lt;footer&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code>&lt;header&gt;</code></a> ;</li>
-  <li><a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Sections et titres d'un document HTML5</a></li>
-</ul>
+- Les autres éléments liés aux sections d'un document : [`<body>`](/fr/docs/Web/HTML/Element/body), [`<nav>`](/fr/docs/Web/HTML/Element/nav), [`<article>`](/fr/docs/Web/HTML/Element/article), [`<aside>`](/fr/docs/Web/HTML/Element/aside), [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h2>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h3>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h4>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h5>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<hgroup>`](/fr/docs/Web/HTML/Element/hgroup), [`<footer>`](/fr/docs/Web/HTML/Element/footer), [`<section>`](/fr/docs/Web/HTML/Element/section), [`<header>`](/fr/docs/Web/HTML/Element/header) ;
+- [Sections et titres d'un document HTML5](/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines)
diff --git a/files/fr/web/html/element/applet/index.md b/files/fr/web/html/element/applet/index.md
index fd69f43973..30fbcbea96 100644
--- a/files/fr/web/html/element/applet/index.md
+++ b/files/fr/web/html/element/applet/index.md
@@ -1,5 +1,5 @@
 ---
-title: "<applet> : l'élément d'applet Java embarqué"
+title: '<applet> : l''élément d''applet Java embarqué'
 slug: Web/HTML/Element/applet
 tags:
   - Element
@@ -11,37 +11,69 @@ tags:
   - applet
 translation_of: Web/HTML/Element/applet
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p>
-</div>
+> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cet élément a été retiré à partir de <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1279218">Gecko 56</a>, de <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=470301">Chrome 47</a> et le retrait est à l'étude pour <a href="https://bugs.webkit.org/show_bug.cgi?id=157926">WebKit</a> et <a href="https://developer.microsoft.com/fr/microsoft-edge/platform/issues/11946645/">Edge</a>.</p>
-</div>
+> **Attention :** Cet élément a été retiré à partir de [Gecko 56](https://bugzilla.mozilla.org/show_bug.cgi?id=1279218), de [Chrome 47](https://bugs.chromium.org/p/chromium/issues/detail?id=470301) et le retrait est à l'étude pour [WebKit](https://bugs.webkit.org/show_bug.cgi?id=157926) et [Edge](https://developer.microsoft.com/fr/microsoft-edge/platform/issues/11946645/).
 
-<p>L'élément <strong><code>&lt;applet&gt;</code></strong>, pour les applets, définit l'intégration d'un applet Java. Cet élément est désormais déprécié en faveur de <a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a>.</p>
+L'élément **`<applet>`**, pour les applets, définit l'intégration d'un applet Java. Cet élément est désormais déprécié en faveur de [`<object>`](/fr/docs/Web/HTML/Element/object).
 
-<p>L'utilisation d'applets Java sur le Web est dépréciée, la plupart des navigateurs ne prennent plus en charge les plugins Java.</p>
+L'utilisation d'applets Java sur le Web est dépréciée, la plupart des navigateurs ne prennent plus en charge les plugins Java.
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content"
+          >contenu intégré</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content"
+          >contenu interactif</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td>Zéro ou plusieurs <a href="/fr/docs/Web/HTML/Element/param"><code>&lt;param&gt;</code></a> suivi d'un contenu <a href="/fr/docs/Web/Guide/HTML/Content_categories#transparent_content_model">transparent</a>.</td>
+      <td>
+        Zéro ou plusieurs
+        <a href="/fr/docs/Web/HTML/Element/param"><code>&#x3C;param></code></a>
+        suivi d'un contenu
+        <a
+          href="/fr/docs/Web/Guide/HTML/Content_categories#transparent_content_model"
+          >transparent</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content">contenu intégré</a>.</td>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content"
+          >contenu intégré</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
@@ -50,65 +82,64 @@ translation_of: Web/HTML/Element/applet
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
-
-<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
-
-<dl>
-  <dt><strong><code>align</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut est utilisé pour positionner l'applet sur la page en fonction du contenu qui l'entoure. La spécification HTML 4.01 définit l'utilisation des valeurs <code>bottom</code> (en bas), <code>left</code> (à gauche), <code>middle</code> (au milieu), <code>right</code> (à droite), et <code>top</code> (en haut), tandis que Microsoft et Netscape supporteraient également les valeurs <code>absbottom</code>, <code>absmiddle</code>, <code>baseline</code>, <code>center</code>, et <code>texttop</code>.</dd>
-  <dt><strong><code>alt</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut génère un texte alternatif à afficher pour les navigateurs ne supportant pas Java. Il est à noter que le contenu de l'élément <code>&lt;applet&gt;</code> peut être également restitué comme du texte alternatif dans certains cas.</dd>
-  <dt><strong><code>archive</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut fait référence à une version archivée ou compressée de l'applet et des fichiers classes associés, ce qui peut aider à réduire le temps de téléchargement.</dd>
-  <dt><strong><code>code</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut définit l'URL du fichier classe de l'applet qui doit être chargé et exécuté. Les noms de fichiers pour les applets sont définis avec une extension en .class. L'URL définie par cet attribut peut être relative par rapport à l'attribut <code>codebase</code>.</dd>
-  <dt><strong><code>codebase</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut donne une URL absolue ou relative du répertoire où les fichiers classes de l'applet (déclarés dans l'attribut <code>code</code>) doivent être placés.</dd>
-  <dt><strong><code>datafld</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut, supporté par Internet Explorer à partir de sa version 4, définit le nom de colonne attribué aux objets de données fournis par les données attachées. Cet attribut peut être utilisé pour définir les différents éléments <a href="/fr/docs/Web/HTML/Element/param"><code>&lt;param&gt;</code></a> envoyés à l'applet Java.</dd>
-  <dt><strong><code>datasrc</code></strong> {{deprecated_inline}}</dt>
-  <dd>Comme l'attribut <code>datafld</code>, cet attribut est utilisé pour les données attachées sous Internet Explorer 4. Il indique un identifiant pour l'objet définissant la source des données qui seront attachées aux éléments <a href="/fr/docs/Web/HTML/Element/param"><code>&lt;param&gt;</code></a> associés à l'applet.</dd>
-  <dt><strong><code>height</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut définit la hauteur dont l'applet à besoin, en pixels.</dd>
-  <dt><strong><code>hspace</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut définit l'espace horizontal supplémentaire qui doit être réservé à côté de l'applet, en pixels.</dd>
-  <dt><strong><code>mayscript</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut, concerné par l'implémentation effectuée dans Netscape, permet l'accès à l'applet par les scripts contenus dans le document.</dd>
-  <dt><strong><code>name</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut donne un nom à l'applet afin qu'elle soit possiblement identifiée par d'autres ressources, notamment les scripts.</dd>
-  <dt><strong><code>object</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut définit l'URL d'une représentation de l'applet.</dd>
-  <dt><strong><code>src</code></strong> {{deprecated_inline}}</dt>
-  <dd>Dans Internet Explorer 4 et ses versions ultérieures, cet attribut définit une URL pour le fichier associé à l'applet. La signification de cet attribut n'est pas claire et ne fait pas partie du standard HTML.</dd>
-  <dt><strong><code>vspace</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut définit l'espace supplémentaire qui doit être réservé en haut et en bas de l'applet, en pixels.</dd>
-  <dt><strong><code>width</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut définit la largeur, en pixels, dont l'applet a besoin</dd>
-</dl>
-
-<h2 id="example">Exemple</h2>
-
-<h3 id="html">HTML</h3>
-
-<pre class="brush: html">&lt;applet code="game.class" align="left" archive="game.zip" height="250" width="350"&gt;
-  &lt;param name="difficulte" value="facile"&gt;
-  &lt;b&gt;Vous avez besoin de Java pour activer cela.&lt;/b&gt;
-&lt;/applet&gt;
-</pre>
-
-<h3 id="result">Résultat</h3>
-
-<p>{{EmbedLiveSample("example","100%", 30)}}</p>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="notes">Notes</h2>
-
-<p>La spécification W3C désapprouve l'utilisation de l'élément <code>&lt;applet&gt;</code> et conseille l'utilisation de l'élément <a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a>. Pour HTML 4.01 cet élément est déprécié et est devenu entièrement obsolète sous HTML5.</p>
+## Attributs
+
+Cet élément peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
+
+- **`align`** {{deprecated_inline}}
+  - : Cet attribut est utilisé pour positionner l'applet sur la page en fonction du contenu qui l'entoure. La spécification HTML 4.01 définit l'utilisation des valeurs `bottom` (en bas), `left` (à gauche), `middle` (au milieu), `right` (à droite), et `top` (en haut), tandis que Microsoft et Netscape supporteraient également les valeurs `absbottom`, `absmiddle`, `baseline`, `center`, et `texttop`.
+- **`alt`** {{deprecated_inline}}
+  - : Cet attribut génère un texte alternatif à afficher pour les navigateurs ne supportant pas Java. Il est à noter que le contenu de l'élément `<applet>` peut être également restitué comme du texte alternatif dans certains cas.
+- **`archive`** {{deprecated_inline}}
+  - : Cet attribut fait référence à une version archivée ou compressée de l'applet et des fichiers classes associés, ce qui peut aider à réduire le temps de téléchargement.
+- **`code`** {{deprecated_inline}}
+  - : Cet attribut définit l'URL du fichier classe de l'applet qui doit être chargé et exécuté. Les noms de fichiers pour les applets sont définis avec une extension en .class. L'URL définie par cet attribut peut être relative par rapport à l'attribut `codebase`.
+- **`codebase`** {{deprecated_inline}}
+  - : Cet attribut donne une URL absolue ou relative du répertoire où les fichiers classes de l'applet (déclarés dans l'attribut `code`) doivent être placés.
+- **`datafld`** {{deprecated_inline}}
+  - : Cet attribut, supporté par Internet Explorer à partir de sa version 4, définit le nom de colonne attribué aux objets de données fournis par les données attachées. Cet attribut peut être utilisé pour définir les différents éléments [`<param>`](/fr/docs/Web/HTML/Element/param) envoyés à l'applet Java.
+- **`datasrc`** {{deprecated_inline}}
+  - : Comme l'attribut `datafld`, cet attribut est utilisé pour les données attachées sous Internet Explorer 4. Il indique un identifiant pour l'objet définissant la source des données qui seront attachées aux éléments [`<param>`](/fr/docs/Web/HTML/Element/param) associés à l'applet.
+- **`height`** {{deprecated_inline}}
+  - : Cet attribut définit la hauteur dont l'applet à besoin, en pixels.
+- **`hspace`** {{deprecated_inline}}
+  - : Cet attribut définit l'espace horizontal supplémentaire qui doit être réservé à côté de l'applet, en pixels.
+- **`mayscript`** {{deprecated_inline}}
+  - : Cet attribut, concerné par l'implémentation effectuée dans Netscape, permet l'accès à l'applet par les scripts contenus dans le document.
+- **`name`** {{deprecated_inline}}
+  - : Cet attribut donne un nom à l'applet afin qu'elle soit possiblement identifiée par d'autres ressources, notamment les scripts.
+- **`object`** {{deprecated_inline}}
+  - : Cet attribut définit l'URL d'une représentation de l'applet.
+- **`src`** {{deprecated_inline}}
+  - : Dans Internet Explorer 4 et ses versions ultérieures, cet attribut définit une URL pour le fichier associé à l'applet. La signification de cet attribut n'est pas claire et ne fait pas partie du standard HTML.
+- **`vspace`** {{deprecated_inline}}
+  - : Cet attribut définit l'espace supplémentaire qui doit être réservé en haut et en bas de l'applet, en pixels.
+- **`width`** {{deprecated_inline}}
+  - : Cet attribut définit la largeur, en pixels, dont l'applet a besoin
+
+## Exemple
+
+### HTML
+
+```html
+<applet code="game.class" align="left" archive="game.zip" height="250" width="350">
+  <param name="difficulte" value="facile">
+  <b>Vous avez besoin de Java pour activer cela.</b>
+</applet>
+```
+
+### Résultat
+
+{{EmbedLiveSample("example","100%", 30)}}
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Notes
+
+La spécification W3C désapprouve l'utilisation de l'élément `<applet>` et conseille l'utilisation de l'élément [`<object>`](/fr/docs/Web/HTML/Element/object). Pour HTML 4.01 cet élément est déprécié et est devenu entièrement obsolète sous HTML5.
diff --git a/files/fr/web/html/element/area/index.md b/files/fr/web/html/element/area/index.md
index 2061200c14..d7fcde5a30 100644
--- a/files/fr/web/html/element/area/index.md
+++ b/files/fr/web/html/element/area/index.md
@@ -13,33 +13,64 @@ tags:
 translation_of: Web/HTML/Element/area
 browser-compat: html.elements.area
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;area&gt;</code></strong> définit une zone particulière d'une image et peut lui associer un <a href="/fr/docs/Glossary/Hyperlink">lien hypertexte</a>. Cet élément n'est utilisé qu'au sein d'un élément <a href="/fr/docs/Web/HTML/Element/map"><code>&lt;map&gt;</code></a>.</p>
+L'élément HTML **`<area>`** définit une zone particulière d'une image et peut lui associer un [lien hypertexte](/fr/docs/Glossary/Hyperlink). Cet élément n'est utilisé qu'au sein d'un élément [`<map>`](/fr/docs/Web/HTML/Element/map).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/area.html", "tabbed-taller")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a></td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td>Aucun, cet élément est un <a href="/fr/docs/Glossary/Empty_element">élément vide</a>.</td>
+      <td>
+        Aucun, cet élément est un
+        <a href="/fr/docs/Glossary/Empty_element">élément vide</a>.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>. L'élément <code>&lt;area&gt;</code> doit avoir un élément <a href="/fr/docs/Web/HTML/Element/map"><code>&lt;map&gt;</code></a> parmi ses ancêtres mais ce dernier n'a pas besoin d'être son parent direct.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >. L'élément <code>&#x3C;area></code> doit avoir un élément
+        <a href="/fr/docs/Web/HTML/Element/map"><code>&#x3C;map></code></a>
+        parmi ses ancêtres mais ce dernier n'a pas besoin d'être son parent
+        direct.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://w3c.github.io/aria/#link"><code>link</code></a> lorsque l'attribut <a href="#attr-href"><code>href</code></a> est présent, sinon <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">aucun rôle correspondant</a>.</td>
+      <td>
+        <a href="https://w3c.github.io/aria/#link"><code>link</code></a> lorsque
+        l'attribut <a href="#attr-href"><code>href</code></a> est présent, sinon
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >aucun rôle correspondant</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -47,105 +78,108 @@ browser-compat: html.elements.area
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLAreaElement"><code>HTMLAreaElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLAreaElement"
+          ><code>HTMLAreaElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
-
-<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p>
-
-<dl>
-  <dt><strong><code>alt</code></strong></dt>
-  <dd>Une chaîne de texte alternative à afficher sur les navigateurs qui n'affichent pas les images. Le texte doit être formulé de manière à offrir à l'utilisateur le même type de choix que l'image lorsqu'elle est affichée sans le texte alternatif. Cet attribut est requis uniquement si l'attribut <a href="#attr-href"><code>href</code></a> est utilisé.</dd>
-  <dt><strong><code>coords</code></strong></dt>
-  <dd>L'attribut <code>coords</code> détaille les coordonnées de l'attribut <code><a href="#attr-shape">shape</a></code> en taille, forme et placement d'un élément <code>&lt;area&gt;</code>.
-    <ul>
-      <li><code>rect</code> : la valeur est <code><var>x1,y1,x2,y2</var></code>. La valeur spécifie les coordonnées du coin supérieur gauche et inférieur droit du rectangle.
-        <p>Par exemple : <code>&lt;area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"&gt;</code> Les coordonnées dans l'exemple ci-dessus spécifient : 0,0 comme le coin supérieur gauche et 253,27 comme le coin inférieur droit du rectangle.</p>
-      </li>
-      <li><code>cercle</code> : la valeur est <code><var>x,y,radius</var></code>. La valeur spécifie les coordonnées du centre du cercle et du rayon.
-        <p>Par exemple : <code>&lt;area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN"&gt;</code>.</p>
-      </li>
-      <li><code>poly</code> : la valeur est <code><var>x1,y1,x2,y2,...,xn,yn</var></code>. La valeur spécifie les coordonnées des bords du polygone. Si la première et la dernière paire de coordonnées ne sont pas les mêmes, le navigateur ajoutera la dernière paire de coordonnées pour fermer le polygone.</li>
-      <li><code>default</code> : définit la région entière.</li>
-    </ul>
-    Les valeurs sont exprimées en nombre de pixels CSS.</dd>
-  <dt><strong><code>download</code></strong></dt>
-  <dd>Cet attribut, s'il est présent, indique que l'auteur souhaite que l'hyperlien soit utilisé pour télécharger une ressource. Voir <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> pour une description complète de l'attribut <a href="/fr/docs/Web/HTML/Element/a#attr-download"><code>download</code></a>.</dd>
-  <dt><strong><code>href</code></strong></dt>
-  <dd>Le lien hypertexte porté par la zone d'intérêt. Ce doit être une URL valide. Cet attribut peut être absent et dans ce cas, la zone d'intérêt ne représente pas de lien hypertexte.</dd>
-  <dt><strong><code>hreflang</code></strong></dt>
-  <dd>Cet attribut indique la langue du contenu vers lequel le lien renvoie. Les valeurs autorisées pour cet attribut sont définies par <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a>. Cet attribut doit uniquement être utilisé lorsque <code>href</code> est présent.</dd>
-  <dt><strong><code>ping</code></strong></dt>
-  <dd>Cet attribut contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes HTTP <a href="/fr/docs/Web/HTTP/Methods/POST"><code>POST</code></a> dont le corps vaut <code>PING</code> lors du clic sur le lien. Les requêtes sont envoyées en arrière-plan. Cet attribut est généralement utilisé à des fins de pistage.</dd>
-  <dt><strong><code>referrerpolicy</code></strong> {{experimental_inline}}</dt>
-  <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération de la ressource :
-    <ul>
-      <li>« <code>no-referrer</code> » indique que l'en-tête <code>Referer</code> ne sera pas envoyé.</li>
-      <li>« <code>no-referrer-when-downgrade</code> » indique que l'en-tête <code>Referer</code> ne sera pas envoyé lorsque l'utilisateur navigue depuis une origine sans TLS/HTTPS. C'est le comportement par défaut de l'agent utilisateur si aucune autre politique n'est spécifiée.</li>
-      <li>« <code>origin</code> » indique que le référent sera l'origine de la page (ce qui correspond au schéma utilisé, à l'hôte et au port).</li>
-      <li>« <code>origin-when-cross-origin</code> » indique que lorsqu'on navigue sur d'autres origines, seule l'origine du document sera envoyée. Lorsqu'on navigue sur la même origine, le chemin de la ressource sera inclus dans le référent.</li>
-      <li>« <code>unsafe-url</code> » indique que le référent envoyé inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom d'utilisateur). Ce cas n'est pas considéré comme sûr, car il peut laisser fuiter des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.</li>
-    </ul>
-  </dd>
-  <dt><strong><code>rel</code></strong></dt>
-  <dd>Pour les ancres contenant l'attribut <code><strong>href</strong></code>, cet attribut définit la relation entre l'objet ciblé et l'objet lié. La valeur est une liste des <a href="/fr/docs/Web/HTML/Link_types">différentes relations</a> dont les valeurs sont séparées par des espaces. Les valeurs et leurs significations peuvent être enregistrées par une autorité jugée utile par l'auteur du document. La valeur par défaut est la relation vide. Cet attribut doit uniquement être utilisé si l'attribut <a href="#attr-href"><code>href</code></a> est présent.</dd>
-  <dt><strong><code>shape</code></strong></dt>
-  <dd>La forme de la zone d'intérêt. Les spécifications HTML5 et HTML4 définissent les valeurs <code>rect</code> (zone rectangulaire), <code>circle</code> (zone circulaire), <code>poly</code> (zone polygonale) et <code>default</code> (indiquant toute la zone). Beacuoup de navigateurs, comme Internet Explorer 4 et ultérieur, supportent les valeurs <code>circ</code>, <code>polygon</code> et <code>rectangle</code> pour l'attribut <code>shape</code>, mais ces valeurs ne sont pas standard.</dd>
-  <dt><strong><code>target</code></strong></dt>
-  <dd>Cet attribut dans quel <em>contexte de navigation</em> afficher la ressource liée. Les mots-clés peuvent avoir les significations suivantes :
-    <ul>
-      <li><code>_self</code> (valeur par défaut) : Charge la réponse dans le contexte de navigation actuel.</li>
-      <li><code>_blank </code>: Charge la réponse dans un nouveau contexte de navigation (sans nom).</li>
-      <li><code>_parent</code> : Charge la réponse dans le contexte de navigation parent. Si la page courante n'est pas incluse via une <i>frame</i>, cette valeur agit comme <code>_self</code>.</li>
-      <li><code>_top</code> : Charge la réponse dans le contexte de navigation avec le plus haut niveau (autrement dit l'ancêtre du contexte actuel qui n'a pas de parent). Si le contexte actuel n'a pas de parent alors cette valeur aura le même effet que la valeur <code>_self</code>.</li>
-    </ul>
-
-    <p>Cet attribut doit uniquement être utilisé si l'attribut <a href="#attr-href"><code>href</code></a> est présent.</p>
-    <div class="note">
-      <p><strong>Note :</strong>La définition de <code>target="_blank"</code> sur les éléments <code>&lt;area&gt;</code> fournit implicitement le même comportement <code>rel</code> que la définition de <code><a href="/fr/docs/Web/HTML/Link_types/noopener">rel="noopener"</a></code> qui ne définit pas <code>window.opener</code>. Voir la <a href="#browser_compatibility">compatibilité des navigateurs</a> pour les informations sur son support.</p>
-      </div>
-  </dd>
-</dl>
-
-<h3 id="deprecated_attributes">Attributs dépréciés ou obsolètes</h3>
-
-<dl>
-  <dt><strong><code>name</code></strong> {{deprecated_inline}}</dt>
-  <dd>Définit un nom pour la zone sur laquelle on peut cliquer afin que cet élément puisse être interprété par les navigateurs plus anciens.</dd>
-  <dt><strong><code>nohref</code></strong> {{deprecated_inline}}</dt>
-  <dd>Indique une absence d'hyperlien pour la zone d'intérêt. Cet attribut doit être présent si <strong>href</strong> ne l'est pas et <em>vice versa</em>.
-    <div class="note">
-      <p><strong>Note :</strong>Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut <code>href</code> suffit.</p>
-    </div>
-  </dd>
-  <dt><strong><code>tabindex</code></strong> {{deprecated_inline}}</dt>
-  <dd>Une valeur numérique définissant l'ordre de la zone d'intérêt parmi les différentes étiquettes. Cet attribut est un attribut universel avec HTML5.</dd>
-  <dt><strong><code>type</code></strong> {{deprecated_inline}}</dt>
-  <dd>Sans effet car ignoré par les navigateurs.</dd>
-</dl>
-
-<h2 id="example">Exemple</h2>
-
-<p>Dans cet exemple, la partie gauche est un lien vers une page et la partie droite est inactive.</p>
-
-<pre class="brush: html">&lt;map name="exemple-map-1"&gt;
-  &lt;area shape="rect" coords="0,0 200,200" href="https://developer.mozilla.org" target="_blank" alt="Page d'accueil MDN" /&gt;
-  &lt;area shape="default" /&gt;
-&lt;/map&gt;
-&lt;img usemap="#exemple-map-1" src="https://via.placeholder.com/350x150"&gt;
-</pre>
-
-<h3 id="result">Résultat</h3>
-
-<p>{{EmbedLiveSample("example", "100%", "230")}}</p>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
+## Attributs
+
+Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Global_attributes).
+
+- **`alt`**
+  - : Une chaîne de texte alternative à afficher sur les navigateurs qui n'affichent pas les images. Le texte doit être formulé de manière à offrir à l'utilisateur le même type de choix que l'image lorsqu'elle est affichée sans le texte alternatif. Cet attribut est requis uniquement si l'attribut [`href`](#attr-href) est utilisé.
+- **`coords`**
+
+  - : L'attribut `coords` détaille les coordonnées de l'attribut [`shape`](#attr-shape) en taille, forme et placement d'un élément `<area>`.
+
+    - `rect` : la valeur est `x1,y1,x2,y2`. La valeur spécifie les coordonnées du coin supérieur gauche et inférieur droit du rectangle.
+
+      Par exemple : `<area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla">` Les coordonnées dans l'exemple ci-dessus spécifient : 0,0 comme le coin supérieur gauche et 253,27 comme le coin inférieur droit du rectangle.
+
+    - `cercle` : la valeur est `x,y,radius`. La valeur spécifie les coordonnées du centre du cercle et du rayon.
+
+      Par exemple : `<area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">`.
+
+    - `poly` : la valeur est `x1,y1,x2,y2,...,xn,yn`. La valeur spécifie les coordonnées des bords du polygone. Si la première et la dernière paire de coordonnées ne sont pas les mêmes, le navigateur ajoutera la dernière paire de coordonnées pour fermer le polygone.
+    - `default` : définit la région entière.
+
+    Les valeurs sont exprimées en nombre de pixels CSS.
+
+- **`download`**
+  - : Cet attribut, s'il est présent, indique que l'auteur souhaite que l'hyperlien soit utilisé pour télécharger une ressource. Voir [`<a>`](/fr/docs/Web/HTML/Element/a) pour une description complète de l'attribut [`download`](/fr/docs/Web/HTML/Element/a#attr-download).
+- **`href`**
+  - : Le lien hypertexte porté par la zone d'intérêt. Ce doit être une URL valide. Cet attribut peut être absent et dans ce cas, la zone d'intérêt ne représente pas de lien hypertexte.
+- **`hreflang`**
+  - : Cet attribut indique la langue du contenu vers lequel le lien renvoie. Les valeurs autorisées pour cet attribut sont définies par [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt). Cet attribut doit uniquement être utilisé lorsque `href` est présent.
+- **`ping`**
+  - : Cet attribut contient une liste d'URL séparées par des espaces vers lesquelles sont envoyées des requêtes HTTP [`POST`](/fr/docs/Web/HTTP/Methods/POST) dont le corps vaut `PING` lors du clic sur le lien. Les requêtes sont envoyées en arrière-plan. Cet attribut est généralement utilisé à des fins de pistage.
+- **`referrerpolicy`** {{experimental_inline}}
+
+  - : Une chaîne de caractères qui indique le référent (_referrer_) à utiliser lors de la récupération de la ressource :
+
+    - « `no-referrer` » indique que l'en-tête `Referer` ne sera pas envoyé.
+    - « `no-referrer-when-downgrade` » indique que l'en-tête `Referer` ne sera pas envoyé lorsque l'utilisateur navigue depuis une origine sans TLS/HTTPS. C'est le comportement par défaut de l'agent utilisateur si aucune autre politique n'est spécifiée.
+    - « `origin` » indique que le référent sera l'origine de la page (ce qui correspond au schéma utilisé, à l'hôte et au port).
+    - « `origin-when-cross-origin` » indique que lorsqu'on navigue sur d'autres origines, seule l'origine du document sera envoyée. Lorsqu'on navigue sur la même origine, le chemin de la ressource sera inclus dans le référent.
+    - « `unsafe-url` » indique que le référent envoyé inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom d'utilisateur). Ce cas n'est pas considéré comme sûr, car il peut laisser fuiter des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.
+
+- **`rel`**
+  - : Pour les ancres contenant l'attribut **`href`**, cet attribut définit la relation entre l'objet ciblé et l'objet lié. La valeur est une liste des [différentes relations](/fr/docs/Web/HTML/Link_types) dont les valeurs sont séparées par des espaces. Les valeurs et leurs significations peuvent être enregistrées par une autorité jugée utile par l'auteur du document. La valeur par défaut est la relation vide. Cet attribut doit uniquement être utilisé si l'attribut [`href`](#attr-href) est présent.
+- **`shape`**
+  - : La forme de la zone d'intérêt. Les spécifications HTML5 et HTML4 définissent les valeurs `rect` (zone rectangulaire), `circle` (zone circulaire), `poly` (zone polygonale) et `default` (indiquant toute la zone). Beacuoup de navigateurs, comme Internet Explorer 4 et ultérieur, supportent les valeurs `circ`, `polygon` et `rectangle` pour l'attribut `shape`, mais ces valeurs ne sont pas standard.
+- **`target`**
+
+  - : Cet attribut dans quel _contexte de navigation_ afficher la ressource liée. Les mots-clés peuvent avoir les significations suivantes :
+
+    - `_self` (valeur par défaut) : Charge la réponse dans le contexte de navigation actuel.
+    - `_blank `: Charge la réponse dans un nouveau contexte de navigation (sans nom).
+    - `_parent` : Charge la réponse dans le contexte de navigation parent. Si la page courante n'est pas incluse via une _frame_, cette valeur agit comme `_self`.
+    - `_top` : Charge la réponse dans le contexte de navigation avec le plus haut niveau (autrement dit l'ancêtre du contexte actuel qui n'a pas de parent). Si le contexte actuel n'a pas de parent alors cette valeur aura le même effet que la valeur `_self`.
+
+    Cet attribut doit uniquement être utilisé si l'attribut [`href`](#attr-href) est présent.
+
+    > **Note :**La définition de `target="_blank"` sur les éléments `<area>` fournit implicitement le même comportement `rel` que la définition de [`rel="noopener"`](/fr/docs/Web/HTML/Link_types/noopener) qui ne définit pas `window.opener`. Voir la [compatibilité des navigateurs](#browser_compatibility) pour les informations sur son support.
+
+### Attributs dépréciés ou obsolètes
+
+- **`name`** {{deprecated_inline}}
+  - : Définit un nom pour la zone sur laquelle on peut cliquer afin que cet élément puisse être interprété par les navigateurs plus anciens.
+- **`nohref`** {{deprecated_inline}}
+
+  - : Indique une absence d'hyperlien pour la zone d'intérêt. Cet attribut doit être présent si **href** ne l'est pas et _vice versa_.
+
+    > **Note :**Cet attribut est obsolète en HTML5, ne pas utiliser l'attribut `href` suffit.
+
+- **`tabindex`** {{deprecated_inline}}
+  - : Une valeur numérique définissant l'ordre de la zone d'intérêt parmi les différentes étiquettes. Cet attribut est un attribut universel avec HTML5.
+- **`type`** {{deprecated_inline}}
+  - : Sans effet car ignoré par les navigateurs.
+
+## Exemple
+
+Dans cet exemple, la partie gauche est un lien vers une page et la partie droite est inactive.
+
+```html
+<map name="exemple-map-1">
+  <area shape="rect" coords="0,0 200,200" href="https://developer.mozilla.org" target="_blank" alt="Page d'accueil MDN" />
+  <area shape="default" />
+</map>
+<img usemap="#exemple-map-1" src="https://via.placeholder.com/350x150">
+```
+
+### Résultat
+
+{{EmbedLiveSample("example", "100%", "230")}}
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
diff --git a/files/fr/web/html/element/article/index.md b/files/fr/web/html/element/article/index.md
index ebc68dab68..045609b76c 100644
--- a/files/fr/web/html/element/article/index.md
+++ b/files/fr/web/html/element/article/index.md
@@ -10,111 +10,156 @@ tags:
 translation_of: Web/HTML/Element/article
 browser-compat: html.elements.article
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément <strong><code>&lt;article&gt;</code></strong> représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, dans le cadre d'une syndication). Exemples : un message de forum, un article de magazine ou de journal, ou un article de blog, une fiche produit, un commentaire soumis par un utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant.</p>
+L'élément **`<article>`** représente une composition autonome dans un document, une page, une application ou un site, destinée à être distribuée ou réutilisée de manière indépendante (par exemple, dans le cadre d'une syndication). Exemples : un message de forum, un article de magazine ou de journal, ou un article de blog, une fiche produit, un commentaire soumis par un utilisateur, un widget ou gadget interactif, ou tout autre élément de contenu indépendant.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/article.html", "tabbed-standard")}}
 
-<p>Un document donné peut contenir plusieurs articles ; par exemple, sur un blog qui affiche le texte de chaque article l'un après l'autre au fur et à mesure que le lecteur fait défiler, chaque message sera contenu dans un élément <code>&lt;article&gt;</code>, avec éventuellement une ou plusieurs <code>&lt;section&gt;</code> à l'intérieur.</p>
+Un document donné peut contenir plusieurs articles ; par exemple, sur un blog qui affiche le texte de chaque article l'un après l'autre au fur et à mesure que le lecteur fait défiler, chaque message sera contenu dans un élément `<article>`, avec éventuellement une ou plusieurs `<section>` à l'intérieur.
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#sectioning_content">contenu de section</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/Guide/HTML/Content_categories"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#sectioning_content"
+          >contenu de section</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>. Un élément <code>&lt;article&gt;</code> ne doit pas être un descendant d'un élément <a href="/fr/docs/Web/HTML/Element/address"><code>&lt;address&gt;</code></a>.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu de flux</a
+        >. Un élément <code>&#x3C;article></code> ne doit pas être un descendant
+        d'un élément
+        <a href="/fr/docs/Web/HTML/Element/address"
+          ><code>&#x3C;address></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Article_Role"><code>article</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Article_Role"
+          ><code>article</code></a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td><a href="https://w3c.github.io/aria/#application">application</a>, <a href="https://w3c.github.io/aria/#document">document</a>, <a href="https://w3c.github.io/aria/#feed">feed</a>, <a href="https://w3c.github.io/aria/#main">main</a>, <a href="https://w3c.github.io/aria/#none">none</a>, <a href="https://w3c.github.io/aria/#presentation">presentation</a>, <a href="https://w3c.github.io/aria/#region">region</a>.</td>
+      <td>
+        <a href="https://w3c.github.io/aria/#application">application</a>,
+        <a href="https://w3c.github.io/aria/#document">document</a>,
+        <a href="https://w3c.github.io/aria/#feed">feed</a>,
+        <a href="https://w3c.github.io/aria/#main">main</a>,
+        <a href="https://w3c.github.io/aria/#none">none</a>,
+        <a href="https://w3c.github.io/aria/#presentation">presentation</a>,
+        <a href="https://w3c.github.io/aria/#region">region</a>.
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a
+        >.
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
-
-<p>Cet élément n'a pas d'autres attributs que les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>, communs à tous les éléments.</p>
-
-<h2 id="usage_notes">Notes d'utilisation</h2>
-
-<ul>
-  <li>Chaque <code>&lt;article&gt;</code> autonome, qui n'est pas imbriqué dans un autre élément <code>&lt;article&gt;</code>, devrait être identifié typiquement, en incluant un élément de titre <code>&lt;h1&gt;</code> à <code>&lt;h6&gt;</code>.</li>
-  <li>Quand un élément <code>&lt;article&gt;</code> est imbriqué dans un autre, l'élément contenu représente un article relatif à l'élément contenant. Par exemple, les commentaires d'une parution de blog peuvent être un élément <code>&lt;article&gt;</code> inclus dans l'<code>&lt;article&gt;</code> représentant la parution en elle-même.</li>
-  <li>Des informations à propos de l'auteur d'un élément <code>&lt;article&gt;</code> peuvent être fournies au travers de l'élément <a href="/fr/docs/Web/HTML/Element/address"><code>&lt;address&gt;</code></a>, mais cela ne s'applique pas aux éléments <code>&lt;article&gt;</code> imbriqués.</li>
-  <li>La date et l'heure de publication d'un élément <code>&lt;article&gt;</code> peuvent être donnés en utilisant l'attribut <a href="/fr/docs/Web/HTML/Element/time#attr-datetime"><code>datetime</code></a> d'un élément <a href="/fr/docs/Web/HTML/Element/time"><code>&lt;time&gt;</code></a>. <em>Notez que l'attribut <a href="/fr/docs/Web/HTML/Element/time#attr-pubdate"><code>pubdate</code></a> de <a href="/fr/docs/Web/HTML/Element/time"><code>&lt;time&gt;</code></a> ne fait plus partie de la norme W3C HTML 5.</em></li>
-</ul>
-
-<h2 id="example">Exemple</h2>
-
-<pre class="brush: html">&lt;article class="film_review"&gt;
-  &lt;header&gt;
-    &lt;h2&gt;Jurassic Park&lt;/h2&gt;
-  &lt;/header&gt;
-  &lt;section class="main_review"&gt;
-    &lt;p&gt;Les dinosaures étaient super !&lt;/p&gt;
-  &lt;/section&gt;
-  &lt;section class="user_reviews"&gt;
-    &lt;article class="user_review"&gt;
-      &lt;p&gt;Beaucoup trop effrayant pour moi&lt;/p&gt;
-      &lt;footer&gt;
-        &lt;p&gt;
+## Attributs
+
+Cet élément n'a pas d'autres attributs que les [attributs universels](/fr/docs/Web/HTML/Global_attributes), communs à tous les éléments.
+
+## Notes d'utilisation
+
+- Chaque `<article>` autonome, qui n'est pas imbriqué dans un autre élément `<article>`, devrait être identifié typiquement, en incluant un élément de titre `<h1>` à `<h6>`.
+- Quand un élément `<article>` est imbriqué dans un autre, l'élément contenu représente un article relatif à l'élément contenant. Par exemple, les commentaires d'une parution de blog peuvent être un élément `<article>` inclus dans l'`<article>` représentant la parution en elle-même.
+- Des informations à propos de l'auteur d'un élément `<article>` peuvent être fournies au travers de l'élément [`<address>`](/fr/docs/Web/HTML/Element/address), mais cela ne s'applique pas aux éléments `<article>` imbriqués.
+- La date et l'heure de publication d'un élément `<article>` peuvent être donnés en utilisant l'attribut [`datetime`](/fr/docs/Web/HTML/Element/time#attr-datetime) d'un élément [`<time>`](/fr/docs/Web/HTML/Element/time). _Notez que l'attribut [`pubdate`](/fr/docs/Web/HTML/Element/time#attr-pubdate) de [`<time>`](/fr/docs/Web/HTML/Element/time) ne fait plus partie de la norme W3C HTML 5._
+
+## Exemple
+
+```html
+<article class="film_review">
+  <header>
+    <h2>Jurassic Park</h2>
+  </header>
+  <section class="main_review">
+    <p>Les dinosaures étaient super !</p>
+  </section>
+  <section class="user_reviews">
+    <article class="user_review">
+      <p>Beaucoup trop effrayant pour moi</p>
+      <footer>
+        <p>
           Posté le
-          &lt;time datetime="2015-05-16 19:00"&gt;16 mai&lt;/time&gt;
+          <time datetime="2015-05-16 19:00">16 mai</time>
           par Lisa.
-        &lt;/p&gt;
-      &lt;/footer&gt;
-    &lt;/article&gt;
-    &lt;article class="user_review"&gt;
-      &lt;p&gt;Je suis d'accord, les dinosaures sont mes préférés&lt;/p&gt;
-      &lt;footer&gt;
-        &lt;p&gt;
+        </p>
+      </footer>
+    </article>
+    <article class="user_review">
+      <p>Je suis d'accord, les dinosaures sont mes préférés</p>
+      <footer>
+        <p>
           Posté le
-          &lt;time datetime="2015-05-17 19:00"&gt;17 mai&lt;/time&gt;
+          <time datetime="2015-05-17 19:00">17 mai</time>
           par Gilles Stella.
-        &lt;/p&gt;
-      &lt;/footer&gt;
-    &lt;/article&gt;
-  &lt;/section&gt;
-  &lt;footer&gt;
-    &lt;p&gt;
+        </p>
+      </footer>
+    </article>
+  </section>
+  <footer>
+    <p>
       Posté le
-      &lt;time datetime="2015-05-15 19:00"&gt;15 mai&lt;/time&gt;
+      <time datetime="2015-05-15 19:00">15 mai</time>
       par Staff.
-    &lt;/p&gt;
-  &lt;/footer&gt;
-&lt;/article&gt;</pre>
+    </p>
+  </footer>
+</article>
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>Les autres éléments liés aux sections d'un document : <a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code>&lt;nav&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/aside"><code>&lt;aside&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h1&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h2&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h3&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h4&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h5&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h6&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/hgroup"><code>&lt;hgroup&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code>&lt;header&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/footer"><code>&lt;footer&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/address"><code>&lt;address&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Sections et structure d'un document HTML5</a></li>
-</ul>
+- Les autres éléments liés aux sections d'un document : [`<body>`](/fr/docs/Web/HTML/Element/body), [`<nav>`](/fr/docs/Web/HTML/Element/nav), [`<section>`](/fr/docs/Web/HTML/Element/section), [`<aside>`](/fr/docs/Web/HTML/Element/aside), [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h2>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h3>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h4>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h5>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<hgroup>`](/fr/docs/Web/HTML/Element/hgroup), [`<header>`](/fr/docs/Web/HTML/Element/header), [`<footer>`](/fr/docs/Web/HTML/Element/footer), [`<address>`](/fr/docs/Web/HTML/Element/address)
+- [Sections et structure d'un document HTML5](/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines)
diff --git a/files/fr/web/html/element/aside/index.md b/files/fr/web/html/element/aside/index.md
index 07961c0af4..072a44e523 100644
--- a/files/fr/web/html/element/aside/index.md
+++ b/files/fr/web/html/element/aside/index.md
@@ -14,89 +14,135 @@ tags:
 translation_of: Web/HTML/Element/aside
 browser-compat: html.elements.aside
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément <strong><code>&lt;aside&gt;</code></strong> (en français, « aparté ») représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le contenu principal du document. Les apartés sont fréquemment présents sous la forme d'encadrés ou de boîtes de légende.</p>
+L'élément **`<aside>`** (en français, « aparté ») représente une partie d'un document dont le contenu n'a qu'un rapport indirect avec le contenu principal du document. Les apartés sont fréquemment présents sous la forme d'encadrés ou de boîtes de légende.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/aside.html", "tabbed-standard")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#sectioning_content">contenu de section</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/Guide/HTML/Content_categories"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#sectioning_content"
+          >contenu de section</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row"><dfn>Contenu autorisé</dfn></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row"><dfn>Omission de balises</dfn></th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row"><dfn>Parents autorisés</dfn></th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>. Notez qu'un élément <code>&lt;aside&gt;</code> ne doit pas être un descendant d'un élément <a href="/fr/docs/Web/HTML/Element/address"><code>&lt;address&gt;</code></a>.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu de flux</a
+        >. Notez qu'un élément <code>&#x3C;aside></code> ne doit pas être un
+        descendant d'un élément
+        <a href="/fr/docs/Web/HTML/Element/address"
+          ><code>&#x3C;address></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role">complementary</a></code></td>
+      <td>
+        <code
+          ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role"
+            >complementary</a
+          ></code
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td><a href="https://w3c.github.io/aria/#feed">feed</a>, <a href="https://w3c.github.io/aria/#none">none</a>, <a href="https://w3c.github.io/aria/#note">note</a>, <a href="https://w3c.github.io/aria/#presentation">presentation</a>, <a href="https://w3c.github.io/aria/#region">region</a>, <a href="https://w3c.github.io/aria/#search">search</a></td>
+      <td>
+        <a href="https://w3c.github.io/aria/#feed">feed</a>,
+        <a href="https://w3c.github.io/aria/#none">none</a>,
+        <a href="https://w3c.github.io/aria/#note">note</a>,
+        <a href="https://w3c.github.io/aria/#presentation">presentation</a>,
+        <a href="https://w3c.github.io/aria/#region">region</a>,
+        <a href="https://w3c.github.io/aria/#search">search</a>
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément ne comprend que les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p>
+Cet élément ne comprend que les [attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<h2 id="usage_notes"><strong>Notes d'utilisation</strong></h2>
+## **Notes d'utilisation**
 
-<p>On ne doit pas utiliser l'élément <code>&lt;aside&gt;</code> pour marquer du texte entre parenthèses, ce type de texte est considéré comme faisant partie du flux principal.</p>
+On ne doit pas utiliser l'élément `<aside>` pour marquer du texte entre parenthèses, ce type de texte est considéré comme faisant partie du flux principal.
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<p>Dans cet exemple, on utilise <code>&lt;aside&gt;</code> afin de baliser un paragraphe d'un article. Ici, le paragraphe n'est pas directement lié au contenu principal de l'article et c'est pour cela qu'on utilise cet élément.</p>
+Dans cet exemple, on utilise `<aside>` afin de baliser un paragraphe d'un article. Ici, le paragraphe n'est pas directement lié au contenu principal de l'article et c'est pour cela qu'on utilise cet élément.
 
-<pre class="brush: html">&lt;article&gt;
-  &lt;p&gt;
-    Le film Disney &lt;cite&gt;La petite Sirène&lt;/cite&gt; est
+```html
+<article>
+  <p>
+    Le film Disney <cite>La petite Sirène</cite> est
     sorti en salles en 1989.
-  &lt;/p&gt;
-  &lt;aside&gt;
-    &lt;p&gt;
+  </p>
+  <aside>
+    <p>
       Le film a gagné 87 millions de dollars pendant sa sortie initiale.
-    &lt;/p&gt;
-  &lt;/aside&gt;
-  &lt;p&gt;
+    </p>
+  </aside>
+  <p>
     Plus d'informations sur le film…
-  &lt;/p&gt;
-&lt;/article&gt;
-</pre>
+  </p>
+</article>
+```
 
-<h3 id="result">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("example", "100%", 150)}}</p>
+{{EmbedLiveSample("example", "100%", 150)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>Les autres éléments en rapport avec les sections : <a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code>&lt;nav&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h1&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h2&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h3&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h4&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h5&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h6&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/hgroup"><code>&lt;hgroup&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code>&lt;header&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/footer"><code>&lt;footer&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/address"><code>&lt;address&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Structures et sections d'un document HTML5</a></li>
-  <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role">ARIA : le rôle <code>complementary</code></a></li>
-</ul>
+- Les autres éléments en rapport avec les sections : [`<body>`](/fr/docs/Web/HTML/Element/body), [`<article>`](/fr/docs/Web/HTML/Element/article), [`<section>`](/fr/docs/Web/HTML/Element/section), [`<nav>`](/fr/docs/Web/HTML/Element/nav), [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h2>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h3>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h4>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h5>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<hgroup>`](/fr/docs/Web/HTML/Element/hgroup), [`<header>`](/fr/docs/Web/HTML/Element/header), [`<footer>`](/fr/docs/Web/HTML/Element/footer), [`<address>`](/fr/docs/Web/HTML/Element/address)
+- [Structures et sections d'un document HTML5](/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines)
+- [ARIA : le rôle `complementary`](/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role)
diff --git a/files/fr/web/html/element/audio/index.md b/files/fr/web/html/element/audio/index.md
index 98e125bcc3..24d9f14146 100644
--- a/files/fr/web/html/element/audio/index.md
+++ b/files/fr/web/html/element/audio/index.md
@@ -18,223 +18,147 @@ tags:
 translation_of: Web/HTML/Element/audio
 browser-compat: html.elements.audio
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;audio&gt;</code></strong> est utilisé afin d'intégrer un contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio représentées avec l'attribut <code>src</code> ou l'élément <a href="/fr/docs/Web/HTML/Element/Source"><code>&lt;source&gt;</code></a> : le navigateur choisira celle qui convient le mieux. Il peut également être la destination de médias diffusés en continu, en utilisant un <a href="/fr/docs/Web/API/MediaStream"><code>MediaStream</code></a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}</div>
-
-<p>L'exemple qui précède illustre le fonctionnement simple d'un élément <code>&lt;audio&gt;</code>, à la façon de ce qui peut être fait pour une image avec l'élément <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a> : on inclut un chemin vers la ressource grâce à l'attribut <code>src</code> et on peut ajouter d'autres attributs afin de fournir d'autres informations : lecture automatique, lecture en boucle, utilisation des contrôles par défaut du navigateur, etc.</p>
-
-<p>Le contenu présent à l'intérieur des balises <code>&lt;audio&gt;&lt;/audio&gt;</code> est affiché comme contenu alternatif lorsque le navigateur ne prend pas en charge l'élément.</p>
-
-<h2 id="attributes">Attributs</h2>
-
-<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p>
-
-<dl>
-  <dt><strong><code>autoplay</code></strong></dt>
-  <dd>Un attribut booléen : s'il est spécifié, l'audio commencera automatiquement la lecture dès qu'il pourra le faire, sans attendre la fin du téléchargement de l'ensemble du fichier audio.
-
-    <div class="note">
-      <p><strong>Note :</strong>Les sites qui diffusent automatiquement de l'audio (ou des vidéos avec une piste audio) peuvent s'avérer désagréables pour les utilisateurs et doivent donc être évités dans la mesure du possible. Si vous devez offrir une fonctionnalité de lecture automatique, vous devez la soumettre au choix de l'utilisateur. Cependant, cela peut être utile lors de la création d'éléments médias dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur. Consultez notre <a href="/fr/docs/Web/Media/Autoplay_guide">guide sur la lecture automatique</a> pour obtenir des informations supplémentaires sur la manière d'utiliser correctement la fonction <i>autoplay</i>.</p>
-    </div>
-  </dd>
-  <dt><strong><code>controls</code></strong></dt>
-  <dd>Si l'attribut est présent, le navigateur affichera des contrôles pour que l'utilisateur puisse gérer la lecture, le volume, et le déplacement du curseur de lecture.</dd>
-  <dt><strong><code>crossorigin</code></strong></dt>
-  <dd>Cet attribut à valeur contrainte indique comment le CORS doit être utilisé afin de récupérer la ressource. <a href="/fr/docs/Web/HTML/CORS_enabled_image">Les ressources utilisant le CORS</a> peuvent être réutilisées dans un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> sans corrompre celui-ci. Les valeurs autorisées pour cet attribut sont :
-  <dl>
-    <dt><code>anonymous</code></dt>
-    <dd>Une requête multi-origine est envoyée sans information d'authentification. Autrement dit, l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a> est envoyé sans cookie, certificat X.509 ou sans authentification HTTP. Si le serveur ne fournit pas d'information d'authentification au site d'origine (sans indiquer l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a>), la ressource sera corrompue (<em>tainted</em>) et son utilisation sera restreinte.</dd>
-    <dt><code>use-credentials</code></dt>
-    <dd>Une requête multi-origine est envoyée avec une information d'authentification (c'est-à-dire avec un en-tête HTTP <code>Origin:</code> qui contient un cookie, un certificat ou effectuant une authentification HTTP).</dd>
-  </dl>
-  Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS et empêche ainsi d'utiliser la ressource dans un <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a>. Si la valeur fournie est invalide, elle sera considérée comme <code>anonymous</code>. Voir <a href="/fr/docs/Web/HTML/Attributes/crossorigin">Paramétrage des attributs relatifs au CORS</a> pour plus d'informations.</dd>
-  <dt><strong><code>disableRemotePlayback</code></strong> {{experimental_inline}}</dt>
-  <dd>Un attribut booléen utilisé pour désactiver la capacité de lecture à distance dans les appareils qui sont connectés à l'aide de câbles (HDMI, DVI, etc.) et sans fil (Miracast, Chromecast, DLNA, AirPlay, etc.). Voir <a href="https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute">cette proposition de spécification</a> pour plus d'informations.
-    <div class="note">
-      <p><strong>Note :</strong>Dans Safari, vous pouvez utiliser <a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html"><code>x-webkit-airplay="deny"</code></a> comme solution de repli.</p>
-    </div>
-  </dd>
-  <dt><strong><code>loop</code></strong></dt>
-  <dd>Un attribut booléen. S'il est renseigné, la lecture du fichier se fera en boucle.</dd>
-  <dt><strong><code>muted</code></strong></dt>
-  <dd>Un attribut booléen, indiquant si le son de l'élément audio est initialement coupé. Sa valeur par défaut est <code>false</code>.</dd>
-  <dt><strong><code>preload</code></strong></dt>
-  <dd>Cet attribut indique au navigateur ce que l'auteur du code html pense de l'utilisation optimale de cet élément. Il accepte uniquement les valeurs suivantes :<br>
-
-    <ul>
-      <li><code>none</code> : Indique que l'élément audio ne devrait pas être mis en cache</li>
-      <li><code>metadata</code> : Indique que seules les méta-données (comme la durée) sont préchargées</li>
-      <li><code>auto</code> : Indique que tout le fichier peut être téléchargé, même s'il n'est pas certain que l'utilisateur le lira</li>
-      <li><code>""</code> (chaîne de caractères vide) : Un synonyme de <code>auto</code></li>
-    </ul>
-
-    <p>La valeur par défaut peut varier d'un navigateur à l'autre. Les spécifications recommandent la valeur <code>metadata</code>.</p>
-
-    <div class="note">
-      <p><strong>Note :</strong></p>
-      <ul>
-        <li>L'attribut <code>autoplay</code> a la priorité sur <code>preload</code>. Si <code>autoplay</code> est spécifié, le navigateur devrait évidemment commencer à télécharger l'audio pour le lire.</li>
-        <li>La spécification n'oblige pas le navigateur à suivre la valeur de cet attribut ; il s'agit d'une simple indication.</li>
-       </ul>
-    </div>
-  </dd>
-  <dt><strong><code>src</code></strong></dt>
-  <dd>L'URL du fichier audio à intégrer. Cet élément est soumis aux <a href="/fr/docs/Web/HTTP/CORS">contrôles d'accès HTTP</a>. Cet attribut est facultatif ; vous pouvez utiliser l'élément <a href="/fr/docs/Web/HTML/Element/Source"><code>&lt;source&gt;</code></a> dans le bloc audio pour spécifier l'audio à intégrer.</dd>
-</dl>
-
-<h2 id="events">Évènements</h2>
-
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Nom de l'évènement</th>
-      <th scope="col">Condition du déclenchement</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td><a href="/fr/docs/Web/Reference/Events/audioprocess">audioprocess</a></td>
-      <td>La mémoire tampon en entrée d'un <a href="/fr/docs/Web/API/ScriptProcessorNode"><code>ScriptProcessorNode</code></a> peut désormais être traité.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/canplay_event"><code>canplay</code></a></td>
-      <td>Le navigateur peut lire le média mais estime que trop peu de données ont été chargées pour lire le média jusqu'à sa fin (il faudra vraisemblablement un arrêt pour un chargement en mémoire tampon).</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/canplaythrough_event"><code>canplaythrough</code></a></td>
-      <td>Le navigateur estime qu'il peut lire le média jusqu'à sa fin, sans avoir à interrompre la lecture par du chargement en mémoire tampon.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/Reference/Events/complete">complete</a></td>
-      <td>Le rendu d'un <a href="/fr/docs/Web/API/OfflineAudioContext"><code>OfflineAudioContext</code></a> est terminé.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/durationchange_event"><code>durationchange</code></a></td>
-      <td>L'attribut <code>duration</code> a été mis à jour.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/emptied_event"><code>emptied</code></a></td>
-      <td>Le média est devenu vide. Cela peut par exemple se produire lorsque le média a déjà été (partiellement ou complètement) chargé et que la méthode <a href="/fr/docs/Web/API/HTMLMediaElement/load" rel="internal"><code>load()</code></a> est invoquée pour le recharger.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/ended_event"><code>ended</code></a></td>
-      <td>La lecture a été interrompue car la fin du média est atteinte.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/loadeddata_event"><code>loadeddata</code></a></td>
-      <td>La première <em>frame</em> du média a été chargée.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/loadedmetadata_event"><code>loadedmetadata</code></a></td>
-      <td>Les métadonnées ont été chargées.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/pause_event"><code>pause</code></a></td>
-      <td>La lecture a été mise en pause.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/play_event"><code>play</code></a></td>
-      <td>La lecture a démarré.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/playing_event"><code>playing </code></a></td>
-      <td>La lecture est prête à être lancée après avoir été mise en pause ou interrompue pour un chargement en mémoire de données.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/ratechange_event"><code>ratechange</code></a></td>
-      <td>La vitesse de lecture a changé.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/seeked_event"><code>seeked</code></a></td>
-      <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) est terminée.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/seeking_event"><code>seeking</code></a></td>
-      <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) a été initiée.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/stalled_event"><code>stalled</code></a></td>
-      <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/suspend_event"><code>suspend</code></a></td>
-      <td>Le chargement des données du média ont été suspendues.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/timeupdate_event"><code>timeupdate</code></a></td>
-      <td>Le temps décrit par l'attribut <code>currentTime</code> a été mis à jour.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/volumechange_event"><code>volumechange</code></a></td>
-      <td>Le volume a été modifié.</td>
-    </tr>
-    <tr>
-      <td><a href="/fr/docs/Web/API/HTMLMediaElement/waiting_event"><code>waiting</code></a></td>
-      <td>La lecture a été interrompue en raison d'un manque temporaire de données.</td>
-    </tr>
-  </tbody>
-</table>
+{{HTMLRef}}
+
+L'élément HTML **`<audio>`** est utilisé afin d'intégrer un contenu sonore dans un document. Il peut contenir une ou plusieurs sources audio représentées avec l'attribut `src` ou l'élément [`<source>`](/fr/docs/Web/HTML/Element/Source) : le navigateur choisira celle qui convient le mieux. Il peut également être la destination de médias diffusés en continu, en utilisant un [`MediaStream`](/fr/docs/Web/API/MediaStream).
+
+{{EmbedInteractiveExample("pages/tabbed/audio.html","tabbed-standard")}}
+
+L'exemple qui précède illustre le fonctionnement simple d'un élément `<audio>`, à la façon de ce qui peut être fait pour une image avec l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img) : on inclut un chemin vers la ressource grâce à l'attribut `src` et on peut ajouter d'autres attributs afin de fournir d'autres informations : lecture automatique, lecture en boucle, utilisation des contrôles par défaut du navigateur, etc.
+
+Le contenu présent à l'intérieur des balises `<audio></audio>` est affiché comme contenu alternatif lorsque le navigateur ne prend pas en charge l'élément.
+
+## Attributs
+
+Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Global_attributes).
+
+- **`autoplay`**
+
+  - : Un attribut booléen : s'il est spécifié, l'audio commencera automatiquement la lecture dès qu'il pourra le faire, sans attendre la fin du téléchargement de l'ensemble du fichier audio.
+
+    > **Note :**Les sites qui diffusent automatiquement de l'audio (ou des vidéos avec une piste audio) peuvent s'avérer désagréables pour les utilisateurs et doivent donc être évités dans la mesure du possible. Si vous devez offrir une fonctionnalité de lecture automatique, vous devez la soumettre au choix de l'utilisateur. Cependant, cela peut être utile lors de la création d'éléments médias dont la source sera définie ultérieurement, sous le contrôle de l'utilisateur. Consultez notre [guide sur la lecture automatique](/fr/docs/Web/Media/Autoplay_guide) pour obtenir des informations supplémentaires sur la manière d'utiliser correctement la fonction _autoplay_.
+
+- **`controls`**
+  - : Si l'attribut est présent, le navigateur affichera des contrôles pour que l'utilisateur puisse gérer la lecture, le volume, et le déplacement du curseur de lecture.
+- **`crossorigin`**
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+  - : Cet attribut à valeur contrainte indique comment le CORS doit être utilisé afin de récupérer la ressource. [Les ressources utilisant le CORS](/fr/docs/Web/HTML/CORS_enabled_image) peuvent être réutilisées dans un élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) sans corrompre celui-ci. Les valeurs autorisées pour cet attribut sont :
 
-<p>Les navigateurs ne prennent pas tous en charge les mêmes <a href="/fr/docs/Web/Media/Formats/Containers">types de fichiers</a> et <a href="/fr/docs/Web/Media/Formats/Audio_codecs">codecs audio</a> ; vous pouvez fournir plusieurs sources à l'intérieur d'éléments <a href="/fr/docs/Web/HTML/Element/Source"><code>&lt;source&gt;</code></a> imbriqués, et le navigateur utilisera alors le premier qu'il comprend :</p>
+    - `anonymous`
+      - : Une requête multi-origine est envoyée sans information d'authentification. Autrement dit, l'en-tête HTTP [`Origin`](/fr/docs/Web/HTTP/Headers/Origin) est envoyé sans cookie, certificat X.509 ou sans authentification HTTP. Si le serveur ne fournit pas d'information d'authentification au site d'origine (sans indiquer l'en-tête [`Access-Control-Allow-Origin`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)), la ressource sera corrompue (_tainted_) et son utilisation sera restreinte.
+    - `use-credentials`
+      - : Une requête multi-origine est envoyée avec une information d'authentification (c'est-à-dire avec un en-tête HTTP `Origin:` qui contient un cookie, un certificat ou effectuant une authentification HTTP).
 
-<pre class="brush: html">&lt;audio controls&gt;
-  &lt;source src="myAudio.mp3" type="audio/mpeg"&gt;
-  &lt;source src="myAudio.ogg" type="audio/ogg"&gt;
-  &lt;p&gt;Votre navigateur ne prend pas en charge l'audio HTML5.
-  Voici un &lt;a href="myAudio.mp3"&gt;lien vers le fichier audio&lt;/a&gt;
-  à la place.&lt;/p&gt;
-&lt;/audio&gt;</pre>
+    Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS et empêche ainsi d'utiliser la ressource dans un [`<canvas>`](/fr/docs/Web/HTML/Element/canvas). Si la valeur fournie est invalide, elle sera considérée comme `anonymous`. Voir [Paramétrage des attributs relatifs au CORS](/fr/docs/Web/HTML/Attributes/crossorigin) pour plus d'informations.
 
-<p>Nous proposons un <a href="/fr/docs/Web/Media/Formats">guide substantiel et complet des types de fichiers médias</a> et des <a href="/fr/docs/Web/Media/Formats/Audio_codecs">codecs audio qui peuvent être utilisés en leur sein</a>. Est également disponible <a href="/fr/docs/Web/Media/Formats/Video_codecs">un guide des codecs supportés pour la vidéo</a>.</p>
+- **`disableRemotePlayback`** {{experimental_inline}}
 
-<p>Autres notes d'utilisation :</p>
+  - : Un attribut booléen utilisé pour désactiver la capacité de lecture à distance dans les appareils qui sont connectés à l'aide de câbles (HDMI, DVI, etc.) et sans fil (Miracast, Chromecast, DLNA, AirPlay, etc.). Voir [cette proposition de spécification](https://www.w3.org/TR/remote-playback/#the-disableremoteplayback-attribute) pour plus d'informations.
 
-<ul>
-  <li>Si vous ne spécifiez pas l'attribut <code>controls</code>, le lecteur audio n'inclura pas les contrôles par défaut du navigateur. Vous pouvez toutefois créer vos propres contrôles personnalisés en utilisant JavaScript et l'API <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a>.</li>
-  <li>Pour permettre un contrôle précis de votre contenu audio, les <code>HTMLMediaElement</code> retournent de nombreux <a href="/fr/docs/Web/API/HTMLMediaElement#events">événements</a> différents. Cela fournit également un moyen de surveiller le processus de récupération de l'audio afin que vous puissiez surveiller les erreurs ou détecter quand suffisamment de ressources sont disponibles pour commencer à les lire ou à les manipuler.</li>
-  <li>Vous pouvez également utiliser l'API <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio</a> pour générer et manipuler directement des flux audio à partir du code JavaScript plutôt que de diffuser des fichiers audio préexistants.</li>
-  <li>Les éléments <code>&lt;audio&gt;</code> ne peuvent pas avoir de sous-titres ou de légendes associés de la même manière que les éléments <code>&lt;video&gt;</code>. Voir <a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio">WebVTT and Audio</a> <small>(en)</small> par Ian Devlin pour des informations utiles et des solutions de contournement.</li>
-</ul>
+    > **Note :**Dans Safari, vous pouvez utiliser [`x-webkit-airplay="deny"`](https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/AirPlayGuide/OptingInorOutofAirPlay/OptingInorOutofAirPlay.html) comme solution de repli.
 
-<p>Une bonne source générale d'informations sur l'utilisation de <code>&lt;audio&gt;</code> est le tutoriel sur le <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">contenu vidéo et audio</a>.</p>
+- **`loop`**
+  - : Un attribut booléen. S'il est renseigné, la lecture du fichier se fera en boucle.
+- **`muted`**
+  - : Un attribut booléen, indiquant si le son de l'élément audio est initialement coupé. Sa valeur par défaut est `false`.
+- **`preload`**
 
-<h3 id="styling_with_css">Mise en forme avec CSS</h3>
+  - : Cet attribut indique au navigateur ce que l'auteur du code html pense de l'utilisation optimale de cet élément. Il accepte uniquement les valeurs suivantes :
 
-<p>L'élément <code>&lt;audio&gt;</code> n'a aucun affichage intrinsèque en dehors des contrôles par défaut du navigateur qui sont affichés lorsque l'attribut booléen <code>controls</code> est présent.</p>
+    - `none` : Indique que l'élément audio ne devrait pas être mis en cache
+    - `metadata` : Indique que seules les méta-données (comme la durée) sont préchargées
+    - `auto` : Indique que tout le fichier peut être téléchargé, même s'il n'est pas certain que l'utilisateur le lira
+    - `""` (chaîne de caractères vide) : Un synonyme de `auto`
 
-<p>Les contrôles par défaut sont affichés avec <a href="/fr/docs/Web/CSS/display"><code>display</code></a> qui vaut <code>inline</code> par défaut et il est possible de changer cette valeur en <code>block</code> dans une feuille de style afin de pouvoir placer le contrôle au sein de la disposition, à moins de vouloir le placer en incise.</p>
+    La valeur par défaut peut varier d'un navigateur à l'autre. Les spécifications recommandent la valeur `metadata`.
 
-<p>Les contrôles par défaut peuvent être mis en forme grâce à des propriétés qui influent sur l'ensemble du bloc. On peut ainsi utiliser <a href="/fr/docs/Web/CSS/border"><code>border</code></a>, <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, etc. Toutefois, il n'est pas possible de mettre en forme chacun des composants individuel du contrôle (on ne peut pas, par exemple, modifier la taille d'un des boutons ou leurs icones). Chaque navigateur peut avoir des contrôles par défaut qui soient différents.</p>
+    > **Note :**
+    >
+    > - L'attribut `autoplay` a la priorité sur `preload`. Si `autoplay` est spécifié, le navigateur devrait évidemment commencer à télécharger l'audio pour le lire.
+    > - La spécification n'oblige pas le navigateur à suivre la valeur de cet attribut ; il s'agit d'une simple indication.
 
-<p>Pour obtenir un aspect identique dans les différents navigateurs, il vous faudra créer vos propres contrôles afin de les baliser et de les mettre en forme à votre convenance puis d'utiliser JavaScript et l'API <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> pour manipuler les différentes fonctionnalités.</p>
+- **`src`**
+  - : L'URL du fichier audio à intégrer. Cet élément est soumis aux [contrôles d'accès HTTP](/fr/docs/Web/HTTP/CORS). Cet attribut est facultatif ; vous pouvez utiliser l'élément [`<source>`](/fr/docs/Web/HTML/Element/Source) dans le bloc audio pour spécifier l'audio à intégrer.
 
-<p><a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Le guide sur la mise en forme des lecteurs vidéo</a> fournit quelques techniques utiles, bien qu'écrit à propos de l'élément <code>&lt;video&gt;</code>, certains concepts peuvent tout à fait s'appliquer aux éléments <code>&lt;audio&gt;</code>.</p>
+## Évènements
 
-<h3 id="detecting_addition_and_removal_of_tracks">Détecter l'ajout et la suppression de pistes</h3>
+| Nom de l'évènement                                                         | Condition du déclenchement                                                                                                                                                                                                          |
+| -------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [audioprocess](/fr/docs/Web/Reference/Events/audioprocess)                 | La mémoire tampon en entrée d'un [`ScriptProcessorNode`](/fr/docs/Web/API/ScriptProcessorNode) peut désormais être traité.                                                                                                          |
+| [`canplay`](/fr/docs/Web/API/HTMLMediaElement/canplay_event)               | Le navigateur peut lire le média mais estime que trop peu de données ont été chargées pour lire le média jusqu'à sa fin (il faudra vraisemblablement un arrêt pour un chargement en mémoire tampon).                                |
+| [`canplaythrough`](/fr/docs/Web/API/HTMLMediaElement/canplaythrough_event) | Le navigateur estime qu'il peut lire le média jusqu'à sa fin, sans avoir à interrompre la lecture par du chargement en mémoire tampon.                                                                                              |
+| [complete](/fr/docs/Web/Reference/Events/complete)                         | Le rendu d'un [`OfflineAudioContext`](/fr/docs/Web/API/OfflineAudioContext) est terminé.                                                                                                                                            |
+| [`durationchange`](/fr/docs/Web/API/HTMLMediaElement/durationchange_event) | L'attribut `duration` a été mis à jour.                                                                                                                                                                                             |
+| [`emptied`](/fr/docs/Web/API/HTMLMediaElement/emptied_event)               | Le média est devenu vide. Cela peut par exemple se produire lorsque le média a déjà été (partiellement ou complètement) chargé et que la méthode [`load()`](/fr/docs/Web/API/HTMLMediaElement/load) est invoquée pour le recharger. |
+| [`ended`](/fr/docs/Web/API/HTMLMediaElement/ended_event)                   | La lecture a été interrompue car la fin du média est atteinte.                                                                                                                                                                      |
+| [`loadeddata`](/fr/docs/Web/API/HTMLMediaElement/loadeddata_event)         | La première _frame_ du média a été chargée.                                                                                                                                                                                         |
+| [`loadedmetadata`](/fr/docs/Web/API/HTMLMediaElement/loadedmetadata_event) | Les métadonnées ont été chargées.                                                                                                                                                                                                   |
+| [`pause`](/fr/docs/Web/API/HTMLMediaElement/pause_event)                   | La lecture a été mise en pause.                                                                                                                                                                                                     |
+| [`play`](/fr/docs/Web/API/HTMLMediaElement/play_event)                     | La lecture a démarré.                                                                                                                                                                                                               |
+| [`playing`](/fr/docs/Web/API/HTMLMediaElement/playing_event)               | La lecture est prête à être lancée après avoir été mise en pause ou interrompue pour un chargement en mémoire de données.                                                                                                           |
+| [`ratechange`](/fr/docs/Web/API/HTMLMediaElement/ratechange_event)         | La vitesse de lecture a changé.                                                                                                                                                                                                     |
+| [`seeked`](/fr/docs/Web/API/HTMLMediaElement/seeked_event)                 | Une opération de déplacement du curseur de lecture (_seek_) est terminée.                                                                                                                                                           |
+| [`seeking`](/fr/docs/Web/API/HTMLMediaElement/seeking_event)               | Une opération de déplacement du curseur de lecture (_seek_) a été initiée.                                                                                                                                                          |
+| [`stalled`](/fr/docs/Web/API/HTMLMediaElement/stalled_event)               | L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.                                                                                                                          |
+| [`suspend`](/fr/docs/Web/API/HTMLMediaElement/suspend_event)               | Le chargement des données du média ont été suspendues.                                                                                                                                                                              |
+| [`timeupdate`](/fr/docs/Web/API/HTMLMediaElement/timeupdate_event)         | Le temps décrit par l'attribut `currentTime` a été mis à jour.                                                                                                                                                                      |
+| [`volumechange`](/fr/docs/Web/API/HTMLMediaElement/volumechange_event)     | Le volume a été modifié.                                                                                                                                                                                                            |
+| [`waiting`](/fr/docs/Web/API/HTMLMediaElement/waiting_event)               | La lecture a été interrompue en raison d'un manque temporaire de données.                                                                                                                                                           |
 
-<p>Il est aussi possible de détecter lorsque des pistes sont ajoutées et supprimées sur un élément <code>&lt;audio&gt;</code> en écoutant les évènements <a href="/fr/docs/Web/API/AudioTrackList/addtrack_event"><code>addtrack</code></a> et <a href="/fr/docs/Web/API/AudioTrackList/removetrack_event"><code>removetrack</code></a>. Toutefois, ces évènements ne sont pas directement envoyés sur l'élément <code>&lt;audio&gt;</code> mais sur l'objet représentant la liste de pistes de l'élément <code>&lt;audio&gt;</code> et rattaché à l'élément <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a>.</p>
+## Notes d'utilisation
 
-<dl>
-  <dt><a href="/fr/docs/Web/API/HTMLMediaElement/audioTracks"><code>HTMLMediaElement.audioTracks</code></a></dt>
-  <dd>Un objet <a href="/fr/docs/Web/API/AudioTrackList"><code>AudioTrackList</code></a> contenant l'ensemble des pistes audio associées à l'élément. Un écouteur <code>addtrack</code> peut être associé à l'objet afin d'alerter lorsque de nouvelles pistes audio sont ajoutées à l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/HTMLMediaElement/videoTracks"><code>HTMLMediaElement.videoTracks</code></a></dt>
-  <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet <a href="/fr/docs/Web/API/VideoTrackList"><code>VideoTrackList</code></a> afin d'alerter lorsque de nouvelles pistes vidéo sont ajoutées à l'élément.</dd>
-  <dt><a href="/fr/docs/Web/API/HTMLMediaElement/textTracks"><code>HTMLMediaElement.textTracks</code></a></dt>
-  <dd>Un écouteur <code>addtrack</code> peut être ajouté à cet objet <a href="/fr/docs/Web/API/TextTrackList"><code>TextTrackList</code></a> afin d'alerter lorsque de nouvelles pistes de texte sont ajoutées à l'élément.</dd>
-</dl>
+Les navigateurs ne prennent pas tous en charge les mêmes [types de fichiers](/fr/docs/Web/Media/Formats/Containers) et [codecs audio](/fr/docs/Web/Media/Formats/Audio_codecs) ; vous pouvez fournir plusieurs sources à l'intérieur d'éléments [`<source>`](/fr/docs/Web/HTML/Element/Source) imbriqués, et le navigateur utilisera alors le premier qu'il comprend :
 
-<div class="note">
-  <p><strong>Note :</strong>Bien qu'on parle ici d'un élément <code>&lt;audio&gt;</code>, il est possible qu'un tel élément possède des pistes vidéo et des pistes texte bien que la cohérence des interfaces puisse être mise à mal.</p>
-</div>
+```html
+<audio controls>
+  <source src="myAudio.mp3" type="audio/mpeg">
+  <source src="myAudio.ogg" type="audio/ogg">
+  <p>Votre navigateur ne prend pas en charge l'audio HTML5.
+  Voici un <a href="myAudio.mp3">lien vers le fichier audio</a>
+  à la place.</p>
+</audio>
+```
 
-<p>Ainsi, on pourra utiliser un fragment de code analogue à celui qui suit pour détecter si de nouvelles pistes sont ajoutées ou supprimées d'un élément <code>&lt;audio&gt;</code> :</p>
+Nous proposons un [guide substantiel et complet des types de fichiers médias](/fr/docs/Web/Media/Formats) et des [codecs audio qui peuvent être utilisés en leur sein](/fr/docs/Web/Media/Formats/Audio_codecs). Est également disponible [un guide des codecs supportés pour la vidéo](/fr/docs/Web/Media/Formats/Video_codecs).
 
-<pre class="brush: js">let elem = document.querySelector("audio");
+Autres notes d'utilisation :
+
+- Si vous ne spécifiez pas l'attribut `controls`, le lecteur audio n'inclura pas les contrôles par défaut du navigateur. Vous pouvez toutefois créer vos propres contrôles personnalisés en utilisant JavaScript et l'API [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement).
+- Pour permettre un contrôle précis de votre contenu audio, les `HTMLMediaElement` retournent de nombreux [événements](/fr/docs/Web/API/HTMLMediaElement#events) différents. Cela fournit également un moyen de surveiller le processus de récupération de l'audio afin que vous puissiez surveiller les erreurs ou détecter quand suffisamment de ressources sont disponibles pour commencer à les lire ou à les manipuler.
+- Vous pouvez également utiliser l'API [Web Audio](/fr/docs/Web/API/Web_Audio_API) pour générer et manipuler directement des flux audio à partir du code JavaScript plutôt que de diffuser des fichiers audio préexistants.
+- Les éléments `<audio>` ne peuvent pas avoir de sous-titres ou de légendes associés de la même manière que les éléments `<video>`. Voir [WebVTT and Audio](https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio) (en) par Ian Devlin pour des informations utiles et des solutions de contournement.
+
+Une bonne source générale d'informations sur l'utilisation de `<audio>` est le tutoriel sur le [contenu vidéo et audio](/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content).
+
+### Mise en forme avec CSS
+
+L'élément `<audio>` n'a aucun affichage intrinsèque en dehors des contrôles par défaut du navigateur qui sont affichés lorsque l'attribut booléen `controls` est présent.
+
+Les contrôles par défaut sont affichés avec [`display`](/fr/docs/Web/CSS/display) qui vaut `inline` par défaut et il est possible de changer cette valeur en `block` dans une feuille de style afin de pouvoir placer le contrôle au sein de la disposition, à moins de vouloir le placer en incise.
+
+Les contrôles par défaut peuvent être mis en forme grâce à des propriétés qui influent sur l'ensemble du bloc. On peut ainsi utiliser [`border`](/fr/docs/Web/CSS/border), [`border-radius`](/fr/docs/Web/CSS/border-radius), [`padding`](/fr/docs/Web/CSS/padding), [`margin`](/fr/docs/Web/CSS/margin), etc. Toutefois, il n'est pas possible de mettre en forme chacun des composants individuel du contrôle (on ne peut pas, par exemple, modifier la taille d'un des boutons ou leurs icones). Chaque navigateur peut avoir des contrôles par défaut qui soient différents.
+
+Pour obtenir un aspect identique dans les différents navigateurs, il vous faudra créer vos propres contrôles afin de les baliser et de les mettre en forme à votre convenance puis d'utiliser JavaScript et l'API [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) pour manipuler les différentes fonctionnalités.
+
+[Le guide sur la mise en forme des lecteurs vidéo](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics) fournit quelques techniques utiles, bien qu'écrit à propos de l'élément `<video>`, certains concepts peuvent tout à fait s'appliquer aux éléments `<audio>`.
+
+### Détecter l'ajout et la suppression de pistes
+
+Il est aussi possible de détecter lorsque des pistes sont ajoutées et supprimées sur un élément `<audio>` en écoutant les évènements [`addtrack`](/fr/docs/Web/API/AudioTrackList/addtrack_event) et [`removetrack`](/fr/docs/Web/API/AudioTrackList/removetrack_event). Toutefois, ces évènements ne sont pas directement envoyés sur l'élément `<audio>` mais sur l'objet représentant la liste de pistes de l'élément `<audio>` et rattaché à l'élément [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement).
+
+- [`HTMLMediaElement.audioTracks`](/fr/docs/Web/API/HTMLMediaElement/audioTracks)
+  - : Un objet [`AudioTrackList`](/fr/docs/Web/API/AudioTrackList) contenant l'ensemble des pistes audio associées à l'élément. Un écouteur `addtrack` peut être associé à l'objet afin d'alerter lorsque de nouvelles pistes audio sont ajoutées à l'élément.
+- [`HTMLMediaElement.videoTracks`](/fr/docs/Web/API/HTMLMediaElement/videoTracks)
+  - : Un écouteur `addtrack` peut être ajouté à cet objet [`VideoTrackList`](/fr/docs/Web/API/VideoTrackList) afin d'alerter lorsque de nouvelles pistes vidéo sont ajoutées à l'élément.
+- [`HTMLMediaElement.textTracks`](/fr/docs/Web/API/HTMLMediaElement/textTracks)
+  - : Un écouteur `addtrack` peut être ajouté à cet objet [`TextTrackList`](/fr/docs/Web/API/TextTrackList) afin d'alerter lorsque de nouvelles pistes de texte sont ajoutées à l'élément.
+
+> **Note :**Bien qu'on parle ici d'un élément `<audio>`, il est possible qu'un tel élément possède des pistes vidéo et des pistes texte bien que la cohérence des interfaces puisse être mise à mal.
+
+Ainsi, on pourra utiliser un fragment de code analogue à celui qui suit pour détecter si de nouvelles pistes sont ajoutées ou supprimées d'un élément `<audio>` :
+
+```js
+let elem = document.querySelector("audio");
 
 elem.audioTrackList.onaddtrack = function(event) {
   trackEditor.addTrack(event.track);
@@ -242,103 +166,154 @@ elem.audioTrackList.onaddtrack = function(event) {
 
 elem.audioTrackList.onremovetrack = function(event) {
   trackEditor.removeTrack(event.track);
-};</pre>
+};
+```
 
-<p>Ce code permet de surveiller lorsque de nouvelles pistes audio sont ajoutées et supprimées. Lorsque c'est le cas, une fonction (non décrite ici) est invoquée afin de mettre à jour l'éditeur présenté à l'utilisateur avec la liste des pistes disponibles.</p>
+Ce code permet de surveiller lorsque de nouvelles pistes audio sont ajoutées et supprimées. Lorsque c'est le cas, une fonction (non décrite ici) est invoquée afin de mettre à jour l'éditeur présenté à l'utilisateur avec la liste des pistes disponibles.
 
-<p>Il est aussi possible d'utiliser <a href="/fr/docs/Web/API/EventTarget/addEventListener"><code>addEventListener()</code></a> afin d'écouter les évènements <a href="/fr/docs/Web/API/AudioTrackList/addtrack_event"><code>addtrack</code></a> et <a href="/fr/docs/Web/API/AudioTrackList/removetrack_event"><code>removetrack</code></a>.</p>
+Il est aussi possible d'utiliser [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) afin d'écouter les évènements [`addtrack`](/fr/docs/Web/API/AudioTrackList/addtrack_event) et [`removetrack`](/fr/docs/Web/API/AudioTrackList/removetrack_event).
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="basic_usage">Utilisation simple</h3>
+### Utilisation simple
 
-<pre class="brush: html">&lt;!-- Simple lecture audio --&gt;
-&lt;audio src="AudioTest.ogg" autoplay&gt;
-  Votre navigateur ne supporte pas l'élément &lt;code&gt;audio&lt;/code&gt;.
-&lt;/audio&gt;
-</pre>
+```html
+<!-- Simple lecture audio -->
+<audio src="AudioTest.ogg" autoplay>
+  Votre navigateur ne supporte pas l'élément <code>audio</code>.
+</audio>
+```
 
-<p>Pour savoir quand l'autoplay fonctionne, comment obtenir la permission d'utiliser l'autoplay, et comment et quand il est approprié d'utiliser l'autoplay, consultez notre <a href="/fr/docs/Web/Media/Autoplay_guide">guide sur l'autoplay</a>.</p>
+Pour savoir quand l'autoplay fonctionne, comment obtenir la permission d'utiliser l'autoplay, et comment et quand il est approprié d'utiliser l'autoplay, consultez notre [guide sur l'autoplay](/fr/docs/Web/Media/Autoplay_guide).
 
-<h3 id="audio_element_with_source_element">Utilisation de l'élément <code>&lt;source&gt;</code></h3>
+### Utilisation de l'élément `<source>`
 
-<p>Cet exemple précise quelle piste audio intégrer en utilisant l'attribut <code>src</code> sur un élément <code>&lt;source&gt;</code> imbriqué plutôt que directement sur l'élément <code>&lt;audio&gt;</code>. Il est toujours utile d'inclure le type MIME du fichier à l'intérieur de l'attribut <code>type</code>, car le navigateur est capable de dire instantanément s'il peut lire ce fichier, et de ne pas perdre de temps dessus dans le cas contraire.</p>
+Cet exemple précise quelle piste audio intégrer en utilisant l'attribut `src` sur un élément `<source>` imbriqué plutôt que directement sur l'élément `<audio>`. Il est toujours utile d'inclure le type MIME du fichier à l'intérieur de l'attribut `type`, car le navigateur est capable de dire instantanément s'il peut lire ce fichier, et de ne pas perdre de temps dessus dans le cas contraire.
 
-<pre class="brush: html">&lt;audio controls="controls"&gt;
-  &lt;source src="toto.wav" type="audio/wav"&gt;
-  Votre navigateur ne prend pas en charge l'élément &lt;code&gt;audio&lt;/code&gt;.
-&lt;/audio&gt;
-</pre>
+```html
+<audio controls="controls">
+  <source src="toto.wav" type="audio/wav">
+  Votre navigateur ne prend pas en charge l'élément <code>audio</code>.
+</audio>
+```
 
-<h3 id="audio_with_multiple_source_elements">Utilisation de plusieurs éléments <code>&lt;source&gt;</code></h3>
+### Utilisation de plusieurs éléments `<source>`
 
-<p>Dans l'exemple qui suit, le navigateur essaiera de jouer le premier fichier correspondant au premier élément (celui avec le codec Opus) : s'il peut le lire, il n'interprète pas les suivants ; s'il ne peut pas le lire, il tente de lire le deuxième puis, si ce n'est toujours pas possible, le troisième (au format MP3) :</p>
+Dans l'exemple qui suit, le navigateur essaiera de jouer le premier fichier correspondant au premier élément (celui avec le codec Opus) : s'il peut le lire, il n'interprète pas les suivants ; s'il ne peut pas le lire, il tente de lire le deuxième puis, si ce n'est toujours pas possible, le troisième (au format MP3) :
 
-<pre class="brush: html">&lt;audio controls=""&gt;
-  &lt;source src="toto.opus" type="audio/ogg; codecs=opus"/&gt;
-  &lt;source src="toto.ogg" type="audio/ogg; codecs=vorbis"/&gt;
- &lt;source src="toto.mp3" type="audio/mpeg"/&gt;
-&lt;/audio&gt;</pre>
+```html
+<audio controls="">
+  <source src="toto.opus" type="audio/ogg; codecs=opus"/>
+  <source src="toto.ogg" type="audio/ogg; codecs=vorbis"/>
+ <source src="toto.mp3" type="audio/mpeg"/>
+</audio>
+```
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>Les éléments audio contenant des dialogues parlés doivent fournir des sous-titres et des transcriptions qui décrivent précisément le contenu. Les sous-titres, qui sont spécifiés à l'aide de <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a>, ils permettent aux personnes souffrant de troubles auditifs ou ne pouvant pas utiliser le son de l'appareil de lire le fichier. Les transcriptions permettent aux personnes ayant besoin de plus de temps pour lire le contenu d'utiliser un format plus adéquat.</p>
+Les éléments audio contenant des dialogues parlés doivent fournir des sous-titres et des transcriptions qui décrivent précisément le contenu. Les sous-titres, qui sont spécifiés à l'aide de [WebVTT](/fr/docs/Web/API/WebVTT_API), ils permettent aux personnes souffrant de troubles auditifs ou ne pouvant pas utiliser le son de l'appareil de lire le fichier. Les transcriptions permettent aux personnes ayant besoin de plus de temps pour lire le contenu d'utiliser un format plus adéquat.
 
-<p>Si un service de sous-titre automatique est utilisé, il est nécessaire de vérifier le contenu généré afin de s'assurer qu'il correspond correctement à la source audio.</p>
+Si un service de sous-titre automatique est utilisé, il est nécessaire de vérifier le contenu généré afin de s'assurer qu'il correspond correctement à la source audio.
 
-<p>L'élément <code>&lt;audio&gt;</code> ne prend pas directement en charge le WebVTT. Vous devrez trouver une bibliothèque ou un framework qui vous offre cette capacité, ou écrire le code pour afficher les sous-titres vous-même. Une option consiste à lire votre audio à l'aide d'un élément <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>, qui prend en charge WebVTT.</p>
+L'élément `<audio>` ne prend pas directement en charge le WebVTT. Vous devrez trouver une bibliothèque ou un framework qui vous offre cette capacité, ou écrire le code pour afficher les sous-titres vous-même. Une option consiste à lire votre audio à l'aide d'un élément [`<video>`](/fr/docs/Web/HTML/Element/video), qui prend en charge WebVTT.
 
-<p>En plus des dialogues parlés, les sous-titres et les transcriptions doivent également identifier la musique et les effets sonores qui communiquent des informations importantes. Cela inclut l'émotion et le ton. Par exemple, dans le WebVTT ci-dessous, notez l'utilisation de crochets pour donner un ton et un aperçu émotionnel au spectateur ; cela peut aider à établir l'ambiance autrement fournie par la musique, les sons non verbaux et les effets sonores cruciaux, et ainsi de suite.</p>
+En plus des dialogues parlés, les sous-titres et les transcriptions doivent également identifier la musique et les effets sonores qui communiquent des informations importantes. Cela inclut l'émotion et le ton. Par exemple, dans le WebVTT ci-dessous, notez l'utilisation de crochets pour donner un ton et un aperçu émotionnel au spectateur ; cela peut aider à établir l'ambiance autrement fournie par la musique, les sons non verbaux et les effets sonores cruciaux, et ainsi de suite.
 
-<pre>1
-00:00:00 --&gt; 00:00:45
-[Musique avec des trompettes sonnantes]
+    1
+    00:00:00 --> 00:00:45
+    [Musique avec des trompettes sonnantes]
 
-2
-00:00:46 --&gt; 00:00:51
-Elle est où la poulette ?
+    2
+    00:00:46 --> 00:00:51
+    Elle est où la poulette ?
 
-16
-00:00:52 --&gt; 00:01:02
-[sur un ton énervé] Vous rendez la poulette ou c'est plus vous qui donnez à manger aux lapins ?</pre>
+    16
+    00:00:52 --> 00:01:02
+    [sur un ton énervé] Vous rendez la poulette ou c'est plus vous qui donnez à manger aux lapins ?
 
-<p>Une autre bonne pratique consiste à fournir du contenu comme un lien de téléchargement comme méthode alternative pour les personnes qui utilisent un navigateur qui ne prend pas en charge <code>&lt;audio&gt;</code>&nbsp;:</p>
+Une autre bonne pratique consiste à fournir du contenu comme un lien de téléchargement comme méthode alternative pour les personnes qui utilisent un navigateur qui ne prend pas en charge `<audio>` :
 
-<pre class="brush: html">&lt;audio controls&gt;
-  &lt;source src="monAudio.mp3" type="audio/mpeg"&gt;
-  &lt;source src="monAudio.ogg" type="audio/ogg"&gt;
-  &lt;p&gt;
+```html
+<audio controls>
+  <source src="monAudio.mp3" type="audio/mpeg">
+  <source src="monAudio.ogg" type="audio/ogg">
+  <p>
     Votre navigateur ne prend pas charge l'audio HTML.
-    Voici &lt;a href="monAudio.mp3"&gt;un lien de téléchargement&lt;/a&gt; à la place.
-  &lt;/p&gt;
-&lt;/audio&gt;
-
-</pre>
+    Voici <a href="monAudio.mp3">un lien de téléchargement</a> à la place.
+  </p>
+</audio>
+```
 
-<ul>
-  <li><a href="/fr/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">Sous-titrage sur le web</a></li>
-  <li><a href="/fr/docs/Web/API/WebVTT_API">Web Video Text Tracks Format (WebVTT)</a></li>
-  <li><a href="https://webaim.org/techniques/captions/">WebAIM: Captions, Transcripts, and Audio Descriptions</a> (en anglais)</li>
-  <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.2_—_providing_text_alternatives_for_time-based_media">Comprendre les règles WCAG 1.2</a></li>
-  <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html">Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0</a> (en anglais)</li>
-  <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html">Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0</a> (en anglais)</li>
-</ul>
+- [Sous-titrage sur le web](/fr/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions)
+- [Web Video Text Tracks Format (WebVTT)](/fr/docs/Web/API/WebVTT_API)
+- [WebAIM: Captions, Transcripts, and Audio Descriptions](https://webaim.org/techniques/captions/) (en anglais)
+- [Comprendre les règles WCAG 1.2](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.2_—_providing_text_alternatives_for_time-based_media)
+- [Understanding Success Criterion 1.2.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html) (en anglais)
+- [Understanding Success Criterion 1.2.2 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html) (en anglais)
 
-<h2 id="technical_summary">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content">contenu intégré</a>. Si l'attribut <a href="#attr-controls"><code>controls</code></a> est utilisé : <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a> et <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/Guide/HTML/Content_categories"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content"
+          >contenu intégré</a
+        >. Si l'attribut <a href="#attr-controls"><code>controls</code></a> est
+        utilisé :
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content"
+          >contenu interactif</a
+        >
+        et
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td>Si l'élément possède un attribut <a href="#attr-src"><code>src</code></a> : zéro ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/track"><code>&lt;track&gt;</code></a>, suivis par du contenu transparent ne contenant pas d'éléments média, c'est-à-dire des éléments qui ne soient pas <a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>. Sinon : zéro ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/Source"><code>&lt;source&gt;</code></a> suivis par un élément <a href="/fr/docs/Web/HTML/Element/track"><code>&lt;track&gt;</code></a>, suivi par du contenu transparent ne contenant pas d'éléments média (ni <a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a> ni <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>).</td>
+      <td>
+        Si l'élément possède un attribut
+        <a href="#attr-src"><code>src</code></a> : zéro ou plusieurs éléments
+        <a href="/fr/docs/Web/HTML/Element/track"><code>&#x3C;track></code></a
+        >, suivis par du contenu transparent ne contenant pas d'éléments média,
+        c'est-à-dire des éléments qui ne soient pas
+        <a href="/fr/docs/Web/HTML/Element/audio"><code>&#x3C;audio></code></a>
+        ou
+        <a href="/fr/docs/Web/HTML/Element/video"><code>&#x3C;video></code></a
+        >. Sinon : zéro ou plusieurs éléments
+        <a href="/fr/docs/Web/HTML/Element/Source"
+          ><code>&#x3C;source></code></a
+        >
+        suivis par un élément
+        <a href="/fr/docs/Web/HTML/Element/track"><code>&#x3C;track></code></a
+        >, suivi par du contenu transparent ne contenant pas d'éléments média
+        (ni
+        <a href="/fr/docs/Web/HTML/Element/audio"><code>&#x3C;audio></code></a>
+        ni
+        <a href="/fr/docs/Web/HTML/Element/video"><code>&#x3C;video></code></a
+        >).
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
@@ -346,40 +321,49 @@ Elle est où la poulette ?
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td><a href="https://w3c.github.io/aria/#application"><code>application</code></a></td>
+      <td>
+        <a href="https://w3c.github.io/aria/#application"
+          ><code>application</code></a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLAudioElement"><code>HTMLAudioElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLAudioElement"
+          ><code>HTMLAudioElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
 
-<p>{{Specifications}}</p>
+{{Compat}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Voir aussi
 
-<p>{{Compat}}</p>
+- [Technologies media Web](/fr/docs/Web/Media)
 
-<h2 id="see_also">Voir aussi</h2>
+  - [Formats des conteneurs medias (types de fichiers)](/fr/docs/Web/Media/Formats/Containers)
+  - [Guide des codecs audio utilisés sur le web](/fr/docs/Web/Media/Formats/Audio_codecs)
 
-<ul>
-  <li><a href="/fr/docs/Web/Media">Technologies media Web</a>
-    <ul>
-      <li><a href="/fr/docs/Web/Media/Formats/Containers">Formats des conteneurs medias (types de fichiers)</a></li>
-      <li><a href="/fr/docs/Web/Media/Formats/Audio_codecs">Guide des codecs audio utilisés sur le web</a></li>
-    </ul>
-  </li>
-  <li>L'API <a href="/fr/docs/Web/API/Web_Audio_API">Web Audio</a></li>
-  <li><a href="/fr/docs/Web/API/HTMLAudioElement"><code>HTMLAudioElement</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Source"><code>&lt;source&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a></li>
-  <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Apprentissage : Contenu vidéo et audio</a></li>
-  <li><a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics">Les bases de l'audio multi-navigateur</a></li>
-</ul>
+- L'API [Web Audio](/fr/docs/Web/API/Web_Audio_API)
+- [`HTMLAudioElement`](/fr/docs/Web/API/HTMLAudioElement)
+- L'élément [`<source>`](/fr/docs/Web/HTML/Element/Source)
+- L'élément [`<video>`](/fr/docs/Web/HTML/Element/video)
+- [Apprentissage : Contenu vidéo et audio](/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [Les bases de l'audio multi-navigateur](/fr/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics)
diff --git a/files/fr/web/html/element/b/index.md b/files/fr/web/html/element/b/index.md
index 22ae6d5ce3..e2f5961e9e 100644
--- a/files/fr/web/html/element/b/index.md
+++ b/files/fr/web/html/element/b/index.md
@@ -14,33 +14,63 @@ tags:
 translation_of: Web/HTML/Element/b
 browser-compat: html.elements.b
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;b&gt;</code></strong> permet d'attirer l'attention du lecteur sur un contenu qui n'a pas, pour autant, d'importance significative. Anciennement utilisé pour mettre le texte en gras. Cet élément ne doit pas être utilisé pour mettre en forme des éléments, c'est la propriété CSS <a href="/fr/docs/Web/CSS/font-weight"><code>font-weight</code></a> qu'il faut utiliser. Si l'élément est d'une importance particulière, on utilisera l'élément HTML <a href="/fr/docs/Web/HTML/Element/strong"><code>&lt;strong&gt;</code></a>.</p>
+L'élément HTML **`<b>`** permet d'attirer l'attention du lecteur sur un contenu qui n'a pas, pour autant, d'importance significative. Anciennement utilisé pour mettre le texte en gras. Cet élément ne doit pas être utilisé pour mettre en forme des éléments, c'est la propriété CSS [`font-weight`](/fr/docs/Web/CSS/font-weight) qu'il faut utiliser. Si l'élément est d'une importance particulière, on utilisera l'élément HTML [`<strong>`](/fr/docs/Web/HTML/Element/strong).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/b.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/b.html", "tabbed-shorter")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >Contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -48,51 +78,50 @@ browser-compat: html.elements.b
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Seuls <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> peuvent être utilisés pour cet élément.</p>
+Seuls [les attributs universels](/fr/docs/Web/HTML/Global_attributes) peuvent être utilisés pour cet élément.
 
-<h2 id="usage_notes"><strong>Notes d'utilisation</strong></h2>
+## **Notes d'utilisation**
 
-<ul>
- <li><code>&lt;b&gt;</code> est habituellement utilisé pour les mots-clés dans les résumés, les noms de produits dans des tests (sans que ceux-ci aient une importance particulière). Il peut également être utilisé afin d'indiquer la première phrase de chaque paragraphe d'un article.</li>
- <li>Il ne faut pas confondre l'élément <code>&lt;b&gt;</code> avec les éléments <a href="/fr/docs/Web/HTML/Element/strong"><code>&lt;strong&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/em"><code>&lt;em&gt;</code></a>, ou <a href="/fr/docs/Web/HTML/Element/mark"><code>&lt;mark&gt;</code></a>. L'élément <a href="/fr/docs/Web/HTML/Element/strong"><code>&lt;strong&gt;</code></a> représente un texte d'une certaine <em>importance</em>, <a href="/fr/docs/Web/HTML/Element/em"><code>&lt;em&gt;</code></a> met une emphase sur le texte et <a href="/fr/docs/Web/HTML/Element/mark"><code>&lt;mark&gt;</code></a> représente un texte avec une certaine <em>pertinence</em>. L'élément <code>&lt;b&gt;</code> ne porte aucune information sémantique particulière ; utilisez-le lorsque qu'aucun autre ne convient.</li>
- <li>De la même façon, ne balisez pas les titres en utilisant l'élément <code>&lt;b&gt;</code>. Pour cet usage, utilisez les balises <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h1&gt;</code></a> à <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h6&gt;</code></a>. De plus, les feuilles de style peuvent changer le style par défaut de ces éléments. Ils ne seront pas <em>forcément</em> affichés en gras.</li>
- <li>C'est généralement une bonne pratique d'utiliser l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> sur l'élément <code>&lt;b&gt;</code> lorsqu'on souhaite transporter des informations sémantiques supplémentaires. Cela facilitera le développement des styles à appliquer sur le document, sans avoir à modifier le code HTML.</li>
- <li>Historiquement, l'élément <code>&lt;b&gt;</code> a été pensé pour rendre du texte avec une police grasse. Les éléments à seul but stylistique ont été dépréciés avec HTML 4. Ainsi, le sens de l'élément <code>&lt;b&gt;</code> a évolué.</li>
- <li>S'il n'y a aucune raison particulière d'utiliser l'élément <code>&lt;b&gt;</code>, en dehors de son apparence en gras, l'utilisation de la propriété <a href="/fr/docs/Web/CSS">CSS</a> <a href="/fr/docs/Web/CSS/font-weight"><code>font-weight</code></a> avec une valeur <code>bold</code> est à privilégier.</li>
-</ul>
+- `<b>` est habituellement utilisé pour les mots-clés dans les résumés, les noms de produits dans des tests (sans que ceux-ci aient une importance particulière). Il peut également être utilisé afin d'indiquer la première phrase de chaque paragraphe d'un article.
+- Il ne faut pas confondre l'élément `<b>` avec les éléments [`<strong>`](/fr/docs/Web/HTML/Element/strong), [`<em>`](/fr/docs/Web/HTML/Element/em), ou [`<mark>`](/fr/docs/Web/HTML/Element/mark). L'élément [`<strong>`](/fr/docs/Web/HTML/Element/strong) représente un texte d'une certaine _importance_, [`<em>`](/fr/docs/Web/HTML/Element/em) met une emphase sur le texte et [`<mark>`](/fr/docs/Web/HTML/Element/mark) représente un texte avec une certaine _pertinence_. L'élément `<b>` ne porte aucune information sémantique particulière ; utilisez-le lorsque qu'aucun autre ne convient.
+- De la même façon, ne balisez pas les titres en utilisant l'élément `<b>`. Pour cet usage, utilisez les balises [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements) à [`<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements). De plus, les feuilles de style peuvent changer le style par défaut de ces éléments. Ils ne seront pas _forcément_ affichés en gras.
+- C'est généralement une bonne pratique d'utiliser l'attribut [`class`](/fr/docs/Web/HTML/Global_attributes#attr-class) sur l'élément `<b>` lorsqu'on souhaite transporter des informations sémantiques supplémentaires. Cela facilitera le développement des styles à appliquer sur le document, sans avoir à modifier le code HTML.
+- Historiquement, l'élément `<b>` a été pensé pour rendre du texte avec une police grasse. Les éléments à seul but stylistique ont été dépréciés avec HTML 4. Ainsi, le sens de l'élément `<b>` a évolué.
+- S'il n'y a aucune raison particulière d'utiliser l'élément `<b>`, en dehors de son apparence en gras, l'utilisation de la propriété [CSS](/fr/docs/Web/CSS) [`font-weight`](/fr/docs/Web/CSS/font-weight) avec une valeur `bold` est à privilégier.
 
-<h2 id="examples">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;p&gt;
-  Cet article décrit plusieurs éléments &lt;b class="keyword"&gt;texte&lt;/b&gt;.
-  Il explique leur usage dans un document &lt;b class="keyword"&gt;HTML&lt;/b&gt;.
-&lt;/p&gt;
+```html
+<p>
+  Cet article décrit plusieurs éléments <b class="keyword">texte</b>.
+  Il explique leur usage dans un document <b class="keyword">HTML</b>.
+</p>
 Les mots-clés sont affichés avec le style par défaut de
-l'élément &amp;lt;b&amp;gt;, sûrement en gras.
-</pre>
+l'élément &lt;b&gt;, sûrement en gras.
+```
 
-<h3 id="result">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("example")}}</p>
+{{EmbedLiveSample("example")}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>Les autres éléments portants une sémantique textuelle : <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/em"><code>&lt;em&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/strong"><code>&lt;strong&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/small"><code>&lt;small&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/cite"><code>&lt;cite&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/q"><code>&lt;q&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/dfn"><code>&lt;dfn&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/abbr"><code>&lt;abbr&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/time"><code>&lt;time&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/code"><code>&lt;code&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/var"><code>&lt;var&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/samp"><code>&lt;samp&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/kbd"><code>&lt;kbd&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/sub"><code>&lt;sub&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/sup"><code>&lt;sup&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/i"><code>&lt;i&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/mark"><code>&lt;mark&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/ruby"><code>&lt;ruby&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/rp"><code>&lt;rp&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/rt"><code>&lt;rt&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/bdo"><code>&lt;bdo&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/br"><code>&lt;br&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/wbr"><code>&lt;wbr&gt;</code></a>.</li>
-  <li><a href="https://www.w3.org/International/questions/qa-b-and-i-tags">Utiliser les éléments <code>&lt;b&gt;</code> et <code>&lt;i&gt;</code> (W3C)</a></li>
-</ul>
+- Les autres éléments portants une sémantique textuelle : [`<a>`](/fr/docs/Web/HTML/Element/a), [`<em>`](/fr/docs/Web/HTML/Element/em), [`<strong>`](/fr/docs/Web/HTML/Element/strong), [`<small>`](/fr/docs/Web/HTML/Element/small), [`<cite>`](/fr/docs/Web/HTML/Element/cite), [`<q>`](/fr/docs/Web/HTML/Element/q), [`<dfn>`](/fr/docs/Web/HTML/Element/dfn), [`<abbr>`](/fr/docs/Web/HTML/Element/abbr), [`<time>`](/fr/docs/Web/HTML/Element/time), [`<code>`](/fr/docs/Web/HTML/Element/code), [`<var>`](/fr/docs/Web/HTML/Element/var), [`<samp>`](/fr/docs/Web/HTML/Element/samp), [`<kbd>`](/fr/docs/Web/HTML/Element/kbd), [`<sub>`](/fr/docs/Web/HTML/Element/sub), [`<sup>`](/fr/docs/Web/HTML/Element/sup), [`<i>`](/fr/docs/Web/HTML/Element/i), [`<mark>`](/fr/docs/Web/HTML/Element/mark), [`<ruby>`](/fr/docs/Web/HTML/Element/ruby), [`<rp>`](/fr/docs/Web/HTML/Element/rp), [`<rt>`](/fr/docs/Web/HTML/Element/rt), [`<bdo>`](/fr/docs/Web/HTML/Element/bdo), [`<span>`](/fr/docs/Web/HTML/Element/span), [`<br>`](/fr/docs/Web/HTML/Element/br), [`<wbr>`](/fr/docs/Web/HTML/Element/wbr).
+- [Utiliser les éléments `<b>` et `<i>` (W3C)](https://www.w3.org/International/questions/qa-b-and-i-tags)
diff --git a/files/fr/web/html/element/base/index.md b/files/fr/web/html/element/base/index.md
index 9a88ff2286..0aa8f9b27c 100644
--- a/files/fr/web/html/element/base/index.md
+++ b/files/fr/web/html/element/base/index.md
@@ -10,21 +10,28 @@ tags:
 translation_of: Web/HTML/Element/base
 browser-compat: html.elements.base
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément <strong><code>&lt;base&gt;</code></strong> définit l'URL de base à utiliser pour recomposer toutes les URL relatives contenues dans un document. Il ne peut y avoir qu'un seul élément <code>&lt;base&gt;</code> au sein d'un document.</p>
+L'élément **`<base>`** définit l'URL de base à utiliser pour recomposer toutes les URL relatives contenues dans un document. Il ne peut y avoir qu'un seul élément `<base>` au sein d'un document.
 
-<p>Il est possible d'accéder à l'URL de base d'un document via un script en utilisant <a href="/fr/docs/Web/API/Node/baseURI"><code>Node.baseURI</code></a>. Si le document ne possède pas d'élément <code>&lt;base&gt;</code>; la base par défaut pour la composition des URL sera l'URL courante.</p>
+Il est possible d'accéder à l'URL de base d'un document via un script en utilisant [`Node.baseURI`](/fr/docs/Web/API/Node/baseURI). Si le document ne possède pas d'élément `<base>`; la base par défaut pour la composition des URL sera l'URL courante.
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
       <td>Contenu de méta-données.</td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td>Aucun, c'est un <a href="/fr/docs/Glossary/Empty_element">élément vide</a>.</td>
+      <td>
+        Aucun, c'est un
+        <a href="/fr/docs/Glossary/Empty_element">élément vide</a>.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
@@ -32,11 +39,21 @@ browser-compat: html.elements.base
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>N'importe quel élément <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a> qui ne contient pas un autre élément <a href="/fr/docs/Web/HTML/Element/base"><code>&lt;base&gt;</code></a>.</td>
+      <td>
+        N'importe quel élément
+        <a href="/fr/docs/Web/HTML/Element/head"><code>&#x3C;head></code></a>
+        qui ne contient pas un autre élément
+        <a href="/fr/docs/Web/HTML/Element/base"><code>&#x3C;base></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -44,68 +61,69 @@ browser-compat: html.elements.base
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLBaseElement"><code>HTMLBaseElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLBaseElement"
+          ><code>HTMLBaseElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a> peuvent être utilisés sur cet élément.</p>
+Les [attributs universels](/fr/docs/Web/HTML/Global_attributes) peuvent être utilisés sur cet élément.
 
-<div class="warning">
-  <p><strong>Attention :</strong> Si l'un des attributs suivants est spécifié, cet élément <strong>doit</strong> venir avant d'autres éléments dont les valeurs d'attribut sont des URL, comme l'attribut <code>href</code> de <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>.</p>
-</div>
+> **Attention :** Si l'un des attributs suivants est spécifié, cet élément **doit** venir avant d'autres éléments dont les valeurs d'attribut sont des URL, comme l'attribut `href` de [`<link>`](/fr/docs/Web/HTML/Element/link).
 
-<dl>
-  <dt><strong><code>href</code></strong></dt>
-  <dd>L'URL de base à utiliser afin de recomposer les URL relatives contenues dans le document. Si cet attribut est défini, cet élément doit être présent avant les éléments dont les attributs sont des URL.<br>
-  Les URI absolues et relatives sont autorisées (voir la note ci-après).</dd>
-  <dt><strong><code>target</code></strong></dt>
-  <dd><p>Un <strong>mot-clé</strong> ou un <strong>nom défini par l'auteur</strong> du <a href="/fr/docs/Glossary/Browsing_context">contexte de navigation</a> par défaut pour afficher les résultats de la navigation à partir des éléments <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a> sans attributs <code>target</code> explicites.</p>
-  <p>Les mots-clés suivants ont des significations particulières :</p>
-    <ul>
-      <li><code>_self</code> : Charge le résultat dans le contexte de navigation courant. C'est la valeur par défaut de l'attribut s'il n'est pas utilisé.</li>
-      <li><code>_blank</code> : Charge le résultat dans un nouveau contexte de navigation.</li>
-      <li><code>_parent</code> : Charge le résultat dans le contexte de navigation parent du contexte courant. S'il n'y a pas de parent, cette option aura le même effet que <code>_self</code>.</li>
-      <li><code>_top</code> : Charge le résultat dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte courant et qui n'a pas de parent). S'il n'y a pas de parent, cette option aura le même effet que <code>_self</code>.</li>
-    </ul>
-  </dd>
-</dl>
+- **`href`**
+  - : L'URL de base à utiliser afin de recomposer les URL relatives contenues dans le document. Si cet attribut est défini, cet élément doit être présent avant les éléments dont les attributs sont des URL.
+    Les URI absolues et relatives sont autorisées (voir la note ci-après).
+- **`target`**
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+  - : Un **mot-clé** ou un **nom défini par l'auteur** du [contexte de navigation](/fr/docs/Glossary/Browsing_context) par défaut pour afficher les résultats de la navigation à partir des éléments [`<a>`](/fr/docs/Web/HTML/Element/a), [`<area>`](/fr/docs/Web/HTML/Element/area) ou [`<form>`](/fr/docs/Web/HTML/Element/Form) sans attributs `target` explicites.
 
-<h3 id="multiple_&lt;base&gt;_elements">Éléments &lt;base&gt; multiples</h3>
+    Les mots-clés suivants ont des significations particulières :
 
-<p>Si plusieurs éléments <code>&lt;base&gt;</code> sont utilisés, seules les premières valeurs pour <code><strong>href</strong></code> et <code><strong>target</strong></code> sont utilisées, les autres valeurs sont ignorées.</p>
+    - `_self` : Charge le résultat dans le contexte de navigation courant. C'est la valeur par défaut de l'attribut s'il n'est pas utilisé.
+    - `_blank` : Charge le résultat dans un nouveau contexte de navigation.
+    - `_parent` : Charge le résultat dans le contexte de navigation parent du contexte courant. S'il n'y a pas de parent, cette option aura le même effet que `_self`.
+    - `_top` : Charge le résultat dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte courant et qui n'a pas de parent). S'il n'y a pas de parent, cette option aura le même effet que `_self`.
 
-<h3 id="in-page_anchors">Ancres dans la page</h3>
+## Notes d'utilisation
 
-<p>Les ancres d'une page (<a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>), par exemple <code>&lt;a href="#ancre"&gt;ancre&lt;/a&gt;</code>, sont résolues avec l'URL de base fournie via <code>&lt;base&gt;</code> et déclenche une requête HTTP vers l'URL de base.</p>
+### Éléments \<base> multiples
 
-<ol>
- <li>Soit <code>&lt;base href="https://example.com"&gt;</code></li>
- <li>… et ce lien : <code>&lt;a href="#ancre"&gt;Anker&lt;/a&gt;</code></li>
- <li>… le lien enverra vers <code>https://example.com/#ancre</code>.</li>
-</ol>
+Si plusieurs éléments `<base>` sont utilisés, seules les premières valeurs pour **`href`** et **`target`** sont utilisées, les autres valeurs sont ignorées.
 
-<h3 id="open_graph">Open Graph</h3>
+### Ancres dans la page
 
-<p>Les balises <a href="https://ogp.me/">Open Graph</a> ne tiennent pas de compte de l'élément <code>&lt;base&gt;</code>, et doivent toujours avoir des URL absolues complètes. Par exemple :</p>
+Les ancres d'une page ([`<a>`](/fr/docs/Web/HTML/Element/a)), par exemple `<a href="#ancre">ancre</a>`, sont résolues avec l'URL de base fournie via `<base>` et déclenche une requête HTTP vers l'URL de base.
 
-<pre class="brush: html">&lt;meta property="og:image" content="https://example.com/thumbnail.jpg"&gt;</pre>
+1.  Soit `<base href="https://example.com">`
+2.  … et ce lien : `<a href="#ancre">Anker</a>`
+3.  … le lien enverra vers `https://example.com/#ancre`.
 
-<h2 id="examples">Exemples</h2>
+### Open Graph
 
-<pre class="brush: html">&lt;base href="https://www.example.com/"&gt;
-&lt;base target="_blank"&gt;
-&lt;base target="_top" href="https://example.com/"&gt;
-</pre>
+Les balises [Open Graph](https://ogp.me/) ne tiennent pas de compte de l'élément `<base>`, et doivent toujours avoir des URL absolues complètes. Par exemple :
 
-<h2 id="specifications">Spécifications</h2>
+```html
+<meta property="og:image" content="https://example.com/thumbnail.jpg">
+```
 
-<p>{{Specifications}}</p>
+## Exemples
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+```html
+<base href="https://www.example.com/">
+<base target="_blank">
+<base target="_top" href="https://example.com/">
+```
 
-<p>{{Compat}}</p>
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
diff --git a/files/fr/web/html/element/basefont/index.md b/files/fr/web/html/element/basefont/index.md
index 85422a4f89..9d4a5c23af 100644
--- a/files/fr/web/html/element/basefont/index.md
+++ b/files/fr/web/html/element/basefont/index.md
@@ -1,5 +1,5 @@
 ---
-title: "<basefont> : l'élément définissant la fonte de base"
+title: '<basefont> : l''élément définissant la fonte de base'
 slug: Web/HTML/Element/basefont
 tags:
   - Element
@@ -14,59 +14,55 @@ tags:
 translation_of: Web/HTML/Element/basefont
 browser-compat: html.elements.basefont
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p>
-</div>
+> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
 
-<p>L'élément HTML <strong><code>&lt;basefont&gt;</code></strong> définit la police par défaut (taille, fonte, couleur) pour les éléments qui sont des descendants de cet élément. La taille de la police utilisée peut ensuite varier relativement à cette taille de base grâce à l'élément <a href="/fr/docs/Web/HTML/Element/font"><code>&lt;font&gt;</code></a>.</p>
+L'élément HTML **`<basefont>`** définit la police par défaut (taille, fonte, couleur) pour les éléments qui sont des descendants de cet élément. La taille de la police utilisée peut ensuite varier relativement à cette taille de base grâce à l'élément [`<font>`](/fr/docs/Web/HTML/Element/font).
 
-<p>N'utilisez pas cet élément, mais plutôt les propriétés CSS telles que <a href="/fr/docs/Web/CSS/font"><code>font</code></a>, <a href="/fr/docs/Web/CSS/font-family"><code>font-family</code></a>, <a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a> et <a href="/fr/docs/Web/CSS/color"><code>color</code></a> pour modifier la configuration de la police d'un élément et de son contenu.</p>
+N'utilisez pas cet élément, mais plutôt les propriétés CSS telles que [`font`](/fr/docs/Web/CSS/font), [`font-family`](/fr/docs/Web/CSS/font-family), [`font-size`](/fr/docs/Web/CSS/font-size) et [`color`](/fr/docs/Web/CSS/color) pour modifier la configuration de la police d'un élément et de son contenu.
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<dl>
-  <dt><strong><code>color</code></strong></dt>
-  <dd>Cet attribut définit la couleur du texte grâce à une couleur nommée ou à une couleur définie dans un format hexadécimal #RRGGBB.</dd>
-  <dt><strong><code>face</code></strong></dt>
-  <dd>Cet attribut contient une liste d'un ou plusieurs noms de police. Le texte du document, dans son style par défaut, est rendu avec la première police prise en charge par le navigateur du client. Si aucune police listée ne se trouve sur le système local, le navigateur utilise la police proportionnelle ou à largeur fixe du système.</dd>
-  <dt><strong><code>size</code></strong></dt>
-  <dd>Cet attribut définit la taille de la police avec une valeur numérique ou relative. Les valeurs numériques vont de 1 à 7 ; 1 étant la plus petite et 3 la taille par défaut.</dd>
-</dl>
+- **`color`**
+  - : Cet attribut définit la couleur du texte grâce à une couleur nommée ou à une couleur définie dans un format hexadécimal #RRGGBB.
+- **`face`**
+  - : Cet attribut contient une liste d'un ou plusieurs noms de police. Le texte du document, dans son style par défaut, est rendu avec la première police prise en charge par le navigateur du client. Si aucune police listée ne se trouve sur le système local, le navigateur utilise la police proportionnelle ou à largeur fixe du système.
+- **`size`**
+  - : Cet attribut définit la taille de la police avec une valeur numérique ou relative. Les valeurs numériques vont de 1 à 7 ; 1 étant la plus petite et 3 la taille par défaut.
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p><em>N'utilisez pas cet élément !</em> Bien qu'ayant été une fois normalisé (imprécisément) dans HTML 3.2, il n'a pas été pris en charge par l'ensemble des navigateurs principaux. De plus, les différents navigateurs et leurs versions successives ne l'ont jamais implémenté de la même façon. Utiliser cet élément a toujours produit un résultat <em>imprévisible</em>.</p>
+_N'utilisez pas cet élément !_ Bien qu'ayant été une fois normalisé (imprécisément) dans HTML 3.2, il n'a pas été pris en charge par l'ensemble des navigateurs principaux. De plus, les différents navigateurs et leurs versions successives ne l'ont jamais implémenté de la même façon. Utiliser cet élément a toujours produit un résultat _imprévisible_.
 
-<p>L'élément <code>&lt;basefont&gt;</code> a été rendu obsolète dans le standard, comme les autres éléments qui se limitaient à l'apparence. À partir de HTML4, HTML n'apporte plus d'informations de présentation (en dehors de <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a> et de l'attribut <code><strong>style</strong></code> de chaque élément). Avec HTML5, l'élément <code>&lt;basefont&gt;</code> a complètement été retiré. Pour tout nouveau développement web, seul <a href="/fr/docs/Web/CSS">CSS</a> doit être utilisé pour les aspects de présentation.</p>
+L'élément `<basefont>` a été rendu obsolète dans le standard, comme les autres éléments qui se limitaient à l'apparence. À partir de HTML4, HTML n'apporte plus d'informations de présentation (en dehors de [`<style>`](/fr/docs/Web/HTML/Element/style) et de l'attribut **`style`** de chaque élément). Avec HTML5, l'élément `<basefont>` a complètement été retiré. Pour tout nouveau développement web, seul [CSS](/fr/docs/Web/CSS) doit être utilisé pour les aspects de présentation.
 
-<p>Il faut privilégier <a href="/fr/docs/Web/CSS/CSS_Fonts">les propriétés CSS relatives aux polices de caractères</a> pour obtenir l'effet souhaité.</p>
+Il faut privilégier [les propriétés CSS relatives aux polices de caractères](/fr/docs/Web/CSS/CSS_Fonts) pour obtenir l'effet souhaité.
 
-<h2 id="dom_interface">Interface DOM</h2>
+## Interface DOM
 
-<p>Cet élément implémente l'interface <a href="/fr/docs/Web/API/HTMLBaseFontElement"><code>HTMLBaseFontElement</code></a>.</p>
+Cet élément implémente l'interface [`HTMLBaseFontElement`](/fr/docs/Web/API/HTMLBaseFontElement).
 
-<h2 id="example">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;basefont color="#FF0000" face="Helvetica" size="+2" /&gt;</pre>
+```html
+<basefont color="#FF0000" face="Helvetica" size="+2" />
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="notes">Notes</h2>
+## Notes
 
-<ul>
-  <li>HTML 3.2 prend en charge l'élément <code>&lt;basefont&gt;</code> mais seulement avec son attribut <code>size</code>.</li>
-  <li>Les spécifications HTML strict et XHTML ne prennent pas en charge cet élément.</li>
-  <li>Bien qu'ayant fait partie de standards transitionnels, certains navigateurs respectant les standards comme Mozilla et Opera ne prennent pas en charge cet élément.</li>
-  <li>Cet élément peut être imité avec une règle CSS sur l'élément <a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a>.</li>
-  <li>XHTML 1.0 requiert une barre oblique de fermeture à la fin de cet élément : <code>&lt;basefont /&gt;</code>.</li>
-</ul>
+- HTML 3.2 prend en charge l'élément `<basefont>` mais seulement avec son attribut `size`.
+- Les spécifications HTML strict et XHTML ne prennent pas en charge cet élément.
+- Bien qu'ayant fait partie de standards transitionnels, certains navigateurs respectant les standards comme Mozilla et Opera ne prennent pas en charge cet élément.
+- Cet élément peut être imité avec une règle CSS sur l'élément [`<body>`](/fr/docs/Web/HTML/Element/body).
+- XHTML 1.0 requiert une barre oblique de fermeture à la fin de cet élément : `<basefont />`.
diff --git a/files/fr/web/html/element/bdi/index.md b/files/fr/web/html/element/bdi/index.md
index 4fa34fd952..bb5b557457 100644
--- a/files/fr/web/html/element/bdi/index.md
+++ b/files/fr/web/html/element/bdi/index.md
@@ -24,58 +24,90 @@ tags:
 translation_of: Web/HTML/Element/bdi
 browser-compat: html.elements.bdi
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément <strong><code>&lt;bdi&gt;</code></strong> (ou élément d'isolation de texte bidirectionnel) isole une portée (<em>span</em>) de texte pouvant être formatée dans une direction différente de celle du texte qui l'entoure. Cela permet, par exemple, de présenter correctement une citation en arabe (écrit de droite à gauche) au sein d'un texte écrit en français (écrit de gauche à droite).</p>
+L'élément **`<bdi>`** (ou élément d'isolation de texte bidirectionnel) isole une portée (_span_) de texte pouvant être formatée dans une direction différente de celle du texte qui l'entoure. Cela permet, par exemple, de présenter correctement une citation en arabe (écrit de droite à gauche) au sein d'un texte écrit en français (écrit de gauche à droite).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/bdi.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/bdi.html", "tabbed-standard")}}
 
-<p>Un texte bidirectionnel est un texte qui contient à la fois des suites de caractères à lire de gauche à droite (LTR en anglais pour <i>left-to-right</i>) et des suites de caractères à lire de droite à gauche (RTL en anglais pour <i>right-to-left</i>), par exemple une citation en arabe dans un texte en néerlandais. Les navigateurs implémentent <a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics">l'algorithme de bidirection Unicode (W3C)(document en anglais)</a> afin de gérer ces cas. Dans cet algorithme, les caractères ont une direction implicite : les caractères latins sont considérés comme allant de gauche à droite et les caractères arabes comme allant de droite à gauche par exemple. D'autres caractères, comme les espaces ou certains caractères de ponctuation sont considérés comme neutres et leur direction est fournie par les caractères environnants.</p>
+Un texte bidirectionnel est un texte qui contient à la fois des suites de caractères à lire de gauche à droite (LTR en anglais pour _left-to-right_) et des suites de caractères à lire de droite à gauche (RTL en anglais pour _right-to-left_), par exemple une citation en arabe dans un texte en néerlandais. Les navigateurs implémentent [l'algorithme de bidirection Unicode (W3C)(document en anglais)](https://www.w3.org/International/articles/inline-bidi-markup/uba-basics) afin de gérer ces cas. Dans cet algorithme, les caractères ont une direction implicite : les caractères latins sont considérés comme allant de gauche à droite et les caractères arabes comme allant de droite à gauche par exemple. D'autres caractères, comme les espaces ou certains caractères de ponctuation sont considérés comme neutres et leur direction est fournie par les caractères environnants.
 
-<p>La plupart du temps, cet algorithme fournira le bon résultat, sans que l'auteur ait besoin de fournir un balisage spécifique. Toutefois, dans certains cas, il faudra aider l'algorithme et c'est là qu'intervient <code>&lt;bdi&gt;</code>.</p>
+La plupart du temps, cet algorithme fournira le bon résultat, sans que l'auteur ait besoin de fournir un balisage spécifique. Toutefois, dans certains cas, il faudra aider l'algorithme et c'est là qu'intervient `<bdi>`.
 
-<p>L'élément <code>&lt;bdi&gt;</code> est utilisé afin d'encadrer un fragment de texte pour indiquer à l'algorithme de traiter ce texte avec une direction différente du texte qui l'entoure. Cela fonctionne selon deux axes :</p>
+L'élément `<bdi>` est utilisé afin d'encadrer un fragment de texte pour indiquer à l'algorithme de traiter ce texte avec une direction différente du texte qui l'entoure. Cela fonctionne selon deux axes :
 
-<ul>
-  <li>La direction du texte contenu dans <code>&lt;bdi&gt;</code> <em>n'influence pas</em> la direction du texte environnant.</li>
-  <li>La direction du texte contenu dans <code>&lt;bdi&gt;</code> <em>n'est pas influencée</em> par la direction du texte environnant.</li>
-</ul>
+- La direction du texte contenu dans `<bdi>` _n'influence pas_ la direction du texte environnant.
+- La direction du texte contenu dans `<bdi>` _n'est pas influencée_ par la direction du texte environnant.
 
-<p>Prenons le texte suivant :</p>
+Prenons le texte suivant :
 
-<pre class="brush: plain">TEXTE-INJECTÉ - 1re place</pre>
+```plain
+TEXTE-INJECTÉ - 1re place
+```
 
-<p>Si <code>TEXTE-INJECTÉ</code> est un texte écrit de gauche à droite, aucun problème. En revanche, si <code>TEXTE-INJECTÉ</code> est un texte écrit de droite à gauche, <code>- 1</code> sera considéré comme du texte RTL (car ce fragment est composé de caractères neutres/faibles pour la direction) et le résultat sera donc un mélange incohérent :</p>
+Si `TEXTE-INJECTÉ` est un texte écrit de gauche à droite, aucun problème. En revanche, si `TEXTE-INJECTÉ` est un texte écrit de droite à gauche, `- 1` sera considéré comme du texte RTL (car ce fragment est composé de caractères neutres/faibles pour la direction) et le résultat sera donc un mélange incohérent :
 
-<pre class="brush: plain">1 - TEXTE-INJECTÉre place</pre>
+```plain
+1 - TEXTE-INJECTÉre place
+```
 
-<p>Si on connaît d'avance la direction de <code>TEXTE-INJECTÉ</code>, on peut corriger le problème en enveloppant <code>TEXTE-INJECTÉ</code> dans un élément <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a> avec un attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-dir"><code>dir</code></a> décrivant la bonne direction. Cependant, si on ne connaît pas la direction à l'avance (<code>TEXTE-INJECTÉ</code> provenant d'une base de données ou étant saisi par un utilisateur), on utilisera <code>&lt;bdi&gt;</code> afin d'empêcher la direction de <code>TEXTE-INJECTÉ</code> d'avoir un impact sur le texte environnant.</p>
+Si on connaît d'avance la direction de `TEXTE-INJECTÉ`, on peut corriger le problème en enveloppant `TEXTE-INJECTÉ` dans un élément [`<span>`](/fr/docs/Web/HTML/Element/span) avec un attribut [`dir`](/fr/docs/Web/HTML/Global_attributes#attr-dir) décrivant la bonne direction. Cependant, si on ne connaît pas la direction à l'avance (`TEXTE-INJECTÉ` provenant d'une base de données ou étant saisi par un utilisateur), on utilisera `<bdi>` afin d'empêcher la direction de `TEXTE-INJECTÉ` d'avoir un impact sur le texte environnant.
 
-<p>Bien que le même effet de rendu puisse être créé avec la règle CSS <a href="/fr/docs/Web/CSS/unicode-bidi"><code>unicode-bidi</code></a><code> : isolate</code> sur un élément <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a> ou toute méthode de formatage du texte, la sémantique est ici uniquement portée par l'élément <code>&lt;bdi&gt;</code>. Les navigateurs peuvent notamment ignorer la mise en forme induite par la feuille CSS. Dans ce cas, le texte serait bien affiché en utilisant l'élément HTML mais deviendrait inutilisable si seul CSS est utilisé pour apporter cette information.</p>
+Bien que le même effet de rendu puisse être créé avec la règle CSS [`unicode-bidi`](/fr/docs/Web/CSS/unicode-bidi)` : isolate` sur un élément [`<span>`](/fr/docs/Web/HTML/Element/span) ou toute méthode de formatage du texte, la sémantique est ici uniquement portée par l'élément `<bdi>`. Les navigateurs peuvent notamment ignorer la mise en forme induite par la feuille CSS. Dans ce cas, le texte serait bien affiché en utilisant l'élément HTML mais deviendrait inutilisable si seul CSS est utilisé pour apporter cette information.
 
-<p>Utiliser <code>&lt;span dir="auto"&gt;</code> aura le même effet qu'utiliser <code>&lt;bdi&gt;</code> mais la sémantique portée sera moindre.</p>
+Utiliser `<span dir="auto">` aura le même effet qu'utiliser `<bdi>` mais la sémantique portée sera moindre.
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >Contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
-     <th scope="row">Rôle ARIA implicite</th>
-     <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a>.</td>
+      <th scope="row">Rôle ARIA implicite</th>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -83,91 +115,103 @@ browser-compat: html.elements.bdi
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
-
-<p>Comme tous les éléments HTML, cet élément dispose des <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>. Cependant il a une sémantique légèrement différente. En effet, l'attribut <code><strong>dir</strong></code> n'est pas hérité. S'il n'est pas renseigné, sa valeur par défaut sera <code>auto</code> et le navigateur décidera de la direction à appliquer selon le contenu de l'élément si aucune valeur parmi <code>"rtl"</code>, <code>"ltr"</code> n'est fournie.</p>
+## Attributs
 
-<h2 id="examples">Exemples</h2>
+Comme tous les éléments HTML, cet élément dispose des [attributs universels](/fr/docs/Web/HTML/Global_attributes). Cependant il a une sémantique légèrement différente. En effet, l'attribut **`dir`** n'est pas hérité. S'il n'est pas renseigné, sa valeur par défaut sera `auto` et le navigateur décidera de la direction à appliquer selon le contenu de l'élément si aucune valeur parmi `"rtl"`, `"ltr"` n'est fournie.
 
-<h3 id="Gauche_à_droite_sans_bdi">Gauche à droite sans bdi</h3>
+## Exemples
 
-<p>Cet exemple affiche les gagnants d'une compétition grâce à des éléments <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a>. Ici, les noms ne s'écrivent que de gauche à droite et le résultat s'affiche correctement :</p>
+### Gauche à droite sans bdi
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;&lt;span class="name"&gt;Henrietta Boffin&lt;/span&gt; - 1&lt;sup&gt;re&lt;/sup&gt; place&lt;/li&gt;
-  &lt;li&gt;&lt;span class="name"&gt;Jerry Cruncher&lt;/span&gt; - 2&lt;sup&gt;e&lt;/sup&gt; place&lt;/li&gt;
-&lt;/ul&gt;</pre>
+Cet exemple affiche les gagnants d'une compétition grâce à des éléments [`<span>`](/fr/docs/Web/HTML/Element/span). Ici, les noms ne s'écrivent que de gauche à droite et le résultat s'affiche correctement :
 
+```html
+<ul>
+  <li><span class="name">Henrietta Boffin</span> - 1<sup>re</sup> place</li>
+  <li><span class="name">Jerry Cruncher</span> - 2<sup>e</sup> place</li>
+</ul>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   border: 1px solid #3f87a6;
   max-width: calc(100% - 40px - 6px);
   padding: 20px;
   width: calc(100% - 40px - 6px);
   border-width: 1px 1px 1px 5px;
-}</pre>
+}
+```
+
+{{EmbedLiveSample("Gauche_à_droite_sans_bdi", "100%", 150)}}
 
-<p>{{EmbedLiveSample("Gauche_à_droite_sans_bdi", "100%", 150)}}</p>
+### Texte sans \<bdi> avec deux directionnalités
 
-<h3 id="no_&lt;bdi&gt;_with_rtl_text">Texte sans &lt;bdi&gt; avec deux directionnalités</h3>
+Cela fonctionne sans problème tant que les noms s'écrivent de gauche à droite. Lorsqu'on insère un nom écrit de droite à gauche, la partie « `- 1` » sera captée par le texte en RTL et le résultat sera confus :
 
-<p>Cela fonctionne sans problème tant que les noms s'écrivent de gauche à droite. Lorsqu'on insère un nom écrit de droite à gauche, la partie « <code>- 1</code> » sera captée par le texte en RTL et le résultat sera confus :</p>
+#### Exemple sans bidi
 
-<h4>Exemple sans bidi</h4>
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;&lt;span class="name"&gt;اَلأَعْشَى&lt;/span&gt; - 1&lt;sup&gt;re&lt;/sup&gt; place&lt;/li&gt;
-  &lt;li&gt;&lt;span class="name"&gt;Jerry Cruncher&lt;/span&gt; - 2&lt;sup&gt;e&lt;/sup&gt; place&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul>
+  <li><span class="name">اَلأَعْشَى</span> - 1<sup>re</sup> place</li>
+  <li><span class="name">Jerry Cruncher</span> - 2<sup>e</sup> place</li>
+</ul>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   border: 1px solid #3f87a6;
   max-width: calc(100% - 40px - 6px);
   padding: 20px;
   width: calc(100% - 40px - 6px);
   border-width: 1px 1px 1px 5px;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("Exemple_sans_bidi", "100%", 150)}}</p>
+{{EmbedLiveSample("Exemple_sans_bidi", "100%", 150)}}
 
-<h3 id="using_&lt;bdi&gt;_with_ltr_and_rtl_text">Texte avec &lt;bdi&gt; et deux directionnalités</h3>
+### Texte avec \<bdi> et deux directionnalités
 
-<p>Pour éviter cet écueil, on pourra utiliser <code>&lt;bdi&gt;</code> pour séparer le contenu :</p>
+Pour éviter cet écueil, on pourra utiliser `<bdi>` pour séparer le contenu :
 
-<h4>Exemple avec bidi</h4>
+#### Exemple avec bidi
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;&lt;bdi class="name"&gt;اَلأَعْشَى&lt;/bdi&gt; - 1&lt;sup&gt;re&lt;/sup&gt; place&lt;/li&gt;
-  &lt;li&gt;&lt;bdi class="name"&gt;Jerry Cruncher&lt;/bdi&gt; - 2&lt;sup&gt;e&lt;/sup&gt; place&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul>
+  <li><bdi class="name">اَلأَعْشَى</bdi> - 1<sup>re</sup> place</li>
+  <li><bdi class="name">Jerry Cruncher</bdi> - 2<sup>e</sup> place</li>
+</ul>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   border: 1px solid #3f87a6;
   max-width: calc(100% - 40px - 6px);
   padding: 20px;
   width: calc(100% - 40px - 6px);
   border-width: 1px 1px 1px 5px;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("Exemple_avec_bidi", "100%", 150)}}</p>
+{{EmbedLiveSample("Exemple_avec_bidi", "100%", 150)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="https://www.w3.org/International/articles/inline-bidi-markup/">Le balisage en ligne et texte bidirectionnel en HTML (W3C)</a> (en anglais)</li>
-  <li><a href="https://www.w3.org/International/articles/inline-bidi-markup/uba-basics">Les bases de l'algorithme bidirectionnel Unicode (W3C)</a> (en anglais)</li>
-  <li>Un élément HTML connexe : <a href="/fr/docs/Web/HTML/Element/bdo"><code>&lt;bdo&gt;</code></a></li>
-  <li>Les propriétés CSS <a href="/fr/docs/Web/CSS/direction"><code>direction</code></a> et <a href="/fr/docs/Web/CSS/unicode-bidi"><code>unicode-bidi</code></a></li>
-</ul>
+- [Le balisage en ligne et texte bidirectionnel en HTML (W3C)](https://www.w3.org/International/articles/inline-bidi-markup/) (en anglais)
+- [Les bases de l'algorithme bidirectionnel Unicode (W3C)](https://www.w3.org/International/articles/inline-bidi-markup/uba-basics) (en anglais)
+- Un élément HTML connexe : [`<bdo>`](/fr/docs/Web/HTML/Element/bdo)
+- Les propriétés CSS [`direction`](/fr/docs/Web/CSS/direction) et [`unicode-bidi`](/fr/docs/Web/CSS/unicode-bidi)
diff --git a/files/fr/web/html/element/bdo/index.md b/files/fr/web/html/element/bdo/index.md
index 67b99e390c..6627375b8f 100644
--- a/files/fr/web/html/element/bdo/index.md
+++ b/files/fr/web/html/element/bdo/index.md
@@ -22,35 +22,65 @@ tags:
 translation_of: Web/HTML/Element/bdo
 browser-compat: html.elements.bdo
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;bdo&gt;</code></strong> (pour élément de remplacement du texte bidirectionnel) est utilisé afin d'outrepasser la direction du texte. Cela permet d'imposer une direction donnée à un texte. L'orientation du texte est inversée mais pas celle des caractères.</p>
+L'élément HTML **`<bdo>`** (pour élément de remplacement du texte bidirectionnel) est utilisé afin d'outrepasser la direction du texte. Cela permet d'imposer une direction donnée à un texte. L'orientation du texte est inversée mais pas celle des caractères.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/bdo.html", "tabbed-standard")}}
 
-<p>Les caractères du texte sont dessinés à partir du point de départ dans la direction donnée ; l'orientation des caractères individuels n'est pas affectée (les caractères ne sont donc pas dessinés vers l'arrière, par exemple).</p>
+Les caractères du texte sont dessinés à partir du point de départ dans la direction donnée ; l'orientation des caractères individuels n'est pas affectée (les caractères ne sont donc pas dessinés vers l'arrière, par exemple).
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >Contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -58,49 +88,54 @@ browser-compat: html.elements.bdo
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémente l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a
+        >. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox
+        implémente l'interface
+        <a href="/fr/docs/Web/API/HTMLSpanElement"
+          ><code>HTMLSpanElement</code></a
+        >
+        pour cet élément.
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme pour tous les éléments, on peut appliquer <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Comme pour tous les éléments, on peut appliquer [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<dl>
-  <dt><strong><code>dir</code></strong></dt>
-  <dd>La direction du texte au sein de l'élément. Cet attribut peut valoir :
-  <ul>
-    <li><code>ltr</code> : pour un texte allant de gauche à droite (<i>left-to-right</i>).</li>
-    <li><code>rtl</code> : pour un texte allant de droite à gauche (<i>right-to-left</i>).</li>
-  </ul>
-  </dd>
-</dl>
+- **`dir`**
 
-<h2 id="examples">Exemples</h2>
+  - : La direction du texte au sein de l'élément. Cet attribut peut valoir :
 
-<pre class="brush: html">&lt;!-- Change la direction du texte --&gt;
-&lt;p&gt;Ce texte se lit de gauche à droite.&lt;/p&gt;
-&lt;p&gt;&lt;bdo dir="rtl"&gt;Ce texte se lit de droite à gauche.&lt;/bdo&gt;&lt;/p&gt;</pre>
+    - `ltr` : pour un texte allant de gauche à droite (_left-to-right_).
+    - `rtl` : pour un texte allant de droite à gauche (_right-to-left_).
 
-<h3 id="result">Résultat</h3>
+## Exemples
 
-<p>{{EmbedLiveSample("examples","100%",120)}}</p>
+```html
+<!-- Change la direction du texte -->
+<p>Ce texte se lit de gauche à droite.</p>
+<p><bdo dir="rtl">Ce texte se lit de droite à gauche.</bdo></p>
+```
 
-<h2 id="notes">Notes</h2>
+### Résultat
 
-<p>La spécification HTML 4 ne définissait pas d'évènement pour cet élément. Ils ont été ajoutés en XHTML. Ceci était probablement un oubli de la spécification HTML 4.</p>
+{{EmbedLiveSample("examples","100%",120)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Notes
 
-<p>{{Specifications}}</p>
+La spécification HTML 4 ne définissait pas d'évènement pour cet élément. Ils ont été ajoutés en XHTML. Ceci était probablement un oubli de la spécification HTML 4.
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Spécifications
 
-<p>{{Compat}}</p>
+{{Specifications}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Compatibilité des navigateurs
 
-<ul>
-  <li>Élément HTML associé : <a href="/fr/docs/Web/HTML/Element/bdi"><code>&lt;bdi&gt;</code></a></li>
-</ul>
+{{Compat}}
+
+## Voir aussi
+
+- Élément HTML associé : [`<bdi>`](/fr/docs/Web/HTML/Element/bdi)
diff --git a/files/fr/web/html/element/bgsound/index.md b/files/fr/web/html/element/bgsound/index.md
index 0839e6268b..b2bd7ec1b8 100644
--- a/files/fr/web/html/element/bgsound/index.md
+++ b/files/fr/web/html/element/bgsound/index.md
@@ -14,53 +14,47 @@ tags:
 translation_of: Web/HTML/Element/bgsound
 browser-compat: html.elements.bgsound
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p>
-</div>
+> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
 
-<p>L'élément HTML <strong><code>&lt;bgsound&gt;</code></strong> (pour <em>background sound</em> ou « son d'arrière-plan ») est un élément défini par Internet Explorer qui permet d'associer un son d'ambiance à une page.</p>
+L'élément HTML **`<bgsound>`** (pour _background sound_ ou « son d'arrière-plan ») est un élément défini par Internet Explorer qui permet d'associer un son d'ambiance à une page.
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cet élément n'est pas standard et ne doit pas être utilisé ! Pour intégrer du son à une page web, on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>.</p>
-</div>
+> **Attention :** Cet élément n'est pas standard et ne doit pas être utilisé ! Pour intégrer du son à une page web, on utilisera l'élément [`<audio>`](/fr/docs/Web/HTML/Element/audio).
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<dl>
- <dt><strong><code>balance</code></strong></dt>
- <dd>Cet attribut accepte un nombre entre -10 000 et +10 000, qui déterminera comment le volume sera réparti entre les hauts-parleurs (ou les écouteurs).</dd>
- <dt><strong><code>loop</code></strong></dt>
- <dd>Cet attribut indique le nombre de fois que le son doit être joué, grâce à une valeur numérique ou avec le mot-clé <code>infinite</code> (infini).</dd>
- <dt><strong><code>src</code></strong></dt>
- <dd>Cet attribut indique l'URL du fichier sonore qui doit être joué. Il doit être d'un des types suivants : .wav, .au, ou .mid.</dd>
- <dt><strong><code>volume</code></strong></dt>
- <dd>Cet attribut accepte un nombre entre -10 000 et 0 qui déterminera le volume du son.</dd>
-</dl>
+- **`balance`**
+  - : Cet attribut accepte un nombre entre -10 000 et +10 000, qui déterminera comment le volume sera réparti entre les hauts-parleurs (ou les écouteurs).
+- **`loop`**
+  - : Cet attribut indique le nombre de fois que le son doit être joué, grâce à une valeur numérique ou avec le mot-clé `infinite` (infini).
+- **`src`**
+  - : Cet attribut indique l'URL du fichier sonore qui doit être joué. Il doit être d'un des types suivants : .wav, .au, ou .mid.
+- **`volume`**
+  - : Cet attribut accepte un nombre entre -10 000 et 0 qui déterminera le volume du son.
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<pre class="brush:html">&lt;bgsound src="son1.mid"&gt;
+```html
+<bgsound src="son1.mid">
 
-&lt;bgsound src="son2.au" loop="infinite"&gt;</pre>
+<bgsound src="son2.au" loop="infinite">
+```
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Une fonctionnalité similaire pouvait être obtenue dans d'autres navigateurs grâce à l'élément <a href="/fr/docs/Web/HTML/Element/embed"><code>&lt;embed&gt;</code></a> afin d'invoquer un lecteur audio. Cet élément étant également obsolète, il est préférable d'utiliser <a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>.</p>
+Une fonctionnalité similaire pouvait être obtenue dans d'autres navigateurs grâce à l'élément [`<embed>`](/fr/docs/Web/HTML/Element/embed) afin d'invoquer un lecteur audio. Cet élément étant également obsolète, il est préférable d'utiliser [`<audio>`](/fr/docs/Web/HTML/Element/audio).
 
-<p>On peut écrire <code>bgsound</code> avec une balise auto-fermante <code>&lt;bgsound /&gt;</code>. Cependant, puisque cet élément ne fait pas partie du standard, le transformer en XHTML ne le rendra pas valide.</p>
+On peut écrire `bgsound` avec une balise auto-fermante `<bgsound />`. Cependant, puisque cet élément ne fait pas partie du standard, le transformer en XHTML ne le rendra pas valide.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément standard <a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a> qui permet d'ajouter du son dans un document HTML.</li>
-</ul>
+- L'élément standard [`<audio>`](/fr/docs/Web/HTML/Element/audio) qui permet d'ajouter du son dans un document HTML.
diff --git a/files/fr/web/html/element/big/index.md b/files/fr/web/html/element/big/index.md
index a4309d4738..193964cd00 100644
--- a/files/fr/web/html/element/big/index.md
+++ b/files/fr/web/html/element/big/index.md
@@ -10,82 +10,80 @@ tags:
 translation_of: Web/HTML/Element/big
 browser-compat: html.elements.big
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p>
-</div>
+> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
 
-<p>L'élément HTML <strong><code>&lt;big&gt;</code></strong> (gros) augmente d'une taille la police du texte de l'élément (il permet par exemple de passer de <code>small</code> à <code>medium</code>, ou de <code>large</code> à <code>x-large</code>) jusqu'à atteindre la taille maximale autorisée par le navigateur.</p>
+L'élément HTML **`<big>`** (gros) augmente d'une taille la police du texte de l'élément (il permet par exemple de passer de `small` à `medium`, ou de `large` à `x-large`) jusqu'à atteindre la taille maximale autorisée par le navigateur.
 
-<div class="note">
-  <p><strong>Note :</strong> Cet élément est purement stylistique. Il a été supprimé en HTML5 et ne doit plus être utilisé. Les développeurs web doivent utiliser les propriétés <a href="/fr/docs/Web/CSS">CSS</a> pour remplacer cet élément.</p>
-</div>
+> **Note :** Cet élément est purement stylistique. Il a été supprimé en HTML5 et ne doit plus être utilisé. Les développeurs web doivent utiliser les propriétés [CSS](/fr/docs/Web/CSS) pour remplacer cet élément.
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément n'a aucun autre attribut en dehors des <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a> communs à tous les éléments.</p>
+Cet élément n'a aucun autre attribut en dehors des [attributs universels](/fr/docs/Web/HTML/Global_attributes) communs à tous les éléments.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>Nous voyons ici des exemples montrant l'utilisation de <code>&lt;big&gt;</code> suivis d'un exemple montrant comment obtenir les mêmes résultats en utilisant plutôt la syntaxe CSS moderne.</p>
+Nous voyons ici des exemples montrant l'utilisation de `<big>` suivis d'un exemple montrant comment obtenir les mêmes résultats en utilisant plutôt la syntaxe CSS moderne.
 
-<h3 id="Utilisation_de_big">Utilisation de &lt;big&gt;</h3>
+### Utilisation de \<big>
 
-<p>Dans cet exemple, on utilise l'élément obsolète <code>&lt;big&gt;</code> afin d'augmenter la taille du texte.</p>
+Dans cet exemple, on utilise l'élément obsolète `<big>` afin d'augmenter la taille du texte.
 
-<h4 id="html">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
-  C'est la première phrase. &lt;big&gt;Cette phrase
-  entière phrase est en plus gros caractères.&lt;/big&gt;
-&lt;/p&gt;</pre>
+```html
+<p>
+  C'est la première phrase. <big>Cette phrase
+  entière phrase est en plus gros caractères.</big>
+</p>
+```
 
-<h4 id="result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Utilisation_de_big", "", 110)}}</p>
+{{EmbedLiveSample("Utilisation_de_big", "", 110)}}
 
-<h3 id="using_css_font-size">Utilisation de la propriété CSS <code>font-size</code></h3>
+### Utilisation de la propriété CSS `font-size`
 
-<p>Cet exemple utilise la propriété CSS <a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a> pour augmenter la taille de la police d'un niveau.</p>
+Cet exemple utilise la propriété CSS [`font-size`](/fr/docs/Web/CSS/font-size) pour augmenter la taille de la police d'un niveau.
 
-<h4 id="css">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.bigger {
+```css
+.bigger {
   font-size: larger;
-}</pre>
+}
+```
 
-<h4 id="html_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
-  C'est la première phrase. &lt;span class="bigger"&gt;Cette phrase
-  entière est écrite en plus grosses lettres.&lt;/span&gt;
-&lt;/p&gt;</pre>
+```html
+<p>
+  C'est la première phrase. <span class="bigger">Cette phrase
+  entière est écrite en plus grosses lettres.</span>
+</p>
+```
 
-<h4 id="result_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("using_css_font-size", "", 100)}}</p>
+{{EmbedLiveSample("using_css_font-size", "", 100)}}
 
-<h2 id="DOM_interface">Interface DOM</h2>
+## Interface DOM
 
-<p>Cet élément implémente l'interface <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</p>
+Cet élément implémente l'interface [`HTMLElement`](/fr/docs/Web/API/HTMLElement).
 
-<div class="note">
-  <p><strong>Note :</strong> Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</p>
-</div>
+> **Note :** Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface [`HTMLSpanElement`](/fr/docs/Web/API/HTMLSpanElement) pour cet élément.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>CSS : <a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a>, <a href="/fr/docs/Web/CSS/font"><code>font</code></a></li>
-  <li>HTML : <a href="/fr/docs/Web/HTML/Element/small"><code>&lt;small&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/font"><code>&lt;font&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a></li>
- <li>Spécification HTML 4.01 sur <a href="https://www.w3.org/TR/html4/present/graphics.html#h-15.2">la mise en forme utilisant les polices</a></li>
-</ul>
+- CSS : [`font-size`](/fr/docs/Web/CSS/font-size), [`font`](/fr/docs/Web/CSS/font)
+- HTML : [`<small>`](/fr/docs/Web/HTML/Element/small), [`<font>`](/fr/docs/Web/HTML/Element/font), [`<style>`](/fr/docs/Web/HTML/Element/style)
+- Spécification HTML 4.01 sur [la mise en forme utilisant les polices](https://www.w3.org/TR/html4/present/graphics.html#h-15.2)
diff --git a/files/fr/web/html/element/blink/index.md b/files/fr/web/html/element/blink/index.md
index 870656bac2..e0f8522f76 100644
--- a/files/fr/web/html/element/blink/index.md
+++ b/files/fr/web/html/element/blink/index.md
@@ -11,39 +11,38 @@ tags:
 translation_of: Web/HTML/Element/blink
 browser-compat: html.elements.blink
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p>
-</div>
+> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
 
-<p>L'élément HTML <strong><code>&lt;blink&gt;</code></strong> (N.D.T le verbe <i>blink</i> signifie « clignoter ») est un élément non-standard faisant clignoter le texte qu'il contient.</p>
+L'élément HTML **`<blink>`** (N.D.T le verbe _blink_ signifie « clignoter ») est un élément non-standard faisant clignoter le texte qu'il contient.
 
-<div class="warning">
-  <p><strong>Attention :</strong> Ne pas utiliser cet élément qui n'est pas standard et qui est obsolète. Le clignotement de texte est contraire à la plupart des standards d'accessibilité, la spécification CSS permet donc aux navigateurs d'ignorer la valeur <code>blink</code>.</p>
-</div>
+> **Attention :** Ne pas utiliser cet élément qui n'est pas standard et qui est obsolète. Le clignotement de texte est contraire à la plupart des standards d'accessibilité, la spécification CSS permet donc aux navigateurs d'ignorer la valeur `blink`.
 
-<h2 id="dom_interface">Interface DOM</h2>
+## Interface DOM
 
-<p>Cet élément n'est pas pris en charge et implémente donc l'interface <a href="/fr/docs/Web/API/HTMLUnknownElement"><code>HTMLUnknownElement</code></a>.</p>
+Cet élément n'est pas pris en charge et implémente donc l'interface [`HTMLUnknownElement`](/fr/docs/Web/API/HTMLUnknownElement).
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<pre class="brush:html">&lt;blink&gt;Why would somebody use this?&lt;/blink&gt;</pre>
+```html
+<blink>Why would somebody use this?</blink>
+```
 
-<h3 id="result_toned_down">Résultat (atténué !)</h3>
+### Résultat (atténué !)
 
-<p><img src="htmlblinkelement.gif"></p>
+![](htmlblinkelement.gif)
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>Cet élément est non-standard et n'appartient à aucune spécification. Pour vérifier, <a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features">voir la spécification HTML</a>.</p>
+Cet élément est non-standard et n'appartient à aucune spécification. Pour vérifier, [voir la spécification HTML](https://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features).
 
-<h2 id="css_polyfill">Prothèse CSS (<em>polyfill</em>)</h2>
+## Prothèse CSS (_polyfill_)
 
-<p>Si vous avez réellement besoin de cette fonctionnalité, vous pouvez utiliser le code CSS suivant qui fonctionne à partir d'IE10.</p>
+Si vous avez réellement besoin de cette fonctionnalité, vous pouvez utiliser le code CSS suivant qui fonctionne à partir d'IE10.
 
-<pre class="brush: css">blink {
+```css
+blink {
   -webkit-animation: 2s linear infinite condemed_blink_effect; // pour Safari 4.0-8.0
   animation: 2s linear infinite condemed_blink_effect;
 }
@@ -68,21 +67,20 @@ browser-compat: html.elements.blink
   100% {
     visibility: visible;
   }
-}</pre>
+}
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="http://www.montulli.org/theoriginofthe%3Cblink%3Etag">Histoire autour de la création de l'élément <code>&lt;blink&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/CSS/text-decoration"><code>text-decoration</code></a> qui possède une valeur pour le clignotement, bien que les navigateurs ne soient pas obligés de restituer cet effet</li>
-  <li><a href="/fr/docs/Web/HTML/Element/marquee"><code>&lt;marquee&gt;</code></a>, un autre élément non-standard similaire</li>
-  <li><a href="/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations">Les animations CSS</a> sont la meilleure façon d'obtenir un tel effet</li>
-</ul>
+- [Histoire autour de la création de l'élément `<blink>`](http://www.montulli.org/theoriginofthe%3Cblink%3Etag)
+- [`text-decoration`](/fr/docs/Web/CSS/text-decoration) qui possède une valeur pour le clignotement, bien que les navigateurs ne soient pas obligés de restituer cet effet
+- [`<marquee>`](/fr/docs/Web/HTML/Element/marquee), un autre élément non-standard similaire
+- [Les animations CSS](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations) sont la meilleure façon d'obtenir un tel effet
diff --git a/files/fr/web/html/element/blockquote/index.md b/files/fr/web/html/element/blockquote/index.md
index e86f94caa2..240f710845 100644
--- a/files/fr/web/html/element/blockquote/index.md
+++ b/files/fr/web/html/element/blockquote/index.md
@@ -15,33 +15,64 @@ tags:
 translation_of: Web/HTML/Element/blockquote
 browser-compat: html.elements.blockquote
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;blockquote&gt;</code></strong> (qui signifie <em>bloc de citation</em>) indique que le texte contenu dans l'élément est une citation longue. Le texte est généralement affiché avec une indentation (voir <a href="#usage_notes">les notes</a> ci-après). Une URL indiquant la source de la citation peut être donnée grâce à l'attribut <strong><code>cite</code></strong> tandis qu'un texte représentant la source peut être donné via l'élément <a href="/fr/docs/Web/HTML/Element/cite"><code>&lt;cite&gt;</code></a>.</p>
+L'élément HTML **`<blockquote>`** (qui signifie _bloc de citation_) indique que le texte contenu dans l'élément est une citation longue. Le texte est généralement affiché avec une indentation (voir [les notes](#usage_notes) ci-après). Une URL indiquant la source de la citation peut être donnée grâce à l'attribut **`cite`** tandis qu'un texte représentant la source peut être donné via l'élément [`<cite>`](/fr/docs/Web/HTML/Element/cite).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/blockquote.html","tabbed-standard")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#racines_de_sectionnement">racine de section</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a
+          href="fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#racines_de_sectionnement"
+          >racine de section</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -49,32 +80,35 @@ browser-compat: html.elements.blockquote
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLQuoteElement"><code>HTMLQuoteElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLQuoteElement"
+          ><code>HTMLQuoteElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme pour tous les éléments HTML, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Comme pour tous les éléments HTML, on peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<dl>
-  <dt><strong><code>cite</code></strong></dt>
-  <dd>Une URL qui désigne la source du document ou du message cité. Cet attribut est prévu pour signaler l'information expliquant le contexte ou la référence de la citation</dd>
-</dl>
+- **`cite`**
+  - : Une URL qui désigne la source du document ou du message cité. Cet attribut est prévu pour signaler l'information expliquant le contexte ou la référence de la citation
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Pour changer l'indentation de <code>&lt;blockquote&gt;</code>, on utilisera la propriété <a href="/fr/docs/Glossary/CSS">CSS</a> <a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a> ou <a href="/fr/docs/Web/CSS/margin-right"><code>margin-right</code></a> (ou encore la propriété raccourcie <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>)</p>
+Pour changer l'indentation de `<blockquote>`, on utilisera la propriété [CSS](/fr/docs/Glossary/CSS) [`margin-left`](/fr/docs/Web/CSS/margin-left) ou [`margin-right`](/fr/docs/Web/CSS/margin-right) (ou encore la propriété raccourcie [`margin`](/fr/docs/Web/CSS/margin))
 
-<p>Pour les citations courtes, on pourra utiliser l'élément <a href="/fr/docs/Web/HTML/Element/q"><code>&lt;q&gt;</code></a>.</p>
+Pour les citations courtes, on pourra utiliser l'élément [`<q>`](/fr/docs/Web/HTML/Element/q).
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<p>Cet exemple démontre l'utilisation de l'élément <code>&lt;blockquote&gt;</code> pour citer un passage de <a href="https://datatracker.ietf.org/doc/html/rfc1149">RFC 1149 <i lang="en">A Standard for the Transmission of IP Datagrams on Avian Carriers</i></a>.</p>
+Cet exemple démontre l'utilisation de l'élément `<blockquote>` pour citer un passage de [RFC 1149 <i lang="en">A Standard for the Transmission of IP Datagrams on Avian Carriers</i>](https://datatracker.ietf.org/doc/html/rfc1149).
 
-<pre class="brush: html">&lt;blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149"&gt;
-  &lt;p&gt;Avian carriers can provide high delay, low
+```html
+<blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149">
+  <p>Avian carriers can provide high delay, low
   throughput, and low altitude service. The
   connection topology is limited to a single
   point-to-point path for each carrier, used with
@@ -84,24 +118,23 @@ browser-compat: html.elements.blockquote
   ether space available to the carriers, in contrast
   to the 1D ether used by IEEE802.3. The carriers
   have an intrinsic collision avoidance system, which
-  increases availability.&lt;/p&gt;
-&lt;/blockquote&gt;</pre>
+  increases availability.</p>
+</blockquote>
+```
 
-<p>Le résultat de cet extrait HTML ressemble à ceci :</p>
+Le résultat de cet extrait HTML ressemble à ceci :
 
-<p>{{EmbedLiveSample("example", 640, 200)}}</p>
+{{EmbedLiveSample("example", 640, 200)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/HTML/Element/q"><code>&lt;q&gt;</code></a> qui permet de placer des citations en incise dans une ligne de texte.</li>
-  <li><a href="/fr/docs/Web/HTML/Element/cite"><code>&lt;cite&gt;</code></a> qui permet d'indiquer la source de la citation.</li>
-</ul>
+- [`<q>`](/fr/docs/Web/HTML/Element/q) qui permet de placer des citations en incise dans une ligne de texte.
+- [`<cite>`](/fr/docs/Web/HTML/Element/cite) qui permet d'indiquer la source de la citation.
diff --git a/files/fr/web/html/element/body/index.md b/files/fr/web/html/element/body/index.md
index 2a6b8139d5..153e74b19d 100644
--- a/files/fr/web/html/element/body/index.md
+++ b/files/fr/web/html/element/body/index.md
@@ -11,31 +11,61 @@ tags:
 translation_of: Web/HTML/Element/body
 browser-compat: html.elements.body
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;body&gt;</code></strong> représente le contenu principal du document HTML. Il ne peut y avoir qu'un élément <code>&lt;body&gt;</code> par document.</p>
+L'élément HTML **`<body>`** représente le contenu principal du document HTML. Il ne peut y avoir qu'un élément `<body>` par document.
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots">Racine de section</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a
+          href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots"
+          >Racine de section</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>La balise d'ouverture peut être omise si le premier élément n'est pas un caractère espace, un commentaire, un élément <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a>, ou un élément <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a>. La balise de fermeture peut être omise si l'élément <code>&lt;body&gt;</code> a un contenu ou une balise d'ouverture, et qu'il n'est pas immédiatement suivi d'un commentaire.</td>
+      <td>
+        La balise d'ouverture peut être omise si le premier élément n'est pas un
+        caractère espace, un commentaire, un élément
+        <a href="/fr/docs/Web/HTML/Element/script"><code>&#x3C;script></code></a
+        >, ou un élément
+        <a href="/fr/docs/Web/HTML/Element/style"><code>&#x3C;style></code></a
+        >. La balise de fermeture peut être omise si l'élément
+        <code>&#x3C;body></code> a un contenu ou une balise d'ouverture, et
+        qu'il n'est pas immédiatement suivi d'un commentaire.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Il doit être le second élément d'un élément <a href="/fr/docs/Web/HTML/Element/html"><code>&lt;html&gt;</code></a>.</td>
+      <td>
+        Il doit être le second élément d'un élément
+        <a href="/fr/docs/Web/HTML/Element/html"><code>&#x3C;html></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></td>
+      <td>
+        <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Document_Role"
+          >document</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -43,102 +73,112 @@ browser-compat: html.elements.body
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLBodyElement"><code>HTMLBodyElement</code></a>
-      <ul>
-        <li>L'élément <code>&lt;body&gt;</code> est accessible via l'interface <a href="/fr/docs/Web/API/HTMLBodyElement"><code>HTMLBodyElement</code></a>.</li>
-        <li>Il est possible d'accéder à l'élément body grâce à l'attribut <a href="/fr/docs/Web/API/Document/body"><code>document.body</code></a>.</li>
-      </ul>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLBodyElement"
+          ><code>HTMLBodyElement</code></a
+        >
+        <ul>
+          <li>
+            L'élément <code>&#x3C;body></code> est accessible via l'interface
+            <a href="/fr/docs/Web/API/HTMLBodyElement"
+              ><code>HTMLBodyElement</code></a
+            >.
+          </li>
+          <li>
+            Il est possible d'accéder à l'élément body grâce à l'attribut
+            <a href="/fr/docs/Web/API/Document/body"
+              ><code>document.body</code></a
+            >.
+          </li>
+        </ul>
       </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Comme pour tous les autres éléments, on peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<dl>
-  <dt><strong><code>alink</code></strong> {{deprecated_inline}}</dt>
-  <dd>La couleur du texte quand les liens hypertextes sont sélectionnés. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/color"><code>color</code></a> à la place avec la pseudo-classe <a href="/fr/docs/Web/CSS/:active"><code>:active</code></a>.</dd>
-  <dt><strong><code>background</code></strong> {{deprecated_inline}}</dt>
-  <dd>L'URI d'une image à utiliser en tant qu'arrière-plan. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/background"><code>background</code></a> à la place.</dd>
-  <dt><strong><code>bgcolor</code></strong> {{deprecated_inline}}</dt>
-  <dd>Couleur d'arrière-plan pour le document. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> sur l'élément à la place.</dd>
-  <dt><strong><code>bottommargin</code></strong> {{deprecated_inline}}</dt>
-  <dd>La marge à appliquer en bas du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a> sur l'élément.</dd>
-  <dt><strong><code>leftmargin</code></strong> {{deprecated_inline}}</dt>
-  <dd>La marge à appliquer à gauche du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a> à la place.</dd>
-  <dt><strong><code>link</code></strong> {{deprecated_inline}}</dt>
-  <dd>La couleur du texte à utiliser pour les liens non visités. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/color"><code>color</code></a> avec la pseudo-classe <a href="/fr/docs/Web/CSS/:link"><code>:link</code></a>.</dd>
-  <dt><strong><code>onafterprint</code></strong></dt>
-  <dd>Fonction à appeler après que l'utilisateur ait imprimé le document.</dd>
-  <dt><strong><code>onbeforeprint</code></strong></dt>
-  <dd>Fonction à appeler lorsque l'utilisateur lance une impression du document.</dd>
-  <dt><strong><code>onbeforeunload</code></strong></dt>
-  <dd>Fonction à appeler avant que le document ne disparaisse.</dd>
-  <dt><strong><code>onblur</code></strong></dt>
-  <dd>Fonction à appeler quand le document perd le focus.</dd>
-  <dt><strong><code>onerror</code></strong></dt>
-  <dd>Fonction à appeler quand le document n'arrive pas à se charger correctement.</dd>
-  <dt><strong><code>onfocus</code></strong></dt>
-  <dd>Fonction à appeler quand le document reçoit le focus.</dd>
-  <dt><strong><code>onhashchange</code></strong></dt>
-  <dd>Fonction à appeler quand le fragment (la partie commençant avec le caractère #) de l'adresse actuelle du document, a changé.</dd>
-  <dt><strong><code>onlanguagechange</code></strong> {{experimental_inline}}</dt>
-  <dd>Fonction à appeler lorsque les langues préférées ont été modifiées.</dd>
-  <dt><strong><code>onload</code></strong></dt>
-  <dd>Fonction à appeler quand le document a fini de charger.</dd>
-  <dt><strong><code>onmessage</code></strong></dt>
-  <dd>Fonction à appeler quand le document a reçu un message.</dd>
-  <dt><strong><code>onoffline</code></strong></dt>
-  <dd>Fonction à appeler quand la connexion réseau est perdue.</dd>
-  <dt><strong><code>ononline</code></strong></dt>
-  <dd>Fonction à appeler quand la connexion réseau est restaurée.</dd>
-  <dt><strong><code>onpopstate</code></strong></dt>
-  <dd>Fonction à appeler quand l'utilisateur se déplace dans son historique de session.</dd>
-  <dt><strong><code>onredo</code></strong></dt>
-  <dd>Fonction à appeler quand l'utilisateur avance et refait un élément de l'historique de transaction.</dd>
-  <dt><strong><code>onresize</code></strong></dt>
-  <dd>Fonction à appeler quand le document a été redimensionné.</dd>
-  <dt><strong><code>onstorage</code></strong></dt>
-  <dd>Fonction à appeler quand la zone de stockage a changée.</dd>
-  <dt><strong><code>onundo</code></strong></dt>
-  <dd>Fonction à appeler quand l'utilisateur recule et défait l'historique de transaction.</dd>
-  <dt><strong><code>onunload</code></strong></dt>
-  <dd>Fonction à appeler quand le document disparait.</dd>
-  <dt><strong><code>rightmargin</code></strong> {{deprecated_inline}}</dt>
-  <dd>La marge à appliquer à droite du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/margin-right"><code>margin-right</code></a> sur l'élément à la place.</dd>
-  <dt><strong><code>text</code></strong> {{deprecated_inline}}</dt>
-  <dd>La couleur à utiliser pour la police du texte. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/color"><code>color</code></a> sur l'élément à la place.</dd>
-  <dt><strong><code>topmargin</code></strong> {{deprecated_inline}}</dt>
-  <dd>La marge à appliquer en haut du corps de la page. Cette méthohde n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a> sur l'élément à la place.</dd>
-  <dt><strong><code>vlink</code></strong> {{deprecated_inline}}</dt>
-  <dd>La couleur de texte pour les liens hypertextes visités. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS <a href="/fr/docs/Web/CSS/color"><code>color</code></a> avec la pseudo-classe <a href="/fr/docs/Web/CSS/:visited"><code>:visited</code></a>.</dd>
-</dl>
+- **`alink`** {{deprecated_inline}}
+  - : La couleur du texte quand les liens hypertextes sont sélectionnés. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS [`color`](/fr/docs/Web/CSS/color) à la place avec la pseudo-classe [`:active`](/fr/docs/Web/CSS/:active).
+- **`background`** {{deprecated_inline}}
+  - : L'URI d'une image à utiliser en tant qu'arrière-plan. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS [`background`](/fr/docs/Web/CSS/background) à la place.
+- **`bgcolor`** {{deprecated_inline}}
+  - : Couleur d'arrière-plan pour le document. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS [`background-color`](/fr/docs/Web/CSS/background-color) sur l'élément à la place.
+- **`bottommargin`** {{deprecated_inline}}
+  - : La marge à appliquer en bas du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS [`margin-bottom`](/fr/docs/Web/CSS/margin-bottom) sur l'élément.
+- **`leftmargin`** {{deprecated_inline}}
+  - : La marge à appliquer à gauche du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS [`margin-left`](/fr/docs/Web/CSS/margin-left) à la place.
+- **`link`** {{deprecated_inline}}
+  - : La couleur du texte à utiliser pour les liens non visités. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS [`color`](/fr/docs/Web/CSS/color) avec la pseudo-classe [`:link`](/fr/docs/Web/CSS/:link).
+- **`onafterprint`**
+  - : Fonction à appeler après que l'utilisateur ait imprimé le document.
+- **`onbeforeprint`**
+  - : Fonction à appeler lorsque l'utilisateur lance une impression du document.
+- **`onbeforeunload`**
+  - : Fonction à appeler avant que le document ne disparaisse.
+- **`onblur`**
+  - : Fonction à appeler quand le document perd le focus.
+- **`onerror`**
+  - : Fonction à appeler quand le document n'arrive pas à se charger correctement.
+- **`onfocus`**
+  - : Fonction à appeler quand le document reçoit le focus.
+- **`onhashchange`**
+  - : Fonction à appeler quand le fragment (la partie commençant avec le caractère #) de l'adresse actuelle du document, a changé.
+- **`onlanguagechange`** {{experimental_inline}}
+  - : Fonction à appeler lorsque les langues préférées ont été modifiées.
+- **`onload`**
+  - : Fonction à appeler quand le document a fini de charger.
+- **`onmessage`**
+  - : Fonction à appeler quand le document a reçu un message.
+- **`onoffline`**
+  - : Fonction à appeler quand la connexion réseau est perdue.
+- **`ononline`**
+  - : Fonction à appeler quand la connexion réseau est restaurée.
+- **`onpopstate`**
+  - : Fonction à appeler quand l'utilisateur se déplace dans son historique de session.
+- **`onredo`**
+  - : Fonction à appeler quand l'utilisateur avance et refait un élément de l'historique de transaction.
+- **`onresize`**
+  - : Fonction à appeler quand le document a été redimensionné.
+- **`onstorage`**
+  - : Fonction à appeler quand la zone de stockage a changée.
+- **`onundo`**
+  - : Fonction à appeler quand l'utilisateur recule et défait l'historique de transaction.
+- **`onunload`**
+  - : Fonction à appeler quand le document disparait.
+- **`rightmargin`** {{deprecated_inline}}
+  - : La marge à appliquer à droite du corps de la page. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS [`margin-right`](/fr/docs/Web/CSS/margin-right) sur l'élément à la place.
+- **`text`** {{deprecated_inline}}
+  - : La couleur à utiliser pour la police du texte. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS [`color`](/fr/docs/Web/CSS/color) sur l'élément à la place.
+- **`topmargin`** {{deprecated_inline}}
+  - : La marge à appliquer en haut du corps de la page. Cette méthohde n'est pas conforme, on devra utiliser la propriété CSS [`margin-top`](/fr/docs/Web/CSS/margin-top) sur l'élément à la place.
+- **`vlink`** {{deprecated_inline}}
+  - : La couleur de texte pour les liens hypertextes visités. Cette méthode n'est pas conforme, on devra utiliser la propriété CSS [`color`](/fr/docs/Web/CSS/color) avec la pseudo-classe [`:visited`](/fr/docs/Web/CSS/:visited).
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;html&gt;
-  &lt;head&gt;
-    &lt;title&gt;Titre du document&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;Et là un paragraphe…&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html
+<html>
+  <head>
+    <title>Titre du document</title>
+  </head>
+  <body>
+    <p>Et là un paragraphe…</p>
+  </body>
+</html>
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/html"><code>&lt;html&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a></li>
-</ul>
+- L'élément [`<html>`](/fr/docs/Web/HTML/Element/html)
+- L'élément [`<head>`](/fr/docs/Web/HTML/Element/head)
diff --git a/files/fr/web/html/element/br/index.md b/files/fr/web/html/element/br/index.md
index 0c5b97e35d..a3e251e54a 100644
--- a/files/fr/web/html/element/br/index.md
+++ b/files/fr/web/html/element/br/index.md
@@ -10,104 +10,135 @@ tags:
 translation_of: Web/HTML/Element/br
 browser-compat: html.elements.br
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <code><strong>&lt;br&gt;</strong></code> crée un saut de ligne (un retour chariot) dans le texte. Il s'avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu'on écrit une adresse ou un poème).</p>
+L'élément HTML **`<br>`** crée un saut de ligne (un retour chariot) dans le texte. Il s'avère utile lorsque les sauts de ligne ont une importance (par exemple lorsqu'on écrit une adresse ou un poème).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}
 
-<p>Comme vous pouvez le voir dans l'exemple ci-dessus, un élément <code>&lt;br&gt;</code> est inclus à chaque point où nous voulons que le texte soit interrompu. Le texte après le <code>&lt;br&gt;</code> recommence au début de la ligne suivante du bloc de texte.</p>
+Comme vous pouvez le voir dans l'exemple ci-dessus, un élément `<br>` est inclus à chaque point où nous voulons que le texte soit interrompu. Le texte après le `<br>` recommence au début de la ligne suivante du bloc de texte.
 
-<div class="note">
-  <p><strong>Note :</strong>Attention, <code>&lt;br&gt;</code> ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété <a href="/fr/docs/Web/CSS">CSS</a> <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> sur l'élément HTML <a href="/fr/docs/Web/HTML/Element/p"><code>&lt;p&gt;</code></a>.</p>
-</div>
+> **Note :**Attention, `<br>` ne doit pas être utilisé de façon abusive afin d'augmenter l'espace entre les lignes d'un texte. Pour cela, on utilisera la propriété [CSS](/fr/docs/Web/CSS) [`margin`](/fr/docs/Web/CSS/margin) sur l'élément HTML [`<p>`](/fr/docs/Web/HTML/Element/p).
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Comme pour tous les éléments, on peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<h3 id="deprecated_attributes">Attributs obsolètes</h3>
+### Attributs obsolètes
 
-<dl>
-  <dt><strong><code>clear</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut indique où commencer la prochaine ligne après le saut de ligne.</dd>
-</dl>
+- **`clear`** {{deprecated_inline}}
+  - : Cet attribut indique où commencer la prochaine ligne après le saut de ligne.
 
-<h2 id="styling_with_css">Mise en forme avec CSS</h2>
+## Mise en forme avec CSS
 
-<p><code>&lt;br&gt;</code> n'a aucun rôle purement stylistique et il sert uniquement à créer une rupture de ligne au sein d'un bloc de texte. Cet élément pourra très peu être mis en forme avec CSS.</p>
+`<br>` n'a aucun rôle purement stylistique et il sert uniquement à créer une rupture de ligne au sein d'un bloc de texte. Cet élément pourra très peu être mis en forme avec CSS.
 
-<p>Bien qu'il soit possible d'appliquer une marge (<a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> sur les éléments <code>&lt;br&gt;</code> afin d'augmenter l'espacement entre les lignes de texte d'un même bloc, ce n'est pas une bonne pratique. Pour obtenir le même effet, on pourra utiliser la propriété <a href="/fr/docs/Web/CSS/line-height"><code>line-height</code></a>.</p>
+Bien qu'il soit possible d'appliquer une marge ([`margin`](/fr/docs/Web/CSS/margin) sur les éléments `<br>` afin d'augmenter l'espacement entre les lignes de texte d'un même bloc, ce n'est pas une bonne pratique. Pour obtenir le même effet, on pourra utiliser la propriété [`line-height`](/fr/docs/Web/CSS/line-height).
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="simple_br">Simple rupture de ligne</h3>
+### Simple rupture de ligne
 
-<p>Dans l'exemple suivant, nous utilisons des éléments <code>&lt;br&gt;</code> pour créer des sauts de ligne entre les différentes lignes d'une adresse postale :</p>
+Dans l'exemple suivant, nous utilisons des éléments `<br>` pour créer des sauts de ligne entre les différentes lignes d'une adresse postale :
 
-<pre class="brush:html">Mozilla&lt;br&gt;
-331 E. Evelyn Avenue&lt;br&gt;
-Mountain View, CA&lt;br&gt;
-94041&lt;br&gt;
-USA&lt;br&gt;</pre>
+```html
+Mozilla<br>
+331 E. Evelyn Avenue<br>
+Mountain View, CA<br>
+94041<br>
+USA<br>
+```
 
-<p>Le résultat ressemble à ceci :</p>
+Le résultat ressemble à ceci :
 
-<p>{{EmbedLiveSample('simple_br', '', '130')}}</p>
+{{EmbedLiveSample('simple_br', '', '130')}}
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>Utiliser une suite d'éléments <code>&lt;br&gt;</code> pour uniquement rajouter un espace entre des paragraphes sera source de confusion ou de frustration pour les personnes qui utilisent des outils d'assistance. Les lecteurs d'écran, par exemple, pourront annoncer la présence de l'élément alors qu'il n'y a aucun contenu associé.</p>
+Utiliser une suite d'éléments `<br>` pour uniquement rajouter un espace entre des paragraphes sera source de confusion ou de frustration pour les personnes qui utilisent des outils d'assistance. Les lecteurs d'écran, par exemple, pourront annoncer la présence de l'élément alors qu'il n'y a aucun contenu associé.
 
-<p>Si on souhaite ajouter un espace supplémentaire, on utilisera plutôt la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</p>
+Si on souhaite ajouter un espace supplémentaire, on utilisera plutôt la propriété CSS [`margin`](/fr/docs/Web/CSS/margin).
 
-<h2 id="technical_summary">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td>Aucun, c'est un <a href="/fr/docs/Glossary/Empty_element">élément vide</a>.</td>
+      <td>
+        Aucun, c'est un
+        <a href="/fr/docs/Glossary/Empty_element">élément vide</a>.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balise</th>
-      <td>Cet élément doit avoir une balise de début et ne doit pas avoir de balise de fin. Pour les documents XHTML, on écrira cet élément <code>&lt;br/&gt;</code>.</td>
+      <td>
+        Cet élément doit avoir une balise de début et ne doit pas avoir de
+        balise de fin. Pour les documents XHTML, on écrira cet élément
+        <code>&#x3C;br/></code>.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td><a href="https://w3c.github.io/aria/#none"><code>none</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a></td>
+      <td>
+        <a href="https://w3c.github.io/aria/#none"><code>none</code></a
+        >,
+        <a href="https://w3c.github.io/aria/#presentation"
+          ><code>presentation</code></a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLBRElement"><code>HTMLBRElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLBRElement"><code>HTMLBRElement</code></a>
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/address"><code>&lt;address&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/p"><code>&lt;p&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/wbr"><code>&lt;wbr&gt;</code></a></li>
-</ul>
+- L'élément [`<address>`](/fr/docs/Web/HTML/Element/address)
+- L'élément [`<p>`](/fr/docs/Web/HTML/Element/p)
+- L'élément [`<wbr>`](/fr/docs/Web/HTML/Element/wbr)
diff --git a/files/fr/web/html/element/button/index.md b/files/fr/web/html/element/button/index.md
index d99f03d0b7..198ca7ea2e 100644
--- a/files/fr/web/html/element/button/index.md
+++ b/files/fr/web/html/element/button/index.md
@@ -11,21 +11,61 @@ tags:
 translation_of: Web/HTML/Element/button
 browser-compat: html.elements.button
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément <strong><code>&lt;button&gt;</code></strong> représente un bouton cliquable, utilisé pour soumettre <a href="/fr/docs/Learn/Forms">des formulaires</a> ou n'importe où dans un document pour une fonctionnalité de bouton accessible et standard. Par défaut, les boutons HTML sont présentés dans un style ressemblant à la plate-forme d'exécution de <a href="/fr/docs/Glossary/User_agent">l'agent utilisateur</a>, mais vous pouvez modifier l'apparence des boutons avec <a href="/fr/docs/Web/CSS">CSS</a>.</p>
+L'élément **`<button>`** représente un bouton cliquable, utilisé pour soumettre [des formulaires](/fr/docs/Learn/Forms) ou n'importe où dans un document pour une fonctionnalité de bouton accessible et standard. Par défaut, les boutons HTML sont présentés dans un style ressemblant à la plate-forme d'exécution de [l'agent utilisateur](/fr/docs/Glossary/User_agent), mais vous pouvez modifier l'apparence des boutons avec [CSS](/fr/docs/Web/CSS).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/button.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/button.html", "tabbed-shorter")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_listed">listable</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_labelable">étiquetable</a> et <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_submittable">soumettable</a> <a href="/fr/docs/Web/Guide/HTML/Content_categories#form-associated_content">associé aux formulaires</a> et <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content"
+          >contenu interactif</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_listed"
+          >listable</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_labelable"
+          >étiquetable</a
+        >
+        et
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_submittable"
+          >soumettable</a
+        >
+        <a
+          href="/fr/docs/Web/Guide/HTML/Content_categories#form-associated_content"
+          >associé aux formulaires</a
+        >
+        et
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a> mais sans <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >Contenu phrasé</a
+        >
+        mais sans
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content"
+          >contenu interactif</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
@@ -33,173 +73,198 @@ browser-compat: html.elements.button
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></td>
+      <td>
+        <code
+          ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/button_role"
+            >button</a
+          ></code
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td><a href="https://w3c.github.io/aria/#checkbox"><code>checkbox</code></a>, <a href="https://w3c.github.io/aria/#link"><code>link</code></a>, <a href="https://w3c.github.io/aria/#menuitem"><code>menuitem</code></a>, <a href="https://w3c.github.io/aria/#menuitemcheckbox"><code>menuitemcheckbox</code></a>, <a href="https://w3c.github.io/aria/#menuitemradio"><code>menuitemradio</code></a>, <a href="https://w3c.github.io/aria/#option"><code>option</code></a>,  <a href="https://w3c.github.io/aria/#radio"><code>radio</code></a>, <a href="https://w3c.github.io/aria/#switch"><code>switch</code></a>, <a href="https://w3c.github.io/aria/#tab"><code>tab</code></a>.</td>
+      <td>
+        <a href="https://w3c.github.io/aria/#checkbox"><code>checkbox</code></a
+        >, <a href="https://w3c.github.io/aria/#link"><code>link</code></a
+        >,
+        <a href="https://w3c.github.io/aria/#menuitem"><code>menuitem</code></a
+        >,
+        <a href="https://w3c.github.io/aria/#menuitemcheckbox"
+          ><code>menuitemcheckbox</code></a
+        >,
+        <a href="https://w3c.github.io/aria/#menuitemradio"
+          ><code>menuitemradio</code></a
+        >, <a href="https://w3c.github.io/aria/#option"><code>option</code></a
+        >, <a href="https://w3c.github.io/aria/#radio"><code>radio</code></a
+        >, <a href="https://w3c.github.io/aria/#switch"><code>switch</code></a
+        >, <a href="https://w3c.github.io/aria/#tab"><code>tab</code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLButtonElement"><code>HTMLButtonElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLButtonElement"
+          ><code>HTMLButtonElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
-
-<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
-
-<dl>
-  <dt><strong><code>autofocus</code></strong></dt>
-  <dd>Cet attribut booléen, <strong>qui ne doit être défini qu'une fois par document</strong>, indique au navigateur que cet élément doit automatiquement avoir le <a href="/fr/docs/Web/API/HTMLOrForeignElement/focus">focus</a> lorsque la page est chargée. Cela permet d'utiliser immédiatement ce bouton, via un raccourci clavier par exemple, sans avoir à cliquer au préalable dans le contrôle adéquat.</dd>
-  <dt><strong><code>autocomplete</code></strong> {{non-standard_inline}}</dt>
-  <dd>Pour l'élément <code>&lt;button&gt;</code>, cet attribut, propre à Firefox, n'est pas standard. Par défaut et à la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conserve l'état de désactivation d'un bouton</a> d'un élément <code>&lt;button&gt;</code> au fur et à mesure des chargements d'une page. Utiliser cet attribut avec la valeur <code>off</code> (i.e. <code>autocomplete="off"</code>) désactive cette fonctionnalité (cf. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">bug 654072</a> pour plus d'informations).</dd>
-  <dt><strong><code>disabled</code></strong></dt>
-  <dd>
-    <p>Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton : il ne peut pas être pressé ou ciblé.</p>
-
-    <p>Firefox, contrairement aux autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persiste l'état désactivé dynamique</a> d'un <code>&lt;bouton&gt;</code> à travers les chargements de page. Utilisez l'attribut <a href="#attr-autocomplete"><code>autocomplete</code></a> pour contrôler cette fonctionnalité.</p>
-  </dd>
-  <dt><strong><code>form</code></strong></dt>
-  <dd>L'élément <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a> auquel associer le bouton (son <em>formulaire rattaché</em>). Cet attribut contient l'attribut <code><strong>id</strong></code> de l'élément <code>&lt;form&gt;</code> auquel celui-ci est rattaché. Par défaut, le bouton est rattaché à l'élément <code>&lt;form&gt;</code> qui est son plus proche ancêtre. Cet attribut permet à un bouton d'être placé n'importe où dans le document et pas seulement comme un descendant d'éléments <code>&lt;form&gt;</code>. Il permet également de rattacher le bouton à un autre formulaire que son élément parent.</dd>
-  <dt><strong><code>formaction</code></strong></dt>
-  <dd>L'URL qui traite les informations soumises par le bouton. Remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-action"><code>action</code></a> du formulaire rattaché au bouton. Il ne fait rien s'il n'y a pas de formulaire rattaché.</dd>
-  <dt><strong><code>formenctype</code></strong></dt>
-  <dd><p>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut définit le <a class="external" href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisée pour encoder les données envoyées au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :</p>
-    <ul>
-      <li><code>application/x-www-form-urlencoded</code> : La valeur par défaut.</li>
-      <li><code>multipart/form-data</code> : Utilisé pour soumettre des éléments <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> dont les attributs <a href="/fr/docs/Web/HTML/Element/Input#attr-type"><code>type</code></a> sont définis sur <code>file</code>.</li>
-      <li><code>text/plain</code> : Spécifié comme une aide au débogage ; ne doit pas être utilisé pour la soumission réelle du formulaire.</li>
-    </ul>
-
-    <p>Si cet attribut est spécifié, il remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-enctype"><code>enctype</code></a> du formulaire rattaché au bouton.</p>
-  </dd>
-  <dt><strong><code>formmethod</code></strong></dt>
-  <dd><p>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code> (explicitement ou comme valeur par défaut), cet attribut définit la <a href="/fr/docs/Web/HTTP/Methods">méthode HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :</p>
-  <ul>
-    <li><code>post</code> : Les données du formulaire sont incluses dans le corps de la requête HTTP lorsqu'elles sont envoyées au serveur. À utiliser lorsque le formulaire contient des informations qui ne devraient pas être publiques, comme les identifiants de connexion.</li>
-    <li><code>get</code> : Les données du formulaire sont ajoutées à l'URL <code>action</code> du formulaire, avec un <code>?</code> comme séparateur, et l'URL résultante est envoyée au serveur. Utilisez cette méthode lorsque le formulaire <a href="/fr/docs/Glossary/Idempotent">n'a pas d'effets secondaires</a>, comme les formulaires de recherche.</li>
-  </ul>
-
-  <p>S'il est spécifié, cet attribut remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-method"><code>method</code></a> du formulaire rattaché au bouton.</p>
-  </dd>
-  <dt><strong><code>formnovalidate</code></strong></dt>
-  <dd>Si le bouton est un bouton de soumission (<code>type</code> non défini ou défini avec la valeur <code>"submit"</code>), cet attribut booléen spécifie que le formulaire ne doit pas être <a href="/fr/docs/Learn/Forms/Form_validation">validé</a> lorsqu'il est soumis. Si cet attribut est spécifié, il remplace l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-novalidate"><code>novalidate</code></a> du formulaire rattaché au bouton. Cet attribut est également disponible sur les éléments <code><a href="/fr/docs/Web/HTML/Element/Input/image">&lt;input type="image"&gt;</a></code> et <code><a href="/fr/docs/Web/HTML/Element/Input/submit">&lt;input type="submit"&gt;</a></code>.</p>
-  </dd>
-  <dt><strong><code>formtarget</code></strong></dt>
-  <dd>Lorsque l'attribut <code><strong>type</strong></code> possède la valeur <code>submit</code>, cet attribut indique le contexte de navigation (onglet, fenêtre, frame) associé avec le formulaire, sa cible. Outre un attribut <code><strong>id </strong></code>valide du document, il peut prendre l'une de ces valeurs particulières:
-    <ul>
-      <li><code>_self</code> : Charge la réponse dans le même contexte de navigation que le contexte actuel. Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié.</li>
-      <li><code>_blank</code> : Charge la réponse dans un nouveau contexte de navigation sans nom — généralement un nouvel onglet ou une nouvelle fenêtre, selon les paramètres du navigateur de l'utilisateur.</li>
-      <li><code>_parent</code> : Charge la réponse dans le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, cette option se comporte de la même manière que <code>_self</code>.</li>
-      <li><code>_top</code> : Charge la réponse dans le contexte de navigation de niveau supérieur (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte actuel, et qui n'a pas de parent). S'il n'y a pas de parent, cette option se comporte de la même manière que <code>_self</code>.</li>
-    </ul>
-  </dd>
-  <dt><strong><code>name</code></strong></dt>
-  <dd>Le nom du bouton, soumis en tant que paire avec la <code>valeur</code> du bouton comme partie des données du formulaire.</dd>
-  <dt><strong><code>type</code></strong></dt>
-  <dd><p>Le comportement par défaut du bouton. Les valeurs possibles sont :</p>
-    <ul>
-      <li><code>submit</code> : Le bouton soumet les données du formulaire au serveur. C'est la valeur par défaut si l'attribut n'est pas spécifié pour les boutons associés à un <code>&lt;form&gt;</code>, ou si l'attribut est une valeur vide ou invalide.</li>
-      <li><code>reset</code> : Le bouton réinitialise tous les contrôles à leur valeur initiale, comme <a href="/fr/docs/Web/HTML/Element/Input/reset">&lt;input type="reset"&gt;</a>. (Ce comportement a tendance à agacer les utilisateurs).</li>
-      <li><code>button</code> : Le bouton n'a pas de comportement par défaut et ne fait rien lorsqu'il est pressé par défaut. Les scripts côté client peuvent écouter les événements de l'élément, qui sont déclenchés lorsque les événements se produisent.</li>
-    </ul>
-  </dd>
-  <dt><strong><code>value</code></strong></dt>
-  <dd>Définit la valeur associée au <code>name</code> du bouton lorsqu'il est soumis avec les données du formulaire. Cette valeur est transmise au serveur en paramètres lorsque le formulaire est soumis.</dd>
-</dl>
-
-<h2 id="notes">Notes</h2>
-
-<p>Un bouton de soumission avec l'attribut <code>formaction</code> défini, mais sans formulaire associé ne fait rien. Vous devez définir un formulaire rattaché, soit en l'enveloppant dans un <code>&lt;form&gt;</code>, soit en définissant la valeur de l'attribut <code>form</code> avec l'identifiant du formulaire.</p>
-
-<p>Les éléments <code>&lt;button&gt;</code> sont beaucoup plus faciles à styliser que les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>. Vous pouvez ajouter du contenu HTML interne (pensez à <code>&lt;i&gt;</code>, <code>&lt;br&gt;</code>, ou même <code>&lt;img&gt;</code>), et utiliser les pseudo-éléments <a href="/fr/docs/Web/CSS/::after"><code>::after</code></a> et <a href="/fr/docs/Web/CSS/::before"><code>::before</code></a> pour un rendu complexe.</p>
-
-<p>Si vos boutons ne servent pas à soumettre des données de formulaire à un serveur, assurez-vous de définir leur attribut <code>type</code> à <code>bouton</code>. Sinon, ils tenteront de soumettre des données de formulaire et de charger la réponse (inexistante), détruisant éventuellement l'état actuel du document.</p>
-
-<h2 id="example">Exemple</h2>
-
-<pre class="brush: html">&lt;button name="button"&gt;Cliquez sur moi :)&lt;/button&gt;</pre>
-
-<p>{{EmbedLiveSample('example', 200, 64)}}</p>
-
-<h2 id="accessibility_concerns">Problèmes d'accessibilité</h2>
-
-<h3 id="icon_buttons">Boutons avec une icône</h3>
-
-<p>Les boutons qui reposent uniquement sur une icône pour représenter une fonctionnalité n'ont pas de nom accessible. Un nom accessible permet à un outil d'assistance (un lecteur d'écran par exemple) de générer un <a href="/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">arbre d'accessibilité</a> correct lors de l'analyse du document. Les outils d'assistance utilisent cet arbre d'accessibilité pour permettre aux utilisateurs de naviguer et d'utiliser le contenu de la page.</p>
-
-<p>Afin de fournir un nom accessible pour un bouton, on fournira un contenu texte dans l'élément qui décrit, de façon concise, la fonctionnalité offerte par le bouton.</p>
-
-<h4 id="example_2">Exemple</h4>
-
-<pre class="brush: html">&lt;button name="favorite" type="button"&gt;
-  &lt;svg aria-hidden="true" viewBox="0 0 10 10"&gt;
-    &lt;path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/&gt;
-  &lt;/svg&gt;
+## Attributs
+
+Cet élément peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
+
+- **`autofocus`**
+  - : Cet attribut booléen, **qui ne doit être défini qu'une fois par document**, indique au navigateur que cet élément doit automatiquement avoir le [focus](/fr/docs/Web/API/HTMLOrForeignElement/focus) lorsque la page est chargée. Cela permet d'utiliser immédiatement ce bouton, via un raccourci clavier par exemple, sans avoir à cliquer au préalable dans le contrôle adéquat.
+- **`autocomplete`** {{non-standard_inline}}
+  - : Pour l'élément `<button>`, cet attribut, propre à Firefox, n'est pas standard. Par défaut et à la différence des autres navigateurs, [Firefox conserve l'état de désactivation d'un bouton](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) d'un élément `<button>` au fur et à mesure des chargements d'une page. Utiliser cet attribut avec la valeur `off` (i.e. `autocomplete="off"`) désactive cette fonctionnalité (cf. [bug 654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072) pour plus d'informations).
+- **`disabled`**
+
+  - : Cet attribut booléen empêche l'utilisateur d'interagir avec le bouton : il ne peut pas être pressé ou ciblé.
+
+    Firefox, contrairement aux autres navigateurs, [persiste l'état désactivé dynamique](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) d'un `<bouton>` à travers les chargements de page. Utilisez l'attribut [`autocomplete`](#attr-autocomplete) pour contrôler cette fonctionnalité.
+
+- **`form`**
+  - : L'élément [`<form>`](/fr/docs/Web/HTML/Element/Form) auquel associer le bouton (son _formulaire rattaché_). Cet attribut contient l'attribut **`id`** de l'élément `<form>` auquel celui-ci est rattaché. Par défaut, le bouton est rattaché à l'élément `<form>` qui est son plus proche ancêtre. Cet attribut permet à un bouton d'être placé n'importe où dans le document et pas seulement comme un descendant d'éléments `<form>`. Il permet également de rattacher le bouton à un autre formulaire que son élément parent.
+- **`formaction`**
+  - : L'URL qui traite les informations soumises par le bouton. Remplace l'attribut [`action`](/fr/docs/Web/HTML/Element/Form#attr-action) du formulaire rattaché au bouton. Il ne fait rien s'il n'y a pas de formulaire rattaché.
+- **`formenctype`**
+
+  - : Lorsque l'attribut **`type`** possède la valeur `submit`, cet attribut définit le [type MIME](https://fr.wikipedia.org/wiki/Type_MIME) qui sera utilisée pour encoder les données envoyées au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :
+
+    - `application/x-www-form-urlencoded` : La valeur par défaut.
+    - `multipart/form-data` : Utilisé pour soumettre des éléments [`<input>`](/fr/docs/Web/HTML/Element/Input) dont les attributs [`type`](/fr/docs/Web/HTML/Element/Input#attr-type) sont définis sur `file`.
+    - `text/plain` : Spécifié comme une aide au débogage ; ne doit pas être utilisé pour la soumission réelle du formulaire.
+
+    Si cet attribut est spécifié, il remplace l'attribut [`enctype`](/fr/docs/Web/HTML/Element/Form#attr-enctype) du formulaire rattaché au bouton.
+
+- **`formmethod`**
+
+  - : Lorsque l'attribut **`type`** possède la valeur `submit` (explicitement ou comme valeur par défaut), cet attribut définit la [méthode HTTP](/fr/docs/Web/HTTP/Methods) qui sera utilisée pour envoyer les données au serveur. C'est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :
+
+    - `post` : Les données du formulaire sont incluses dans le corps de la requête HTTP lorsqu'elles sont envoyées au serveur. À utiliser lorsque le formulaire contient des informations qui ne devraient pas être publiques, comme les identifiants de connexion.
+    - `get` : Les données du formulaire sont ajoutées à l'URL `action` du formulaire, avec un `?` comme séparateur, et l'URL résultante est envoyée au serveur. Utilisez cette méthode lorsque le formulaire [n'a pas d'effets secondaires](/fr/docs/Glossary/Idempotent), comme les formulaires de recherche.
+
+    S'il est spécifié, cet attribut remplace l'attribut [`method`](/fr/docs/Web/HTML/Element/Form#attr-method) du formulaire rattaché au bouton.
+
+- **`formnovalidate`**
+
+  - : Si le bouton est un bouton de soumission (`type` non défini ou défini avec la valeur `"submit"`), cet attribut booléen spécifie que le formulaire ne doit pas être [validé](/fr/docs/Learn/Forms/Form_validation) lorsqu'il est soumis. Si cet attribut est spécifié, il remplace l'attribut [`novalidate`](/fr/docs/Web/HTML/Element/Form#attr-novalidate) du formulaire rattaché au bouton. Cet attribut est également disponible sur les éléments [`<input type="image">`](/fr/docs/Web/HTML/Element/Input/image) et [`<input type="submit">`](/fr/docs/Web/HTML/Element/Input/submit).
+
+- **`formtarget`**
+
+  - : Lorsque l'attribut **`type`** possède la valeur `submit`, cet attribut indique le contexte de navigation (onglet, fenêtre, frame) associé avec le formulaire, sa cible. Outre un attribut **`id `**valide du document, il peut prendre l'une de ces valeurs particulières:
+
+    - `_self` : Charge la réponse dans le même contexte de navigation que le contexte actuel. Il s'agit de la valeur par défaut si l'attribut n'est pas spécifié.
+    - `_blank` : Charge la réponse dans un nouveau contexte de navigation sans nom — généralement un nouvel onglet ou une nouvelle fenêtre, selon les paramètres du navigateur de l'utilisateur.
+    - `_parent` : Charge la réponse dans le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, cette option se comporte de la même manière que `_self`.
+    - `_top` : Charge la réponse dans le contexte de navigation de niveau supérieur (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte actuel, et qui n'a pas de parent). S'il n'y a pas de parent, cette option se comporte de la même manière que `_self`.
+
+- **`name`**
+  - : Le nom du bouton, soumis en tant que paire avec la `valeur` du bouton comme partie des données du formulaire.
+- **`type`**
+
+  - : Le comportement par défaut du bouton. Les valeurs possibles sont :
+
+    - `submit` : Le bouton soumet les données du formulaire au serveur. C'est la valeur par défaut si l'attribut n'est pas spécifié pour les boutons associés à un `<form>`, ou si l'attribut est une valeur vide ou invalide.
+    - `reset` : Le bouton réinitialise tous les contrôles à leur valeur initiale, comme [\<input type="reset">](/fr/docs/Web/HTML/Element/Input/reset). (Ce comportement a tendance à agacer les utilisateurs).
+    - `button` : Le bouton n'a pas de comportement par défaut et ne fait rien lorsqu'il est pressé par défaut. Les scripts côté client peuvent écouter les événements de l'élément, qui sont déclenchés lorsque les événements se produisent.
+
+- **`value`**
+  - : Définit la valeur associée au `name` du bouton lorsqu'il est soumis avec les données du formulaire. Cette valeur est transmise au serveur en paramètres lorsque le formulaire est soumis.
+
+## Notes
+
+Un bouton de soumission avec l'attribut `formaction` défini, mais sans formulaire associé ne fait rien. Vous devez définir un formulaire rattaché, soit en l'enveloppant dans un `<form>`, soit en définissant la valeur de l'attribut `form` avec l'identifiant du formulaire.
+
+Les éléments `<button>` sont beaucoup plus faciles à styliser que les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input). Vous pouvez ajouter du contenu HTML interne (pensez à `<i>`, `<br>`, ou même `<img>`), et utiliser les pseudo-éléments [`::after`](/fr/docs/Web/CSS/::after) et [`::before`](/fr/docs/Web/CSS/::before) pour un rendu complexe.
+
+Si vos boutons ne servent pas à soumettre des données de formulaire à un serveur, assurez-vous de définir leur attribut `type` à `bouton`. Sinon, ils tenteront de soumettre des données de formulaire et de charger la réponse (inexistante), détruisant éventuellement l'état actuel du document.
+
+## Exemple
+
+```html
+<button name="button">Cliquez sur moi :)</button>
+```
+
+{{EmbedLiveSample('example', 200, 64)}}
+
+## Problèmes d'accessibilité
+
+### Boutons avec une icône
+
+Les boutons qui reposent uniquement sur une icône pour représenter une fonctionnalité n'ont pas de nom accessible. Un nom accessible permet à un outil d'assistance (un lecteur d'écran par exemple) de générer un [arbre d'accessibilité](/fr/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis) correct lors de l'analyse du document. Les outils d'assistance utilisent cet arbre d'accessibilité pour permettre aux utilisateurs de naviguer et d'utiliser le contenu de la page.
+
+Afin de fournir un nom accessible pour un bouton, on fournira un contenu texte dans l'élément qui décrit, de façon concise, la fonctionnalité offerte par le bouton.
+
+#### Exemple
+
+```html
+<button name="favorite" type="button">
+  <svg aria-hidden="true" viewBox="0 0 10 10">
+    <path d="M7 9L5 8 3 9V6L1 4h3l1-3 1 3h3L7 6z"/>
+  </svg>
   Ajouter aux favoris
-&lt;/button&gt;
-</pre>
+</button>
+```
 
-<p>Si on souhaite que le texte du bouton ne soit pas visible, on peut le faire de façon accessible grâce à une <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link">combinaison de propriétés</a> qui permettent de le masquer visuellement mais qui permet toujours aux technologies d'assistance de l'analyser.</p>
+Si on souhaite que le texte du bouton ne soit pas visible, on peut le faire de façon accessible grâce à une [combinaison de propriétés](https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link) qui permettent de le masquer visuellement mais qui permet toujours aux technologies d'assistance de l'analyser.
 
-<p>Toutefois, on notera que laisser le texte visible permettra aux personnes qui ne sont pas familières avec l'application de comprendre le rôle du bouton. Cela vaut particulièrement pour les personnes qui utilisent peu la technologie ou dont la culture apporte une autre interprétation aux images utilisées.</p>
+Toutefois, on notera que laisser le texte visible permettra aux personnes qui ne sont pas familières avec l'application de comprendre le rôle du bouton. Cela vaut particulièrement pour les personnes qui utilisent peu la technologie ou dont la culture apporte une autre interprétation aux images utilisées.
 
-<ul>
-  <li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/">Qu'est-ce qu'un nom accessible ? <em>The Paciello Group</em> (en anglais)</a></li>
-  <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies">Comprendre les règles WCAG 4.1</a></li>
-  <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html"><em>Understanding Success Criterion 4.1.2 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
+- [Qu'est-ce qu'un nom accessible ? _The Paciello Group_ (en anglais)](https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
+- [Comprendre les règles WCAG 4.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Robust#Guideline_4.1_—_Compatible_Maximize_compatibility_with_current_and_future_user_agents_including_assistive_technologies)
+- [_Understanding Success Criterion 4.1.2 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html)
 
-<h3 id="size_and_proximity">Dimensionnement et proximité</h3>
+### Dimensionnement et proximité
 
-<h4 id="size">Dimensionnement</h4>
+#### Dimensionnement
 
-<p>Les éléments interactifs tels que les boutons doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteurs, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44×44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">pixels CSS</a>.</p>
+Les éléments interactifs tels que les boutons doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteurs, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44×44 [pixels CSS](https://www.w3.org/TR/WCAG21/#dfn-css-pixels).
 
-<ul>
-  <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)</a></li>
-  <li><a href="https://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Taille des cibles et critère 2.5.5, billet en anglais d'Adrian Roselli</a></li>
-  <li><a href="https://a11yproject.com/posts/large-touch-targets/">Test rapide : cibles tactiles suffisamment grande — Projet A11Y (billet en anglais)</a></li>
-</ul>
+- [Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)
+- [Taille des cibles et critère 2.5.5, billet en anglais d'Adrian Roselli](https://adrianroselli.com/2019/06/target-size-and-2-5-5.html)
+- [Test rapide : cibles tactiles suffisamment grande — Projet A11Y (billet en anglais)](https://a11yproject.com/posts/large-touch-targets/)
 
-<h4 id="proximity">Proximité</h4>
+#### Proximité
 
-<p>Lorsque plusieurs contenus interactifs (y compris les boutons) sont placés les uns à côté des autres, il est nécessaire de les espacer suffisamment pour minimiser le risque d'activer le mauvais contenu lors de la navigation.</p>
+Lorsque plusieurs contenus interactifs (y compris les boutons) sont placés les uns à côté des autres, il est nécessaire de les espacer suffisamment pour minimiser le risque d'activer le mauvais contenu lors de la navigation.
 
-<p>Un tel espacement peut être obtenu grâce à la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</p>
+Un tel espacement peut être obtenu grâce à la propriété CSS [`margin`](/fr/docs/Web/CSS/margin).
 
-<ul>
-  <li><a href="https://axesslab.com/hand-tremors/">Les tremblements de la main et le problème du bouton géant — Axess Lab (en anglais)</a></li>
-</ul>
+- [Les tremblements de la main et le problème du bouton géant — Axess Lab (en anglais)](https://axesslab.com/hand-tremors/)
 
-<h3 id="aria">Informations sur l'état de l'ARIA</h3>
+### Informations sur l'état de l'ARIA
 
-<p>Pour décrire l'état d'un bouton, le bon attribut ARIA à utiliser est <code>aria-pressed</code> et non <code>aria-checked</code> ou <code>aria-selected</code>. Pour en savoir plus, lisez les informations sur le <a href="/fr/docs/Web/Accessibility/ARIA/Roles/button_role">rôle ARIA de bouton</a>.</p>
+Pour décrire l'état d'un bouton, le bon attribut ARIA à utiliser est `aria-pressed` et non `aria-checked` ou `aria-selected`. Pour en savoir plus, lisez les informations sur le [rôle ARIA de bouton](/fr/docs/Web/Accessibility/ARIA/Roles/button_role).
 
-<h3 id="firefox">Firefox</h3>
+### Firefox
 
-<p>Firefox ajoute une bordure en pointillés sur le bouton qui a le focus. Cette bordure est ajoutée via la feuille de style du navigateur et il est possible de la surcharger avec son propre style via <code>button<a href="/fr/docs/Web/CSS/::-moz-focus-inner">::-moz-focus-inner { }</a></code>.</p>
+Firefox ajoute une bordure en pointillés sur le bouton qui a le focus. Cette bordure est ajoutée via la feuille de style du navigateur et il est possible de la surcharger avec son propre style via `button::-moz-focus-inner { }`.
 
-<p>Si ce comportement est surchargé, il est nécessaire de vérifier que le changement de focus est clairement perceptible, y compris lorsque la vision ou les conditions d'éclairage réduisent la visibilité du document.</p>
+Si ce comportement est surchargé, il est nécessaire de vérifier que le changement de focus est clairement perceptible, y compris lorsque la vision ou les conditions d'éclairage réduisent la visibilité du document.
 
-<p>Le ratio de contraste est calculé en comparant la luminosité de la couleur du texte et celle de l'arrière-plan. Afin de respecter les <a href="https://www.w3.org/WAI/intro/wcag" rel="noopener">préconisations d'accessibilité sur le Web (WCAG)</a>, un ratio minimal de 4.5:1 est obligatoire pour le contenu textuel normal et un ratio minimal de 3:1 est obligatoire pour grands textes ou les titres. Un <em>grand</em> texte est défini comme un texte qui mesure 18.66px et qui est en gras ou comme un texte qui mesure 24px ou plus.</p>
+Le ratio de contraste est calculé en comparant la luminosité de la couleur du texte et celle de l'arrière-plan. Afin de respecter les [préconisations d'accessibilité sur le Web (WCAG)](https://www.w3.org/WAI/intro/wcag), un ratio minimal de 4.5:1 est obligatoire pour le contenu textuel normal et un ratio minimal de 3:1 est obligatoire pour grands textes ou les titres. Un _grand_ texte est défini comme un texte qui mesure 18.66px et qui est en gras ou comme un texte qui mesure 24px ou plus.
 
-<ul>
-  <li><a href="https://webaim.org/resources/contrastchecker/">Vérificateur de contraste WebAIM (en anglais)</a></li>
-  <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
-  <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0</a></em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html"> (en anglais)</a></li>
-</ul>
+- [Vérificateur de contraste WebAIM (en anglais)](https://webaim.org/resources/contrastchecker/)
+- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- _[Understanding Success Criterion 1.4.3 - W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)_[ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
diff --git a/files/fr/web/html/element/canvas/index.md b/files/fr/web/html/element/canvas/index.md
index c7b9f6dcfe..d8e107d41f 100644
--- a/files/fr/web/html/element/canvas/index.md
+++ b/files/fr/web/html/element/canvas/index.md
@@ -12,31 +12,76 @@ tags:
 translation_of: Web/HTML/Element/canvas
 browser-compat: html.elements.canvas
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>On utilise l'élément <strong>HTML <code>&lt;canvas&gt;</code></strong> avec l'API <a href="/fr/docs/Web/API/Canvas_API">canvas</a>, ou l'API <a href="/fr/docs/Web/API/WebGL_API">WebGL</a> pour dessiner des graphiques et des animations.</p>
+On utilise l'élément **HTML `<canvas>`** avec l'API [canvas](/fr/docs/Web/API/Canvas_API), ou l'API [WebGL](/fr/docs/Web/API/WebGL_API) pour dessiner des graphiques et des animations.
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content"
+          >contenu intégré</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td>Transparent mais sans aucun descendant étant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a> à l'exception des éléments <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-type"><code>type</code></a> vaut <code>checkbox</code>, <code>radio</code>, ou <code>button</code>.</td>
+      <td>
+        Transparent mais sans aucun descendant étant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content"
+          >contenu interactif</a
+        >
+        à l'exception des éléments
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Button"><code>&#x3C;button></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/Input"><code>&#x3C;input></code></a>
+        dont l'attribut
+        <a href="/fr/docs/Web/HTML/Element/Input#attr-type"
+          ><code>type</code></a
+        >
+        vaut <code>checkbox</code>, <code>radio</code>, ou <code>button</code>.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout contenu acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
+      <td>
+        Tout contenu acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -44,136 +89,106 @@ browser-compat: html.elements.canvas
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLCanvasElement"><code>HTMLCanvasElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLCanvasElement"
+          ><code>HTMLCanvasElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme les autres éléments HTML, cet élément possède les <a href="/fr/docs/Web/HTML/Global_attributes">attributs globaux</a>.</p>
+Comme les autres éléments HTML, cet élément possède les [attributs globaux](/fr/docs/Web/HTML/Global_attributes).
 
-<dl>
-  <dt><strong><code>height</code></strong></dt>
-  <dd>La hauteur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 150.</dd>
-  <dt><strong><code>moz-opaque</code></strong> {{non-standard_inline}}{{deprecated_inline}}</dt>
-  <dd>Cet attribut permet d'indiquer s'il y aura de la transparence ou non. Si le canevas sait qu'il n'y aura pas de transparence, les performances de rendu pourront être améliorées. Cet attribut est uniquement pris en charge par les navigateurs Mozilla, il est préférable d'utiliser la méthode standard <a href="fr/docs/Web/API/HTMLCanvasElement/getContext"><code>canvas.getContext('2d', { alpha: false})</code></a> à la place.</dd>
-  <dt><strong><code>width</code></strong></dt>
-  <dd>La largeur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 300.</dd>
-</dl>
+- **`height`**
+  - : La hauteur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 150.
+- **`moz-opaque`** {{non-standard_inline}}{{deprecated_inline}}
+  - : Cet attribut permet d'indiquer s'il y aura de la transparence ou non. Si le canevas sait qu'il n'y aura pas de transparence, les performances de rendu pourront être améliorées. Cet attribut est uniquement pris en charge par les navigateurs Mozilla, il est préférable d'utiliser la méthode standard [`canvas.getContext('2d', { alpha: false})`](fr/docs/Web/API/HTMLCanvasElement/getContext) à la place.
+- **`width`**
+  - : La largeur de l'espace pour l'élément, exprimée en pixels CSS. La valeur par défaut est 300.
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<h3 id="alternative_content">Contenu alternatif</h3>
+### Contenu alternatif
 
-<p>Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc <code>&lt;canvas&gt;</code>. Ce contenu pourra être utilisé par les navigateurs plus anciens qui ne supportent pas l'élément <code>&lt;canvas&gt;</code> et ceux pour lesquels JavaScript est désactivé. Fournir un texte de repli ou un sous-DOM utile aide à <a href="/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">rendre le canevas plus accessible</a>.</p>
+Il est fortement recommandé de fournir un contenu alternatif au contenu du bloc `<canvas>`. Ce contenu pourra être utilisé par les navigateurs plus anciens qui ne supportent pas l'élément `<canvas>` et ceux pour lesquels JavaScript est désactivé. Fournir un texte de repli ou un sous-DOM utile aide à [rendre le canevas plus accessible](/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility).
 
-<h3 id="required_canvas_tag">Balise <code>&lt;/canvas&gt;</code> obligatoire</h3>
+### Balise `</canvas>` obligatoire
 
-<p>À la différence de <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, l'élément <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> <strong>doit</strong> être fermé avec la balise fermante <code>&lt;/canvas&gt;</code>.</p>
+À la différence de [`<img>`](/fr/docs/Web/HTML/Element/Img), l'élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) **doit** être fermé avec la balise fermante `</canvas>`.
 
-<h3 id="sizing_the_canvas_using_css_versus_html">Dimensionnement du canevas : CSS ou HTML</h3>
+### Dimensionnement du canevas : CSS ou HTML
 
-<p>On peut modifier la taille affichée du canevas grâce à une feuille de style. L'image est mise à l'échelle lors du rendu pour correspondre à la taille indiquée par le style. Toutefois, cela pourra distordre l'image lors du rendu final.</p>
+On peut modifier la taille affichée du canevas grâce à une feuille de style. L'image est mise à l'échelle lors du rendu pour correspondre à la taille indiquée par le style. Toutefois, cela pourra distordre l'image lors du rendu final.
 
-<p>Mieux vaut utiliser les attributs explicites <code>width</code> et <code>height</code> de l'élément en HTML (ou via du code JavaScript).</p>
+Mieux vaut utiliser les attributs explicites `width` et `height` de l'élément en HTML (ou via du code JavaScript).
 
-<h3 id="maximum_canvas_size">Taille maximale d'un canevas</h3>
+### Taille maximale d'un canevas
 
-<p>La taille maximale d'un élément <code>&lt;canvas&gt;</code> dépend du navigateur utilisé. Voici un tableau de mesures provenant de tests et diverses sources (ex. <a href="https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element">Stack Overflow</a>):</p>
+La taille maximale d'un élément `<canvas>` dépend du navigateur utilisé. Voici un tableau de mesures provenant de tests et diverses sources (ex. [Stack Overflow](https://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element)):
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Navigateur</th>
-      <th scope="col">Hauteur maximale</th>
-      <th scope="col">Largeur maximale</th>
-      <th scope="col">Aire maximale</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>Chrome</td>
-      <td>32 767 pixels</td>
-      <td>32 767 pixels</td>
-      <td>268 435 456 pixels (soit 16 384 x 16 384)</td>
-    </tr>
-    <tr>
-      <td>Firefox</td>
-      <td>32 767 pixels</td>
-      <td>32 767 pixels</td>
-      <td>472 907 776 pixels (soit 22 528 x 20 992)</td>
-    </tr>
-    <tr>
-      <td>Safari</td>
-      <td>32 767 pixels</td>
-      <td>32 767 pixels</td>
-      <td>268 435 456 pixels (soit 16 384 x 16 384)</td>
-    </tr>
-    <tr>
-      <td>IE</td>
-      <td>8 192 pixels</td>
-      <td>8 192 pixels</td>
-      <td>?</td>
-    </tr>
-  </tbody>
-</table>
+| Navigateur | Hauteur maximale | Largeur maximale | Aire maximale                             |
+| ---------- | ---------------- | ---------------- | ----------------------------------------- |
+| Chrome     | 32 767 pixels    | 32 767 pixels    | 268 435 456 pixels (soit 16 384 x 16 384) |
+| Firefox    | 32 767 pixels    | 32 767 pixels    | 472 907 776 pixels (soit 22 528 x 20 992) |
+| Safari     | 32 767 pixels    | 32 767 pixels    | 268 435 456 pixels (soit 16 384 x 16 384) |
+| IE         | 8 192 pixels     | 8 192 pixels     | ?                                         |
 
-<div class="note">
-  <p><strong>Note :</strong>Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.</p>
-</div>
+> **Note :**Si on dépasse les dimensions ou l'aire maximale, le canevas deviendra inutilisable et les commandes de dessin ne fonctionneront pas.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="html">HTML</h3>
+### HTML
 
-<p>Le fragment de code suivant ajoute un élément <code>canvas</code> au document. Un texte alternatif est fourni au cas où le navigateur ne peut pas afficher ce canevas. Un texte alternatif ou bien des éléments internes permettront de rendre le canevas plus accessible.</p>
+Le fragment de code suivant ajoute un élément `canvas` au document. Un texte alternatif est fourni au cas où le navigateur ne peut pas afficher ce canevas. Un texte alternatif ou bien des éléments internes permettront de rendre le canevas plus accessible.
 
-<pre class="brush: html">&lt;canvas width="300" height="100"&gt;
-  Désolé, votre navigateur ne prend pas en charge &amp;lt;canvas&amp;gt;.
-&lt;/canvas&gt;</pre>
+```html
+<canvas width="300" height="100">
+  Désolé, votre navigateur ne prend pas en charge &lt;canvas&gt;.
+</canvas>
+```
 
-<h3 id="javascript">JavaScript</h3>
+### JavaScript
 
-<p>On utilise également ce fragment de code JavaScript avec la méthode <a href="/fr/docs/Web/API/HTMLCanvasElement/getContext"><code>HTMLCanvasElement.getContext()</code></a> afin d'obtenir le contexte de dessin puis on dessine sur le canevas.</p>
+On utilise également ce fragment de code JavaScript avec la méthode [`HTMLCanvasElement.getContext()`](/fr/docs/Web/API/HTMLCanvasElement/getContext) afin d'obtenir le contexte de dessin puis on dessine sur le canevas.
 
-<pre class="brush: js">var canvas = document.querySelector('canvas');
+```js
+var canvas = document.querySelector('canvas');
 var ctx = canvas.getContext('2d');
 ctx.fillStyle = 'green';
-ctx.fillRect(10, 10, 100, 100);</pre>
+ctx.fillRect(10, 10, 100, 100);
+```
 
-<h3 id="result">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('examples')}}</p>
+{{EmbedLiveSample('examples')}}
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<h3 id="alternative_content_2">Contenu alternatif</h3>
+### Contenu alternatif
 
-<p>Seul, l'élément <code>&lt;canvas&gt;</code> est une image matricielle et ne fournit pas d'informations sur les objets dessinés. Le contenu d'un canevas n'est pas accessible aux outils d'assistance qui se basent sur le contenu sémantique du document HTML. De façon générale, on évitera de se servir uniquement de <code>&lt;canvas&gt;</code> pour produire un document accessible. Voici quelques pages et articles pour aider à l'accessibilité avec les canevas :</p>
+Seul, l'élément `<canvas>` est une image matricielle et ne fournit pas d'informations sur les objets dessinés. Le contenu d'un canevas n'est pas accessible aux outils d'assistance qui se basent sur le contenu sémantique du document HTML. De façon générale, on évitera de se servir uniquement de `<canvas>` pour produire un document accessible. Voici quelques pages et articles pour aider à l'accessibilité avec les canevas :
 
-<ul>
-  <li><a href="/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility">Les régions cliquables et l'accessibilité</a></li>
-  <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Cas d'utilisation pour l'accessibilité de <code>&lt;canvas&gt;</code></a></li>
-  <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Problèmes d'accessibilité de l'élément <code>&lt;canvas&gt;</code></a></li>
-  <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">L'accessibilité de l'élément <code>&lt;canvas&gt;</code> dans Firefox 13, un article de Steve Faulkner (en anglais)</a></li>
-  <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Les meilleures pratiques pour concevoir des éléments <code>&lt;canvas&gt;</code> interactifs</a></li>
-</ul>
+- [Les régions cliquables et l'accessibilité](/fr/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility)
+- [Cas d'utilisation pour l'accessibilité de `<canvas>`](https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases)
+- [Problèmes d'accessibilité de l'élément `<canvas>`](https://www.w3.org/html/wg/wiki/AddedElementCanvas)
+- [L'accessibilité de l'élément `<canvas>` dans Firefox 13, un article de Steve Faulkner (en anglais)](http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/)
+- [Les meilleures pratiques pour concevoir des éléments `<canvas>` interactifs](https://html.spec.whatwg.org/multipage/scripting.html#best-practices)
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/API/Canvas_API">Le portail MDN sur l'élément <code>&lt;canvas&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/API/Canvas_API/Tutorial">Tutoriel <code>&lt;canvas&gt;</code></a></li>
-  <li><a href="https://simon.html5.org/dump/html5-canvas-cheat-sheet.html">Anti-sèche <code>&lt;canvas&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/Demos_of_open_web_technologies">Démonstrations liées à <code>&lt;canvas&gt;</code></a></li>
-  <li><a href="https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html">Introduction à <code>&lt;canvas&gt;</code> par Apple</a> (en anglais)</li>
-</ul>
+- [Le portail MDN sur l'élément `<canvas>`](/fr/docs/Web/API/Canvas_API)
+- [Tutoriel `<canvas>`](/fr/docs/Web/API/Canvas_API/Tutorial)
+- [Anti-sèche `<canvas>`](https://simon.html5.org/dump/html5-canvas-cheat-sheet.html)
+- [Démonstrations liées à `<canvas>`](/fr/docs/Web/Demos_of_open_web_technologies)
+- [Introduction à `<canvas>` par Apple](https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/Introduction/Introduction.html) (en anglais)
diff --git a/files/fr/web/html/element/caption/index.md b/files/fr/web/html/element/caption/index.md
index 00a70e2d0c..d45202a5de 100644
--- a/files/fr/web/html/element/caption/index.md
+++ b/files/fr/web/html/element/caption/index.md
@@ -15,33 +15,52 @@ tags:
 translation_of: Web/HTML/Element/caption
 browser-compat: html.elements.caption
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément <strong><code>&lt;caption&gt;</code></strong> définit la légende (ou le titre) d'un tableau.</p>
+L'élément **`<caption>`** définit la légende (ou le titre) d'un tableau.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/caption.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/caption.html", "tabbed-standard")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
       <td>Aucune.</td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>La balise de fin peut être absente si l'élément n'est pas immédiatement suivi d'un blanc ASCII ou d'un commentaire.</td>
+      <td>
+        La balise de fin peut être absente si l'élément n'est pas immédiatement
+        suivi d'un blanc ASCII ou d'un commentaire.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Un élément <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a> dont il doit être le premier descendant.</td>
+      <td>
+        Un élément
+        <a href="/fr/docs/Web/HTML/Element/table"><code>&#x3C;table></code></a>
+        dont il doit être le premier descendant.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -49,68 +68,70 @@ browser-compat: html.elements.caption
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLTableCaptionElement"><code>HTMLTableCaptionElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLTableCaptionElement"
+          ><code>HTMLTableCaptionElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>On peut utiliser<a href="/fr/docs/Web/HTML/Global_attributes"> les attributs universels</a> sur cet élément.</p>
+On peut utiliser[ les attributs universels](/fr/docs/Web/HTML/Global_attributes) sur cet élément.
 
-<h3 id="deprecated_attributes">Attributs obsolètes</h3>
+### Attributs obsolètes
 
-<dl>
-  <dt><strong><code>align</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut à valeur contrainte indique l'alignement de la légende du tableau par rapport au tableau lui-même. Il peut valoir :
-  <dl>
-    <dt><code>left</code></dt>
-    <dd>La légende est affichée à gauche du tableau</dd>
-    <dt><code>top</code></dt>
-    <dd>La légende est affichée au-dessus du tableau</dd>
-    <dt><code>right</code></dt>
-    <dd>La légende est affichée à droite du tableau</dd>
-    <dt><code>bottom</code></dt>
-    <dd>La légende est affichée en dessous du tableau</dd>
-  </dl>
+- **`align`** {{deprecated_inline}}
 
-  <div class="note">
-    <p><strong>Note :</strong> Ne pas utiliser cet attribut. Il a été déprécié. L'élément <code>&lt;caption&gt;</code> devrait être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS <a href="/fr/docs/Web/CSS/caption-side"><code>caption-side</code></a> et <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>.</p>
-  </div>
-  </dd>
-</dl>
+  - : Cet attribut à valeur contrainte indique l'alignement de la légende du tableau par rapport au tableau lui-même. Il peut valoir :
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+    - `left`
+      - : La légende est affichée à gauche du tableau
+    - `top`
+      - : La légende est affichée au-dessus du tableau
+    - `right`
+      - : La légende est affichée à droite du tableau
+    - `bottom`
+      - : La légende est affichée en dessous du tableau
 
-<p>L'élément <code>&lt;caption&gt;</code> devrait être le premier élément enfant de l'élément parent <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a>.</p>
+    > **Note :** Ne pas utiliser cet attribut. Il a été déprécié. L'élément `<caption>` devrait être mis en forme grâce au [CSS](/fr/docs/Web/CSS). Afin d'obtenir des effets similaires à cet attribut, on utilisera les propriétés CSS [`caption-side`](/fr/docs/Web/CSS/caption-side) et [`text-align`](/fr/docs/Web/CSS/text-align).
 
-<p>Quand l'élément <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a> (étant le parent de l'élément <code>&lt;caption&gt;</code>) n'est que l'unique descendant d'un élément <a href="/fr/docs/Web/HTML/Element/figure"><code>&lt;figure&gt;</code></a>, c'est l'élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a> doit être utilisé.</p>
+## Notes d'utilisation
 
-<p>Utiliser la propriété <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> sur le tableau ne modifiera pas l'apparence de la légende. Il est également nécessaire d'ajouter une déclaration CSS avec <code>background-color</code> sur l'élément <code>&lt;caption&gt;</code> pour que celui-ci ait la même couleur.</p>
+L'élément `<caption>` devrait être le premier élément enfant de l'élément parent [`<table>`](/fr/docs/Web/HTML/Element/table).
 
-<h2 id="Exemple">Exemple</h2>
+Quand l'élément [`<table>`](/fr/docs/Web/HTML/Element/table) (étant le parent de l'élément `<caption>`) n'est que l'unique descendant d'un élément [`<figure>`](/fr/docs/Web/HTML/Element/figure), c'est l'élément [`<figcaption>`](/fr/docs/Web/HTML/Element/figcaption) doit être utilisé.
 
-<p>Cet exemple simple présente un tableau qui comprend une légende.</p>
+Utiliser la propriété [`background-color`](/fr/docs/Web/CSS/background-color) sur le tableau ne modifiera pas l'apparence de la légende. Il est également nécessaire d'ajouter une déclaration CSS avec `background-color` sur l'élément `<caption>` pour que celui-ci ait la même couleur.
 
-<h3 id="html">HTML</h3>
+## Exemple
 
-<pre class="brush: html">&lt;table&gt;
-  &lt;caption&gt;Légende de l'exemple&lt;/caption&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Connexion&lt;/th&gt;
-    &lt;th&gt;Courriel :&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;utilisateur1&lt;/td&gt;
-    &lt;td&gt;utilisateur1@test.fr&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;utilisateur2&lt;/td&gt;
-    &lt;td&gt;utilisateur2@test.fr&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
+Cet exemple simple présente un tableau qui comprend une légende.
 
-<pre class="brush: css hidden">caption {
+### HTML
+
+```html
+<table>
+  <caption>Légende de l'exemple</caption>
+  <tr>
+    <th>Connexion</th>
+    <th>Courriel :</th>
+  </tr>
+  <tr>
+    <td>utilisateur1</td>
+    <td>utilisateur1@test.fr</td>
+  </tr>
+  <tr>
+    <td>utilisateur2</td>
+    <td>utilisateur2@test.fr</td>
+  </tr>
+</table>
+```
+
+```css hidden
+caption {
     caption-side: top;
   }
   table {
@@ -120,27 +141,23 @@ browser-compat: html.elements.caption
   table, th, td {
     border: 1px solid black;
   }
-</pre>
+```
+
+### Résultat
 
-<h3 id="result">Résultat</h3>
+{{EmbedLiveSample('Exemple', '', 120)}}
 
-<p>{{EmbedLiveSample('Exemple', '', 120)}}</p>
+## Spécifications
 
-<h2 id="specifications">Spécifications</h2>
+{{Specifications}}
 
-<p>{{Specifications}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+{{Compat}}
 
-<p>{{Compat}}</p>
+## Voir aussi
 
-<h2 id="see_also">Voir aussi</h2>
+- Les propriétés CSS particulièrement utiles pour styliser l'élément `<caption>` :
 
-<ul>
-  <li>Les propriétés CSS particulièrement utiles pour styliser l'élément <code>&lt;caption&gt;</code> :
-   <ul>
-    <li><a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a></li>
-    <li><a href="/fr/docs/Web/CSS/caption-side"><code>caption-side</code></a>.</li>
-   </ul>
-  </li>
- </ul>
+  - [`text-align`](/fr/docs/Web/CSS/text-align)
+  - [`caption-side`](/fr/docs/Web/CSS/caption-side).
diff --git a/files/fr/web/html/element/center/index.md b/files/fr/web/html/element/center/index.md
index ab336c36fc..7ccc9bba33 100644
--- a/files/fr/web/html/element/center/index.md
+++ b/files/fr/web/html/element/center/index.md
@@ -14,60 +14,60 @@ tags:
 translation_of: Web/HTML/Element/center
 browser-compat: html.elements.center
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.</p>
-</div>
+> **Attention :** Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.
 
-<p>L'élément <strong><code>&lt;center&gt;</code></strong> est un <a href="/fr/docs/Web/HTML/Block-level_elements">élément de bloc</a> qui contient des paragraphes et d'autres éléments de type bloc ou en ligne. Le contenu entier de cet élément est centré horizontalement au sein de son conteneur parent (généralement l'élément <a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a>).</p>
+L'élément **`<center>`** est un [élément de bloc](/fr/docs/Web/HTML/Block-level_elements) qui contient des paragraphes et d'autres éléments de type bloc ou en ligne. Le contenu entier de cet élément est centré horizontalement au sein de son conteneur parent (généralement l'élément [`<body>`](/fr/docs/Web/HTML/Element/body)).
 
-<p>Cet élément a été déprécié en HTML4 (et XHTML 1) au profit de la propriété <a href="/fr/docs/Web/CSS">CSS</a> <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> qui peut être appliqué à l'élément <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> ou à un élément <a href="/fr/docs/Web/HTML/Element/p"><code>&lt;p&gt;</code></a>. Pour centrer des blocs, on utilisera d'autres propriétés (<a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a> et <a href="/fr/docs/Web/CSS/margin-right"><code>margin-right</code></a> (ou définissez <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> à <code>0 auto</code>).</p>
+Cet élément a été déprécié en HTML4 (et XHTML 1) au profit de la propriété [CSS](/fr/docs/Web/CSS) [`text-align`](/fr/docs/Web/CSS/text-align) qui peut être appliqué à l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) ou à un élément [`<p>`](/fr/docs/Web/HTML/Element/p). Pour centrer des blocs, on utilisera d'autres propriétés ([`margin-left`](/fr/docs/Web/CSS/margin-left) et [`margin-right`](/fr/docs/Web/CSS/margin-right) (ou définissez [`margin`](/fr/docs/Web/CSS/margin) à `0 auto`).
 
-<h2 id="dom_interface">Interface DOM</h2>
+## Interface DOM
 
-<p>Cet élément implémente l'interface <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</p>
+Cet élément implémente l'interface [`HTMLElement`](/fr/docs/Web/API/HTMLElement).
 
-<div class="note">
-  <p><strong>Note :</strong> Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</p>
-</div>
+> **Note :** Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface [`HTMLSpanElement`](/fr/docs/Web/API/HTMLSpanElement) pour cet élément.
 
-<h2 id="example_1">Exemple 1</h2>
+## Exemple 1
 
-<pre class="brush: html">&lt;center&gt;
+```html
+<center>
   Ce texte sera centré.
-  &lt;p&gt;Ainsi que ce paragraphe.&lt;/p&gt;
-&lt;/center&gt;</pre>
+  <p>Ainsi que ce paragraphe.</p>
+</center>
+```
 
-<h2 id="example_2">Exemple 2 (alternative CSS)</h2>
+## Exemple 2 (alternative CSS)
 
-<pre class="brush: html">&lt;div style="text-align:center"&gt;
+```html
+<div style="text-align:center">
   Ce texte sera centré.
-  &lt;p&gt;Ainsi que ce paragraphe.&lt;/p&gt;
-&lt;/div&gt;</pre>
+  <p>Ainsi que ce paragraphe.</p>
+</div>
+```
 
-<h2 id="example_3">Exemple 3 (alternative CSS)</h2>
+## Exemple 3 (alternative CSS)
 
-<pre class="brush: html">&lt;p style="text-align:center"&gt;
-  Cette ligne sera centrée.&lt;br&gt;
+```html
+<p style="text-align:center">
+  Cette ligne sera centrée.<br>
   Ainsi que cette ligne.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h2 id="notes">Notes</h2>
+## Notes
 
-<p>Appliquer <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a><code>: center</code> sur un élément <a href="/fr/docs/Web/HTML/Element/p"><code>&lt;p&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> centre <em>le contenu</em> de ces éléments, tout en laissant leurs dimensions générales inchangées.</p>
+Appliquer [`text-align`](/fr/docs/Web/CSS/text-align)`: center` sur un élément [`<p>`](/fr/docs/Web/HTML/Element/p) ou [`<div>`](/fr/docs/Web/HTML/Element/div) centre _le contenu_ de ces éléments, tout en laissant leurs dimensions générales inchangées.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>La propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a></li>
-  <li>La propriété <a href="/fr/docs/Web/CSS/display"><code>display</code></a></li>
-</ul>
+- La propriété [`text-align`](/fr/docs/Web/CSS/text-align)
+- La propriété [`display`](/fr/docs/Web/CSS/display)
diff --git a/files/fr/web/html/element/cite/index.md b/files/fr/web/html/element/cite/index.md
index cd93bd61c9..d79b5c8560 100644
--- a/files/fr/web/html/element/cite/index.md
+++ b/files/fr/web/html/element/cite/index.md
@@ -15,33 +15,63 @@ tags:
 translation_of: Web/HTML/Element/cite
 browser-compat: html.elements.cite
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément <strong><code>&lt;cite&gt;</code></strong> contient le titre d'une œuvre telle qu'un livre, une chanson, un film, une sculpture… Cet élément doit inclure le titre de l'œuvre. Cette référence peut-être abrégée en accord avec les conventions d'usages pour l'ajout des métadonnées de citations.</p>
+L'élément **`<cite>`** contient le titre d'une œuvre telle qu'un livre, une chanson, un film, une sculpture… Cet élément doit inclure le titre de l'œuvre. Cette référence peut-être abrégée en accord avec les conventions d'usages pour l'ajout des métadonnées de citations.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/cite.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/cite.html", "tabbed-standard")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >Contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -49,73 +79,79 @@ browser-compat: html.elements.cite
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément</td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a
+        >. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox
+        implémentait l'interface
+        <a href="/fr/docs/Web/API/HTMLSpanElement"
+          ><code>HTMLSpanElement</code></a
+        >
+        pour cet élément
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Cet élément prend uniquement en charge [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Voici des exemples d'œuvres auxquelles on pourrait faire référence grâce à un élément <code>&lt;cite&gt;</code> :</p>
+Voici des exemples d'œuvres auxquelles on pourrait faire référence grâce à un élément `<cite>` :
 
-<ul>
-  <li>Un livre</li>
-  <li>Un article de recherche</li>
-  <li>Un essai</li>
-  <li>Un poème</li>
-  <li>Une pièce musicale</li>
-  <li>Une chanson</li>
-  <li>Le script d'une pièce ou d'un film</li>
-  <li>Un film</li>
-  <li>Une émission télévisée</li>
-  <li>Un jeu</li>
-  <li>Une sculpture</li>
-  <li>Une peinture</li>
-  <li>Une pièce de théâtre</li>
-  <li>Un opéra</li>
-  <li>Une comédie musicale</li>
-  <li>Une exposition</li>
-  <li>Les minutes d'un procès</li>
-  <li>Un programme informatique</li>
-  <li>Un site web</li>
-  <li>Une page web</li>
-  <li>Un billet de blog ou un commentaire</li>
-  <li>Un billet ou un commentaire sur un forum</li>
-  <li>Une déclaration écrite ou orale</li>
-  <li>etc.</li>
-</ul>
+- Un livre
+- Un article de recherche
+- Un essai
+- Un poème
+- Une pièce musicale
+- Une chanson
+- Le script d'une pièce ou d'un film
+- Un film
+- Une émission télévisée
+- Un jeu
+- Une sculpture
+- Une peinture
+- Une pièce de théâtre
+- Un opéra
+- Une comédie musicale
+- Une exposition
+- Les minutes d'un procès
+- Un programme informatique
+- Un site web
+- Une page web
+- Un billet de blog ou un commentaire
+- Un billet ou un commentaire sur un forum
+- Une déclaration écrite ou orale
+- etc.
 
-<p>Il convient de noter que la spécification du W3C dit qu'une référence à une œuvre créative, telle qu'incluse dans un élément <code>&lt;cite&gt;</code>, peut inclure le nom de l'auteur de l'œuvre. Cependant, la spécification WHATWG pour <code>&lt;cite&gt;</code> dit le contraire : le nom d'une personne ne doit <em>jamais</em> être inclus, en toutes circonstances.</p>
+Il convient de noter que la spécification du W3C dit qu'une référence à une œuvre créative, telle qu'incluse dans un élément `<cite>`, peut inclure le nom de l'auteur de l'œuvre. Cependant, la spécification WHATWG pour `<cite>` dit le contraire : le nom d'une personne ne doit _jamais_ être inclus, en toutes circonstances.
 
-<p>Pour inclure une référence à la source du matériel cité qui est contenu dans un élément <a href="/fr/docs/Web/HTML/Element/blockquote"><code>&lt;blockquote&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/q"><code>&lt;q&gt;</code></a>, utilisez l'attribut <a href="/fr/docs/Web/HTML/Element/blockquote#attr-cite"><code>cite</code></a> sur l'élément.</p>
+Pour inclure une référence à la source du matériel cité qui est contenu dans un élément [`<blockquote>`](/fr/docs/Web/HTML/Element/blockquote) ou [`<q>`](/fr/docs/Web/HTML/Element/q), utilisez l'attribut [`cite`](/fr/docs/Web/HTML/Element/blockquote#attr-cite) sur l'élément.
 
-<p>En général, les navigateurs donnent un style au contenu d'un élément <code>&lt;cite&gt;</code> en italique par défaut. Pour éviter cela, appliquez la propriété CSS <a href="/fr/docs/Web/CSS/font-style"><code>font-style</code></a> à l'élément <code>&lt;cite&gt;</code>.</p>
+En général, les navigateurs donnent un style au contenu d'un élément `<cite>` en italique par défaut. Pour éviter cela, appliquez la propriété CSS [`font-style`](/fr/docs/Web/CSS/font-style) à l'élément `<cite>`.
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;p&gt;
-  Plus d'informations sont disponibles dans &lt;cite&gt;[ISO-0000].&lt;/cite&gt;
-&lt;/p&gt;</pre>
+```html
+<p>
+  Plus d'informations sont disponibles dans <cite>[ISO-0000].</cite>
+</p>
+```
 
-<p>Le HTML ci-dessus produit le résultat suivant :</p>
+Le HTML ci-dessus produit le résultat suivant :
 
-<p>{{EmbedLiveSample('example', '', 80)}}</p>
+{{EmbedLiveSample('example', '', 80)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/blockquote"><code>&lt;blockquote&gt;</code></a>, utilisé pour des citations longues.</li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/q"><code>&lt;q&gt;</code></a>, utilisé pour des citations en incise.</li>
-</ul>
+- L'élément [`<blockquote>`](/fr/docs/Web/HTML/Element/blockquote), utilisé pour des citations longues.
+- L'élément [`<q>`](/fr/docs/Web/HTML/Element/q), utilisé pour des citations en incise.
diff --git a/files/fr/web/html/element/code/index.md b/files/fr/web/html/element/code/index.md
index c6ccf9dbba..2020c817fb 100644
--- a/files/fr/web/html/element/code/index.md
+++ b/files/fr/web/html/element/code/index.md
@@ -12,33 +12,63 @@ tags:
 translation_of: Web/HTML/Element/code
 browser-compat: html.elements.code
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;code&gt;</code></strong> représente un court fragment de code machine. Par défaut, l'agent utilisateur utilise une police à chasse fixe (<em>monospace</em>) afin d'afficher le texte contenu dans cet élément.</p>
+L'élément HTML **`<code>`** représente un court fragment de code machine. Par défaut, l'agent utilisateur utilise une police à chasse fixe (_monospace_) afin d'afficher le texte contenu dans cet élément.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/code.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/code.html", "tabbed-shorter")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >Contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -46,48 +76,56 @@ browser-compat: html.elements.code
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>. Jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a
+        >. Jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémentait
+        l'interface
+        <a href="/fr/docs/Web/API/HTMLSpanElement"
+          ><code>HTMLSpanElement</code></a
+        >
+        pour cet élément.
+      </td>
     </tr>
   </tbody>
- </table>
+</table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Cet élément prend uniquement en charge [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<h2 id="example">Exemples</h2>
+## Exemples
 
-<p>Un paragraphe de texte qui contient <code>&lt;code&gt;</code> :</p>
+Un paragraphe de texte qui contient `<code>` :
 
-<pre class="brush: html">&lt;p&gt;
-  La fonction &lt;code&gt;selectAll()&lt;/code&gt; met en évidence tout le texte
-  du champ de saisie afin que l'utilisateur puisse, par exemple, le 
+```html
+<p>
+  La fonction <code>selectAll()</code> met en évidence tout le texte
+  du champ de saisie afin que l'utilisateur puisse, par exemple, le
   copier ou le supprimer.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<p>La sortie générée par ce HTML ressemble à ceci :</p>
+La sortie générée par ce HTML ressemble à ceci :
 
-<p>{{EmbedLiveSample('example', '', 100)}}</p>
+{{EmbedLiveSample('example', '', 100)}}
 
-<h2 id="notes">Notes</h2>
+## Notes
 
-<p>Pour représenter plusieurs lignes de code, enveloppez l'élément <code>&lt;code&gt;</code> dans un élément <a href="/fr/docs/Web/HTML/Element/pre"><code>&lt;pre&gt;</code></a>. L'élément <code>&lt;code&gt;</code> en lui-même ne représente qu'une seule phrase de code ou ligne de code.</p>
+Pour représenter plusieurs lignes de code, enveloppez l'élément `<code>` dans un élément [`<pre>`](/fr/docs/Web/HTML/Element/pre). L'élément `<code>` en lui-même ne représente qu'une seule phrase de code ou ligne de code.
 
-<p>Une règle CSS peut être définie pour le sélecteur <code>code</code> afin de remplacer la fonte par défaut du navigateur. Les préférences définies par l'utilisateur peuvent avoir la priorité sur la règle CSS spécifiée.</p>
+Une règle CSS peut être définie pour le sélecteur `code` afin de remplacer la fonte par défaut du navigateur. Les préférences définies par l'utilisateur peuvent avoir la priorité sur la règle CSS spécifiée.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/samp"><code>&lt;samp&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/kbd"><code>&lt;kbd&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/var"><code>&lt;var&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/pre"><code>&lt;pre&gt;</code></a></li>
-</ul>
+- L'élément [`<samp>`](/fr/docs/Web/HTML/Element/samp)
+- L'élément [`<kbd>`](/fr/docs/Web/HTML/Element/kbd)
+- L'élément [`<var>`](/fr/docs/Web/HTML/Element/var)
+- L'élément [`<pre>`](/fr/docs/Web/HTML/Element/pre)
diff --git a/files/fr/web/html/element/col/index.md b/files/fr/web/html/element/col/index.md
index bde20a7a7a..5a5d788e93 100644
--- a/files/fr/web/html/element/col/index.md
+++ b/files/fr/web/html/element/col/index.md
@@ -11,16 +11,20 @@ tags:
 translation_of: Web/HTML/Element/col
 browser-compat: html.elements.col
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;col&gt;</code></strong> définit une colonne appartenant à un tableau et est utilisé afin de définir la sémantique commune à toutes ses cellules. On trouve généralement cet élément au sein d'un élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a>.</p>
+L'élément HTML **`<col>`** définit une colonne appartenant à un tableau et est utilisé afin de définir la sémantique commune à toutes ses cellules. On trouve généralement cet élément au sein d'un élément [`<colgroup>`](/fr/docs/Web/HTML/Element/colgroup).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/col.html","tabbed-taller")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégorie de contenu</a></th>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégorie de contenu</a
+        >
+      </th>
       <td>Aucune.</td>
     </tr>
     <tr>
@@ -29,15 +33,35 @@ browser-compat: html.elements.col
     </tr>
     <tr>
       <th scope="row">Omission de balise</th>
-      <td>La balise ouvrante est obligatoire, l'élément étant un élément vide, la balise de fin est interdite.</td>
+      <td>
+        La balise ouvrante est obligatoire, l'élément étant un élément vide, la
+        balise de fin est interdite.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td><a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a> uniquement. Toutefois, ce parent peut être défini de façon implicite car sa balise ouvrante n'est pas obligatoire. L'élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a> ne doit pas avoir d'attribut <a href="/fr/docs/Web/HTML/Element/colgroup#attr-span"><code>span</code></a>.</td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/colgroup"
+          ><code>&#x3C;colgroup></code></a
+        >
+        uniquement. Toutefois, ce parent peut être défini de façon implicite car
+        sa balise ouvrante n'est pas obligatoire. L'élément
+        <a href="/fr/docs/Web/HTML/Element/colgroup"
+          ><code>&#x3C;colgroup></code></a
+        >
+        ne doit pas avoir d'attribut
+        <a href="/fr/docs/Web/HTML/Element/colgroup#attr-span"
+          ><code>span</code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -45,104 +69,89 @@ browser-compat: html.elements.col
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLTableColElement"><code>HTMLTableColElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLTableColElement"
+          ><code>HTMLTableColElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
- </table>
-
- <h2 id="attributes">Attributs</h2>
-
- <p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p>
- 
- <dl>
-  <dt><strong><code>span</code></strong></dt>
-  <dd>Cet attribut contient un nombre entier positif indiquant le nombre de colonnes consécutives que l'élément <code>&lt;col&gt;</code> couvre. S'il n'est pas présent, sa valeur par défaut est <code>1</code>.</dd>
- </dl>
- 
- <h3 id="deprecated_attributes">Attributs dépréciés</h3>
- 
- <p>Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence lors de la mise à jour du code existant et uniquement pour des raisons historiques.</p>
- 
- <dl>
-  <dt><strong><code>align</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut de type énumératif indique comment l'alignement horizontal du contenu des cellules de chaque colonne sera traité. Les valeurs possibles sont :
-  <ul>
-    <li><code>left</code>, aligner le contenu à gauche de la cellule</li>
-    <li><code>center</code>, centrer le contenu dans la cellule</li>
-    <li><code>right</code>, aligner le contenu à droite de la cellule</li>
-    <li><code>justify</code>, insérer des espaces dans le contenu textuel afin que le contenu soit justifié dans la cellule</li>
-  </ul>
- 
-  <p>Si cet attribut n'est pas défini, sa valeur est héritée du <a href="/fr/docs/Web/HTML/Element/colgroup#attr-align"><code>align</code></a> de l'élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a> auquel appartient cet <code>&lt;col&gt;</code>. S'il n'y en a pas, la valeur <code>left</code> est supposée.</p>
-
-  <div class="note">
-    <p><strong>Note :</strong></p>
-
-    <ul>
-      <li>Pour obtenir le même effet que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code> :
-
-        <ul>
-          <li>N'essayez pas de définir la propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> sur un sélecteur donnant un élément <code>&lt;col&gt;</code>. Comme les éléments <a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a> ne sont pas des descendants de l'élément <code>&lt;col&gt;</code>, ils n'en hériteront pas.</li>
-          <li>Si le tableau n'utilise pas d'attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, utilisez le sélecteur CSS <code>td:nth-child(an+b)</code>. Définissez <code>a</code> à zéro et <code>b </code> à la position de la colonne dans le tableau, par exemple <code>td:nth-child(2) { text-align : right ; }</code> pour aligner à droite la deuxième colonne.</li>
-          <li>Si le tableau utilise bien un attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme <code>[colspan=n]</code>, bien que cela ne soit pas trivial.</li>
-        </ul>
-      </li>
-    </ul>
-  </div>
-  </dd>
-  <dt><strong><code>bgcolor</code></strong> {{deprecated_inline}}</dt>
-  <dd>
-  <p>La couleur de fond du tableau. Il s'agit d'un <a href="/fr/docs/Web/CSS/color_value#rgb_colors">code RVB hexadécimal à 6 chiffres</a>, préfixé par un « <code>#</code> ». L'un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés de couleur</a> prédéfinis peut également être utilisé.</p>
- 
-  <p>Pour obtenir un effet similaire, utilisez la propriété CSS <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</p>
-  </dd>
-  <dt><strong><code>char</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs typiques de cet attribut incluent un point (.) lorsqu'on tente d'aligner des nombres ou des valeurs monétaires. Si <a href="#attr-align"><code>align</code></a> n'est pas défini sur <code>char</code>, cet attribut est ignoré.</dd>
-  <dt><strong><code>charoff</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut est utilisé pour indiquer le nombre de caractères pour décaler les données de la colonne par rapport aux caractères d'alignement spécifiés par l'attribut <code>char</code>.</dd>
-  <dt><strong><code>valign</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut spécifie l'alignement vertical du texte dans chaque cellule de la colonne. Les valeurs possibles de cet attribut sont les suivantes :
-    <ul>
-      <li><code>baseline</code>, mettra le texte aussi près du bas de la cellule que possible, mais l'alignera sur la <a href="https://en.wikipedia.org/wiki/Baseline_%28typography%29">base</a> des caractères au lieu du bas de ceux-ci. Si les caractères sont tous de la même taille, cela a le même effet que <code>bottom</code> ;</li>
-      <li><code>bottom</code>, placera le texte aussi près du bas de la cellule que possible ;</li>
-      <li><code>middle</code>, permet de centrer le texte dans la cellule ;</li>
-      <li>and <code>top</code>, placera le texte aussi près du haut de la cellule que possible.</li>
-    </ul>
-  
-    <div class="note">
-      <p><strong>Note :</strong></p>
-  
-      <ul>
-        <li>N'essayez pas de définir la propriété <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> sur un sélecteur donnant un élément <code>&lt;col&gt;</code>. Comme les éléments <a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a> ne sont pas des descendants de l'élément <code>&lt;col&gt;</code>, ils n'en hériteront pas.</li>
-        <li>Si le tableau n'utilise pas d'attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, utilisez le sélecteur CSS <code>td:nth-child(an+b)</code> où a est le nombre total de colonnes du tableau et b la position ordinale de la colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété <code>vertical-align</code> peut être utilisée.</li>
-        <li>Si le tableau utilise bien un attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme <code>[colspan=n]</code>, bien que cela ne soit pas trivial.</li>
-      </ul>
-    </div>
-  </dd>
-  <dt><strong><code>width</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut spécifie une largeur par défaut pour chaque colonne du groupe de colonnes actuel. En plus des valeurs standard en pixels et en pourcentage, cet attribut peut prendre la forme spéciale <code>0*</code>, ce qui signifie que la largeur de chaque colonne du groupe doit être la largeur minimale nécessaire pour contenir le contenu de la colonne. Des largeurs relatives telles que <code>5*</code> peuvent également être utilisées.</dd>
- </dl>
-
- <h2 id="examples">Exemples</h2>
-
- <p>Veuillez consulter la page <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a> pour des exemples sur <code>&lt;colgroup&gt;</code>.</p>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
- <li>Les propriétés et pseudo-classes CSS qui peuvent être spécialement utiles pour mettre en forme l'élément <code>&lt;col&gt;</code> :
-  <ul>
-    <li>la propriété <a href="/fr/docs/Web/CSS/width"><code>width</code></a> pour contrôler la largeur de la colonne ;</li>
-    <li>la pseudo-classe <a href="/fr/docs/Web/CSS/:nth-child"><code>:nth-child</code></a> pour définir l'alignement des cellules de la colonne ;</li>
-    <li>la propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> pour aligner le contenu de toutes les cellules sur le même caractère, comme « . ».</li>
-  </ul>
- </li>
-</ul>
+</table>
+
+## Attributs
+
+Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Global_attributes).
+
+- **`span`**
+  - : Cet attribut contient un nombre entier positif indiquant le nombre de colonnes consécutives que l'élément `<col>` couvre. S'il n'est pas présent, sa valeur par défaut est `1`.
+
+### Attributs dépréciés
+
+Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence lors de la mise à jour du code existant et uniquement pour des raisons historiques.
+
+- **`align`** {{deprecated_inline}}
+
+  - : Cet attribut de type énumératif indique comment l'alignement horizontal du contenu des cellules de chaque colonne sera traité. Les valeurs possibles sont :
+
+    - `left`, aligner le contenu à gauche de la cellule
+    - `center`, centrer le contenu dans la cellule
+    - `right`, aligner le contenu à droite de la cellule
+    - `justify`, insérer des espaces dans le contenu textuel afin que le contenu soit justifié dans la cellule
+
+    Si cet attribut n'est pas défini, sa valeur est héritée du [`align`](/fr/docs/Web/HTML/Element/colgroup#attr-align) de l'élément [`<colgroup>`](/fr/docs/Web/HTML/Element/colgroup) auquel appartient cet `<col>`. S'il n'y en a pas, la valeur `left` est supposée.
+
+    > **Note :**
+    >
+    > - Pour obtenir le même effet que les valeurs `left`, `center`, `right` ou `justify` :
+    >
+    >   - N'essayez pas de définir la propriété [`text-align`](/fr/docs/Web/CSS/text-align) sur un sélecteur donnant un élément `<col>`. Comme les éléments [`<td>`](/fr/docs/Web/HTML/Element/td) ne sont pas des descendants de l'élément `<col>`, ils n'en hériteront pas.
+    >   - Si le tableau n'utilise pas d'attribut [`colspan`](/fr/docs/Web/HTML/Element/td#attr-colspan), utilisez le sélecteur CSS `td:nth-child(an+b)`. Définissez `a` à zéro et `b `à la position de la colonne dans le tableau, par exemple `td:nth-child(2) { text-align : right ; }` pour aligner à droite la deuxième colonne.
+    >   - Si le tableau utilise bien un attribut [`colspan`](/fr/docs/Web/HTML/Element/td#attr-colspan), l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme `[colspan=n]`, bien que cela ne soit pas trivial.
+
+- **`bgcolor`** {{deprecated_inline}}
+
+  - : La couleur de fond du tableau. Il s'agit d'un [code RVB hexadécimal à 6 chiffres](/fr/docs/Web/CSS/color_value#rgb_colors), préfixé par un « `#` ». L'un des [mots-clés de couleur](/fr/docs/Web/CSS/color_value#color_keywords) prédéfinis peut également être utilisé.
+
+    Pour obtenir un effet similaire, utilisez la propriété CSS [`background-color`](/fr/docs/Web/CSS/background-color).
+
+- **`char`** {{deprecated_inline}}
+  - : Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs typiques de cet attribut incluent un point (.) lorsqu'on tente d'aligner des nombres ou des valeurs monétaires. Si [`align`](#attr-align) n'est pas défini sur `char`, cet attribut est ignoré.
+- **`charoff`** {{deprecated_inline}}
+  - : Cet attribut est utilisé pour indiquer le nombre de caractères pour décaler les données de la colonne par rapport aux caractères d'alignement spécifiés par l'attribut `char`.
+- **`valign`** {{deprecated_inline}}
+
+  - : Cet attribut spécifie l'alignement vertical du texte dans chaque cellule de la colonne. Les valeurs possibles de cet attribut sont les suivantes :
+
+    - `baseline`, mettra le texte aussi près du bas de la cellule que possible, mais l'alignera sur la [base](https://en.wikipedia.org/wiki/Baseline_%28typography%29) des caractères au lieu du bas de ceux-ci. Si les caractères sont tous de la même taille, cela a le même effet que `bottom` ;
+    - `bottom`, placera le texte aussi près du bas de la cellule que possible ;
+    - `middle`, permet de centrer le texte dans la cellule ;
+    - and `top`, placera le texte aussi près du haut de la cellule que possible.
+
+    > **Note :**
+    >
+    > - N'essayez pas de définir la propriété [`vertical-align`](/fr/docs/Web/CSS/vertical-align) sur un sélecteur donnant un élément `<col>`. Comme les éléments [`<td>`](/fr/docs/Web/HTML/Element/td) ne sont pas des descendants de l'élément `<col>`, ils n'en hériteront pas.
+    > - Si le tableau n'utilise pas d'attribut [`colspan`](/fr/docs/Web/HTML/Element/td#attr-colspan), utilisez le sélecteur CSS `td:nth-child(an+b)` où a est le nombre total de colonnes du tableau et b la position ordinale de la colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété `vertical-align` peut être utilisée.
+    > - Si le tableau utilise bien un attribut [`colspan`](/fr/docs/Web/HTML/Element/td#attr-colspan), l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme `[colspan=n]`, bien que cela ne soit pas trivial.
+
+- **`width`** {{deprecated_inline}}
+  - : Cet attribut spécifie une largeur par défaut pour chaque colonne du groupe de colonnes actuel. En plus des valeurs standard en pixels et en pourcentage, cet attribut peut prendre la forme spéciale `0*`, ce qui signifie que la largeur de chaque colonne du groupe doit être la largeur minimale nécessaire pour contenir le contenu de la colonne. Des largeurs relatives telles que `5*` peuvent également être utilisées.
+
+## Exemples
+
+Veuillez consulter la page [`<table>`](/fr/docs/Web/HTML/Element/table) pour des exemples sur `<colgroup>`.
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- Les propriétés et pseudo-classes CSS qui peuvent être spécialement utiles pour mettre en forme l'élément `<col>` :
+
+  - la propriété [`width`](/fr/docs/Web/CSS/width) pour contrôler la largeur de la colonne ;
+  - la pseudo-classe [`:nth-child`](/fr/docs/Web/CSS/:nth-child) pour définir l'alignement des cellules de la colonne ;
+  - la propriété [`text-align`](/fr/docs/Web/CSS/text-align) pour aligner le contenu de toutes les cellules sur le même caractère, comme « . ».
diff --git a/files/fr/web/html/element/colgroup/index.md b/files/fr/web/html/element/colgroup/index.md
index 4ed3fc245c..fa0f0b76a7 100644
--- a/files/fr/web/html/element/colgroup/index.md
+++ b/files/fr/web/html/element/colgroup/index.md
@@ -11,34 +11,76 @@ tags:
 translation_of: Web/HTML/Element/colgroup
 browser-compat: html.elements.colgroup
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;colgroup&gt;</code></strong> définit un groupe de colonnes au sein d'un tableau.</p>
+L'élément HTML **`<colgroup>`** définit un groupe de colonnes au sein d'un tableau.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/colgroup.html","tabbed-taller")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
       <td>Aucune.</td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td>Si l'attribut <a href="#attr-span"><code>span</code></a> est présent : aucun car c'est un élément vide.<br>
-      Si l'attribut n'est pas présent, zéro ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/col"><code>&lt;col&gt;</code></a>.</td>
+      <td>
+        Si l'attribut <a href="#attr-span"><code>span</code></a> est présent :
+        aucun car c'est un élément vide.<br />Si l'attribut n'est pas présent,
+        zéro ou plusieurs éléments
+        <a href="/fr/docs/Web/HTML/Element/col"><code>&#x3C;col></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>La balise de début peut être absente si le premier élément fils est <a href="/fr/docs/Web/HTML/Element/col"><code>&lt;col&gt;</code></a> et que celui-ci n'est pas précédé par un élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a> dont la balise de fin est absente. La balise de fin peut être absente s'il n'est pas suivi par un blanc ou par un commentaire.</td>
+      <td>
+        La balise de début peut être absente si le premier élément fils est
+        <a href="/fr/docs/Web/HTML/Element/col"><code>&#x3C;col></code></a> et
+        que celui-ci n'est pas précédé par un élément
+        <a href="/fr/docs/Web/HTML/Element/colgroup"
+          ><code>&#x3C;colgroup></code></a
+        >
+        dont la balise de fin est absente. La balise de fin peut être absente
+        s'il n'est pas suivi par un blanc ou par un commentaire.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Un élément <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a>. <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a> doit apparaître après tout élément <a href="/fr/docs/Web/HTML/Element/caption"><code>&lt;caption&gt;</code></a> optionnel et avant tout élément <a href="/fr/docs/Web/HTML/Element/thead"><code>&lt;thead&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/tbody"><code>&lt;tbody&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/tfoot"><code>&lt;tfoot&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/tr"><code>&lt;tr&gt;</code></a>.</td>
+      <td>
+        Un élément
+        <a href="/fr/docs/Web/HTML/Element/table"><code>&#x3C;table></code></a
+        >.
+        <a href="/fr/docs/Web/HTML/Element/colgroup"
+          ><code>&#x3C;colgroup></code></a
+        >
+        doit apparaître après tout élément
+        <a href="/fr/docs/Web/HTML/Element/caption"
+          ><code>&#x3C;caption></code></a
+        >
+        optionnel et avant tout élément
+        <a href="/fr/docs/Web/HTML/Element/thead"><code>&#x3C;thead></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/th"><code>&#x3C;th></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/tbody"><code>&#x3C;tbody></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/tfoot"><code>&#x3C;tfoot></code></a>
+        et <a href="/fr/docs/Web/HTML/Element/tr"><code>&#x3C;tr></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -46,104 +88,92 @@ browser-compat: html.elements.colgroup
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLTableColElement"><code>HTMLTableColElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLTableColElement"
+          ><code>HTMLTableColElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
- </table>
-
-<h2 id="attributes">Attributs</h2>
-
-<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur cet élément.</p>
-
-<dl>
-  <dt><strong><code>span</code></strong></dt>
-  <dd>Cet attribut contient un nombre entier positif indiquant le nombre de colonnes consécutives que l'élément <code>&lt;colgroup&gt;</code> couvre. S'il n'est pas présent, sa valeur par défaut est <code>1</code>.
-    <div class="note">
-      <p><strong>Note:</strong></p>
-      <p>Cet attribut est appliqué sur les attributs du groupe de colonnes, il n'a aucun effet sur les règles de style CSS qui lui sont associées ni, a fortiori, sur les cellules des membres du groupe de la colonne.</p>
-      <ul>
-        <li>L'attribut <code>span</code> n'est pas autorisé s'il y a un ou plusieurs éléments <code>&lt;col&gt;</code> dans le <code>&lt;colgroup&gt;</code>.</li>
-      </ul>
-    </div>
-  </dd>
- </dl>
-
-<h3 id="deprecated_attributes">Attributs dépréciés</h3>
-
-<p>Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence lors de la mise à jour du code existant et uniquement pour des raisons historiques.</p>
-
-<dl>
-  <dt><strong><code>align</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut de type énumératif indique comment l'alignement horizontal du contenu des cellules de chaque colonne sera traité. Les valeurs possibles sont :
-    <ul>
-      <li><code>left</code>, aligner le contenu à gauche de la cellule</li>
-      <li><code>center</code>, centrer le contenu dans la cellule</li>
-      <li><code>right</code>, aligner le contenu à droite de la cellule</li>
-      <li><code>justify</code>, insérer des espaces dans le contenu textuel afin que le contenu soit justifié dans la cellule</li>
-      <li><code>char</code>, aligner le contenu textuel sur un caractère spécial avec un décalage minimal, défini par les attributs <a href="/fr/docs/Web/HTML/Element/col#attr-char"><code>char</code></a> et <a href="/fr/docs/Web/HTML/Element/col#attr-charoff"><code>charoff</code></a>.</li>
-    </ul>
-
-    <p>Si cet attribut n'est pas défini, la valeur <code>left</code> est adoptée. Les éléments <a href="/fr/docs/Web/HTML/Element/col"><code>&lt;col&gt;</code></a> descendants peuvent remplacer cette valeur en utilisant leur propre attribut <a href="/fr/docs/Web/HTML/Element/col#attr-align"><code>align</code></a>.</p>
-
-    <div class="note">
-      <p><strong>Note :</strong></p>
-      <ul>
-        <li>N'essayez pas de définir la propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> sur un sélecteur donnant un élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a>. Comme les éléments <a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a> ne sont pas des descendants de l'élément <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a>, ils n'en hériteront pas.</li>
-        <li>Si le tableau n'utilise pas d'attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan">code>colspan</code></a>, utilisez un <code>td:nth-child(an+b)</code> sélecteur CSS par colonne, où a est le nombre total de colonnes du tableau et b est la position ordinale de cette colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété <code>text-align</code> peut être utilisée.</li>
-        <li>Si le tableau utilise bien un attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme <code>[colspan=n]</code>, bien que cela ne soit pas trivial.</li>
-      </ul>
-    </div>
-  </dd>
-  <dt><strong><code>bgcolor</code></strong> {{deprecated_inline}}</dt>
-  <dd>
-    <p>La couleur de fond du tableau. Il s'agit d'un <a href="/fr/docs/Web/CSS/color_value#rgb_colors">code RVB hexadécimal à 6 chiffres</a>, préfixé par un «&nbsp;<code>#</code>&nbsp;». L'un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés de couleur</a> prédéfinis peut également être utilisé.</p>
-
-    <p>Pour obtenir un effet similaire, utilisez la propriété CSS <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</p>
-  </dd>
-  <dt><strong><code>char</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut spécifie l'alignement du contenu d'un groupe de colonnes sur un caractère. Les valeurs typiques de cet attribut comprennent un point (.) lorsqu'on tente d'aligner des chiffres ou des valeurs monétaires. Si <a href="#attr-align"><code>align</code></a> n'est pas défini sur <code>char</code>, cet attribut est ignoré, bien qu'il sera toujours utilisé comme valeur par défaut pour le <a href="/fr/docs/Web/HTML/Element/col#attr-align"><code>align</code></a> du <a href="/fr/docs/Web/HTML/Element/col"><code>&lt;col&gt;</code></a> qui sont membres de ce groupe de colonnes.</dd>
-  <dt><strong><code>charoff</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut est utilisé pour indiquer le nombre de caractères pour décaler les données de la colonne par rapport au caractère d'alignement spécifié par l'attribut <code>char</code>.</dd>
-  <dt><strong><code>valign</code></strong> {{deprecated_inline}}</dt>
-  <dd>Cet attribut spécifie l'alignement vertical du texte dans chaque cellule de la colonne. Les valeurs possibles de cet attribut sont les suivantes :
-    <ul>
-      <li><code>baseline</code>, mettra le texte aussi près du bas de la cellule que possible, mais l'alignera sur la <a href="https://fr.wikipedia.org/wiki/Ligne_de_base_(typographie)">ligne de base</a> des caractères au lieu du bas de ceux-ci. Si les caractères sont tous de la même taille, cela a le même effet que <code>bottom</code> ;</li>
-      <li><code>bottom</code>, placera le texte aussi près du bas de la cellule que possible ;</li>
-      <li><code>middle</code>, permet de centrer le texte dans la cellule ;</li>
-      <li>and <code>top</code>, placera le texte aussi près du haut de la cellule que possible.</li>
-    </ul>
-
-    <div class="note">
-      <p><strong>Note :</strong></p>
-      <ul>
-        <li>N'essayez pas de définir la propriété <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> sur un sélecteur donnant un élément <code>&lt;col&gt;</code>. Comme les éléments <a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a> ne sont pas des descendants de l'élément <code>&lt;col&gt;</code>, ils n'en hériteront pas.</li>
-        <li>Si le tableau n'utilise pas d'attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, utilisez le sélecteur CSS <code>td:nth-child(an+b)</code> où a est le nombre total de colonnes du tableau et b la position ordinale de la colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété <code>vertical-align</code> peut être utilisée.</li>
-        <li>Si le tableau utilise bien un attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a>, l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme <code>[colspan=n]</code>, bien que cela ne soit pas trivial.</li>
-      </ul>
-    </div>
-  </dd>
-</dl>
-
-<h2 id="examples">Exemples</h2>
-
-<p>Veuillez consulter la page <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a> pour des exemples sur <code>&lt;colgroup&gt;</code>.</p>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li>Les propriétés et pseudo-classes CSS notamment utiles pour mettre en forme l'élément <code>&lt;col&gt;</code> :
-   <ul>
-     <li>la propriété <a href="/fr/docs/Web/CSS/width"><code>width</code></a> pour contrôler la largeur de la colonne ;</li>
-     <li>la pseudo-classe <a href="/fr/docs/Web/CSS/:nth-child"><code>:nth-child</code></a> pour définir l'alignement des cellules de la colonne ;</li>
-     <li>la propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> pour aligner le contenu de toutes les cellules sur le même caractère, comme « . ».</li>
-   </ul>
-  </li>
-</ul>
+</table>
+
+## Attributs
+
+Comme pour tous les éléments, on peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes) sur cet élément.
+
+- **`span`**
+
+  - : Cet attribut contient un nombre entier positif indiquant le nombre de colonnes consécutives que l'élément `<colgroup>` couvre. S'il n'est pas présent, sa valeur par défaut est `1`.
+
+    > **Note :**
+    >
+    > Cet attribut est appliqué sur les attributs du groupe de colonnes, il n'a aucun effet sur les règles de style CSS qui lui sont associées ni, a fortiori, sur les cellules des membres du groupe de la colonne.
+    >
+    > - L'attribut `span` n'est pas autorisé s'il y a un ou plusieurs éléments `<col>` dans le `<colgroup>`.
+
+### Attributs dépréciés
+
+Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils sont documentés ci-dessous à titre de référence lors de la mise à jour du code existant et uniquement pour des raisons historiques.
+
+- **`align`** {{deprecated_inline}}
+
+  - : Cet attribut de type énumératif indique comment l'alignement horizontal du contenu des cellules de chaque colonne sera traité. Les valeurs possibles sont :
+
+    - `left`, aligner le contenu à gauche de la cellule
+    - `center`, centrer le contenu dans la cellule
+    - `right`, aligner le contenu à droite de la cellule
+    - `justify`, insérer des espaces dans le contenu textuel afin que le contenu soit justifié dans la cellule
+    - `char`, aligner le contenu textuel sur un caractère spécial avec un décalage minimal, défini par les attributs [`char`](/fr/docs/Web/HTML/Element/col#attr-char) et [`charoff`](/fr/docs/Web/HTML/Element/col#attr-charoff).
+
+    Si cet attribut n'est pas défini, la valeur `left` est adoptée. Les éléments [`<col>`](/fr/docs/Web/HTML/Element/col) descendants peuvent remplacer cette valeur en utilisant leur propre attribut [`align`](/fr/docs/Web/HTML/Element/col#attr-align).
+
+    > **Note :**
+    >
+    > - N'essayez pas de définir la propriété [`text-align`](/fr/docs/Web/CSS/text-align) sur un sélecteur donnant un élément [`<colgroup>`](/fr/docs/Web/HTML/Element/colgroup). Comme les éléments [`<td>`](/fr/docs/Web/HTML/Element/td) ne sont pas des descendants de l'élément [`<colgroup>`](/fr/docs/Web/HTML/Element/colgroup), ils n'en hériteront pas.
+    > - Si le tableau n'utilise pas d'attribut [code>colspan](/fr/docs/Web/HTML/Element/td#attr-colspan), utilisez un `td:nth-child(an+b)` sélecteur CSS par colonne, où a est le nombre total de colonnes du tableau et b est la position ordinale de cette colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété `text-align` peut être utilisée.
+    > - Si le tableau utilise bien un attribut [`colspan`](/fr/docs/Web/HTML/Element/td#attr-colspan), l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme `[colspan=n]`, bien que cela ne soit pas trivial.
+
+- **`bgcolor`** {{deprecated_inline}}
+
+  - : La couleur de fond du tableau. Il s'agit d'un [code RVB hexadécimal à 6 chiffres](/fr/docs/Web/CSS/color_value#rgb_colors), préfixé par un « `#` ». L'un des [mots-clés de couleur](/fr/docs/Web/CSS/color_value#color_keywords) prédéfinis peut également être utilisé.
+
+    Pour obtenir un effet similaire, utilisez la propriété CSS [`background-color`](/fr/docs/Web/CSS/background-color).
+
+- **`char`** {{deprecated_inline}}
+  - : Cet attribut spécifie l'alignement du contenu d'un groupe de colonnes sur un caractère. Les valeurs typiques de cet attribut comprennent un point (.) lorsqu'on tente d'aligner des chiffres ou des valeurs monétaires. Si [`align`](#attr-align) n'est pas défini sur `char`, cet attribut est ignoré, bien qu'il sera toujours utilisé comme valeur par défaut pour le [`align`](/fr/docs/Web/HTML/Element/col#attr-align) du [`<col>`](/fr/docs/Web/HTML/Element/col) qui sont membres de ce groupe de colonnes.
+- **`charoff`** {{deprecated_inline}}
+  - : Cet attribut est utilisé pour indiquer le nombre de caractères pour décaler les données de la colonne par rapport au caractère d'alignement spécifié par l'attribut `char`.
+- **`valign`** {{deprecated_inline}}
+
+  - : Cet attribut spécifie l'alignement vertical du texte dans chaque cellule de la colonne. Les valeurs possibles de cet attribut sont les suivantes :
+
+    - `baseline`, mettra le texte aussi près du bas de la cellule que possible, mais l'alignera sur la [ligne de base](<https://fr.wikipedia.org/wiki/Ligne_de_base_(typographie)>) des caractères au lieu du bas de ceux-ci. Si les caractères sont tous de la même taille, cela a le même effet que `bottom` ;
+    - `bottom`, placera le texte aussi près du bas de la cellule que possible ;
+    - `middle`, permet de centrer le texte dans la cellule ;
+    - and `top`, placera le texte aussi près du haut de la cellule que possible.
+
+    > **Note :**
+    >
+    > - N'essayez pas de définir la propriété [`vertical-align`](/fr/docs/Web/CSS/vertical-align) sur un sélecteur donnant un élément `<col>`. Comme les éléments [`<td>`](/fr/docs/Web/HTML/Element/td) ne sont pas des descendants de l'élément `<col>`, ils n'en hériteront pas.
+    > - Si le tableau n'utilise pas d'attribut [`colspan`](/fr/docs/Web/HTML/Element/td#attr-colspan), utilisez le sélecteur CSS `td:nth-child(an+b)` où a est le nombre total de colonnes du tableau et b la position ordinale de la colonne dans le tableau. Ce n'est qu'après ce sélecteur que la propriété `vertical-align` peut être utilisée.
+    > - Si le tableau utilise bien un attribut [`colspan`](/fr/docs/Web/HTML/Element/td#attr-colspan), l'effet peut être obtenu en combinant des sélecteurs d'attributs CSS adéquats comme `[colspan=n]`, bien que cela ne soit pas trivial.
+
+## Exemples
+
+Veuillez consulter la page [`<table>`](/fr/docs/Web/HTML/Element/table) pour des exemples sur `<colgroup>`.
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- Les propriétés et pseudo-classes CSS notamment utiles pour mettre en forme l'élément `<col>` :
+
+  - la propriété [`width`](/fr/docs/Web/CSS/width) pour contrôler la largeur de la colonne ;
+  - la pseudo-classe [`:nth-child`](/fr/docs/Web/CSS/:nth-child) pour définir l'alignement des cellules de la colonne ;
+  - la propriété [`text-align`](/fr/docs/Web/CSS/text-align) pour aligner le contenu de toutes les cellules sur le même caractère, comme « . ».
diff --git a/files/fr/web/html/element/content/index.md b/files/fr/web/html/element/content/index.md
index 65be830bb8..d192759d73 100644
--- a/files/fr/web/html/element/content/index.md
+++ b/files/fr/web/html/element/content/index.md
@@ -16,31 +16,43 @@ tags:
 translation_of: Web/HTML/Element/content
 browser-compat: html.elements.content
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.</p>
-</div>
+> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.
 
-<p>L'élément HTML <strong><code>&lt;content&gt;</code></strong> — une partie obsolète de la suite de technologies <a href="/fr/docs/Web/Web_Components">Web Components</a> — était utilisé à l'intérieur de <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> comme un point d'insertion, et n'était pas destiné à être utilisé dans du HTML ordinaire. Il a maintenant été remplacé par l'élément <a href="/fr/docs/Web/HTML/Element/slot"><code>&lt;slot&gt;</code></a>, qui crée un point dans le DOM où un Shadow DOM peut être inséré.</p>
+L'élément HTML **`<content>`** — une partie obsolète de la suite de technologies [Web Components](/fr/docs/Web/Web_Components) — était utilisé à l'intérieur de [Shadow DOM](/fr/docs/Web/Web_Components/Using_shadow_DOM) comme un point d'insertion, et n'était pas destiné à être utilisé dans du HTML ordinaire. Il a maintenant été remplacé par l'élément [`<slot>`](/fr/docs/Web/HTML/Element/slot), qui crée un point dans le DOM où un Shadow DOM peut être inséré.
 
-<div class="note">
-  <p><strong>Note :</strong>Bien que présent dans les premières versions des spécifications et mis en œuvre dans plusieurs navigateurs, cet élément a été supprimé dans les versions ultérieures de la spécification, et ne doit pas être utilisé. Il est documenté ici pour aider à adapter le code écrit à l'époque où il était inclus dans la spécification afin qu'il fonctionne avec les versions plus récentes de la spécification.</p>
-</div>
+> **Note :**Bien que présent dans les premières versions des spécifications et mis en œuvre dans plusieurs navigateurs, cet élément a été supprimé dans les versions ultérieures de la spécification, et ne doit pas être utilisé. Il est documenté ici pour aider à adapter le code écrit à l'époque où il était inclus dans la spécification afin qu'il fonctionne avec les versions plus récentes de la spécification.
 
 <table class="properties">
-    <tbody>
+  <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#transparent_content_model">Contenu transparent</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a
+          href="/fr/docs/Web/Guide/HTML/Content_categories#transparent_content_model"
+          >Contenu transparent</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td> 	Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
@@ -48,67 +60,66 @@ browser-compat: html.elements.content
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLContentElement"><code>HTMLContentElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLContentElement"
+          ><code>HTMLContentElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
- </table>
+</table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme pour tous les éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur <code>&lt;content&gt;</code>.</p>
+Comme pour tous les éléments, on peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes) sur `<content>`.
 
-<dl>
-  <dt><code>select</code></dt>
-  <dd>Une liste de sélecteurs séparés par des virgules. La syntaxe utilisée est la même que celle utilisée pour les sélecteurs CSS. Ils permettent de sélectionner le contenu à insérer à la place de l'élément <code>&lt;content&gt;</code>.</dd>
-</dl>
+- `select`
+  - : Une liste de sélecteurs séparés par des virgules. La syntaxe utilisée est la même que celle utilisée pour les sélecteurs CSS. Ils permettent de sélectionner le contenu à insérer à la place de l'élément `<content>`.
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<p>Voici un exemple simple d'utilisation de l'élément <code>&lt;content&gt;</code>. Il s'agit d'un fichier HTML It is an HTML file with everything needed in it.</p>
+Voici un exemple simple d'utilisation de l'élément `<content>`. Il s'agit d'un fichier HTML It is an HTML file with everything needed in it.
 
-<div class="note">
-  <p><strong>Note :</strong>Pour que ce code fonctionne, le navigateur utilisé doit prendre en charge les composants web (voir par exemple <a href="/fr/docs/Web/Web_Components#enabling_web_components_in_firefox">l'activation des composants web dans Firefox</a>).</p>
-</div>
+> **Note :**Pour que ce code fonctionne, le navigateur utilisé doit prendre en charge les composants web (voir par exemple [l'activation des composants web dans Firefox](/fr/docs/Web/Web_Components#enabling_web_components_in_firefox)).
 
-<pre class="brush: html">&lt;html&gt;
-  &lt;head&gt;&lt;/head&gt;
-  &lt;body&gt;
-  &lt;!-- Le contenu original auquel on accède via &lt;content&gt; --&gt;
-  &lt;div&gt;
-    &lt;h4&gt;L'en-tête de mon contenu&lt;/h4&gt;
-    &lt;p&gt;Le texte de mon contenu&lt;/p&gt;
-  &lt;/div&gt;
+```html
+<html>
+  <head></head>
+  <body>
+  <!-- Le contenu original auquel on accède via <content> -->
+  <div>
+    <h4>L'en-tête de mon contenu</h4>
+    <p>Le texte de mon contenu</p>
+  </div>
 
-  &lt;script&gt;
-  // On récupère le &lt;div&gt; ci-avant.
+  <script>
+  // On récupère le <div> ci-avant.
   var myContent = document.querySelector('div');
-  // On crée un shadow DOM sur le &lt;div&gt;
+  // On crée un shadow DOM sur le <div>
   var shadowroot = myContent.createShadowRoot();
   // On ajoute un nouvel en-tête dans le shadow DOM
   // et on conserve le paragraphe original.
   shadowroot.innerHTML =
-   '&lt;h2&gt;Titre inséré&lt;/h2&gt; &lt;content select="p"&gt;&lt;/content&gt;';
-  &lt;/script&gt;
+   '<h2>Titre inséré</h2> <content select="p"></content>';
+  </script>
 
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+  </body>
+</html>
+```
 
-<p>Si vous l'affichez dans un navigateur web, il devrait ressembler à ce qui suit.</p>
+Si vous l'affichez dans un navigateur web, il devrait ressembler à ce qui suit.
 
-<p><img alt="Contenu de l'exemple" src="content-example.png"></p>
+![Contenu de l'exemple](content-example.png)
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>Ce document ne fait plus partie d'aucune spécification.</p>
+Ce document ne fait plus partie d'aucune spécification.
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/Web_Components">Web Components</a></li>
-  <li>Les éléments <a href="/fr/docs/Web/HTML/Element/Shadow"><code>&lt;shadow&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/slot"><code>&lt;slot&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/template"><code>&lt;template&gt;</code></a></li>
- </ul>
+- [Web Components](/fr/docs/Web/Web_Components)
+- Les éléments [`<shadow>`](/fr/docs/Web/HTML/Element/Shadow), [`<slot>`](/fr/docs/Web/HTML/Element/slot), [`<template>`](/fr/docs/Web/HTML/Element/template)
diff --git a/files/fr/web/html/element/data/index.md b/files/fr/web/html/element/data/index.md
index 9bf13456b6..a020aec6fb 100644
--- a/files/fr/web/html/element/data/index.md
+++ b/files/fr/web/html/element/data/index.md
@@ -1,5 +1,5 @@
 ---
-title: "<data> : l'élément de données"
+title: '<data> : l''élément de données'
 slug: Web/HTML/Element/data
 tags:
   - Element
@@ -10,33 +10,63 @@ tags:
 translation_of: Web/HTML/Element/data
 browser-compat: html.elements.data
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;data&gt;</code></strong> relie un contenu à une version de ce contenu interprétable par un ordinateur. Si le contenu possède une composante temporelle, l'élément <a href="/fr/docs/Web/HTML/Element/time"><code>&lt;time&gt;</code></a> doit être utilisé.</p>
+L'élément HTML **`<data>`** relie un contenu à une version de ce contenu interprétable par un ordinateur. Si le contenu possède une composante temporelle, l'élément [`<time>`](/fr/docs/Web/HTML/Element/time) doit être utilisé.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/data.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/data.html", "tabbed-shorter")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >Contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td> 	Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Éléments parents autorisés</th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
-     </tr>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -44,42 +74,43 @@ browser-compat: html.elements.data
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLDataElement"><code>HTMLDataElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLDataElement"
+          ><code>HTMLDataElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur <code>&lt;data&gt;</code>.</p>
+Comme pour tous les autres éléments, on peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes) sur `<data>`.
 
-<dl>
-  <dt><code>value</code></dt>
-  <dd>Cet attribut définit la version du contenu qui doit être interprétée par une machine.</dd>
-</dl>
+- `value`
+  - : Cet attribut définit la version du contenu qui doit être interprétée par une machine.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, on affiche des noms de produits avec des codes correspondants :</p>
+Dans l'exemple suivant, on affiche des noms de produits avec des codes correspondants :
 
-<pre class="brush: html">&lt;p&gt;Nouveaux produits&lt;/p&gt;
-&lt;ul&gt;
-  &lt;li&gt;&lt;data value="3251546"&gt;Mini voiture&lt;/data&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;data value="5867654"&gt;Grande voiture&lt;/data&gt;&lt;/li&gt;
-  &lt;li&gt;&lt;data value="9887635"&gt;Énorme voiture&lt;/data&gt;&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+```html
+<p>Nouveaux produits</p>
+<ul>
+  <li><data value="3251546">Mini voiture</data></li>
+  <li><data value="5867654">Grande voiture</data></li>
+  <li><data value="9887635">Énorme voiture</data></li>
+</ul>
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément <a href="/fr/docs/Web/HTML/Element/time"><code>&lt;time&gt;</code></a>.</li>
-</ul>
+- L'élément [`<time>`](/fr/docs/Web/HTML/Element/time).
diff --git a/files/fr/web/html/element/datalist/index.md b/files/fr/web/html/element/datalist/index.md
index 94845bfd17..6de10c3a35 100644
--- a/files/fr/web/html/element/datalist/index.md
+++ b/files/fr/web/html/element/datalist/index.md
@@ -11,33 +11,64 @@ tags:
 translation_of: Web/HTML/Element/datalist
 browser-compat: html.elements.datalist
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;datalist&gt;</code></strong> contient un ensemble d'éléments <a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a> qui représentent les valeurs possibles pour d'autres contrôles.</p>
+L'élément HTML **`<datalist>`** contient un ensemble d'éléments [`<option>`](/fr/docs/Web/HTML/Element/Option) qui représentent les valeurs possibles pour d'autres contrôles.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/datalist.html", "tabbed-standard")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td>Soit <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">du contenu phrasé</a> ou zéro ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a>.</td>
+      <td>
+        Soit
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >du contenu phrasé</a
+        >
+        ou zéro ou plusieurs éléments
+        <a href="/fr/docs/Web/HTML/Element/Option"><code>&#x3C;option></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>N'importe quel élément qui accepte <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">du contenu phrasé</a>.</td>
+      <td>
+        N'importe quel élément qui accepte
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >du contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/listbox_role"><code>listbox</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/Accessibility/ARIA/Roles/listbox_role"
+          ><code>listbox</code></a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -45,45 +76,49 @@ browser-compat: html.elements.datalist
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLDataListElement"><code>HTMLDataListElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLDataListElement"
+          ><code>HTMLDataListElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément ne possède que <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>, communs à tous les éléments.</p>
+Cet élément ne possède que [les attributs universels](/fr/docs/Web/HTML/Global_attributes), communs à tous les éléments.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="basic_datalist">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;label for="monNavigateur"&gt;Veuillez choisir un navigateur parmi ceux-ci :&lt;/label&gt;
-&lt;input list="navigateurs" id="monNavigateur" name="monNavigateur"/&gt;
-&lt;datalist id="navigateurs"&gt;
-  &lt;option value="Chrome"&gt;
-  &lt;option value="Firefox"&gt;
-  &lt;option value="Internet Explorer"&gt;
-  &lt;option value="Opera"&gt;
-  &lt;option value="Safari"&gt;
-  &lt;option value="Microsoft Edge"&gt;
-&lt;/datalist&gt;</pre>
+```html
+<label for="monNavigateur">Veuillez choisir un navigateur parmi ceux-ci :</label>
+<input list="navigateurs" id="monNavigateur" name="monNavigateur"/>
+<datalist id="navigateurs">
+  <option value="Chrome">
+  <option value="Firefox">
+  <option value="Internet Explorer">
+  <option value="Opera">
+  <option value="Safari">
+  <option value="Microsoft Edge">
+</datalist>
+```
 
-<h4 id="result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("examples", "", 100)}}</p>
+{{EmbedLiveSample("examples", "", 100)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> et plus précisément son attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-list"><code>list</code></a>.</li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a>.</li>
-</ul>
+- L'élément [`<input>`](/fr/docs/Web/HTML/Element/Input) et plus précisément son attribut [`list`](/fr/docs/Web/HTML/Element/Input#attr-list).
+- L'élément [`<option>`](/fr/docs/Web/HTML/Element/Option).
diff --git a/files/fr/web/html/element/dd/index.md b/files/fr/web/html/element/dd/index.md
index 640a75a714..5eb2c4cef8 100644
--- a/files/fr/web/html/element/dd/index.md
+++ b/files/fr/web/html/element/dd/index.md
@@ -15,33 +15,62 @@ tags:
 translation_of: Web/HTML/Element/dd
 browser-compat: html.elements.dd
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;dd&gt;</code></strong> fournit la description, la définition ou la valeur du terme précédent (<a href="/fr/docs/Web/HTML/Element/dt"><code>&lt;dt&gt;</code></a>) dans une liste de description (<a href="/fr/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a>).</p>
+L'élément HTML **`<dd>`** fournit la description, la définition ou la valeur du terme précédent ([`<dt>`](/fr/docs/Web/HTML/Element/dt)) dans une liste de description ([`<dl>`](/fr/docs/Web/HTML/Element/dl)).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/dd.html","tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/dd.html","tabbed-standard")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
       <td>Aucune.</td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Cet élément doit avoir une balise ouvrante. La balise de fin peut être omise s'il est immédiatement suivi par un autre élément <code>&lt;dd&gt;</code> ou un autre élément <code>&lt;dt&gt;</code> ou s'il n'y a plus d'autre contenu dans l'élément parent.</td>
+      <td>
+        Cet élément doit avoir une balise ouvrante. La balise de fin peut être
+        omise s'il est immédiatement suivi par un autre élément
+        <code>&#x3C;dd></code> ou un autre élément <code>&#x3C;dt></code> ou
+        s'il n'y a plus d'autre contenu dans l'élément parent.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Au sein d'un élément <a href="/fr/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a> après un élément <a href="/fr/docs/Web/HTML/Element/dt"><code>&lt;dt&gt;</code></a> ou après un élément <a href="/fr/docs/Web/HTML/Element/dd"><code>&lt;dd&gt;</code></a>. Sinon (selon le WHATWG), au sein d'un élément <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> situé dans un élément <a href="/fr/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a>.</td>
+      <td>
+        Au sein d'un élément
+        <a href="/fr/docs/Web/HTML/Element/dl"><code>&#x3C;dl></code></a> après
+        un élément
+        <a href="/fr/docs/Web/HTML/Element/dt"><code>&#x3C;dt></code></a> ou
+        après un élément
+        <a href="/fr/docs/Web/HTML/Element/dd"><code>&#x3C;dd></code></a
+        >. Sinon (selon le WHATWG), au sein d'un élément
+        <a href="/fr/docs/Web/HTML/Element/div"><code>&#x3C;div></code></a>
+        situé dans un élément
+        <a href="/fr/docs/Web/HTML/Element/dl"><code>&#x3C;dl></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://w3c.github.io/aria/#definition"><code>definition</code></a></td>
+      <td>
+        <a href="https://w3c.github.io/aria/#definition"
+          ><code>definition</code></a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -49,35 +78,33 @@ browser-compat: html.elements.dd
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<dl>
-  <dt><code>nowrap</code> {{non-standard_inline}}</dt>
-  <dd>Si la valeur de cet attribut est <code>yes</code>, il n'y aura pas de retour à la ligne si le texte de la définition dépasse la taille de la ligne. La valeur par défaut est <code>no</code>.</dd>
-</dl>
+- `nowrap` {{non-standard_inline}}
+  - : Si la valeur de cet attribut est `yes`, il n'y aura pas de retour à la ligne si le texte de la définition dépasse la taille de la ligne. La valeur par défaut est `no`.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>Pour des exemples, voir les <a href="/fr/docs/Web/HTML/Element/dl#examples">exemples fournis pour l'élément <code>&lt;dl&gt;</code></a>.</p>
+Pour des exemples, voir les [exemples fournis pour l'élément `<dl>`](/fr/docs/Web/HTML/Element/dl#examples).
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/dt"><code>&lt;dt&gt;</code></a></li>
-</ul>
+- L'élément [`<dl>`](/fr/docs/Web/HTML/Element/dl)
+- L'élément [`<dt>`](/fr/docs/Web/HTML/Element/dt)
diff --git a/files/fr/web/html/element/del/index.md b/files/fr/web/html/element/del/index.md
index b4b1b21928..fc1d6ac70b 100644
--- a/files/fr/web/html/element/del/index.md
+++ b/files/fr/web/html/element/del/index.md
@@ -12,23 +12,40 @@ tags:
 translation_of: Web/HTML/Element/del
 browser-compat: html.elements.del
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;del&gt;</code> </strong>représente une portion de texte ayant été supprimée d'un document. Cet élément est souvent (mais pas nécessairement) affiché rayé. L'élément <a href="/fr/docs/Web/HTML/Element/ins"><code>&lt;ins&gt;</code></a> est quant à lui utilisé pour représenter des portions de texte ajoutées.</p>
+L'élément HTML **`<del>` **représente une portion de texte ayant été supprimée d'un document. Cet élément est souvent (mais pas nécessairement) affiché rayé. L'élément [`<ins>`](/fr/docs/Web/HTML/Element/ins) est quant à lui utilisé pour représenter des portions de texte ajoutées.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/del.html", "tabbed-standard")}}
 
-<p>Cet élément est souvent (mais pas nécessairement) rendu en appliquant un style barré au texte.</p>
+Cet élément est souvent (mais pas nécessairement) rendu en appliquant un style barré au texte.
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</ahttp></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phras.c3.a9">Contenu phrasé</a> ou <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_phras.c3.a9"
+          >Contenu phrasé</a
+        >
+        ou
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#transparent_content_model">Transparent</a>.</td>
+      <td>
+        <a
+          href="/fr/docs/Web/Guide/HTML/Content_categories#transparent_content_model"
+          >Transparent</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
@@ -36,11 +53,20 @@ browser-compat: html.elements.del
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#cphrasing_content">contenu phrasé</a>.</td>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#cphrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -48,71 +74,71 @@ browser-compat: html.elements.del
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLModElement"><code>HTMLModElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLModElement"
+          ><code>HTMLModElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur <code>&lt;del&gt;</code>.</p>
+Comme pour tous les autres éléments, on peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes) sur `<del>`.
 
-<dl>
-  <dt><code>cite</code></dt>
-  <dd>Une URL pour une ressource expliquant le changement (cela peut être un procès verbal d'une réunion par exemple).</dd>
-  <dt><code>datetime</code></dt>
-  <dd>Cet attribut indique l'heure et la date du changement et doit être une date valide avec une heure facultative. Si la valeur ne peut pas être analysée comme telle, l'élément n'aura pas d'information temporelle associée. Voir <a href="/fr/docs/Web/HTML/Date_and_time_formats">l'article sur les formats</a> pour la représentation d'<a href="/fr/docs/Web/HTML/Date_and_time_formats#date_strings">une date seule</a> ou d'<a href="/fr/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings">une date avec une heure</a>.</dd>
-</dl>
+- `cite`
+  - : Une URL pour une ressource expliquant le changement (cela peut être un procès verbal d'une réunion par exemple).
+- `datetime`
+  - : Cet attribut indique l'heure et la date du changement et doit être une date valide avec une heure facultative. Si la valeur ne peut pas être analysée comme telle, l'élément n'aura pas d'information temporelle associée. Voir [l'article sur les formats](/fr/docs/Web/HTML/Date_and_time_formats) pour la représentation d'[une date seule](/fr/docs/Web/HTML/Date_and_time_formats#date_strings) ou d'[une date avec une heure](/fr/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings).
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;p&gt;&lt;del&gt;Ce texte a été supprimé.&lt;/del&gt; mais pas celui-ci&lt;/p&gt;</pre>
+```html
+<p><del>Ce texte a été supprimé.</del> mais pas celui-ci</p>
+```
 
-<h3 id="result">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("examples", "", 100)}}</p>
+{{EmbedLiveSample("examples", "", 100)}}
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément <code>del</code>. On peut le rendre annonçable via la propriété CSS <a href="/fr/docs/Web/CSS/content"><code>content</code></a> et grâce aux pseudo-éléments <a href="/fr/docs/Web/CSS/::before"><code>::before</code></a> et <a href="/fr/docs/Web/CSS/::after"><code>::after</code></a>.</p>
+Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément `del`. On peut le rendre annonçable via la propriété CSS [`content`](/fr/docs/Web/CSS/content) et grâce aux pseudo-éléments [`::before`](/fr/docs/Web/CSS/::before) et [`::after`](/fr/docs/Web/CSS/::after).
 
-<pre>del::before,
-del::after {
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
+    del::before,
+    del::after {
+      clip-path: inset(100%);
+      clip: rect(1px, 1px, 1px, 1px);
+      height: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
 
-del::before {
-  content: " [Début de la suppression]";
-}
+    del::before {
+      content: " [Début de la suppression]";
+    }
 
-del::after {
-  content: " [Fin de la suppression] ";
-}</pre>
+    del::after {
+      content: " [Fin de la suppression] ";
+    }
 
-<p>Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été supprimé.</p>
+Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été supprimé.
 
-<ul>
-  <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">Short note on making your mark (more accessible) | The Paciello Group</a> <small>(en anglais)</small></li>
-  <li><a href="https://adrianroselli.com/2017/12/tweaking-text-level-styles.html">Tweaking Text Level Styles | Adrian Roselli</a> <small>(en anglais)</small></li>
-</ul>
+- [Short note on making your mark (more accessible) | The Paciello Group](https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/) (en anglais)
+- [Tweaking Text Level Styles | Adrian Roselli](https://adrianroselli.com/2017/12/tweaking-text-level-styles.html) (en anglais)
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/ins"><code>&lt;ins&gt;</code></a> permet de représenter les insertions dans un texte</li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/s"><code>&lt;s&gt;</code></a> permet de représenter des portions de texte qui ne sont plus pertinentes (elles sont généralement barrées)</li>
-</ul>
+- L'élément [`<ins>`](/fr/docs/Web/HTML/Element/ins) permet de représenter les insertions dans un texte
+- L'élément [`<s>`](/fr/docs/Web/HTML/Element/s) permet de représenter des portions de texte qui ne sont plus pertinentes (elles sont généralement barrées)
diff --git a/files/fr/web/html/element/details/index.md b/files/fr/web/html/element/details/index.md
index c597a7e084..e034b44d5d 100644
--- a/files/fr/web/html/element/details/index.md
+++ b/files/fr/web/html/element/details/index.md
@@ -13,49 +13,76 @@ tags:
 translation_of: Web/HTML/Element/details
 browser-compat: html.elements.details
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;details&gt;</code></strong> est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément <a href="/fr/docs/Web/HTML/Element/summary"><code>&lt;summary&gt;</code></a>.</p>
+L'élément HTML **`<details>`** est utilisé comme un outil permettant de révéler une information. Un résumé ou un intitulé peuvent être fournis grâce à un élément [`<summary>`](/fr/docs/Web/HTML/Element/summary).
 
-<p>La plupart du temps, le contrôle utilisé pour cet élément est un triangle qui est tourné ou tordu afin d'indiquer si l'élément est révélé ou non. Si le premier élément fils de l'élément <code>&lt;details&gt;</code> est un élément <code>&lt;summary&gt;</code>, c'est le contenu de ce dernier qui est utilisé comme intitulé pour le contenu à révéler (l'intitulé est donc toujours visible).</p>
+La plupart du temps, le contrôle utilisé pour cet élément est un triangle qui est tourné ou tordu afin d'indiquer si l'élément est révélé ou non. Si le premier élément fils de l'élément `<details>` est un élément `<summary>`, c'est le contenu de ce dernier qui est utilisé comme intitulé pour le contenu à révéler (l'intitulé est donc toujours visible).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/details.html", "tabbed-standard")}}
 
-<div class="note">
-  <p><strong>Note :</strong>L'utilisation courante d'un triangle qui tourne ou s'enroule pour représenter l'ouverture ou la fermeture du widget explique pourquoi on les appelle parfois « twisties » en anglais.</p>
-</div>
+> **Note :**L'utilisation courante d'un triangle qui tourne ou s'enroule pour représenter l'ouverture ou la fermeture du widget explique pourquoi on les appelle parfois « twisties » en anglais.
 
-<p>Un widget <code>&lt;details&gt;</code> peut être dans l'un des deux états suivants. L'état par défaut <em>fermé</em> affiche uniquement le triangle et l'étiquette à l'intérieur du <code>&lt;summary&gt;</code> (ou une chaîne par défaut définie par <a href="/fr/docs/Glossary/User_agent">l'agent utilisateur</a> si aucun <code>&lt;summary&gt;</code>).</p>
+Un widget `<details>` peut être dans l'un des deux états suivants. L'état par défaut _fermé_ affiche uniquement le triangle et l'étiquette à l'intérieur du `<summary>` (ou une chaîne par défaut définie par [l'agent utilisateur](/fr/docs/Glossary/User_agent) si aucun `<summary>`).
 
-<p>Lorsque l'utilisateur clique sur le widget ou le met au point, puis appuie sur la barre d'espacement, il s'ouvre par "torsion", révélant son contenu :</p>
+Lorsque l'utilisateur clique sur le widget ou le met au point, puis appuie sur la barre d'espacement, il s'ouvre par "torsion", révélant son contenu :
 
-<p>À partir de là, vous pouvez utiliser les feuilles de style en cascade pour donner un style au widget de divulgation, et vous pouvez ouvrir et fermer le widget de façon programmatique en définissant ou en supprimant son attribut <a href="/fr/docs/Web/HTML/Element/details#attr-open"><code>open</code></a>.</p>
+À partir de là, vous pouvez utiliser les feuilles de style en cascade pour donner un style au widget de divulgation, et vous pouvez ouvrir et fermer le widget de façon programmatique en définissant ou en supprimant son attribut [`open`](/fr/docs/Web/HTML/Element/details#attr-open).
 
-<p>Par défaut, lorsqu'il est fermé, le widget est seulement assez haut pour afficher le triangle de divulgation et le résumé. Lorsqu'il est ouvert, il s'étend pour afficher les détails qu'il contient.</p>
+Par défaut, lorsqu'il est fermé, le widget est seulement assez haut pour afficher le triangle de divulgation et le résumé. Lorsqu'il est ouvert, il s'étend pour afficher les détails qu'il contient.
 
-<div class="note">
-  <p><strong>Note :</strong>Malheureusement, à l'heure actuelle, il n'existe aucun moyen intégré d'animer la transition entre l'ouverture et la fermeture.</p>
-</div>
+> **Note :**Malheureusement, à l'heure actuelle, il n'existe aucun moyen intégré d'animer la transition entre l'ouverture et la fermeture.
 
-<p>Les implémentations entièrement conformes aux normes appliquent automatiquement le code CSS <code><a href="/fr/docs/Web/CSS/display">display</a>: list-item</code> à l'élément <a href="/fr/docs/Web/HTML/Element/summary"><code>&lt;summary&gt;</code></a>. Vous pouvez l'utiliser pour personnaliser davantage son apparence. Voir <a href="#customizing_the_disclosure_widget">personnaliser le marqueur de révélation</a> pour plus de détails.</p>
+Les implémentations entièrement conformes aux normes appliquent automatiquement le code CSS `display: list-item` à l'élément [`<summary>`](/fr/docs/Web/HTML/Element/summary). Vous pouvez l'utiliser pour personnaliser davantage son apparence. Voir [personnaliser le marqueur de révélation](#customizing_the_disclosure_widget) pour plus de détails.
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, racine de section, <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >, racine de section,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content"
+          >contenu interactif</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td>Un élément <a href="/fr/docs/Web/HTML/Element/summary"><code>&lt;summary&gt;</code></a> suivi par du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td>
+      <td>
+        Un élément
+        <a href="/fr/docs/Web/HTML/Element/summary"
+          ><code>&#x3C;summary></code></a
+        >
+        suivi par du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
@@ -67,85 +94,91 @@ browser-compat: html.elements.details
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLDetailsElement"><code>HTMLDetailsElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLDetailsElement"
+          ><code>HTMLDetailsElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme tous les éléments HTML, cet élément accepte les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p>
+Comme tous les éléments HTML, cet élément accepte les [attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<dl>
-  <dt><code>open</code></dt>
-  <dd>
-    <p>Cet attribut booléen indique si les détails — c'est-à-dire le contenu de l'élément <code>&lt;details&gt;</code> — sont actuellement visibles ou non. Les détails sont affichés lorsque cet attribut existe, ou cachés lorsque cet attribut est absent. Par défaut, cet attribut est absent, ce qui signifie que les détails ne sont pas visibles.</p>
+- `open`
 
-    <div class="note">
-      <p><strong>Note :</strong>Vous devez supprimer entièrement cet attribut pour que les détails soient cachés. Attention, <code>open="false"</code> rend les détails visibles, car cet attribut est booléen.</p>
-    </div>
-  </dd>
-</dl>
+  - : Cet attribut booléen indique si les détails — c'est-à-dire le contenu de l'élément `<details>` — sont actuellement visibles ou non. Les détails sont affichés lorsque cet attribut existe, ou cachés lorsque cet attribut est absent. Par défaut, cet attribut est absent, ce qui signifie que les détails ne sont pas visibles.
 
-<h2 id="Events">Évènements</h2>
+    > **Note :**Vous devez supprimer entièrement cet attribut pour que les détails soient cachés. Attention, `open="false"` rend les détails visibles, car cet attribut est booléen.
 
-<p>En plus des évènements classiques pris en charge par les éléments HTML, l'élément <code>&lt;details&gt;</code> prend en charge l'évènement <a href="/fr/docs/Web/API/HTMLDetailsElement/toggle_event">toggle</a> qui est envoyé sur l'élément lorsque son état change entre ouvert et fermé (que ce soit dans un sens ou dans l'autre). L'évènement est envoyé après que l'état ait été changé et si plusieurs changements d'état ont eu lieu avant que le navigateur envoie l'évènement, le navigateur fusionnera ces évènements en un seul.</p>
+## Évènements
 
-<p>On peut alors écouter cet évènement en JavaScript afin de détecter le changement d'état du contrôle :</p>
+En plus des évènements classiques pris en charge par les éléments HTML, l'élément `<details>` prend en charge l'évènement [toggle](/fr/docs/Web/API/HTMLDetailsElement/toggle_event) qui est envoyé sur l'élément lorsque son état change entre ouvert et fermé (que ce soit dans un sens ou dans l'autre). L'évènement est envoyé après que l'état ait été changé et si plusieurs changements d'état ont eu lieu avant que le navigateur envoie l'évènement, le navigateur fusionnera ces évènements en un seul.
 
-<pre class="brush: js">details.addEventListener("toggle", function(evt){
+On peut alors écouter cet évènement en JavaScript afin de détecter le changement d'état du contrôle :
+
+```js
+details.addEventListener("toggle", function(evt){
   if(details.open) {
     /* l'état est passé en "ouvert" */
   } else {
     /* l'état est passé en "fermé" */
   }
-}, false);</pre>
+}, false);
+```
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="a_simple_disclosure_example">Un exemple simple</h3>
+### Un exemple simple
 
-<p>Dans cet exemple, on utilise un élément <code>&lt;details&gt;</code> sans résumé/intitulé.</p>
+Dans cet exemple, on utilise un élément `<details>` sans résumé/intitulé.
 
-<pre class="brush: html">&lt;details&gt;
-  &lt;p&gt;Il faut un ordinateur équipé d'un système d'exploitation.
+```html
+<details>
+  <p>Il faut un ordinateur équipé d'un système d'exploitation.
   L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte
   de stockage à long terme. Un dispositif d'entrée et un dispositif de
-  sortie sont recommandés.&lt;/p&gt;
-&lt;/details&gt;</pre>
+  sortie sont recommandés.</p>
+</details>
+```
 
-<p>Ici, le navigateur utilisera alors un intitulé par défaut (généralement, ce sera "Détails").</p>
+Ici, le navigateur utilisera alors un intitulé par défaut (généralement, ce sera "Détails").
 
-<p>{{EmbedLiveSample("a_simple_disclosure_example", "", 100)}}</p>
+{{EmbedLiveSample("a_simple_disclosure_example", "", 100)}}
 
-<h3 id="creating_an_open_disclosure_box">Créer un contrôle déjà ouvert</h3>
+### Créer un contrôle déjà ouvert
 
-<p>Pour obtenir une boîte <code>&lt;details&gt;</code> dans un état ouvert, il suffit d'ajouter l'attribut booléen <code>open</code> :</p>
+Pour obtenir une boîte `<details>` dans un état ouvert, il suffit d'ajouter l'attribut booléen `open` :
 
-<pre class="brush: html">&lt;details open&gt;
-  &lt;summary&gt;Configuration requise&lt;/summary&gt;
-  &lt;p&gt;Il faut un ordinateur équipé d'un système d'exploitation.
+```html
+<details open>
+  <summary>Configuration requise</summary>
+  <p>Il faut un ordinateur équipé d'un système d'exploitation.
   L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte
   de stockage à long terme. Un dispositif d'entrée et un dispositif de
-  sortie sont recommandés.&lt;/p&gt;
-&lt;/details&gt;</pre>
+  sortie sont recommandés.</p>
+</details>
+```
 
-<p>Cela se traduit par :</p>
+Cela se traduit par :
 
-<p>{{EmbedLiveSample("creating_an_open_disclosure_box", "", 130)}}</p>
+{{EmbedLiveSample("creating_an_open_disclosure_box", "", 130)}}
 
-<h3 id="customizing_the_appearance">Personnaliser l'apparence</h3>
+### Personnaliser l'apparence
 
-<p>Utilisons un peu de CSS afin de personnaliser l'apparence du contrôle fourni par <code>&lt;details&gt;</code>.</p>
+Utilisons un peu de CSS afin de personnaliser l'apparence du contrôle fourni par `<details>`.
 
-<h4 id="css">CSS</h4>
+#### CSS
 
-<pre class="brush: css">details {
+```css
+details {
   font: 16px "Open Sans", Calibri, sans-serif;
   width: 620px;
 }
 
-details &gt; summary {
+details > summary {
   padding: 2px 6px;
   width: 15em;
   background-color: #ddd;
@@ -154,7 +187,7 @@ details &gt; summary {
   cursor: pointer;
 }
 
-details &gt; p {
+details > p {
   border-radius: 0 0 10px 10px;
   background-color: #ddd;
   padding: 2px 6px;
@@ -164,42 +197,46 @@ details &gt; p {
 
 details[open] > summary {
   background-color: #ccf;
-}</pre>
+}
+```
 
-<p>Ce fragment de feuille de style CSS crée une apparence similaire à un onglet où, lorsqu'on clique sur l'onglet, il s'étend et révèle le contenu.</p>
+Ce fragment de feuille de style CSS crée une apparence similaire à un onglet où, lorsqu'on clique sur l'onglet, il s'étend et révèle le contenu.
 
-<p>Le sélecteur <code>details[open]</code> peut être utilisé pour donner un style à l'élément qui est ouvert.</p>
+Le sélecteur `details[open]` peut être utilisé pour donner un style à l'élément qui est ouvert.
 
-<h4 id="html">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;details open&gt;
-  &lt;summary&gt;Configuration requise&lt;/summary&gt;
-  &lt;p&gt;Il faut un ordinateur équipé d'un système d'exploitation.
+```html
+<details open>
+  <summary>Configuration requise</summary>
+  <p>Il faut un ordinateur équipé d'un système d'exploitation.
   L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte
   de stockage à long terme. Un dispositif d'entrée et un dispositif de
-  sortie sont recommandés.&lt;/p&gt;
-&lt;/details&gt;</pre>
+  sortie sont recommandés.</p>
+</details>
+```
 
-<h4 id="result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("customizing_the_appearance", "", 120)}}</p>
+{{EmbedLiveSample("customizing_the_appearance", "", 120)}}
 
-<h3 id="customizing_the_disclosure_widget">Personnaliser le marqueur de révélation</h3>
+### Personnaliser le marqueur de révélation
 
-<p>Le triangle généralement utilisé peut également être personnalisé. Toutefois, cette fonctionnalité a été standardisée récemment et n'est pas encore largement prise en charge. De plus, la méthode de prise en charge varie encore d'un navigateur à un autre.</p>
+Le triangle généralement utilisé peut également être personnalisé. Toutefois, cette fonctionnalité a été standardisée récemment et n'est pas encore largement prise en charge. De plus, la méthode de prise en charge varie encore d'un navigateur à un autre.
 
-<p>L'élément <a href="/fr/docs/Web/HTML/Element/summary"><code>&lt;summary&gt;</code></a> prend en charge la propriété raccourcie <a href="/fr/docs/Web/CSS/list-style"><code>list-style</code></a> et ses propriétés longues, comme <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a>, pour changer le triangle de divulgation en ce que vous choisissez (généralement avec <a href="/fr/docs/Web/CSS/list-style-image"><code>list-style-image</code></a>). Par exemple, nous pouvons supprimer l'icône du widget de divulgation en définissant <code>list-style : none</code>.</p>
+L'élément [`<summary>`](/fr/docs/Web/HTML/Element/summary) prend en charge la propriété raccourcie [`list-style`](/fr/docs/Web/CSS/list-style) et ses propriétés longues, comme [`list-style-type`](/fr/docs/Web/CSS/list-style-type), pour changer le triangle de divulgation en ce que vous choisissez (généralement avec [`list-style-image`](/fr/docs/Web/CSS/list-style-image)). Par exemple, nous pouvons supprimer l'icône du widget de divulgation en définissant `list-style : none`.
 
-<p>Actuellement, Chrome ne prend pas en charge cette fonctionnalité et il faut utiliser <a href="/fr/docs/Web/CSS/Pseudo-elements">le pseudo-élément</a> spécifique <code>::-webkit-details-marker</code> afin de personnaliser l'apparence.</p>
+Actuellement, Chrome ne prend pas en charge cette fonctionnalité et il faut utiliser [le pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) spécifique `::-webkit-details-marker` afin de personnaliser l'apparence.
 
-<h4 id="css_2">CSS</h4>
+#### CSS
 
-<pre class="brush: css">details {
+```css
+details {
   font: 16px "Open Sans", "Arial", sans-serif;
   width: 620px;
 }
 
-details &gt; summary {
+details > summary {
   padding: 2px 6px;
   width: 15em;
   background-color: #ddd;
@@ -208,44 +245,45 @@ details &gt; summary {
   list-style: none;
 }
 
-details &gt; summary::-webkit-details-marker {
+details > summary::-webkit-details-marker {
   display: none;
 }
 
-details &gt; p {
+details > p {
   border-radius: 0 0 10px 10px;
   background-color: #ddd;
   padding: 2px 6px;
   margin: 0;
   box-shadow: 3px 3px 4px black;
-}</pre>
+}
+```
 
-<p>Ce CSS crée un aspect similaire à celui d'une interface à onglets, où l'activation de l'onglet le développe et l'ouvre pour révéler son contenu.</p>
+Ce CSS crée un aspect similaire à celui d'une interface à onglets, où l'activation de l'onglet le développe et l'ouvre pour révéler son contenu.
 
-<h4 id="html_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;details open&gt;
-  &lt;summary&gt;Configuration requise&lt;/summary&gt;
-  &lt;p&gt;Il faut un ordinateur équipé d'un système d'exploitation.
+```html
+<details open>
+  <summary>Configuration requise</summary>
+  <p>Il faut un ordinateur équipé d'un système d'exploitation.
   L'ordinateur doit disposer d'une mémoire et, idéalement, d'une sorte
   de stockage à long terme. Un dispositif d'entrée et un dispositif de
-  sortie sont recommandés.&lt;/p&gt;
-&lt;/details&gt;</pre>
+  sortie sont recommandés.</p>
+</details>
+```
 
-<h4 id="result_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("customizing_the_disclosure_widget", "", 120)}}</p>
+{{EmbedLiveSample("customizing_the_disclosure_widget", "", 120)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/summary"><code>&lt;summary&gt;</code></a></li>
-</ul>
+- L'élément [`<summary>`](/fr/docs/Web/HTML/Element/summary)
diff --git a/files/fr/web/html/element/dfn/index.md b/files/fr/web/html/element/dfn/index.md
index d370093857..6ea9cc1139 100644
--- a/files/fr/web/html/element/dfn/index.md
+++ b/files/fr/web/html/element/dfn/index.md
@@ -14,33 +14,62 @@ tags:
 translation_of: Web/HTML/Element/dfn
 browser-compat: html.elements.dfn
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;dfn&gt;</code></strong> (aussi nommé « définition ») est utilisé pour indiquer le terme défini dans le contexte d'une expression ou d'une phrase de définition. L'élément <a href="/fr/docs/Web/HTML/Element/p"><code>&lt;p&gt;</code></a>, le couple <a href="/fr/docs/Web/HTML/Element/dt"><code>&lt;dt&gt;</code></a>/<a href="/fr/docs/Web/HTML/Element/dd"><code>&lt;dd&gt;</code></a> ou l'élément <a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a> qui est le plus proche ancêtre de <code>&lt;dfn&gt;</code> est considéré comme la définition du terme.</p>
+L'élément HTML **`<dfn>`** (aussi nommé « définition ») est utilisé pour indiquer le terme défini dans le contexte d'une expression ou d'une phrase de définition. L'élément [`<p>`](/fr/docs/Web/HTML/Element/p), le couple [`<dt>`](/fr/docs/Web/HTML/Element/dt)/[`<dd>`](/fr/docs/Web/HTML/Element/dd) ou l'élément [`<section>`](/fr/docs/Web/HTML/Element/section) qui est le plus proche ancêtre de `<dfn>` est considéré comme la définition du terme.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/dfn.html", "tabbed-shorter")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a> mais sans élément <code>&lt;dfn&gt;</code> qui soit un descendant.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >Contenu phrasé</a
+        >
+        mais sans élément <code>&#x3C;dfn></code> qui soit un descendant.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://w3c.github.io/aria/#term"><code>term</code></a></td>
+      <td>
+        <a href="https://w3c.github.io/aria/#term"><code>term</code></a>
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -48,130 +77,133 @@ browser-compat: html.elements.dfn
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>.</td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a
+        >.
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme pour tous les éléments, on peut appliquer <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur <code>&lt;dfn&gt;</code>.</p>
+Comme pour tous les éléments, on peut appliquer [les attributs universels](/fr/docs/Web/HTML/Global_attributes) sur `<dfn>`.
 
-<p>Pour cet élément, l'attribut <code><strong>title</strong></code> possède un sens particulier noté ci-après.</p>
+Pour cet élément, l'attribut **`title`** possède un sens particulier noté ci-après.
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>L'utilisation de l'élément <code>&lt;dfn&gt;</code> présente certains aspects peu évidents. Nous les examinons ici.</p>
+L'utilisation de l'élément `<dfn>` présente certains aspects peu évidents. Nous les examinons ici.
 
-<h3 id="specifying_the_term_being_defined">Spécifier le terme à définir</h3>
+### Spécifier le terme à définir
 
-<p>Le terme à définir est identifié selon ces règles :</p>
+Le terme à définir est identifié selon ces règles :
 
-<ol>
-  <li>Si l'élément <code>&lt;dfn&gt;</code> possède un attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-title"><code>title</code></a>, la valeur de l'attribut <code>title</code> est considérée comme étant le terme défini. L'élément doit toujours contenir du texte, mais ce texte peut être une abréviation (peut-être en utilisant <a href="/fr/docs/Web/HTML/Element/abbr"><code>&lt;abbr&gt;</code></a>) ou une autre forme du terme.</li>
-  <li>Si le <code>&lt;dfn&gt;</code> contient un seul élément enfant et n'a pas de contenu textuel propre, et que l'élément enfant est un élément <a href="/fr/docs/Web/HTML/Element/abbr"><code>&lt;abbr&gt;</code></a> avec un attribut <code>title</code> lui-même, alors la valeur exacte du <code>&lt;abbr&gt;</code> de l'élément <code>title</code> est le terme défini.</li>
-  <li>Sinon, le contenu textuel de l'élément <code>&lt;dfn&gt;</code> est le terme défini. Ceci est illustré <a href="#basic_identification_of_a_term">dans le premier exemple ci-dessous</a>.</li>
-</ol>
+1.  Si l'élément `<dfn>` possède un attribut [`title`](/fr/docs/Web/HTML/Global_attributes#attr-title), la valeur de l'attribut `title` est considérée comme étant le terme défini. L'élément doit toujours contenir du texte, mais ce texte peut être une abréviation (peut-être en utilisant [`<abbr>`](/fr/docs/Web/HTML/Element/abbr)) ou une autre forme du terme.
+2.  Si le `<dfn>` contient un seul élément enfant et n'a pas de contenu textuel propre, et que l'élément enfant est un élément [`<abbr>`](/fr/docs/Web/HTML/Element/abbr) avec un attribut `title` lui-même, alors la valeur exacte du `<abbr>` de l'élément `title` est le terme défini.
+3.  Sinon, le contenu textuel de l'élément `<dfn>` est le terme défini. Ceci est illustré [dans le premier exemple ci-dessous](#basic_identification_of_a_term).
 
-<div class="note">
-  <p><strong>Note :</strong>Si l'élément <code>&lt;dfn&gt;</code> possède un attribut <code>title</code>, il <em>doit</em> contenir le terme défini et aucun autre texte.</p>
-</div>
+> **Note :**Si l'élément `<dfn>` possède un attribut `title`, il _doit_ contenir le terme défini et aucun autre texte.
 
-<h3 id="links_to_dfn_elements">Liens vers des éléments de type <code>&lt;dfn&gt;</code></h3>
+### Liens vers des éléments de type `<dfn>`
 
-<p>Si vous incluez un attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> sur l'élément <code>&lt;dfn&gt;</code>, vous pouvez ensuite créer un lien vers celui-ci en utilisant des éléments <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>. Ces liens doivent être des utilisations du terme, l'objectif étant que le lecteur puisse accéder rapidement à la définition du terme s'il ne la connaît pas déjà, en cliquant sur le lien du terme.</p>
+Si vous incluez un attribut [`id`](/fr/docs/Web/HTML/Global_attributes#attr-id) sur l'élément `<dfn>`, vous pouvez ensuite créer un lien vers celui-ci en utilisant des éléments [`<a>`](/fr/docs/Web/HTML/Element/a). Ces liens doivent être des utilisations du terme, l'objectif étant que le lecteur puisse accéder rapidement à la définition du terme s'il ne la connaît pas déjà, en cliquant sur le lien du terme.
 
-<p>C'est ce que montre l'exemple sous <a href="#links_to_definitions">Liens vers les définitions</a> ci-dessous.</p>
+C'est ce que montre l'exemple sous [Liens vers les définitions](#links_to_definitions) ci-dessous.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>Voyons quelques exemples de divers scénarios d'utilisation.</p>
+Voyons quelques exemples de divers scénarios d'utilisation.
 
-<h3 id="basic_identification_of_a_term">Identification simple d'un terme</h3>
+### Identification simple d'un terme
 
-<p>Dans cet exemple, on utilise simplement l'élément <code>&lt;dfn&gt;</code> afin d'identifier l'emplacement du terme défini au sein de sa définition.</p>
+Dans cet exemple, on utilise simplement l'élément `<dfn>` afin d'identifier l'emplacement du terme défini au sein de sa définition.
 
-<h4 id="html">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   L'élément HTML de définition
-  (&lt;strong&gt;&lt;dfn&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;) est
+  (<strong><dfn>&lt;dfn&gt;</dfn></strong>) est
   utilisé afin d'indiquer le terme en cours de
   définition dans la phrase.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<p>L'élément <code>&lt;dfn&gt;</code> n'ayant ici pas d'attribut <code>title</code>, c'est le contenu textuel qui représente le terme que l'on définit.</p>
+L'élément `<dfn>` n'ayant ici pas d'attribut `title`, c'est le contenu textuel qui représente le terme que l'on définit.
 
-<h4 id="result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("basic_identification_of_a_term", "", 120)}}</p>
+{{EmbedLiveSample("basic_identification_of_a_term", "", 120)}}
 
-<h3 id="links_to_definitions">Liens vers des définitions</h3>
+### Liens vers des définitions
 
-<p>Il est possible d'utiliser l'attribut <code>id</code> afin de créer des liens avec des éléments <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> qui pointent vers la définition.</p>
+Il est possible d'utiliser l'attribut `id` afin de créer des liens avec des éléments [`<a>`](/fr/docs/Web/HTML/Element/a) qui pointent vers la définition.
 
-<h4 id="html_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;L'élément de définition
-(&lt;strong&gt;&lt;dfn id="definition-dfn"&gt;&amp;lt;dfn&amp;gt;&lt;/dfn&gt;&lt;/strong&gt;) est
+```html
+<p>L'élément de définition
+(<strong><dfn id="definition-dfn">&lt;dfn&gt;</dfn></strong>) est
 utilisé afin d'indiquer le terme en train d'être défini dans le
-contexte d'une phrase.&lt;/p&gt;
+contexte d'une phrase.</p>
 
-&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece
 donan, Latine voluptatem vocant. Confecta res esset. Duo Reges:
-constructio interrete. Scrupulum, inquam, abeunti; &lt;/p&gt;
+constructio interrete. Scrupulum, inquam, abeunti; </p>
 
-&lt;p&gt;Negare non possum. Dat enim intervalla et relaxat. Quonam modo?
-Equidem e Cn. Quid de Pythagora? In schola desinis. &lt;/p&gt;
+<p>Negare non possum. Dat enim intervalla et relaxat. Quonam modo?
+Equidem e Cn. Quid de Pythagora? In schola desinis. </p>
 
-&lt;p&gt;Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum
+<p>Ubi ut eam caperet aut quando? Cur iustitia laudatur? Aperiendum
 est igitur, quid sit voluptas; Quid enim? Non est igitur voluptas
 bonum. Urgent tamen et nihil remittunt. Quid enim possumus hoc
-agere divinius? &lt;/p&gt;
+agere divinius? </p>
 
-&lt;p&gt;C'est pourquoi nous avons décidé d'utiliser l'élément
-&lt;code&gt;&lt;a href="#definition-dfn"&gt;&amp;lt;dfn&amp;gt;&lt;/a&gt;&lt;/code&gt; pour
-ce projet.&lt;/p&gt;</pre>
+<p>C'est pourquoi nous avons décidé d'utiliser l'élément
+<code><a href="#definition-dfn">&lt;dfn&gt;</a></code> pour
+ce projet.</p>
+```
 
-<p>On voit ici que l'élément possède désormais un attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a> avec la valeur <code>"definition-dfn"</code>. Cet attribut permet d'utiliser l'élément comme cible d'un lien. Plus bas, on crée un tel lien avec un élément <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/a#attr-href"><code>href</code></a> vaut <code>"#definition-dfn"</code>, ce qui permet de remonter à la définition.</p>
+On voit ici que l'élément possède désormais un attribut [`id`](/fr/docs/Web/HTML/Global_attributes#attr-id) avec la valeur `"definition-dfn"`. Cet attribut permet d'utiliser l'élément comme cible d'un lien. Plus bas, on crée un tel lien avec un élément [`<a>`](/fr/docs/Web/HTML/Element/a) dont l'attribut [`href`](/fr/docs/Web/HTML/Element/a#attr-href) vaut `"#definition-dfn"`, ce qui permet de remonter à la définition.
 
-<h4 id="result_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("links_to_definitions", "", 350)}}</p>
+{{EmbedLiveSample("links_to_definitions", "", 350)}}
 
-<h3 id="using_abbreviations_and_definitions_together">Utiliser les abréviations et les définitions</h3>
+### Utiliser les abréviations et les définitions
 
-<p>Dans certains cas, on souhaite utiliser l'abréviation d'un terme lorsqu'on le définit. Pour cela, on peut utiliser <code>&lt;dfn&gt;</code> et <a href="/fr/docs/Web/HTML/Element/abbr"><code>&lt;abbr&gt;</code></a> de la façon suivante :</p>
+Dans certains cas, on souhaite utiliser l'abréviation d'un terme lorsqu'on le définit. Pour cela, on peut utiliser `<dfn>` et [`<abbr>`](/fr/docs/Web/HTML/Element/abbr) de la façon suivante :
 
-<h4 id="html_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Le &lt;dfn&gt;&lt;abbr title="Télescope Spatial Hubble"&gt;TSH&lt;/abbr&gt;&lt;/dfn&gt;
+```html
+<p>Le <dfn><abbr title="Télescope Spatial Hubble">TSH</abbr></dfn>
 est l'un des instruments scientifiques les plus productifs jamais
 construits. Il est en orbite depuis plus de 20 ans, scrutant le ciel
 et renvoyant des données et des photographies d'une qualité et d'un
-niveau de détail sans précédent.&lt;/p&gt;
+niveau de détail sans précédent.</p>
 
-&lt;p&gt;En effet, le &lt;abbr title="Télescope Spatial Hubble"&gt;TSH&lt;/abbr&gt; a sans 
+<p>En effet, le <abbr title="Télescope Spatial Hubble">TSH</abbr> a sans
 doute fait plus pour faire avancer la science que tout autre appareil
-jamais construit.&lt;/p&gt;</pre>
+jamais construit.</p>
+```
 
-<p>On notera que l'élément <code>&lt;abbr&gt;</code> est imbriqué dans l'élément <code>&lt;dfn&gt;</code>. L'élément <code>&lt;abbr&gt;</code> indique que le terme est une abréviation ("HST") et indique le détail de cette abrévation ("Hubble Space Telescope") grâce à son attribut <code>title</code>. L'élément <code>&lt;dfn&gt;</code> indique quant à lui que c'est bien ce terme abrégé qu'on est en train de définir.</p>
+On notera que l'élément `<abbr>` est imbriqué dans l'élément `<dfn>`. L'élément `<abbr>` indique que le terme est une abréviation ("HST") et indique le détail de cette abrévation ("Hubble Space Telescope") grâce à son attribut `title`. L'élément `<dfn>` indique quant à lui que c'est bien ce terme abrégé qu'on est en train de définir.
 
-<h4 id="result_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("using_abbreviations_and_definitions_together", "", 200)}}</p>
+{{EmbedLiveSample("using_abbreviations_and_definitions_together", "", 200)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>Éléments liés aux listes de définitions : <a href="/fr/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/dt"><code>&lt;dt&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/dd"><code>&lt;dd&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/abbr"><code>&lt;abbr&gt;</code></a></li>
-</ul>
+- Éléments liés aux listes de définitions : [`<dl>`](/fr/docs/Web/HTML/Element/dl), [`<dt>`](/fr/docs/Web/HTML/Element/dt), [`<dd>`](/fr/docs/Web/HTML/Element/dd)
+- L'élément [`<abbr>`](/fr/docs/Web/HTML/Element/abbr)
diff --git a/files/fr/web/html/element/dialog/index.md b/files/fr/web/html/element/dialog/index.md
index 8c5051b4b2..e9733eb958 100644
--- a/files/fr/web/html/element/dialog/index.md
+++ b/files/fr/web/html/element/dialog/index.md
@@ -12,113 +12,148 @@ tags:
 translation_of: Web/HTML/Element/dialog
 browser-compat: html.elements.dialog
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <code><strong>&lt;dialog&gt;</strong></code> représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).</p>
+L'élément HTML **`<dialog>`** représente une boite de dialogue ou un composant interactif (par exemple un inspecteur ou une fenêtre).
 
 <table class="properties">
   <tbody>
-   <tr>
-    <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-    <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots"> racine de sectionnement</a>.</td>
-   </tr>
-   <tr>
-    <th scope="row">Contenu autorisé</th>
-    <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>.</td>
-   </tr>
-   <tr>
-    <th scope="row">Omission de balises</th>
-    <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
-   </tr>
-   <tr>
-    <th scope="row">Parents autorisés</th>
-    <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td>
-   </tr>
-   <tr>
-    <th scope="row">Rôle ARIA implicite</th>
-    <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/dialog_role"><code>dialog</code></a></td>
-   </tr>
-   <tr>
-    <th scope="row">Rôles ARIA autorisés</th>
-    <td><a href="https://w3c.github.io/aria/#alertdialog"><code>alertdialog</code></a></td>
-   </tr>
-   <tr>
-    <th scope="row">Interface DOM</th>
-    <td><a href="/fr/docs/Web/API/HTMLDialogElement"><code>HTMLDialogElement</code></a></td>
-   </tr>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots"
+          >racine de sectionnement</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôle ARIA implicite</th>
+      <td>
+        <a href="/fr/docs/Web/Accessibility/ARIA/Roles/dialog_role"
+          ><code>dialog</code></a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>
+        <a href="https://w3c.github.io/aria/#alertdialog"
+          ><code>alertdialog</code></a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLDialogElement"
+          ><code>HTMLDialogElement</code></a
+        >
+      </td>
+    </tr>
   </tbody>
- </table>
+</table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<div class="warning">
-  <p><strong>Attention :</strong> L'attribut <code>tabindex</code> ne doit pas être utilisé sur l'élément <code>&lt;dialog&gt;</code>.</p>
-</div>
+> **Attention :** L'attribut `tabindex` ne doit pas être utilisé sur l'élément `<dialog>`.
 
-<dl>
-  <dt><code>open</code></dt>
-  <dd>Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur.</dd>
-</dl>
+- `open`
+  - : Cet attribut indique que la boîte de dialogue est active et peut être utilisée de façon interactive. Si l'attribut n'est pas renseigné, la boîte de dialogue ne doit pas être présentée à l'utilisateur.
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<ul>
-  <li>Les éléments <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a> peuvent fermer un dialogue s'ils possèdent l'attribut <code>method="dialog"</code>. Lorsqu'un tel formulaire est soumis, le dialogue se ferme avec sa propriété <a href="/fr/docs/Web/API/HTMLDialogElement/returnValue"><code>returnValue</code></a> définie sur la <code>value</code> (valeur) du bouton qui a été utilisé pour soumettre le formulaire.</li>
-  <li>Le pseudo-élément CSS <a href="/fr/docs/Web/CSS/::backdrop"><code>::backdrop</code></a> peut être utilisé pour créer un style derrière un élément <code>&lt;dialog&gt;</code> lorsque le dialogue est affiché avec <a href="/fr/docs/Web/API/HTMLDialogElement/showModal"><code>HTMLDialogElement.showModal()</code></a>. Par exemple, pour atténuer le contenu inaccessible derrière la boîte de dialogue modale.</li>
-</ul>
+- Les éléments [`<form>`](/fr/docs/Web/HTML/Element/Form) peuvent fermer un dialogue s'ils possèdent l'attribut `method="dialog"`. Lorsqu'un tel formulaire est soumis, le dialogue se ferme avec sa propriété [`returnValue`](/fr/docs/Web/API/HTMLDialogElement/returnValue) définie sur la `value` (valeur) du bouton qui a été utilisé pour soumettre le formulaire.
+- Le pseudo-élément CSS [`::backdrop`](/fr/docs/Web/CSS/::backdrop) peut être utilisé pour créer un style derrière un élément `<dialog>` lorsque le dialogue est affiché avec [`HTMLDialogElement.showModal()`](/fr/docs/Web/API/HTMLDialogElement/showModal). Par exemple, pour atténuer le contenu inaccessible derrière la boîte de dialogue modale.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="simple_example">Exemple simple</h3>
+### Exemple simple
 
-<pre class="brush: html">&lt;dialog open&gt;
-  &lt;p&gt;Salutations, à tous et à toutes !&lt;/p&gt;
-&lt;/dialog&gt;</pre>
+```html
+<dialog open>
+  <p>Salutations, à tous et à toutes !</p>
+</dialog>
+```
 
-<h3 id="advanced_example">Exemple avancé</h3>
+### Exemple avancé
 
-<h4 id="html">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;!-- Boîte de dialogue contextuelle simple contenant un formulaire --&gt;
-&lt;dialog id="favDialog"&gt;
-  &lt;form method="dialog"&gt;
-    &lt;p&gt;&lt;label&gt;Animal préféré :
-      &lt;select&gt;
-        &lt;option&gt;&lt;/option&gt;
-        &lt;option&gt;Crevette en saumure&lt;/option&gt;
-        &lt;option&gt;Panda rouge&lt;/option&gt;
-        &lt;option&gt;Singe-araignée&lt;/option&gt;
-      &lt;/select&gt;
-    &lt;/label&gt;&lt;/p&gt;
-    &lt;menu&gt;
-      &lt;button value="cancel"&gt;Annuler&lt;/button&gt;
-      &lt;button id="confirmBtn" value="default"&gt;Confirmer&lt;/button&gt;
-    &lt;/menu&gt;
-  &lt;/form&gt;
-&lt;/dialog&gt;
+```html
+<!-- Boîte de dialogue contextuelle simple contenant un formulaire -->
+<dialog id="favDialog">
+  <form method="dialog">
+    <p><label>Animal préféré :
+      <select>
+        <option></option>
+        <option>Crevette en saumure</option>
+        <option>Panda rouge</option>
+        <option>Singe-araignée</option>
+      </select>
+    </label></p>
+    <menu>
+      <button value="cancel">Annuler</button>
+      <button id="confirmBtn" value="default">Confirmer</button>
+    </menu>
+  </form>
+</dialog>
 
-&lt;menu&gt;
-  &lt;button id="updateDetails"&gt;Mettre à jour les détails&lt;/button&gt;
-&lt;/menu&gt;
+<menu>
+  <button id="updateDetails">Mettre à jour les détails</button>
+</menu>
 
-&lt;output aria-live="polite"&gt;&lt;/output&gt;</pre>
+<output aria-live="polite"></output>
+```
 
-<h4 id="javascript">JavaScript</h4>
+#### JavaScript
 
-<pre class="brush: js">let updateButton = document.getElementById('updateDetails');
+```js
+let updateButton = document.getElementById('updateDetails');
 let favDialog = document.getElementById('favDialog');
 let outputBox = document.querySelector('output');
 let selectEl = document.querySelector('select');
 let confirmBtn = document.getElementById('confirmBtn');
 
-// Le bouton "Mettre à jour les détails" ouvre le &lt;dialogue&gt ; modulaire
+// Le bouton "Mettre à jour les détails" ouvre le <dialogue> ; modulaire
 updateButton.addEventListener('click', function onOpen() {
   if (typeof favDialog.showModal === "function") {
     favDialog.showModal();
   } else {
-    console.error("L'API &lt;dialog&gt; n'est pas prise en charge par ce navigateur.");
+    console.error("L'API <dialog> n'est pas prise en charge par ce navigateur.");
   }
 });
 // L'entrée "Animal favori" définit la valeur du bouton d'envoi.
@@ -129,29 +164,28 @@ selectEl.addEventListener('change', function onSelect(e) {
 // de la boîte de dialogue en raison de [method="dialog"]
 favDialog.addEventListener('close', function onClose() {
   outputBox.value = favDialog.returnValue + " bouton cliqué - " + (new Date()).toString();
-});</pre>
+});
+```
 
-<h4 id="result">Résultat</h3>
+#### Résultat
 
-<p>{{EmbedLiveSample("advanced_example", "", 300)}}</p>
+{{EmbedLiveSample("advanced_example", "", 300)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="Polyfill">Prothèse d'émulation (polyfill)</h2>
+## Prothèse d'émulation (polyfill)
 
-<p>Incluez ce polyfill pour fournir un support aux navigateurs sans élément <code>&lt;dialog&gt;</code> : <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog-polyfill</a>.</p>
+Incluez ce polyfill pour fournir un support aux navigateurs sans élément `<dialog>` : [dialog-polyfill](https://github.com/GoogleChrome/dialog-polyfill).
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'évènement <a href="/fr/docs/Web/Reference/HTMLDialogElement/close_event">close</a></li>
- <li>L'évènement <a href="/fr/docs/Web/Reference/HTMLDialogElement/cancel_event">cancel</a></li>
- <li><a href="/fr/docs/Learn/Forms">Guide sur les formulaires HTML</a></li>
- <li>Le pseudo-élément <a href="/fr/docs/Web/CSS/::backdrop"><code>::backdrop</code></a></li>
-</ul>
+- L'évènement [close](/fr/docs/Web/Reference/HTMLDialogElement/close_event)
+- L'évènement [cancel](/fr/docs/Web/Reference/HTMLDialogElement/cancel_event)
+- [Guide sur les formulaires HTML](/fr/docs/Learn/Forms)
+- Le pseudo-élément [`::backdrop`](/fr/docs/Web/CSS/::backdrop)
diff --git a/files/fr/web/html/element/dir/index.md b/files/fr/web/html/element/dir/index.md
index 40e8f2b9c8..b86031ad2e 100644
--- a/files/fr/web/html/element/dir/index.md
+++ b/files/fr/web/html/element/dir/index.md
@@ -14,53 +14,42 @@ tags:
 translation_of: Web/HTML/Element/dir
 browser-compat: html.elements.dir
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.</p>
-</div>
+> **Attention :** Cette fonctionnalité est obsolète. Bien qu'encore supportée par des navigateurs, son utilisation est découragée pour tout nouveau projet. Évitez de l'utiliser.
 
-<p>L'élément HTML <strong><code>&lt;dir&gt;</code></strong> (pour <em>directory</em>) est utilisé comme un conteneur pour un répertoire (c'est-à-dire un ensemble de fichiers). Des styles et icônes peuvent être appliqués par l'agent utilisateur. Cet élément obsolète ne doit pas être utilisé, il peut être remplacé par l'élément <a href="/fr/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a> qui permet de représenter des listes et, entre autres, des listes de fichiers.</p>
+L'élément HTML **`<dir>`** (pour _directory_) est utilisé comme un conteneur pour un répertoire (c'est-à-dire un ensemble de fichiers). Des styles et icônes peuvent être appliqués par l'agent utilisateur. Cet élément obsolète ne doit pas être utilisé, il peut être remplacé par l'élément [`<ul>`](/fr/docs/Web/HTML/Element/ul) qui permet de représenter des listes et, entre autres, des listes de fichiers.
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cet élément ne doit pas être utilisé. Bien que présent dans les premières spécifications HTML, il a été déprécié dans HTML 4, et rendu obsolète avec HTML5. Il faudra privilégier l'élément <a href="/fr/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a>. De plus, aucun navigateur majeur ne prend en charge cet élément.</p>
-</div>
+> **Attention :** Cet élément ne doit pas être utilisé. Bien que présent dans les premières spécifications HTML, il a été déprécié dans HTML 4, et rendu obsolète avec HTML5. Il faudra privilégier l'élément [`<ul>`](/fr/docs/Web/HTML/Element/ul). De plus, aucun navigateur majeur ne prend en charge cet élément.
 
-<h2 id="dom_interface">Interface DOM</h2>
+## Interface DOM
 
-<p>Cet élément implémente l'interface <a href="/fr/docs/Web/API/HTMLDirectoryElement"><code>HTMLDirectoryElement</code></a>.</p>
+Cet élément implémente l'interface [`HTMLDirectoryElement`](/fr/docs/Web/API/HTMLDirectoryElement).
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme pour tous les autres éléments HTML, on peut utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur cet élément.</p>
+Comme pour tous les autres éléments HTML, on peut utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes) sur cet élément.
 
-<dl>
-  <dt><code>compact</code></dt>
-  <dd>Cet attribut booléen indique que la liste doit être rendue avec un affichage compact. L'interprétation de cet attribut dépend de l'agent utilisateur. Il ne fonctionne pas dans tous les navigateurs.
-  <div class="warning">
-    <p><strong>Attention :</strong> Cet attribut ne doit pas être utilisé, car il a été déprécié. L'élément <a href="/fr/docs/Web/HTML/Element/dir"><code>&lt;dir&gt;</code></a> doit être mis en forme en utilisant <a href="/fr/docs/Web/CSS">CSS</a>. Pour obtenir un effect visuel similaire à l'attribut <code>compact</code>, la propriété CSS <a href="/fr/docs/Web/CSS/line-height"><code>line-height</code></a> peut être utilisé avec la valeur <code>80%</code>.</p>
-  </div>
-  </dd>
-</dl>
+- `compact`
 
-<h2 id="specifications">Spécifications</h2>
+  - : Cet attribut booléen indique que la liste doit être rendue avec un affichage compact. L'interprétation de cet attribut dépend de l'agent utilisateur. Il ne fonctionne pas dans tous les navigateurs.
 
-<p>Ne fait pas partie des spécifications actuelles.</p>
+    > **Attention :** Cet attribut ne doit pas être utilisé, car il a été déprécié. L'élément [`<dir>`](/fr/docs/Web/HTML/Element/dir) doit être mis en forme en utilisant [CSS](/fr/docs/Web/CSS). Pour obtenir un effect visuel similaire à l'attribut `compact`, la propriété CSS [`line-height`](/fr/docs/Web/CSS/line-height) peut être utilisé avec la valeur `80%`.
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Spécifications
 
-<p>{{Compat}}</p>
+Ne fait pas partie des spécifications actuelles.
 
-<h2 id="see_also">Voir aussi</h2>
+## Compatibilité des navigateurs
 
-<ul>
-  <li>Les autres éléments HTML utilisés pour les listes : <a href="/fr/docs/Web/HTML/Element/ol"><code>&lt;ol&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/li"><code>&lt;li&gt;</code></a>, and <a href="/fr/docs/Web/HTML/Element/menu"><code>&lt;menu&gt;</code></a>;</li>
-  <li>Les propriétés CSS qui peuvent être utilisées pour mettre en forme l'élément <code>&lt;dir&gt;</code> :
-    <ul>
-      <li>La propriété <a href="/fr/docs/Web/CSS/list-style"><code>list-style</code></a> est utile pour choisir l'apparence des puces.</li>
-      <li><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Les compteurs CSS</a> sont utiles pour gérer des listes imbriquées complexes.</li>
-      <li>La propriété <a href="/fr/docs/Web/CSS/line-height"><code>line-height</code></a> est utile pour reproduire l'attribut déprécié <a href="/fr/docs/Web/HTML/Element/dir#attr-compact"><code>compact</code></a>.</li>
-      <li>La propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> est utile pour contrôler l'indentation de la liste.</li>
-    </ul>
-  </li>
-</ul>
+{{Compat}}
+
+## Voir aussi
+
+- Les autres éléments HTML utilisés pour les listes : [`<ol>`](/fr/docs/Web/HTML/Element/ol), [`<ul>`](/fr/docs/Web/HTML/Element/ul), [`<li>`](/fr/docs/Web/HTML/Element/li), and [`<menu>`](/fr/docs/Web/HTML/Element/menu);
+- Les propriétés CSS qui peuvent être utilisées pour mettre en forme l'élément `<dir>` :
+
+  - La propriété [`list-style`](/fr/docs/Web/CSS/list-style) est utile pour choisir l'apparence des puces.
+  - [Les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) sont utiles pour gérer des listes imbriquées complexes.
+  - La propriété [`line-height`](/fr/docs/Web/CSS/line-height) est utile pour reproduire l'attribut déprécié [`compact`](/fr/docs/Web/HTML/Element/dir#attr-compact).
+  - La propriété [`margin`](/fr/docs/Web/CSS/margin) est utile pour contrôler l'indentation de la liste.
diff --git a/files/fr/web/html/element/div/index.md b/files/fr/web/html/element/div/index.md
index 1764eb7d29..932f42e8de 100644
--- a/files/fr/web/html/element/div/index.md
+++ b/files/fr/web/html/element/div/index.md
@@ -14,31 +14,71 @@ tags:
 translation_of: Web/HTML/Element/div
 browser-compat: html.elements.div
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;div&gt;</code></strong> (ou division) est le conteneur générique du contenu du flux. Il n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis en forme d'une manière quelconque à l'aide de <a href="/fr/docs/Web/CSS">CSS</a>.</p>
+L'élément HTML **`<div>`** (ou division) est le conteneur générique du contenu du flux. Il n'a aucun effet sur le contenu ou la mise en page tant qu'il n'est pas mis en forme d'une manière quelconque à l'aide de [CSS](/fr/docs/Web/CSS).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/div.html","tabbed-standard")}}
 
-<p>En tant que conteneur « pur », l'élément <code>&lt;div&gt;</code> ne représente rien en soi. Il est plutôt utilisé pour regrouper le contenu afin qu'il puisse être facilement stylé à l'aide des attributs <a href="/fr/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> ou <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a>, pour marquer une section d'un document comme étant écrite dans une langue différente (à l'aide de l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-lang"><code>lang</code></a>), etc.</p>
+En tant que conteneur « pur », l'élément `<div>` ne représente rien en soi. Il est plutôt utilisé pour regrouper le contenu afin qu'il puisse être facilement stylé à l'aide des attributs [`class`](/fr/docs/Web/HTML/Global_attributes#attr-class) ou [`id`](/fr/docs/Web/HTML/Global_attributes#attr-id), pour marquer une section d'un document comme étant écrite dans une langue différente (à l'aide de l'attribut [`lang`](/fr/docs/Web/HTML/Global_attributes#attr-lang)), etc.
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/Guide/HTML/Content_categories"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>. Selon le WHATWG, si l'élément parent est un élément <a href="/fr/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a>, un ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/dt"><code>&lt;dt&gt;</code></a> suivis par un ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/dd"><code>&lt;dd&gt;</code></a> éventuellement entrecoupés par des éléments <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/template"><code>&lt;template&gt;</code></a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >. Selon le WHATWG, si l'élément parent est un élément
+        <a href="/fr/docs/Web/HTML/Element/dl"><code>&#x3C;dl></code></a
+        >, un ou plusieurs éléments
+        <a href="/fr/docs/Web/HTML/Element/dt"><code>&#x3C;dt></code></a> suivis
+        par un ou plusieurs éléments
+        <a href="/fr/docs/Web/HTML/Element/dd"><code>&#x3C;dd></code></a>
+        éventuellement entrecoupés par des éléments
+        <a href="/fr/docs/Web/HTML/Element/script"
+          ><code>&#x3C;script></code></a
+        >
+        ou
+        <a href="/fr/docs/Web/HTML/Element/template"
+          ><code>&#x3C;template></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément qui accepte un <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>. Selon le WHATWG, un élément <a href="/fr/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a>.</td>
+      <td>
+        Tout élément qui accepte un
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu de flux</a
+        >. Selon le WHATWG, un élément
+        <a href="/fr/docs/Web/HTML/Element/dl"><code>&#x3C;dl></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
@@ -50,78 +90,82 @@ browser-compat: html.elements.div
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLDivElement"><code>HTMLDivElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLDivElement"
+          ><code>HTMLDivElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément accepte <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément accepte [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<div class="note">
-  <p><strong>Note :</strong>L'attribut <code><strong>align</strong></code> est désormais obsolète et ne doit plus être appliqué pour un <code>&lt;div&gt;</code>. On privilégiera l'utilisation des propriétés et outils CSS (tels que <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">la grille CSS</a> ou <a href="/fr/docs/Glossary/Flexbox">les boîtes flexibles (flexbox)</a>) pour aligner et positionner des éléments <code>&lt;div&gt;</code>.</p>
-</div>
+> **Note :**L'attribut **`align`** est désormais obsolète et ne doit plus être appliqué pour un `<div>`. On privilégiera l'utilisation des propriétés et outils CSS (tels que [la grille CSS](/fr/docs/Web/CSS/CSS_Grid_Layout) ou [les boîtes flexibles (flexbox)](/fr/docs/Glossary/Flexbox)) pour aligner et positionner des éléments `<div>`.
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<ul>
-  <li>L'élément <code>&lt;div&gt;</code> doit uniquement être utilisé lorsqu'il n'existe aucun autre élément dont la sémantique permet de représenter le contenu (par exemple <a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/nav"><code>&lt;nav&gt;</code></a>).</li>
-</ul>
+- L'élément `<div>` doit uniquement être utilisé lorsqu'il n'existe aucun autre élément dont la sémantique permet de représenter le contenu (par exemple [`<article>`](/fr/docs/Web/HTML/Element/article) ou [`<nav>`](/fr/docs/Web/HTML/Element/nav)).
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="a_simple_example">Un exemple simple</h3>
+### Un exemple simple
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;p&gt;Tout type de contenu. Par exemple &amp;lt;p&amp;gt;,
-  &amp;lt;table&amp;gt;. À vous de voir&amp;nbsp;!&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div>
+  <p>Tout type de contenu. Par exemple &lt;p&gt;,
+  &lt;table&gt;. À vous de voir&nbsp;!</p>
+</div>
+```
 
-<p>Le résultat ressemble à ceci :</p>
+Le résultat ressemble à ceci :
 
-<p>{{EmbedLiveSample("a_simple_example", "", 80)}}</p>
+{{EmbedLiveSample("a_simple_example", "", 80)}}
 
-<h3 id="a_styled_example">Un exemple mis en forme</h3>
+### Un exemple mis en forme
 
-<p>Cet exemple crée une boîte avec une ombre en appliquant la mise en forme via du CSS sur l'élément <code>&lt;div&gt;</code>. On notera l'utilisation de l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> sur l'élément <code>&lt;div&gt;</code> afin d'appliquer la règle <code>"shadowbox"</code>.</p>
+Cet exemple crée une boîte avec une ombre en appliquant la mise en forme via du CSS sur l'élément `<div>`. On notera l'utilisation de l'attribut [`class`](/fr/docs/Web/HTML/Global_attributes#attr-class) sur l'élément `<div>` afin d'appliquer la règle `"shadowbox"`.
 
-<h4 id="html">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div class="shadowbox"&gt;
-  &lt;p&gt;Voici un paragraphe très intéressant inscrit dans une boîte
-  avec une ombre.&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="shadowbox">
+  <p>Voici un paragraphe très intéressant inscrit dans une boîte
+  avec une ombre.</p>
+</div>
+```
 
-<h4 id="css">CSS</h4>
+#### CSS
 
-<pre class="brush: css">.shadowbox {
+```css
+.shadowbox {
   width: 15em;
   border: 1px solid #333;
   box-shadow: 8px 8px 5px #444;
   padding: 8px 12px;
   background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
-}</pre>
+}
+```
 
-<h4 id="result">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("a_styled_example", "", 150)}}</p>
+{{EmbedLiveSample("a_styled_example", "", 150)}}
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>L'élément <code>&lt;div&gt;</code> possède un rôle ARIA implicite <a href="https://www.w3.org/TR/wai-aria-1.2/#generic"><code>generic</code></a> (plutôt qu'aucun rôle). Cela peut avoir un impact sur certaines combinaisons de déclarations ARIA qui nécessitent un élément descendant direct avec un rôle donné pour fonctionner correctement.</p>
+L'élément `<div>` possède un rôle ARIA implicite [`generic`](https://www.w3.org/TR/wai-aria-1.2/#generic) (plutôt qu'aucun rôle). Cela peut avoir un impact sur certaines combinaisons de déclarations ARIA qui nécessitent un élément descendant direct avec un rôle donné pour fonctionner correctement.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>Les éléments de sectionnement sémantique : <a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code>&lt;nav&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code>&lt;header&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/footer"><code>&lt;footer&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a> pour la mise en forme du contenu du phrasé</li>
-</ul>
+- Les éléments de sectionnement sémantique : [`<section>`](/fr/docs/Web/HTML/Element/section), [`<article>`](/fr/docs/Web/HTML/Element/article), [`<nav>`](/fr/docs/Web/HTML/Element/nav), [`<header>`](/fr/docs/Web/HTML/Element/header), [`<footer>`](/fr/docs/Web/HTML/Element/footer)
+- L'élément [`<span>`](/fr/docs/Web/HTML/Element/span) pour la mise en forme du contenu du phrasé
diff --git a/files/fr/web/html/element/dl/index.md b/files/fr/web/html/element/dl/index.md
index 963cb4a33b..96ac217d7c 100644
--- a/files/fr/web/html/element/dl/index.md
+++ b/files/fr/web/html/element/dl/index.md
@@ -14,178 +14,246 @@ tags:
 translation_of: Web/HTML/Element/dl
 browser-compat: html.elements.dl
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;dl&gt;</code></strong> représente une liste de descriptions sous la forme d'une liste de paires associant des termes (fournis par des éléments <a href="/fr/docs/Web/HTML/Element/dt"><code>&lt;dt&gt;</code></a>) et leurs descriptions ou définitions (fournies par des éléments <a href="/fr/docs/Web/HTML/Element/dd"><code>&lt;dd&gt;</code></a>). On utilisera par exemple cet élément pour implémenter un glossaire.</p>
+L'élément HTML **`<dl>`** représente une liste de descriptions sous la forme d'une liste de paires associant des termes (fournis par des éléments [`<dt>`](/fr/docs/Web/HTML/Element/dt)) et leurs descriptions ou définitions (fournies par des éléments [`<dd>`](/fr/docs/Web/HTML/Element/dd)). On utilisera par exemple cet élément pour implémenter un glossaire.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/dl.html", "tabbed-standard")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a> et, si les éléments enfants de <code>&lt;dl&gt;</code> incluent une paire avec un nom et une valeur, du <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >
+        et, si les éléments enfants de <code>&#x3C;dl></code> incluent une paire
+        avec un nom et une valeur, du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
       <td>
-      <p>Zéro ou plusieurs groupes composés d'un ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/dt"><code>&lt;dt&gt;</code></a>, chacun suivi par un ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/dd"><code>&lt;dd&gt;</code></a> entre lesquels on pourra éventuellement avoir des éléments <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/template"><code>&lt;template&gt;</code></a>.</p>
-  
-      <p>Selon le WHATWG : un ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> éventuellement entrecoupés d'éléments <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/template"><code>&lt;template&gt;</code></a>.</p>
+        <p>
+          Zéro ou plusieurs groupes composés d'un ou plusieurs éléments
+          <a href="/fr/docs/Web/HTML/Element/dt"><code>&#x3C;dt></code></a
+          >, chacun suivi par un ou plusieurs éléments
+          <a href="/fr/docs/Web/HTML/Element/dd"><code>&#x3C;dd></code></a>
+          entre lesquels on pourra éventuellement avoir des éléments
+          <a href="/fr/docs/Web/HTML/Element/script"
+            ><code>&#x3C;script></code></a
+          >
+          et
+          <a href="/fr/docs/Web/HTML/Element/template"
+            ><code>&#x3C;template></code></a
+          >.
+        </p>
+        <p>
+          Selon le WHATWG : un ou plusieurs éléments
+          <a href="/fr/docs/Web/HTML/Element/div"><code>&#x3C;div></code></a>
+          éventuellement entrecoupés d'éléments
+          <a href="/fr/docs/Web/HTML/Element/script"
+            ><code>&#x3C;script></code></a
+          >
+          ou
+          <a href="/fr/docs/Web/HTML/Element/template"
+            ><code>&#x3C;template></code></a
+          >.
+        </p>
       </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux">contenu de flux</a>.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td><a href="https://w3c.github.io/aria/#group">group</a>, <code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></code>, <code><a href="https://w3c.github.io/aria/#none">none</a></code>, <a href="https://w3c.github.io/aria/#presentation">presentation</a></td>
+      <td>
+        <a href="https://w3c.github.io/aria/#group">group</a>,
+        <code
+          ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/List_role"
+            >list</a
+          ></code
+        >, <code><a href="https://w3c.github.io/aria/#none">none</a></code
+        >, <a href="https://w3c.github.io/aria/#presentation">presentation</a>
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLDListElement"><code>HTMLDListElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLDListElement"
+          ><code>HTMLDListElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="single_term_and_description">Un seul terme et une seule définition</h3>
+### Un seul terme et une seule définition
 
-<pre class="brush: html">&lt;dl&gt;
-  &lt;dt&gt;Firefox&lt;/dt&gt;
-  &lt;dd&gt;
+```html
+<dl>
+  <dt>Firefox</dt>
+  <dd>
     Un navigateur Web libre, open-source, multi-plateforme
     dévelopé par la Mozilla Corporation et des centaines de
     volontaires.
-  &lt;/dd&gt;
-  &lt;!-- D'autres termes et leurs descriptions --&gt;
-&lt;/dl&gt;</pre>
+  </dd>
+  <!-- D'autres termes et leurs descriptions -->
+</dl>
+```
 
-<p>{{EmbedLiveSample("single_term_and_description", "", 120)}}</p>
+{{EmbedLiveSample("single_term_and_description", "", 120)}}
 
-<h3 id="multiple_terms_single_description">Plusieurs termes avec une même définition</h3>
+### Plusieurs termes avec une même définition
 
-<pre class="brush: html">&lt;dl&gt;
-  &lt;dt&gt;Firefox&lt;/dt&gt;
-  &lt;dt&gt;Mozilla Firefox&lt;/dt&gt;
-  &lt;dt&gt;Fx&lt;/dt&gt;
-  &lt;dd&gt;
+```html
+<dl>
+  <dt>Firefox</dt>
+  <dt>Mozilla Firefox</dt>
+  <dt>Fx</dt>
+  <dd>
     Un navigateur Web libre, open-source, multi-plateforme
     dévelopé par la Mozilla Corporation et des centaines de
     volontaires.
-  &lt;/dd&gt;
-  &lt;!-- D'autres termes et leurs définitions --&gt;
-&lt;/dl&gt;</pre>
+  </dd>
+  <!-- D'autres termes et leurs définitions -->
+</dl>
+```
 
-<p>{{EmbedLiveSample("multiple_terms_single_description", "", 180)}}</p>
+{{EmbedLiveSample("multiple_terms_single_description", "", 180)}}
 
-<h3 id="single_term_multiple_descriptions">Un seul terme avec plusieurs définitions</h3>
+### Un seul terme avec plusieurs définitions
 
-<pre class="brush: html">&lt;dl&gt;
-  &lt;dt&gt;Firefox&lt;/dt&gt;
-  &lt;dd&gt;
+```html
+<dl>
+  <dt>Firefox</dt>
+  <dd>
     Un navigateur Web libre, open-source, multi-plateforme
     dévelopé par la Mozilla Corporation et des centaines de
     volontaires.
-  &lt;/dd&gt;
-  &lt;dd&gt;
+  </dd>
+  <dd>
     Le petit panda, panda roux, panda fuligineux ou panda
-    éclatant (<em>Ailurus fulgens</em>), est un mammifère originaire
+    éclatant (Ailurus fulgens), est un mammifère originaire
     de l'Himalaya et de la Chine méridionale.
-  &lt;/dd&gt;
-  &lt;!-- D'autres termes et leurs définitions --&gt;
-&lt;/dl&gt;</pre>
+  </dd>
+  <!-- D'autres termes et leurs définitions -->
+</dl>
+```
 
-<p>{{EmbedLiveSample("single_term_multiple_descriptions", "", 180)}}</p>
+{{EmbedLiveSample("single_term_multiple_descriptions", "", 180)}}
 
-<h3 id="multiple_terms_and_descriptions">Termes et descriptions multiples</h3>
+### Termes et descriptions multiples
 
-<p>Il est également possible de définir plusieurs termes avec plusieurs descriptions correspondantes, en combinant les exemples ci-dessus.</p>
+Il est également possible de définir plusieurs termes avec plusieurs descriptions correspondantes, en combinant les exemples ci-dessus.
 
-<h3 id="metadata">Métadonnées</h3>
+### Métadonnées
 
-<p>Les listes de définitions sont utiles lorsqu'on souhaite afficher des métadonnées sous forme d'une liste de clés-valeurs.</p>
+Les listes de définitions sont utiles lorsqu'on souhaite afficher des métadonnées sous forme d'une liste de clés-valeurs.
 
-<pre class="brush: html">&lt;dl&gt;
-  &lt;dt&gt;Nom&lt;/dt&gt;
-  &lt;dd&gt;Godzilla&lt;/dd&gt;
-  &lt;dt&gt;Né le&lt;/dt&gt;
-  &lt;dd&gt;1952&lt;/dd&gt;
-  &lt;dt&gt;Lieu de naissance&lt;/dt&gt;
-  &lt;dd&gt;Japon&lt;/dd&gt;
-  &lt;dt&gt;Couleur&lt;/dt&gt;
-  &lt;dd&gt;Vert&lt;/dd&gt;
-&lt;/dl&gt;</pre>
+```html
+<dl>
+  <dt>Nom</dt>
+  <dd>Godzilla</dd>
+  <dt>Né le</dt>
+  <dd>1952</dd>
+  <dt>Lieu de naissance</dt>
+  <dd>Japon</dd>
+  <dt>Couleur</dt>
+  <dd>Vert</dd>
+</dl>
+```
 
-<p>Conseil : il peut être pratique de définir un séparateur clé-valeur dans le CSS, par exemple :</p>
+Conseil : il peut être pratique de définir un séparateur clé-valeur dans le CSS, par exemple :
 
-<pre class="brush: css">dt::after {
+```css
+dt::after {
   content: ": ";
-}</pre>
+}
+```
 
-<h3 id="wrapping_name-value_groups_in_htmlelementdiv_elements">Intégration de groupes nom-valeur dans les éléments <code>&lt;div&gt;</code>.</h3>
+### Intégration de groupes nom-valeur dans les éléments `<div>`.
 
-<p><a href="/fr/docs/Glossary/WHATWG">WHATWG</a> HTML permet d'envelopper chaque groupe nom-valeur d'un élément <a href="/fr/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a> dans un élément <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a>. Cela peut être utile lors de l'utilisation de <a href="/fr/docs/Web/HTML/Microdata">microdonnées</a>, ou lorsque les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a> s'appliquent à un groupe entier, ou encore à des fins de style.</p>
+[WHATWG](/fr/docs/Glossary/WHATWG) HTML permet d'envelopper chaque groupe nom-valeur d'un élément [`<dl>`](/fr/docs/Web/HTML/Element/dl) dans un élément [`<div>`](/fr/docs/Web/HTML/Element/div). Cela peut être utile lors de l'utilisation de [microdonnées](/fr/docs/Web/HTML/Microdata), ou lorsque les [attributs universels](/fr/docs/Web/HTML/Global_attributes) s'appliquent à un groupe entier, ou encore à des fins de style.
 
-<pre class="brush: html">&lt;dl&gt;
-  &lt;div&gt;
-    &lt;dt&gt;Nom&lt;/dt&gt;
-    &lt;dd&gt;Godzilla&lt;/dd&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;dt&gt;Né le&lt;/dt&gt;
-    &lt;dd&gt;1952&lt;/dd&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;dt&gt;Lieu de naissance&lt;/dt&gt;
-    &lt;dd&gt;Japon&lt;/dd&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;dt&gt;Couleur&lt;/dt&gt;
-    &lt;dd&gt;Vert&lt;/dd&gt;
-  &lt;/div&gt;
-&lt;/dl&gt;</pre>
+```html
+<dl>
+  <div>
+    <dt>Nom</dt>
+    <dd>Godzilla</dd>
+  </div>
+  <div>
+    <dt>Né le</dt>
+    <dd>1952</dd>
+  </div>
+  <div>
+    <dt>Lieu de naissance</dt>
+    <dd>Japon</dd>
+  </div>
+  <div>
+    <dt>Couleur</dt>
+    <dd>Vert</dd>
+  </div>
+</dl>
+```
 
-<h2 id="notes">Notes</h2>
+## Notes
 
-<p>Cet élément ne doit pas être utilisé (de même que les éléments <a href="/fr/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a>), dans le seul but de créer une indentation sur la page. Bien que cela fonctionne parfaitement, c'est une pratique déconseillée qui mêle mise en forme et sémantique. Cela modifie le rôle que doivent avoir les listes de définitions.</p>
+Cet élément ne doit pas être utilisé (de même que les éléments [`<ul>`](/fr/docs/Web/HTML/Element/ul)), dans le seul but de créer une indentation sur la page. Bien que cela fonctionne parfaitement, c'est une pratique déconseillée qui mêle mise en forme et sémantique. Cela modifie le rôle que doivent avoir les listes de définitions.
 
-<p>Pour changer l'indentation de la définition d'un terme, il faut utiliser la propriété <a href="/fr/docs/Web/CSS">CSS</a> <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</p>
+Pour changer l'indentation de la définition d'un terme, il faut utiliser la propriété [CSS](/fr/docs/Web/CSS) [`margin`](/fr/docs/Web/CSS/margin).
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>Les lecteurs d'écran annoncent <code>&lt;dl&gt;</code> de façon différente. À partir d'iOS 14, VoiceOver annoncera que le contenu de <code>&lt;dl&gt;</code> est une liste lors de la navigation au curseur (mais pas via la lecture générale). Il faut donc s'assurer que la relation entre les éléments de la liste est bien communiquée grâce aux contenus des éléments.</p>
+Les lecteurs d'écran annoncent `<dl>` de façon différente. À partir d'iOS 14, VoiceOver annoncera que le contenu de `<dl>` est une liste lors de la navigation au curseur (mais pas via la lecture générale). Il faut donc s'assurer que la relation entre les éléments de la liste est bien communiquée grâce aux contenus des éléments.
 
-<ul>
-  <li><a href="https://codepen.io/aardrian/debug/NzGaKP">CodePen - Les camarades HTML : dt &amp; dd</a> <small>(en)</small></li>
-  <li><a href="https://adrianroselli.com/2020/09/voiceover-on-ios-14-supports-description-lists.html">VoiceOver sous iOS 14 prend en charge les listes de descriptions</a> <small>(en)</small></li>
- </ul>
+- [CodePen - Les camarades HTML : dt & dd](https://codepen.io/aardrian/debug/NzGaKP) (en)
+- [VoiceOver sous iOS 14 prend en charge les listes de descriptions](https://adrianroselli.com/2020/09/voiceover-on-ios-14-supports-description-lists.html) (en)
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/dt"><code>&lt;dt&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/dd"><code>&lt;dd&gt;</code></a></li>
-</ul>
+- L'élément [`<dt>`](/fr/docs/Web/HTML/Element/dt)
+- L'élément [`<dd>`](/fr/docs/Web/HTML/Element/dd)
diff --git a/files/fr/web/html/element/dt/index.md b/files/fr/web/html/element/dt/index.md
index d4507d86fe..eefadd76ce 100644
--- a/files/fr/web/html/element/dt/index.md
+++ b/files/fr/web/html/element/dt/index.md
@@ -16,29 +16,57 @@ tags:
 translation_of: Web/HTML/Element/dt
 browser-compat: html.elements.dt
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;dt&gt;</code> </strong>identifie un terme dans une liste de définitions ou de descriptions. Cet élément n'apparaît qu'en tant qu'élément enfant d'un élément <a href="/fr/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a> et est généralement suivi d'un élément <a href="/fr/docs/Web/HTML/Element/dd"><code>&lt;dd&gt;</code></a>. Plusieurs éléments <code>&lt;dt&gt;</code> qui se suivent indiqueront qu'ils partagent la définition/description fournie par le prochain élément <a href="/fr/docs/Web/HTML/Element/dd"><code>&lt;dd&gt;</code></a>.</p>
+L'élément HTML **`<dt>` **identifie un terme dans une liste de définitions ou de descriptions. Cet élément n'apparaît qu'en tant qu'élément enfant d'un élément [`<dl>`](/fr/docs/Web/HTML/Element/dl) et est généralement suivi d'un élément [`<dd>`](/fr/docs/Web/HTML/Element/dd). Plusieurs éléments `<dt>` qui se suivent indiqueront qu'ils partagent la définition/description fournie par le prochain élément [`<dd>`](/fr/docs/Web/HTML/Element/dd).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/dt.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/dt.html", "tabbed-standard")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
       <td>Aucune.</td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, sans élément <a href="/fr/docs/Web/HTML/Element/header"><code>&lt;header&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/footer"><code>&lt;footer&gt;</code></a>, sans contenu sectionnant et sans titre parmi les descendants.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >, sans élément
+        <a href="/fr/docs/Web/HTML/Element/header"><code>&#x3C;header></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/footer"><code>&#x3C;footer></code></a
+        >, sans contenu sectionnant et sans titre parmi les descendants.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Cet élément doit avoir une balise ouvrante. La balise de fin peut être omise si l'élément est immédiatement suivi par un autre élément <code>&lt;dd&gt;</code> ou par un élément <code>&lt;dt&gt;</code> ou s'il n'y a plus de contenu au sein de l'élément parent.</td>
+      <td>
+        Cet élément doit avoir une balise ouvrante. La balise de fin peut être
+        omise si l'élément est immédiatement suivi par un autre élément
+        <code>&#x3C;dd></code> ou par un élément <code>&#x3C;dt></code> ou s'il
+        n'y a plus de contenu au sein de l'élément parent.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>L'élement doit être situé avant un élément <a href="/fr/docs/Web/HTML/Element/dt"><code>&lt;dt&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/dd"><code>&lt;dd&gt;</code></a> et à l'intérieur d'un élément <a href="/fr/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a>. Sinon (selon le WHATWG), au sein d'un élément <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> situé dans un élément <a href="/fr/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a>.</td>
+      <td>
+        L'élement doit être situé avant un élément
+        <a href="/fr/docs/Web/HTML/Element/dt"><code>&#x3C;dt></code></a> ou
+        <a href="/fr/docs/Web/HTML/Element/dd"><code>&#x3C;dd></code></a> et à
+        l'intérieur d'un élément
+        <a href="/fr/docs/Web/HTML/Element/dl"><code>&#x3C;dl></code></a
+        >. Sinon (selon le WHATWG), au sein d'un élément
+        <a href="/fr/docs/Web/HTML/Element/div"><code>&#x3C;div></code></a>
+        situé dans un élément
+        <a href="/fr/docs/Web/HTML/Element/dl"><code>&#x3C;dl></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
@@ -46,34 +74,45 @@ browser-compat: html.elements.dt
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></code></td>
+      <td>
+        <code
+          ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Listitem_role"
+            >listitem</a
+          ></code
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a> Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>
+        Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface
+        <a href="/fr/docs/Web/API/HTMLSpanElement"
+          ><code>HTMLSpanElement</code></a
+        >
+        pour cet élément.
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>On peut employer <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur cet élément.</p>
+On peut employer [les attributs universels](/fr/docs/Web/HTML/Global_attributes) sur cet élément.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<p>Pour des exemples, voir les <a href="/fr/docs/Web/HTML/Element/dl#examples">exemples fournis pour l'élément <code>&lt;dl&gt;</code></a>.</p>
+Pour des exemples, voir les [exemples fournis pour l'élément `<dl>`](/fr/docs/Web/HTML/Element/dl#examples).
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatiblité des navigateurs</h2>
+## Compatiblité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/dd"><code>&lt;dd&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a></li>
-</ul>
+- L'élément [`<dd>`](/fr/docs/Web/HTML/Element/dd)
+- L'élément [`<dl>`](/fr/docs/Web/HTML/Element/dl)
diff --git a/files/fr/web/html/element/em/index.md b/files/fr/web/html/element/em/index.md
index 439117440a..38c4539363 100644
--- a/files/fr/web/html/element/em/index.md
+++ b/files/fr/web/html/element/em/index.md
@@ -10,33 +10,63 @@ tags:
 translation_of: Web/HTML/Element/em
 browser-compat: html.elements.em
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;em&gt;</code></strong> (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments <code>&lt;em&gt;</code> peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.</p>
+L'élément HTML **`<em>`** (pour emphase) est utilisé afin de marquer un texte sur lequel on veut insister. Les éléments `<em>` peuvent être imbriqués, chaque degré d'imbrication indiquant un degré d'insistance plus élevé.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/em.html", "tabbed-shorter")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">Contenu phrasé</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >Contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>.</td>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
@@ -44,56 +74,64 @@ browser-compat: html.elements.em
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>. Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait l'interface <a href="/fr/docs/Web/API/HTMLSpanElement"><code>HTMLSpanElement</code></a> pour cet élément.</td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a
+        >. Jusqu'à Gecko 1.9.2 inclus (Firefox 4), Firefox implémentait
+        l'interface
+        <a href="/fr/docs/Web/API/HTMLSpanElement"
+          ><code>HTMLSpanElement</code></a
+        >
+        pour cet élément.
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme tous les éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Comme tous les éléments HTML, cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<h2 id="Usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>L'élément <code>&lt;em&gt;</code> est destiné aux mots dont l'accent est souligné par rapport au texte environnant, ce qui est souvent limité à un ou plusieurs mots d'une phrase et affecte le sens de la phrase elle-même.</p>
+L'élément `<em>` est destiné aux mots dont l'accent est souligné par rapport au texte environnant, ce qui est souvent limité à un ou plusieurs mots d'une phrase et affecte le sens de la phrase elle-même.
 
-<p>Habituellement, cet élément est affiché avec une police italique. Cependant, il ne doit pas être utilisé pour appliquer un style italique ; pour la mise en forme, on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/i"><code>&lt;i&gt;</code></a> ou des styles CSS. Pour marquer le titre d'une œuvre (livre, chanson, pièce, etc.), on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/cite"><code>&lt;cite&gt;</code></a> ; il est aussi habituellement affiché avec une police italique, mais porte un sens différent. Enfin, on utilisera l'élément <a href="/fr/docs/Web/HTML/Element/strong"><code>&lt;strong&gt;</code></a> pour marquer un texte plus important que le texte qui l'entoure.</p>
+Habituellement, cet élément est affiché avec une police italique. Cependant, il ne doit pas être utilisé pour appliquer un style italique ; pour la mise en forme, on utilisera l'élément [`<i>`](/fr/docs/Web/HTML/Element/i) ou des styles CSS. Pour marquer le titre d'une œuvre (livre, chanson, pièce, etc.), on utilisera l'élément [`<cite>`](/fr/docs/Web/HTML/Element/cite) ; il est aussi habituellement affiché avec une police italique, mais porte un sens différent. Enfin, on utilisera l'élément [`<strong>`](/fr/docs/Web/HTML/Element/strong) pour marquer un texte plus important que le texte qui l'entoure.
 
-<h3 id="i_vs._em">&lt;i&gt; ou &lt;em&gt; ?</h3>
+### \<i> ou \<em> ?
 
-<p>Lorsqu'on débute en développement web, on peut être dérouté⋅e de voir plusieurs éléments qui produisent des résultats similaires. <code>&lt;em&gt;</code> et <code>&lt;i&gt;</code> sont un exemple courant, car ils mettent tous deux le texte en italique. Quelle est la différence ? Laquelle doit-on utiliser ?</p>
+Lorsqu'on débute en développement web, on peut être dérouté⋅e de voir plusieurs éléments qui produisent des résultats similaires. `<em>` et `<i>` sont un exemple courant, car ils mettent tous deux le texte en italique. Quelle est la différence ? Laquelle doit-on utiliser ?
 
-<p>Par défaut, le résultat visuel est le même. Cependant, la signification sémantique est différente. L'élément <code>&lt;em&gt;</code> représente l'accentuation de son contenu, tandis que l'élément <code>&lt;i&gt;</code> représente le texte qui se détache de la prose normale, comme un mot étranger, les pensées d'un personnage fictif, ou lorsque le texte fait référence à la définition d'un mot au lieu de représenter son sens sémantique. (Le titre d'une œuvre, comme le nom d'un livre ou d'un film, devrait utiliser <code>&lt;cite&gt;</code>).</p>
+Par défaut, le résultat visuel est le même. Cependant, la signification sémantique est différente. L'élément `<em>` représente l'accentuation de son contenu, tandis que l'élément `<i>` représente le texte qui se détache de la prose normale, comme un mot étranger, les pensées d'un personnage fictif, ou lorsque le texte fait référence à la définition d'un mot au lieu de représenter son sens sémantique. (Le titre d'une œuvre, comme le nom d'un livre ou d'un film, devrait utiliser `<cite>`).
 
-<p>Cela signifie que le choix de l'option à utiliser dépend de la situation. Ni l'un ni l'autre ne sont destinés à des fins purement décoratives, c'est à cela que sert le style CSS.</p>
+Cela signifie que le choix de l'option à utiliser dépend de la situation. Ni l'un ni l'autre ne sont destinés à des fins purement décoratives, c'est à cela que sert le style CSS.
 
-<p>Un exemple pour <code>&lt;em&gt;</code> pourrait être : « <em>Faites</em>-le déjà ! », ou : « Nous <em>devions</em> faire quelque chose à ce sujet ». Une personne ou un logiciel lisant le texte prononcerait les mots en italique avec une emphase, en utilisant l'accentuation verbale.</p>
+Un exemple pour `<em>` pourrait être : « _Faites_-le déjà ! », ou : « Nous _devions_ faire quelque chose à ce sujet ». Une personne ou un logiciel lisant le texte prononcerait les mots en italique avec une emphase, en utilisant l'accentuation verbale.
 
-<p>Un exemple pour <code>&lt;i&gt;</code> pourrait être : « Le <i>Queen Mary</i> a pris la mer la nuit dernière ». Ici, il n'y a pas d'accentuation ou d'importance supplémentaire sur le mot « Queen Mary ». Il est simplement indiqué que l'objet en question n'est pas une reine nommée Mary, mais un navire nommé <em>Queen Mary</em>. Un autre exemple de <code>&lt;i&gt;</code> pourrait être : « Le mot <i>the</i> est un article ».</p>
+Un exemple pour `<i>` pourrait être : « Le _Queen Mary_ a pris la mer la nuit dernière ». Ici, il n'y a pas d'accentuation ou d'importance supplémentaire sur le mot « Queen Mary ». Il est simplement indiqué que l'objet en question n'est pas une reine nommée Mary, mais un navire nommé _Queen Mary_. Un autre exemple de `<i>` pourrait être : « Le mot _the_ est un article ».
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<p>L'élément <code>&lt;em&gt;</code> est souvent utilisé pour indiquer un contraste, implicite ou explicite.</p>
+L'élément `<em>` est souvent utilisé pour indiquer un contraste, implicite ou explicite.
 
-<pre class="brush: html">&lt;p&gt;
-  Dans HTML5, ce qui était appelé contenu de &lt;em&gt;type bloc&lt;/em&gt;
-  est maintenant appelé contenu de &lt;em&gt;flux&lt;/em&gt;.
-&lt;/p&gt;</pre>
+```html
+<p>
+  Dans HTML5, ce qui était appelé contenu de <em>type bloc</em>
+  est maintenant appelé contenu de <em>flux</em>.
+</p>
+```
 
-<h3 id="result">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("example", "", 100)}}</p>
+{{EmbedLiveSample("example", "", 100)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/HTML/Element/i"><code>&lt;i&gt;</code></a></li>
-</ul>
+- [`<i>`](/fr/docs/Web/HTML/Element/i)
diff --git a/files/fr/web/html/element/embed/index.md b/files/fr/web/html/element/embed/index.md
index 6f8281163c..cde6a9f0dd 100644
--- a/files/fr/web/html/element/embed/index.md
+++ b/files/fr/web/html/element/embed/index.md
@@ -15,23 +15,47 @@ tags:
 translation_of: Web/HTML/Element/embed
 browser-compat: html.elements.embed
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;embed&gt;</code></strong> permet d'intégrer du contenu externe à cet endroit dans le document. Le contenu peut être fourni par une application externe ou une autre source telle qu'un <i>plugin</i> du navigateur.</p>
+L'élément HTML **`<embed>`** permet d'intégrer du contenu externe à cet endroit dans le document. Le contenu peut être fourni par une application externe ou une autre source telle qu'un _plugin_ du navigateur.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}
 
-<div class="note">
-  <p><strong>Note :</strong>Cet article ne traite que de l'élément faisant partie du HTML5. Il ne concerne pas la version précédente et non normalisée de cet élément.</p>
-</div>
+> **Note :**Cet article ne traite que de l'élément faisant partie du HTML5. Il ne concerne pas la version précédente et non normalisée de cet élément.
 
-<p>Il faut garder à l'esprit que la plupart des navigateurs ont déprécié voire retiré la prise en charge des plugins. Aussi, mieux vaut ne pas utiliser sur <code>&lt;embed&gt;</code> si on souhaite qu'un site ou une application soit fonctionnelle sur un navigateur moyen.</p>
+Il faut garder à l'esprit que la plupart des navigateurs ont déprécié voire retiré la prise en charge des plugins. Aussi, mieux vaut ne pas utiliser sur `<embed>` si on souhaite qu'un site ou une application soit fonctionnelle sur un navigateur moyen.
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories" title="HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content" title="HTML/Content categories#Flow content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content" title="HTML/Content categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a
+          href="/fr/docs/Web/Guide/HTML/Content_categories"
+          title="HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a
+          href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          title="HTML/Content categories#Flow content"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          title="HTML/Content categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content"
+          >contenu intégré</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content"
+          >contenu interactif</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
@@ -39,7 +63,10 @@ browser-compat: html.elements.embed
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Cet élément doit avoir une balise ouvrante mais ne doit pas avoir de balise fermante.</td>
+      <td>
+        Cet élément doit avoir une balise ouvrante mais ne doit pas avoir de
+        balise fermante.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
@@ -47,57 +74,74 @@ browser-compat: html.elements.embed
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td><a href="https://w3c.github.io/aria/#application"><code>application</code></a>, <a href="https://w3c.github.io/aria/#document"><code>document</code></a>, <a href="https://w3c.github.io/aria/#img"><code>img</code></a>, <a href="https://w3c.github.io/aria/#none"><code>none</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a></td>
+      <td>
+        <a href="https://w3c.github.io/aria/#application"
+          ><code>application</code></a
+        >,
+        <a href="https://w3c.github.io/aria/#document"><code>document</code></a
+        >, <a href="https://w3c.github.io/aria/#img"><code>img</code></a
+        >, <a href="https://w3c.github.io/aria/#none"><code>none</code></a
+        >,
+        <a href="https://w3c.github.io/aria/#presentation"
+          ><code>presentation</code></a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLEmbedElement"><code>HTMLEmbedElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLEmbedElement"
+          ><code>HTMLEmbedElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément possède <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Cet élément possède [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<dl>
-  <dt><code>height</code></dt>
-  <dd>La hauteur utilisée pour l'affichage de la ressource, exprimée en <a href="https://drafts.csswg.org/css-values/#px">pixels CSS</a>. La valeur est absolue, les pourcentages ne sont pas autorisés.</dd>
-  <dt><code>src</code></dt>
-  <dd>L'URL de la ressource à intégrer.</dd>
-  <dt><code>type</code></dt>
-  <dd>Le type MIME à utiliser pour sélectionner le plugin à instancier.</dd>
-  <dt><code>width</code></dt>
-  <dd>La largeur utilisée pour l'affichage de la ressource, exprimée en <a href="https://drafts.csswg.org/css-values/#px">pixels CSS</a>. La valeur est absolue, les pourcentages ne sont pas autorisés.</dd>
-</dl>
+- `height`
+  - : La hauteur utilisée pour l'affichage de la ressource, exprimée en [pixels CSS](https://drafts.csswg.org/css-values/#px). La valeur est absolue, les pourcentages ne sont pas autorisés.
+- `src`
+  - : L'URL de la ressource à intégrer.
+- `type`
+  - : Le type MIME à utiliser pour sélectionner le plugin à instancier.
+- `width`
+  - : La largeur utilisée pour l'affichage de la ressource, exprimée en [pixels CSS](https://drafts.csswg.org/css-values/#px). La valeur est absolue, les pourcentages ne sont pas autorisés.
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Il est possible d'utiliser la propriété CSS <a href="/fr/docs/Web/CSS/object-position"><code>object-position</code></a> afin d'ajuster la position de l'objet embarqué au sein de la <em>frame</em> et la propriété CSS <a href="/fr/docs/Web/CSS/object-fit"><code>object-fit</code></a> afin de contrôler la façon dont la taille de l'objet est ajustée par rapport à celle de la <em>frame</em>.</p>
+Il est possible d'utiliser la propriété CSS [`object-position`](/fr/docs/Web/CSS/object-position) afin d'ajuster la position de l'objet embarqué au sein de la _frame_ et la propriété CSS [`object-fit`](/fr/docs/Web/CSS/object-fit) afin de contrôler la façon dont la taille de l'objet est ajustée par rapport à celle de la _frame_.
 
-<h2 id="examples">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;embed type="video/quicktime" src="film.mov" width="640" height="480" title="Titre de ma vidéo"&gt;</pre>
+```html
+<embed type="video/quicktime" src="film.mov" width="640" height="480" title="Titre de ma vidéo">
+```
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>Utilisez l'attribut <a href="/fr/docs/Web/HTML/Global_attributes/title"><code>title</code></a> sur un élément <code>embed</code> pour étiqueter son contenu afin que les personnes naviguant avec une technologie d'assistance telle qu'un lecteur d'écran puissent comprendre ce qu'il contient. La valeur du titre doit décrire de manière concise le contenu intégré. Sans titre, il se peut qu'elles ne soient pas en mesure de déterminer quel est son contenu intégré. Ce changement de contexte peut être source de confusion et de perte de temps, en particulier si l'élément <code>embed</code> contient du contenu interactif comme de la vidéo ou de l'audio.</p>
+Utilisez l'attribut [`title`](/fr/docs/Web/HTML/Global_attributes/title) sur un élément `embed` pour étiqueter son contenu afin que les personnes naviguant avec une technologie d'assistance telle qu'un lecteur d'écran puissent comprendre ce qu'il contient. La valeur du titre doit décrire de manière concise le contenu intégré. Sans titre, il se peut qu'elles ne soient pas en mesure de déterminer quel est son contenu intégré. Ce changement de contexte peut être source de confusion et de perte de temps, en particulier si l'élément `embed` contient du contenu interactif comme de la vidéo ou de l'audio.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>D'autres éléments sont utilisés pour intégrer du contenu de différents types, notamment <a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/MathML/Element/math"><code>&lt;math&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a>, <a href="/fr/docs/Web/SVG/Element/svg"><code>&lt;svg&gt;</code></a>, and <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>.</li>
-  <li>Positionnement et dimensionnement du contenu intégré dans son cadre : <a href="/fr/docs/Web/CSS/object-position"><code>object-position</code></a> and <a href="/fr/docs/Web/CSS/object-fit"><code>object-fit</code></a></li>
-</ul>
+- D'autres éléments sont utilisés pour intégrer du contenu de différents types, notamment [`<audio>`](/fr/docs/Web/HTML/Element/audio), [`<canvas>`](/fr/docs/Web/HTML/Element/canvas), [`<iframe>`](/fr/docs/Web/HTML/Element/iframe), [`<img>`](/fr/docs/Web/HTML/Element/Img), [`<math>`](/fr/docs/Web/MathML/Element/math), [`<object>`](/fr/docs/Web/HTML/Element/object), [`<svg>`](/fr/docs/Web/SVG/Element/svg), and [`<video>`](/fr/docs/Web/HTML/Element/video).
+- Positionnement et dimensionnement du contenu intégré dans son cadre : [`object-position`](/fr/docs/Web/CSS/object-position) and [`object-fit`](/fr/docs/Web/CSS/object-fit)
diff --git a/files/fr/web/html/element/fieldset/index.md b/files/fr/web/html/element/fieldset/index.md
index d6689a7867..1dbb9c6811 100644
--- a/files/fr/web/html/element/fieldset/index.md
+++ b/files/fr/web/html/element/fieldset/index.md
@@ -11,135 +11,182 @@ tags:
 translation_of: Web/HTML/Element/fieldset
 browser-compat: html.elements.fieldset
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;fieldset&gt;</code></strong> est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes (<a href="/fr/docs/Web/HTML/Element/Label"><code>&lt;label&gt;</code></a>) dans un formulaire HTML.</p>
+L'élément HTML **`<fieldset>`** est utilisé afin de regrouper plusieurs contrôles interactifs ainsi que des étiquettes ([`<label>`](/fr/docs/Web/HTML/Element/Label)) dans un formulaire HTML.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/fieldset.html", "tabbed-standard")}}
 
-<p>Comme on peut le voir dans l'exemple ci-avant, l'élément <code>&lt;fieldset&gt;</code> permet de regrouper une partie d'un formulaire HTML et d'associer une légende (<a href="/fr/docs/Web/HTML/Element/Legend"><code>&lt;legend&gt;</code></a>) décrivant ce groupe. Cet élément utilise quelques attributs et notamment <code>form</code> dont la valeur correspond à la valeur de l'attribut <code>id</code> d'un élément <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a> de la même page. De cette façon, on peut avoir un élément <code>&lt;fieldset&gt;</code> qui soit rattaché à un formulaire mais qui ne soit pas imbriqué dans ce formulaire. L'attribut <code>disabled</code> permet de désactiver l'élément <code>&lt;fieldset&gt;</code> ainsi que l'ensemble de son contenu via une seule valeur.</p>
+Comme on peut le voir dans l'exemple ci-avant, l'élément `<fieldset>` permet de regrouper une partie d'un formulaire HTML et d'associer une légende ([`<legend>`](/fr/docs/Web/HTML/Element/Legend)) décrivant ce groupe. Cet élément utilise quelques attributs et notamment `form` dont la valeur correspond à la valeur de l'attribut `id` d'un élément [`<form>`](/fr/docs/Web/HTML/Element/Form) de la même page. De cette façon, on peut avoir un élément `<fieldset>` qui soit rattaché à un formulaire mais qui ne soit pas imbriqué dans ce formulaire. L'attribut `disabled` permet de désactiver l'élément `<fieldset>` ainsi que l'ensemble de son contenu via une seule valeur.
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<dl>
-  <dt><code>disabled</code></dt>
-  <dd>Si cet attribut booléen est utilisé, les contrôles de formulaires des éléments descendants sont désactivés (ils ne peuvent pas être édités). Bien qu'ils ne soient pas éditables, les données de ces contrôles seront envoyées avec le formulaire. Ces contrôles ne recevront pas les évènements liés à la navigation (tels que ceux liés aux clics ou au focus). La plupart du temps, ces contrôles désactivés apparaissent comme grisés. On notera que les éléments de formulaires au sein de l'élément <a href="/fr/docs/Web/HTML/Element/Legend"><code>&lt;legend&gt;</code></a> ne seront pas désactivés.</dd>
-  <dt><code>form</code></dt>
-  <dd>La valeur de cet attribut correspond à la valeur de l'attribut <code>id</code> de l'élément <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a> auquel il est rattaché. La valeur par défaut est l'identifiant du plus proche élément <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a> dont l'élément <code>&lt;fieldset&gt;</code> est le descendant. Attention, cet attribut peut être source de confusion, tout élément <code>&lt;input&gt;</code> contenu au sein du <code>&lt;fieldset&gt;</code> et qui devra être associé au formulaire devra également avoir l'attribut <code>form</code> explicitement défini. En JavaScript, on pourra utiliser la propriété <a href="/fr/docs/Web/API/HTMLFormElement/elements"><code>HTMLFormElement.elements</code></a> pour vérifier le bon rattachement des éléments au formulaire.</dd>
-  <dt><code>name</code></dt>
-  <dd><p>Le nom associé au groupe.</p>
-  <div class="note">
-    <p><strong>Note :</strong> L'étiquette du groupe de contrôle est donné par le premier élément enfant <a href="/fr/docs/Web/HTML/Element/Legend"><code>&lt;legend&gt;</code></a> du <code>&lt;fieldset&gt;</code>.</p>
-  </div>
-  </dd>
-</dl>
+- `disabled`
+  - : Si cet attribut booléen est utilisé, les contrôles de formulaires des éléments descendants sont désactivés (ils ne peuvent pas être édités). Bien qu'ils ne soient pas éditables, les données de ces contrôles seront envoyées avec le formulaire. Ces contrôles ne recevront pas les évènements liés à la navigation (tels que ceux liés aux clics ou au focus). La plupart du temps, ces contrôles désactivés apparaissent comme grisés. On notera que les éléments de formulaires au sein de l'élément [`<legend>`](/fr/docs/Web/HTML/Element/Legend) ne seront pas désactivés.
+- `form`
+  - : La valeur de cet attribut correspond à la valeur de l'attribut `id` de l'élément [`<form>`](/fr/docs/Web/HTML/Element/Form) auquel il est rattaché. La valeur par défaut est l'identifiant du plus proche élément [`<form>`](/fr/docs/Web/HTML/Element/Form) dont l'élément `<fieldset>` est le descendant. Attention, cet attribut peut être source de confusion, tout élément `<input>` contenu au sein du `<fieldset>` et qui devra être associé au formulaire devra également avoir l'attribut `form` explicitement défini. En JavaScript, on pourra utiliser la propriété [`HTMLFormElement.elements`](/fr/docs/Web/API/HTMLFormElement/elements) pour vérifier le bon rattachement des éléments au formulaire.
+- `name`
 
-<h2 id="styling_with_css">Mise en forme avec CSS</h2>
+  - : Le nom associé au groupe.
 
-<p>L'élément <code>&lt;fieldset&gt;</code> est quelque peu particulier pour la mise en forme.</p>
+    > **Note :** L'étiquette du groupe de contrôle est donné par le premier élément enfant [`<legend>`](/fr/docs/Web/HTML/Element/Legend) du `<fieldset>`.
 
-<p>La valeur initiale de la propriété <a href="/fr/docs/Web/CSS/display"><code>display</code></a> pour cet élément est <code>block</code> et l'élément crée un <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">contexte de formatage de bloc</a>. Si l'élément <code>&lt;fieldset&gt;</code> est mis en forme avec une valeur <code>display</code> qui correspond à un style en ligne, celui-ci se comportera comme <code>inline-block</code> et sinon comme <code>block</code>. Par défaut, une bordure de 2 pixels ondulée entoure le contenu de l'élément et il y a un léger <em>padding</em>. Par défaut, l'élément a <code>min-inline-size: min-content</code>.</p>
+## Mise en forme avec CSS
 
-<p>Si un élément <a href="/fr/docs/Web/HTML/Element/Legend"><code>&lt;legend&gt;</code></a> est présent, il est placé au-dessus de la bordure située au début de l'axe de bloc. L'élément <code>&lt;legend&gt;</code> se réduit si besoin et établit également un contexte de formatage. Sa valeur <code>display</code> utilisée est <code>block</code> (autrement dit, on pourra le cibler avec <code>display: inline</code>, il continuera de se comporter comme <code>block</code>).</p>
+L'élément `<fieldset>` est quelque peu particulier pour la mise en forme.
 
-<p>Une boîte anonyme contiendra le contenu de <code>&lt;fieldset&gt;</code> et héritera de certaines propriétés de <code>&lt;fieldset&gt;</code>. Si l'élément <code>&lt;fieldset&gt;</code> est mis en forme avec <code>display: grid</code> ou <code>display: inline-grid</code>, la boîte anonyme aura un contexte de formatage de grille. Si <code>&lt;fieldset&gt;</code> est mis en forme avec <code>display: flex</code> ou <code>display: inline-flex</code>, la boîte anonyme aura un contexte de formatage flexible. Dans tous les autres cas, la boîte anonyme aura un contexte de formatage de bloc.</p>
+La valeur initiale de la propriété [`display`](/fr/docs/Web/CSS/display) pour cet élément est `block` et l'élément crée un [contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context). Si l'élément `<fieldset>` est mis en forme avec une valeur `display` qui correspond à un style en ligne, celui-ci se comportera comme `inline-block` et sinon comme `block`. Par défaut, une bordure de 2 pixels ondulée entoure le contenu de l'élément et il y a un léger _padding_. Par défaut, l'élément a `min-inline-size: min-content`.
 
-<p>N'hésitez pas à donner au <code>&lt;fieldset&gt;</code> et au <code>&lt;legend&gt;</code> le style que vous souhaitez pour l'adapter au design de votre page.</p>
+Si un élément [`<legend>`](/fr/docs/Web/HTML/Element/Legend) est présent, il est placé au-dessus de la bordure située au début de l'axe de bloc. L'élément `<legend>` se réduit si besoin et établit également un contexte de formatage. Sa valeur `display` utilisée est `block` (autrement dit, on pourra le cibler avec `display: inline`, il continuera de se comporter comme `block`).
 
-<h2 id="examples">Exemples</h2>
+Une boîte anonyme contiendra le contenu de `<fieldset>` et héritera de certaines propriétés de `<fieldset>`. Si l'élément `<fieldset>` est mis en forme avec `display: grid` ou `display: inline-grid`, la boîte anonyme aura un contexte de formatage de grille. Si `<fieldset>` est mis en forme avec `display: flex` ou `display: inline-flex`, la boîte anonyme aura un contexte de formatage flexible. Dans tous les autres cas, la boîte anonyme aura un contexte de formatage de bloc.
 
-<h3 id="simple_fieldset">Exemple simple</h3>
+N'hésitez pas à donner au `<fieldset>` et au `<legend>` le style que vous souhaitez pour l'adapter au design de votre page.
 
-<p>Cet exemple montre un <code>&lt;fieldset&gt;</code> très simple, avec un <code>&lt;legend&gt;</code>, et un seul contrôle à l'intérieur.</p>
+## Exemples
 
-<h4 id="html">HTML</h4>
+### Exemple simple
 
-<pre class="brush: html">&lt;form action="#"&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Titre simple&lt;/legend&gt;
-    &lt;input type="radio" name="radio" id="radio"&gt;
-    &lt;label for="radio"&gt;L'esprit de la radio&lt;/label&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;</pre>
+Cet exemple montre un `<fieldset>` très simple, avec un `<legend>`, et un seul contrôle à l'intérieur.
 
-<h4 id="result">Résultat</h4>
+#### HTML
 
-<p>{{EmbedLiveSample('simple_fieldset', '100%', '80')}}</p>
+```html
+<form action="#">
+  <fieldset>
+    <legend>Titre simple</legend>
+    <input type="radio" name="radio" id="radio">
+    <label for="radio">L'esprit de la radio</label>
+  </fieldset>
+</form>
+```
 
-<h3 id="disabled_fieldset">&lt;fieldset&gt; désactivé</h3>
+#### Résultat
 
-<p>Dans cet exemple, on voit comment l'attribut <code>disabled</code> permet de désactiver un élément <code>&lt;fieldset&gt;</code> et l'ensemble de ses éléments par la même occasion.</p>
+{{EmbedLiveSample('simple_fieldset', '100%', '80')}}
 
-<h4 id="html_2">HTML</h4>
+### \<fieldset> désactivé
 
-<pre class="brush: html">&lt;form action="#"&gt;
-  &lt;fieldset disabled&gt;
-    &lt;legend&gt;Fieldset désactivé&lt;/legend&gt;
-    &lt;div&gt;
-      &lt;label for="name"&gt;Nom : &lt;/label&gt;
-      &lt;input type="text" id="name" value="Chris"&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-      &lt;label for="pwd"&gt;Archétype : &lt;/label&gt;
-      &lt;input type="password" id="pwd" value="Wookie"&gt;
-    &lt;/div&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;</pre>
+Dans cet exemple, on voit comment l'attribut `disabled` permet de désactiver un élément `<fieldset>` et l'ensemble de ses éléments par la même occasion.
 
-<h4 id="result_2">Résultat</h4>
+#### HTML
 
-<p>{{EmbedLiveSample('disabled_fieldset', '100%', '110') }}</p>
+```html
+<form action="#">
+  <fieldset disabled>
+    <legend>Fieldset désactivé</legend>
+    <div>
+      <label for="name">Nom : </label>
+      <input type="text" id="name" value="Chris">
+    </div>
+    <div>
+      <label for="pwd">Archétype : </label>
+      <input type="password" id="pwd" value="Wookie">
+    </div>
+  </fieldset>
+</form>
+```
 
-<h2 id="technical_summary">Résumé technique</h2>
+#### Résultat
+
+{{EmbedLiveSample('disabled_fieldset', '100%', '110') }}
+
+## Résumé technique
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_root">racine de sectionnement</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_listed">contenu énuméré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_listed">élément relatif aux formulaires</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_root"
+          >racine de sectionnement</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_listed"
+          >contenu énuméré</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#form_listed"
+          >élément relatif aux formulaires</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td>Un éventuel élément <a href="/fr/docs/Web/HTML/Element/Legend"><code>&lt;legend&gt;</code></a> suivi par du contenu de flux.</td>
+      <td>
+        Un éventuel élément
+        <a href="/fr/docs/Web/HTML/Element/Legend"
+          ><code>&#x3C;legend></code></a
+        >
+        suivi par du contenu de flux.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires.</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux">contenu de flux</a>.</td>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://w3c.github.io/aria/#group"><code>group</code></a></td>
+      <td>
+        <a href="https://w3c.github.io/aria/#group"><code>group</code></a>
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td><a href="https://w3c.github.io/aria/#radiogroup"><code>radiogroup</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a>, <a href="https://w3c.github.io/aria/#none"><code>none</code></a></td>
+      <td>
+        <a href="https://w3c.github.io/aria/#radiogroup"
+          ><code>radiogroup</code></a
+        >,
+        <a href="https://w3c.github.io/aria/#presentation"
+          ><code>presentation</code></a
+        >, <a href="https://w3c.github.io/aria/#none"><code>none</code></a>
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLFieldSetElement"><code>HTMLFieldSetElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLFieldSetElement"
+          ><code>HTMLFieldSetElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Legend"><code>&lt;legend&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Label"><code>&lt;label&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></li>
-</ul>
+- L'élément [`<legend>`](/fr/docs/Web/HTML/Element/Legend)
+- L'élément [`<input>`](/fr/docs/Web/HTML/Element/Input)
+- L'élément [`<label>`](/fr/docs/Web/HTML/Element/Label)
+- L'élément [`<form>`](/fr/docs/Web/HTML/Element/Form)
diff --git a/files/fr/web/html/element/figcaption/index.md b/files/fr/web/html/element/figcaption/index.md
index 4c7d730f26..87c0699a54 100644
--- a/files/fr/web/html/element/figcaption/index.md
+++ b/files/fr/web/html/element/figcaption/index.md
@@ -9,63 +9,90 @@ tags:
 translation_of: Web/HTML/Element/figcaption
 browser-compat: html.elements.figcaption
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;figcaption&gt;</code></strong> représente une légende décrivant le reste du contenu de son élément parent <a href="/fr/docs/Web/HTML/Element/figure"><code>&lt;figure&gt;</code></a>.</p>
+L'élément HTML **`<figcaption>`** représente une légende décrivant le reste du contenu de son élément parent [`<figure>`](/fr/docs/Web/HTML/Element/figure).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/figcaption.html","tabbed-shorter")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
       <td>Aucune.</td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux">Contenu de flux</a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#contenu_de_flux"
+          >Contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Un élément <a href="/fr/docs/Web/HTML/Element/figure"><code>&lt;figure&gt;</code></a>, l'élément <code>&lt;figcaption&gt;</code> doit être le premier ou le dernier élément fils pour cet élément <code>&lt;figure&gt;</code>.</td>
+      <td>
+        Un élément
+        <a href="/fr/docs/Web/HTML/Element/figure"><code>&#x3C;figure></code></a
+        >, l'élément <code>&#x3C;figcaption></code> doit être le premier ou le
+        dernier élément fils pour cet élément <code>&#x3C;figure></code>.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Pas de rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td><a href="https://w3c.github.io/aria/#group"><code>group</code></a>, <a href="https://w3c.github.io/aria/#none"><code>none</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a></td>
+      <td>
+        <a href="https://w3c.github.io/aria/#group"><code>group</code></a
+        >, <a href="https://w3c.github.io/aria/#none"><code>none</code></a
+        >,
+        <a href="https://w3c.github.io/aria/#presentation"
+          ><code>presentation</code></a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Cet élément prend uniquement en charge [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<h2 id="examples">Exemple</h2>
+## Exemple
 
-<p>Veuillez consulter la page <a href="/fr/docs/Web/HTML/Element/figure"><code>&lt;figure&gt;</code></a> pour des exemples sur <code>&lt;figcaption&gt;</code>.</p>
+Veuillez consulter la page [`<figure>`](/fr/docs/Web/HTML/Element/figure) pour des exemples sur `<figcaption>`.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/figure"><code>&lt;figure&gt;</code></a></li>
-</ul>
+- L'élément [`<figure>`](/fr/docs/Web/HTML/Element/figure)
diff --git a/files/fr/web/html/element/figure/index.md b/files/fr/web/html/element/figure/index.md
index 9c53dbb174..b2c0cceea9 100644
--- a/files/fr/web/html/element/figure/index.md
+++ b/files/fr/web/html/element/figure/index.md
@@ -12,83 +12,136 @@ tags:
 translation_of: Web/HTML/Element/figure
 browser-compat: html.elements.figure
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;figure&gt;</code></strong> représente un contenu autonome, éventuellement accompagné d'une légende facultative, qui est spécifiée à l'aide de l'élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a>. La figure, sa légende et son contenu sont référencés comme une seule unité.</p>
+L'élément HTML **`<figure>`** représente un contenu autonome, éventuellement accompagné d'une légende facultative, qui est spécifiée à l'aide de l'élément [`<figcaption>`](/fr/docs/Web/HTML/Element/figcaption). La figure, sa légende et son contenu sont référencés comme une seule unité.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/figure.html","tabbed-shorter")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots">racine de sectionnement</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots"
+          >racine de sectionnement</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td>Un élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a> suivi d'un <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a> ou du contenu de flux suivi d'un élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a> ou du contenu de flux.</td>
+      <td>
+        Un élément
+        <a href="/fr/docs/Web/HTML/Element/figcaption"
+          ><code>&#x3C;figcaption></code></a
+        >
+        suivi d'un
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu de flux</a
+        >
+        ou du contenu de flux suivi d'un élément
+        <a href="/fr/docs/Web/HTML/Element/figcaption"
+          ><code>&#x3C;figcaption></code></a
+        >
+        ou du contenu de flux.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise ouvrante et la balise fermante sont toutes les deux obligatoires.</td>
+      <td>
+        Aucune, la balise ouvrante et la balise fermante sont toutes les deux
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Figure_Role"><code>figure</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Figure_Role"
+          ><code>figure</code></a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td>Sans descendant <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a> descendant : <a href="https://www.w3.org/TR/html-aria/#dfn-any-role">n'importe quel rôle</a>, sinon aucun rôle autorisé.</td>
+      <td>
+        Sans descendant
+        <a href="/fr/docs/Web/HTML/Element/figcaption"
+          ><code>&#x3C;figcaption></code></a
+        >
+        descendant :
+        <a href="https://www.w3.org/TR/html-aria/#dfn-any-role"
+          >n'importe quel rôle</a
+        >, sinon aucun rôle autorisé.
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Cet élément prend uniquement en charge [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<ul>
-  <li>Généralement, un élément <code>&lt;figure&gt;</code> est utilisé pour une image, une illustration, un diagramme, un fragment de code ou autre qui est référencé depuis le flux principal du document. Toutefois, cet élément peut être déplacé vers une autre partie du document ou en annexe sans que cela ait un impact sur le flux principal.</li>
-  <li><code>&lt;figure&gt;</code> est <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots">une racine de sectionnement</a>, son contenu est donc exclu du plan général du document.</li>
-  <li>Une légende peut être associée avec l'élément <code>&lt;figure&gt;</code> en insérant un élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a> à l'intérieur (en premier ou dernier élément enfant). C'est le premier élément <code>&lt;figcaption&gt;</code> qui sera trouvé dans la figure qui sera affiché comme légende.</li>
-</ul>
+- Généralement, un élément `<figure>` est utilisé pour une image, une illustration, un diagramme, un fragment de code ou autre qui est référencé depuis le flux principal du document. Toutefois, cet élément peut être déplacé vers une autre partie du document ou en annexe sans que cela ait un impact sur le flux principal.
+- `<figure>` est [une racine de sectionnement](/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_roots), son contenu est donc exclu du plan général du document.
+- Une légende peut être associée avec l'élément `<figure>` en insérant un élément [`<figcaption>`](/fr/docs/Web/HTML/Element/figcaption) à l'intérieur (en premier ou dernier élément enfant). C'est le premier élément `<figcaption>` qui sera trouvé dans la figure qui sera affiché comme légende.
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<h3 id="images">Images</h3>
+### Images
 
-<pre class="brush: html">&lt;!-- Une simple image --&gt;
-&lt;figure&gt;
-  &lt;img
+```html
+<!-- Une simple image -->
+<figure>
+  <img
   src="https://developer.mozilla.org/static/img/favicon144.png"
-  alt="Le logo de MDN."&gt;
-&lt;/figure&gt;
+  alt="Le logo de MDN.">
+</figure>
 
-&lt;!-- Une image avec une légende --&gt;
-&lt;figure&gt;
-  &lt;img
+<!-- Une image avec une légende -->
+<figure>
+  <img
   src="https://developer.mozilla.org/static/img/favicon144.png"
-  alt="Le logo de MDN."&gt;
-  &lt;figcaption&gt;Logo MDN&lt;/figcaption&gt;
-&lt;/figure&gt;</pre>
+  alt="Le logo de MDN.">
+  <figcaption>Logo MDN</figcaption>
+</figure>
+```
 
-<div>{{EmbedLiveSample("images", "100%", 400)}}</div>
+{{EmbedLiveSample("images", "100%", 400)}}
 
-<h3 id="code_snippets">Extrait de code</h3>
+### Extrait de code
 
-<pre class="brush: html">&lt;figure&gt;
-  &lt;figcaption&gt;Obtenir les détails du navigateur&lt;/figcaption&gt;
-  &lt;pre&gt;
+```html
+<figure>
+  <figcaption>Obtenir les détails du navigateur</figcaption>
+  <pre>
     function NavigatorExample(){
       let txt;
       txt = "Nom de code: " + navigator.appCodeName;
@@ -99,51 +152,54 @@ browser-compat: html.elements.figure
       txt += "En-tête d'agent utilisateur : " + navigator.userAgent;
       console.log("NavigatorExample", txt);
     }
-  &lt;/pre&gt;
-&lt;/figure&gt;</pre>
+  </pre>
+</figure>
+```
 
-<div>{{EmbedLiveSample("code_snippets", "100%", 250)}}</div>
+{{EmbedLiveSample("code_snippets", "100%", 250)}}
 
-<h3 id="quotations">Citation</h3>
+### Citation
 
-<pre class="brush: html">&lt;figure&gt;
-  &lt;figcaption&gt;
-    &lt;cite&gt;Edsger Dijkstra : &lt;/cite&gt;
-  &lt;/figcaption&gt;
-  &lt;p&gt;« Si le débogage correspond au retrait de bogues,
+```html
+<figure>
+  <figcaption>
+    <cite>Edsger Dijkstra : </cite>
+  </figcaption>
+  <p>« Si le débogage correspond au retrait de bogues,
     alors la programmation correspond à l'ajout de bogues. »
-  &lt;/p&gt;
-&lt;/figure&gt;</pre>
+  </p>
+</figure>
+```
 
-<div>{{EmbedLiveSample("quotations","", 150)}}</div>
+{{EmbedLiveSample("quotations","", 150)}}
 
-<h3 id="poems">Poème</h3>
+### Poème
 
-<pre class="brush: html">&lt;figure&gt;
-  &lt;p style="white-space:pre"&gt;
+```html
+<figure>
+  <p style="white-space:pre">
     Bid me discourse, I will enchant thine ear,
       Or like a fairy trip upon the green,
     Or, like a nymph, with long dishevell'd hair,
       Dance on the sands, and yet no footing seen:
     Love is a spirit all compact of fire,
       Not gross to sink, but light, and will aspire.
-  &lt;/p&gt;
-  &lt;figcaption&gt;&lt;cite&gt;Venus and Adonis&lt;/cite&gt;.
-    By: William Shakespeare&lt;/figcaption&gt;
-&lt;/figure&gt;</pre>
+  </p>
+  <figcaption><cite>Venus and Adonis</cite>.
+    By: William Shakespeare</figcaption>
+</figure>
+```
 
-<div>{{EmbedLiveSample("poems", "100%", 260)}}</div>
+{{EmbedLiveSample("poems", "100%", 260)}}
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a></li>
-</ul>
+- L'élément [`<figcaption>`](/fr/docs/Web/HTML/Element/figcaption)
diff --git a/files/fr/web/html/element/font/index.md b/files/fr/web/html/element/font/index.md
index 599305edf9..b0580d4cd8 100644
--- a/files/fr/web/html/element/font/index.md
+++ b/files/fr/web/html/element/font/index.md
@@ -10,43 +10,37 @@ tags:
 translation_of: Web/HTML/Element/font
 browser-compat: html.elements.font
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.</p>
-</div>
+> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.
 
-<p>L'élément HTML <strong><code>&lt;font&gt;</code></strong> définit la taille, la couleur et la police de son contenu.</p>
+L'élément HTML **`<font>`** définit la taille, la couleur et la police de son contenu.
 
-<div class="warning">
-  <p><strong>Attention :</strong> Ne pas utiliser cet élément ! Bien qu'il ait été normalisé en HTML 3.2, il a été déprécié en HTML 4.01, en même temps que tous les éléments liés uniquement au style, puis rendu obsolète en HTML5.</p>
+> **Attention :** Ne pas utiliser cet élément ! Bien qu'il ait été normalisé en HTML 3.2, il a été déprécié en HTML 4.01, en même temps que tous les éléments liés uniquement au style, puis rendu obsolète en HTML5.
+>
+> À partir de HTML 4, HTML ne véhicule plus d'informations de style (en dehors de l'élément [`<style>`](/fr/docs/Web/HTML/Element/style) ou de l'attribut **style** de chaque élément). Pour tout nouveau développement web, le style doit être écrit en utilisant le [CSS](/fr/docs/Web/CSS) uniquement.
+>
+> L'ancien comportement de l'élément [`<font>`](font) peut être obtenu, et encore mieux contrôlé, en utilisant les propriétés CSS [relatives aux polices de caractères](/fr/docs/Web/CSS/CSS_Fonts).
 
-  <p>À partir de HTML 4, HTML ne véhicule plus d'informations de style (en dehors de l'élément <a href="/fr/docs/Web/HTML/Element/style"><code>&lt;style&gt;</code></a> ou de l'attribut <strong>style</strong> de chaque élément). Pour tout nouveau développement web, le style doit être écrit en utilisant le <a href="/fr/docs/Web/CSS">CSS</a> uniquement.</p>
+## Attributs
 
-  <p>L'ancien comportement de l'élément <a href="font"><code>&lt;font&gt;</code></a> peut être obtenu, et encore mieux contrôlé, en utilisant les propriétés CSS <a href="/fr/docs/Web/CSS/CSS_Fonts">relatives aux polices de caractères</a>.</p>
-</div>
+Comme tous les autres éléments HTML, cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<h2 id="attributes">Attributs</h2>
+- `color`
+  - : Cet attribut définit la couleur du texte en utilisant soit une couleur nommée, soit une couleur indiquée par le format hexadécimal #RRGGBB.
+- `face`
+  - : Cet attribut contient une liste d'une ou plusieurs polices, séparées par des virgules. Le texte est affiché avec la première police que le navigateur supporte. Si aucune des polices listées n'est installée sur le système, le navigateur prend habituellement la police proportionnelle, ou à taille fixe par défaut, du système.
+- `size`
+  - : Cet attribut indique la taille du texte par une valeur numérique ou relative. Les valeurs numériques vont de `1` à `7`, `1` étant la plus petite taille et `3` la taille par défaut. Il peut être défini en utilisant une valeur relative, comme `+2` ou `-3`, qui est relative par rapport à la valeur de l'attribut [`size`](/fr/docs/Web/HTML/Element/basefont#attr-size) de l'élément [`<basefont>`](/fr/docs/Web/HTML/Element/basefont), ou relatif à `3`, la valeur par défaut, si aucune existe.
 
-<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+## Interface DOM
 
-<dl>
-  <dt><code>color</code></dt>
-  <dd>Cet attribut définit la couleur du texte en utilisant soit une couleur nommée, soit une couleur indiquée par le format hexadécimal #RRGGBB.</dd>
-  <dt><code>face</code></dt>
-  <dd>Cet attribut contient une liste d'une ou plusieurs polices, séparées par des virgules. Le texte est affiché avec la première police que le navigateur supporte. Si aucune des polices listées n'est installée sur le système, le navigateur prend habituellement la police proportionnelle, ou à taille fixe par défaut, du système.</dd>
-  <dt><code>size</code></dt>
-  <dd>Cet attribut indique la taille du texte par une valeur numérique ou relative. Les valeurs numériques vont de <code>1</code> à <code>7</code>, <code>1</code> étant la plus petite taille et <code>3</code> la taille par défaut. Il peut être défini en utilisant une valeur relative, comme <code>+2</code> ou <code>-3</code>, qui est relative par rapport à la valeur de l'attribut <a href="/fr/docs/Web/HTML/Element/basefont#attr-size"><code>size</code></a> de l'élément <a href="/fr/docs/Web/HTML/Element/basefont"><code>&lt;basefont&gt;</code></a>, ou relatif à <code>3</code>, la valeur par défaut, si aucune existe.</dd>
-</dl>
+Cet élément implément l'interface [`HTMLFontElement`](/fr/docs/Web/API/HTMLFontElement).
 
-<h2 id="dom_interface">Interface DOM</h2>
+## Spécifications
 
-<p>Cet élément implément l'interface <a href="/fr/docs/Web/API/HTMLFontElement"><code>HTMLFontElement</code></a>.</p>
+{{Specifications}}
 
-<h2 id="specifications">Spécifications</h2>
+## Compatibilité des navigateurs
 
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
\ No newline at end of file
+{{Compat}}
diff --git a/files/fr/web/html/element/footer/index.md b/files/fr/web/html/element/footer/index.md
index f07e3cef1e..6e7ba14741 100644
--- a/files/fr/web/html/element/footer/index.md
+++ b/files/fr/web/html/element/footer/index.md
@@ -9,84 +9,158 @@ tags:
 translation_of: Web/HTML/Element/footer
 browser-compat: html.elements.footer
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;footer&gt;</code></strong> représente le pied de page de la <a href="/fr/docs/Web/Guide/HTML/Content_categories#sectioning_content">section</a> ou de la <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_root">racine de sectionnement</a> la plus proche. Un élément <code>&lt;footer&gt;</code> contient habituellement des informations sur l'autrice ou l'auteur de la section, les données relatives au droit d'auteur (<em>copyright</em>) ou les liens vers d'autres documents en relation.</p>
+L'élément HTML **`<footer>`** représente le pied de page de la [section](/fr/docs/Web/Guide/HTML/Content_categories#sectioning_content) ou de la [racine de sectionnement](/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#sectioning_root) la plus proche. Un élément `<footer>` contient habituellement des informations sur l'autrice ou l'auteur de la section, les données relatives au droit d'auteur (_copyright_) ou les liens vers d'autres documents en relation.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/footer.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/footer.html", "tabbed-standard")}}
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a> sans élément descendant qui soit <code>&lt;footer&gt;</code> ou <a href="/fr/docs/Web/HTML/Element/header"><code>&lt;header&gt;</code></a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >
+        sans élément descendant qui soit <code>&#x3C;footer></code> ou
+        <a href="/fr/docs/Web/HTML/Element/header"><code>&#x3C;header></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise ouvrante et la balise fermante sont toutes les deux obligatoires.</td>
+      <td>
+        Aucune, la balise ouvrante et la balise fermante sont toutes les deux
+        obligatoires.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>. Un élément <code>&lt;footer&gt;</code> ne doit pas descendre d'un élément <a href="/fr/docs/Web/HTML/Element/address"><code>&lt;address&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code>&lt;header&gt;</code></a> ou d'un autre élément <code>&lt;footer&gt;</code>.</td>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu de flux</a
+        >. Un élément <code>&#x3C;footer></code> ne doit pas descendre d'un
+        élément
+        <a href="/fr/docs/Web/HTML/Element/address"
+          ><code>&#x3C;address></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/header"
+          ><code>&#x3C;header></code></a
+        >
+        ou d'un autre élément <code>&#x3C;footer></code>.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a>, ou <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">pas de rôle correspondant</a> si un descendant d'un élément <a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/aside"><code>&lt;aside&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/main"><code>&lt;main&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code>&lt;nav&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a>, ou un élément avec <code>role=<a href="/fr/docs/Web/Accessibility/ARIA/Roles/Article_Role">article</a></code>, <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role"><code>complementary</code></a>, <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Main_role"><code>main</code></a>, <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Navigation_Role"><code>navigation</code></a> ou <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Region_role"><code>region</code></a>.</td>
+      <td>
+        <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role"
+          >contentinfo</a
+        >, ou
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >pas de rôle correspondant</a
+        >
+        si un descendant d'un élément
+        <a href="/fr/docs/Web/HTML/Element/article"
+          ><code>&#x3C;article></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/aside"><code>&#x3C;aside></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/main"><code>&#x3C;main></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/nav"><code>&#x3C;nav></code></a> ou
+        <a href="/fr/docs/Web/HTML/Element/section"
+          ><code>&#x3C;section></code></a
+        >, ou un élément avec
+        <code
+          >role=<a href="/fr/docs/Web/Accessibility/ARIA/Roles/Article_Role"
+            >article</a
+          ></code
+        >,
+        <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Complementary_role"
+          ><code>complementary</code></a
+        >,
+        <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Main_role"
+          ><code>main</code></a
+        >,
+        <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Navigation_Role"
+          ><code>navigation</code></a
+        >
+        ou
+        <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Region_role"
+          ><code>region</code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td><a href="https://w3c.github.io/aria/#group"><code>group</code></a>, <a href="https://w3c.github.io/aria/#none"><code>none</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a></td>
+      <td>
+        <a href="https://w3c.github.io/aria/#group"><code>group</code></a
+        >, <a href="https://w3c.github.io/aria/#none"><code>none</code></a
+        >,
+        <a href="https://w3c.github.io/aria/#presentation"
+          ><code>presentation</code></a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLElement"><code>HTMLElement</code></a>
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme tous les éléments HTML, cet élément accepte <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Comme tous les éléments HTML, cet élément accepte [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<h2 id="usage_notes">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<ul>
-  <li>Les informations sur l'autrice ou l'auteur doivent être placées dans un élément <a href="/fr/docs/Web/HTML/Element/address"><code>&lt;address&gt;</code></a> et incluses dans l'élément <code>&lt;footer&gt;</code>.</li>
-  <li>L'élément <code>&lt;footer&gt;</code> n'a pas de contenu sectionnant et ne peut donc pas introduire une nouvelle section dans le <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">plan</a>.</li>
-</ul>
+- Les informations sur l'autrice ou l'auteur doivent être placées dans un élément [`<address>`](/fr/docs/Web/HTML/Element/address) et incluses dans l'élément `<footer>`.
+- L'élément `<footer>` n'a pas de contenu sectionnant et ne peut donc pas introduire une nouvelle section dans le [plan](/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines).
 
-<h2 id="examples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;footer&gt;
+```html
+<footer>
   Quelques informations de copyright ou bien quelques informations
   sur l'auteur de l'article.
-&lt;/footer&gt;
-</pre>
+</footer>
+```
 
-<h2 id="accessibility_concerns">Accessibilité</h2>
+## Accessibilité
 
-<p>Avant la publication de Safari 13, le <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics#signpostslandmarks">rôle de repère</a> <code>contentinfo</code> n'était pas correctement exposé par <a href="https://help.apple.com/voiceover/info/guide/">VoiceOver</a>. Si vous devez prendre en charge les anciens navigateurs Safari, ajoutez <code>role="contentinfo"</code> à l'élément <code>footer</code> pour vous assurer que le landmark sera correctement exposé.</p>
+Avant la publication de Safari 13, le [rôle de repère](/fr/docs/Learn/Accessibility/WAI-ARIA_basics#signpostslandmarks) `contentinfo` n'était pas correctement exposé par [VoiceOver](https://help.apple.com/voiceover/info/guide/). Si vous devez prendre en charge les anciens navigateurs Safari, ajoutez `role="contentinfo"` à l'élément `footer` pour vous assurer que le landmark sera correctement exposé.
 
-<ul>
-  <li>En rapport : <a href="https://bugs.webkit.org/show_bug.cgi?id=146930">WebKit Bugzilla : 146930 - AX : Les éléments natifs HTML (header, footer, main, aside, nav) devraient fonctionner de la même manière que les points de repère ARIA, parfois ce n'est pas le cas</a>.</li>
-</ul>
+- En rapport : [WebKit Bugzilla : 146930 - AX : Les éléments natifs HTML (header, footer, main, aside, nav) devraient fonctionner de la même manière que les points de repère ARIA, parfois ce n'est pas le cas](https://bugs.webkit.org/show_bug.cgi?id=146930).
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>Autres éléments liés à la section : <a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code>&lt;nav&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/aside"><code>&lt;aside&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h1&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h2&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h3&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h4&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h5&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Heading_Elements"><code>&lt;h6&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/hgroup"><code>&lt;hgroup&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code>&lt;header&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/address"><code>&lt;address&gt;</code></a> ;</li>
-  <li><a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Utilisation des sections et des plans HTML</a></li>
-  <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">ARIA : rôle <code>contentinfo</code></a></li>
- </ul>
+- Autres éléments liés à la section : [`<body>`](/fr/docs/Web/HTML/Element/body), [`<nav>`](/fr/docs/Web/HTML/Element/nav), [`<article>`](/fr/docs/Web/HTML/Element/article), [`<aside>`](/fr/docs/Web/HTML/Element/aside), [`<h1>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h2>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h3>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h4>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h5>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements), [`<hgroup>`](/fr/docs/Web/HTML/Element/hgroup), [`<header>`](/fr/docs/Web/HTML/Element/header), [`<section>`](/fr/docs/Web/HTML/Element/section), [`<address>`](/fr/docs/Web/HTML/Element/address) ;
+- [Utilisation des sections et des plans HTML](/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines)
+- [ARIA : rôle `contentinfo`](/fr/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role)
diff --git a/files/fr/web/html/element/form/index.md b/files/fr/web/html/element/form/index.md
index 2f9a5d0ac6..bbf03d217a 100644
--- a/files/fr/web/html/element/form/index.md
+++ b/files/fr/web/html/element/form/index.md
@@ -13,174 +13,214 @@ tags:
 translation_of: Web/HTML/Element/form
 browser-compat: html.elements.form
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;form&gt;</code> </strong>représente un formulaire, c'est-à-dire une section d'un document qui contient des contrôles interactifs permettant à un utilisateur de fournir des informations.</p>
+L'élément HTML **`<form>` **représente un formulaire, c'est-à-dire une section d'un document qui contient des contrôles interactifs permettant à un utilisateur de fournir des informations.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}
 
-<p>Il est possible d'utiliser les pseudo-classes CSS <a href="/fr/docs/Web/CSS/:valid"><code>:valid</code></a> et <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> pour mettre en forme un élément <code>&lt;form&gt;</code> selon que le contenu des éléments du formulaire est valide ou non.</p>
+Il est possible d'utiliser les pseudo-classes CSS [`:valid`](/fr/docs/Web/CSS/:valid) et [`:invalid`](/fr/docs/Web/CSS/:invalid) pour mettre en forme un élément `<form>` selon que le contenu des éléments du formulaire est valide ou non.
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a> qui ne contient pas d'élément <code>&lt;form&gt;</code>.</td>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >
+        qui ne contient pas d'élément <code>&#x3C;form></code>.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément qui accepte du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role"><code>form</code></a> si le formulaire a un <a href="https://www.w3.org/TR/accname-1.1/#dfn-accessible-name">nom accessible</a>, sinon <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">pas de rôle correspondant</a></td>
+      <td>
+        <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role"
+          ><code>form</code></a
+        >
+        si le formulaire a un
+        <a href="https://www.w3.org/TR/accname-1.1/#dfn-accessible-name"
+          >nom accessible</a
+        >, sinon
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >pas de rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td><a href="https://w3c.github.io/aria/#search"><code>search</code></a>, <a href="https://w3c.github.io/aria/#none"><code>none</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a></td>
+      <td>
+        <a href="https://w3c.github.io/aria/#search"><code>search</code></a
+        >, <a href="https://w3c.github.io/aria/#none"><code>none</code></a
+        >,
+        <a href="https://w3c.github.io/aria/#presentation"
+          ><code>presentation</code></a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLFormElement"><code>HTMLFormElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLFormElement"
+          ><code>HTMLFormElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
-
-<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
-
-<dl>
-  <dt><code>accept</code> {{deprecated_inline}}</dt>
-  <dd>Cet attribut indique quels types de contenus sont acceptés par le serveur. Il peut y en avoir plusieurs, séparés par des virgules.
-    <div class="note">
-      <p><strong>Note :</strong>Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. À la place, il faut utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/Input#attr-accept"><code>accept</code></a> de l'élément <code>&lt;input type=file&gt;</code>.</p>
-    </div>
-  </dd>
-  <dt><code>accept-charset</code></dt>
-  <dd>Encodages de caractères séparés par des espaces que le serveur accepte. Le navigateur les utilise dans l'ordre dans lequel ils sont listés. La valeur par défaut signifie <a href="/fr/docs/Web/HTTP/Headers/Content-Encoding">le même encodage que celui de la page</a>.<br>
-  (Dans les versions précédentes de HTML, les codages de caractères pouvaient également être délimités par des virgules).</dd>
-  <dt><code>autocapitalize</code> {{non-standard_inline}}</dt>
-  <dd>Cet attribut est un attribut non-standard utilisé sur iOS par Safari Mobile qui contrôle la façon dont la valeur du texte est automatiquement transcrite en majuscules lors de la saisie par l'utilisateur. Si l'attribut <code>autocapitalize</code> est défini sur un des descendants du formulaire, il surchargera la valeur de <code>autocapitalize</code> utilisée pour le formulaire. Les valeurs non-dépréciées sont disponibles pour iOS 5 et supérieurs. La valeur par défaut est <code>sentences</code>. Les valeurs possibles sont:
-    <ul>
-      <li><code>none</code> : La mise en majuscules est totalement désactivée</li>
-      <li><code>sentences</code> : Les premières lettres des phrases sont automatiquement passées en majuscules.</li>
-      <li><code>words</code> : La première lettre de chaque mot est automatiquement passée en majuscule.</li>
-      <li><code>characters</code> : Tous les caractères sont automatiquement passés en majuscules.</li>
-    </ul>
-  </dd>
-  <dt><code>autocomplete</code></dt>
-  <dd>Cet attribut énuméré est utilisé pour définir le comportement du navigateur quant à l'autocomplétion des champs. Cet attribut peut être surchargé par chacun des éléments du formulaire. Il peut prendre deux valeurs :
-    <ul>
-      <li><code>off</code> : Le navigateur ne peut pas compléter automatiquement les entrées. (Les navigateurs ont tendance à ignorer ce point pour les formulaires de connexion suspects ; voir <a href="/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields">L'attribut autocomplete et les champs de connexion</a>.)</li>
-      <li><code>on</code> : Le navigateur peut compléter automatiquement les entrées.</li>
-    </ul>
-  </dd>
-  <dt><code>name</code></dt>
-  <dd>Le nom du formulaire. Il doit être unique parmi tous les formulaires d'un document, et ne doit pas être une chaîne de caractères vide.</dd>
-  <dt><code>rel</code></dt>
-  <dd>Crée un hyperlien ou une annotation en fonction de la valeur, voir l'attribut <a href="/fr/docs/Web/HTML/Attributes/rel"><code>rel</code></a> pour plus de détails.</dd>
-</dl>
-
-<h3 id="attributes_for_form_submission">Attributs pour l'envoi de formulaires</h3>
-
-<p>Les attributs suivants contrôlent le comportement pendant l'envoi du formulaire.</p>
-
-<dl>
-  <dt><code>action</code></dt>
-  <dd>L'URL qui traite l'envoi du formulaire. Cette valeur peut être remplacée par un attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formaction"><code>formaction</code></a> sur un <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, <code><a href="/fr/docs/Web/HTML/Element/Input/submit">&lt;input type="submit"&gt;</a></code>, ou <code><a href="/fr/docs/Web/HTML/Element/Input/image">&lt;input type="image"&gt;</a></code>.</dd>
-  <dt><code>enctype</code></dt>
-  <dd>Lorsque la valeur de l'attribut <code>method</code> est <code>post</code>, cet attribut définit le <a href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisé pour encoder les données envoyées au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :
-    <ul>
-      <li><code>application/x-www-form-urlencoded</code> : la valeur par défaut si l'attribut n'est pas défini</li>
-      <li><code>multipart/form-data</code> : la valeur utilisée par un élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> avec l'attribut <code>type="file"</code>.</li>
-      <li><code>text/plain</code>, correspondant au <a href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> éponyme et utilisé à des fins de débogage.</li>
-    </ul>
-    
-    <p>Cette valeur peut être remplacée par un attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formenctype"><code>formenctype</code></a> sur un <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, <code><a href="/fr/docs/Web/HTML/Element/Input/submit">&lt;input type="submit"&gt;</a></code>, ou <code><a href="/fr/docs/Web/HTML/Element/Input/image">&lt;input type="image"&gt;</a></code>.</p>
-  </dd>
-  <dt><code>method</code></dt>
-  <dd>Cet attribut définit la méthode <a href="/fr/docs/Web/HTTP">HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :
-    <ul>
-      <li><code>post</code> : La méthode <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5">POST</a> ; données du formulaire envoyées comme <a href="/fr/docs/Web/API/Body">corps de la requête</a>.</li>
-      <li><code>get</code> : La méthode <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3">GET</a> ; données du formulaire annexées à l'URL <code>action</code> avec un séparateur <code>?</code>. Utilisez cette méthode lorsque le formulaire <a href="/fr/docs/Glossary/Idempotent">n'a pas d'effets secondaires</a>.</li>
-      <li><code>dialog</code> : Lorsque le formulaire se trouve à l'intérieur d'un <a href="/fr/docs/Web/HTML/Element/dialog"><code>&lt;dialog&gt;</code></a>, ferme la boîte de dialogue à la soumission.</li>
-    </ul>
-
-    <p>Si cet attribut n'est pas défini, la valeur par défaut utilisée est <code>get</code>. Cette valeur peut-être remplacée par un attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formmethod"><code>formmethod</code></a> sur un <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/submit"><code>&lt;input type="submit"&gt;</code></a>, ou <code><a href="/fr/docs/Web/HTML/Element/Input/image">&lt;input type="image"&gt;</a></code>.</p>
-  </dd>
-  <dt><code>novalidate</code></dt>
-  <dd>Cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas défini, le formulaire sera validé lors de sa soumission. Il peut être surchargé par l'attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formnovalidate"><code>formnovalidate</code></a> des éléments <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> appartenant au formulaire.</dd>
-  <dt><code>target</code></dt>
-  <dd>Un nom ou un mot-clé indiquant où afficher la réponse après avoir envoyé le formulaire. Dans HTML 4, c'est le nom, ou le mot-clé, d'une frame. Dans HTML5, c'est le nom, ou le mot-clé, d'un <em>contexte de navigation</em> (onglet, fenêtre, frame). Les mots-clés suivants ont un sens particulier :
-    <ul>
-      <li><code>_self</code> (par défaut) : Charger dans le même contexte de navigation que le contexte actuel.</li>
-      <li><code>_blank</code>: Chargement dans un nouveau contexte de navigation sans nom.</li>
-      <li><code>_parent</code>: Charge dans le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, se comporte de la même manière que <code>_self</code>.</li>
-      <li><code>_top</code>: Charger dans le contexte de navigation de niveau supérieur (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte actuel et qui n'a pas de parent). S'il n'y a pas de parent, se comporte de la même manière que <code>_self</code>.</li>
-    </ul>
-
-    <p>Cette valeur peut être remplacée par un attribut <a href="/fr/docs/Web/HTML/Element/Button#attr-formtarget"><code>formtarget</code></a> sur un <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, <code><a href="/fr/docs/Web/HTML/Element/Input/submit">&lt;input type="submit"&gt;</a></code>, ou <code><a href="/fr/docs/Web/HTML/Element/Input/image">&lt;input type="image"&gt;</a></code>.</p>
-    <div class="note">
-      <p><strong>Note :</strong>La définition de <code>target="_blank"</code> sur les éléments <code>&lt;form&gt;</code> fournit implicitement le même comportement <code>rel</code> que la définition de <a href="/fr/docs/Web/HTML/Link_types/noopener"><code>rel="noopener"</code></a> qui ne définit pas <code>window.opener</code>.</p>
-    </div>
-  </dd>
-</dl>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="html">HTML</h3>
-
-<pre class="brush: html">&lt;!-- Formulaire simple qui enverra une requête GET --&gt;
-&lt;form&gt;
-  &lt;label&gt;Nom :
-    &lt;input name="submitted-name" autocomplete="name"&gt;
-  &lt;/label&gt;
-  &lt;button&gt;Sauvegarder&lt;/button&gt;
-&lt;/form&gt;
-
-&lt;!-- Formulaire qui enverra une requête POST à l'URL actuelle --&gt;
-&lt;form method="post"&gt;
-  &lt;label&gt;Nom :
-    &lt;input name="submitted-name" autocomplete="name"&gt;
-  &lt;/label&gt;
-  &lt;button&gt;Sauvegarder&lt;/button&gt;
-&lt;/form&gt;
-
-&lt;!-- Formulaire avec un ensemble de champs, une légende et une étiquette --&gt;
-&lt;form method="post"&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Titre&lt;/legend&gt;
-    &lt;label&gt;&lt;input type="radio" name="radio"&gt;Sélectionnez-moi&lt;/label&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;</pre>
-
-<h3 id="result">Résultat</h3>
-
-<div>{{EmbedLiveSample("examples", "100%", 130)}}</div>
-
-<h2 id="specifications">Spécifications</h2>
-
-<p>{{Specifications}}</p>
-
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="see_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Learn/Forms">Guide des formulaires HTML</a></li>
-  <li>D'autres éléments qui sont utilisés lors de la création de formulaires : <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/datalist"><code>&lt;datalist&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Fieldset"><code>&lt;fieldset&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Label"><code>&lt;label&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Legend"><code>&lt;legend&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Optgroup"><code>&lt;optgroup&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Option"><code>&lt;option&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/output"><code>&lt;output&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Progress"><code>&lt;progress&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Textarea"><code>&lt;textarea&gt;</code></a>.</li>
-  <li>Obtenir une liste des éléments du formulaire : <a href="/fr/docs/Web/API/HTMLFormElement/elements"><code>HTMLFormElement.elements</code></a></li>
-  <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA : rôle <code>form</code></a></li>
-  <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Search_role">ARIA : rôle <code>search</code></a></li>
- </ul>
+## Attributs
+
+Cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
+
+- `accept` {{deprecated_inline}}
+
+  - : Cet attribut indique quels types de contenus sont acceptés par le serveur. Il peut y en avoir plusieurs, séparés par des virgules.
+
+    > **Note :**Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. À la place, il faut utiliser l'attribut [`accept`](/fr/docs/Web/HTML/Element/Input#attr-accept) de l'élément `<input type=file>`.
+
+- `accept-charset`
+  - : Encodages de caractères séparés par des espaces que le serveur accepte. Le navigateur les utilise dans l'ordre dans lequel ils sont listés. La valeur par défaut signifie [le même encodage que celui de la page](/fr/docs/Web/HTTP/Headers/Content-Encoding).
+    (Dans les versions précédentes de HTML, les codages de caractères pouvaient également être délimités par des virgules).
+- `autocapitalize` {{non-standard_inline}}
+
+  - : Cet attribut est un attribut non-standard utilisé sur iOS par Safari Mobile qui contrôle la façon dont la valeur du texte est automatiquement transcrite en majuscules lors de la saisie par l'utilisateur. Si l'attribut `autocapitalize` est défini sur un des descendants du formulaire, il surchargera la valeur de `autocapitalize` utilisée pour le formulaire. Les valeurs non-dépréciées sont disponibles pour iOS 5 et supérieurs. La valeur par défaut est `sentences`. Les valeurs possibles sont:
+
+    - `none` : La mise en majuscules est totalement désactivée
+    - `sentences` : Les premières lettres des phrases sont automatiquement passées en majuscules.
+    - `words` : La première lettre de chaque mot est automatiquement passée en majuscule.
+    - `characters` : Tous les caractères sont automatiquement passés en majuscules.
+
+- `autocomplete`
+
+  - : Cet attribut énuméré est utilisé pour définir le comportement du navigateur quant à l'autocomplétion des champs. Cet attribut peut être surchargé par chacun des éléments du formulaire. Il peut prendre deux valeurs :
+
+    - `off` : Le navigateur ne peut pas compléter automatiquement les entrées. (Les navigateurs ont tendance à ignorer ce point pour les formulaires de connexion suspects ; voir [L'attribut autocomplete et les champs de connexion](/fr/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#the_autocomplete_attribute_and_login_fields).)
+    - `on` : Le navigateur peut compléter automatiquement les entrées.
+
+- `name`
+  - : Le nom du formulaire. Il doit être unique parmi tous les formulaires d'un document, et ne doit pas être une chaîne de caractères vide.
+- `rel`
+  - : Crée un hyperlien ou une annotation en fonction de la valeur, voir l'attribut [`rel`](/fr/docs/Web/HTML/Attributes/rel) pour plus de détails.
+
+### Attributs pour l'envoi de formulaires
+
+Les attributs suivants contrôlent le comportement pendant l'envoi du formulaire.
+
+- `action`
+  - : L'URL qui traite l'envoi du formulaire. Cette valeur peut être remplacée par un attribut [`formaction`](/fr/docs/Web/HTML/Element/Button#attr-formaction) sur un [`<button>`](/fr/docs/Web/HTML/Element/Button), [`<input type="submit">`](/fr/docs/Web/HTML/Element/Input/submit), ou [`<input type="image">`](/fr/docs/Web/HTML/Element/Input/image).
+- `enctype`
+
+  - : Lorsque la valeur de l'attribut `method` est `post`, cet attribut définit le [type MIME](https://fr.wikipedia.org/wiki/Type_MIME) qui sera utilisé pour encoder les données envoyées au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :
+
+    - `application/x-www-form-urlencoded` : la valeur par défaut si l'attribut n'est pas défini
+    - `multipart/form-data` : la valeur utilisée par un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) avec l'attribut `type="file"`.
+    - `text/plain`, correspondant au [type MIME](https://fr.wikipedia.org/wiki/Type_MIME) éponyme et utilisé à des fins de débogage.
+
+    Cette valeur peut être remplacée par un attribut [`formenctype`](/fr/docs/Web/HTML/Element/Button#attr-formenctype) sur un [`<button>`](/fr/docs/Web/HTML/Element/Button), [`<input type="submit">`](/fr/docs/Web/HTML/Element/Input/submit), ou [`<input type="image">`](/fr/docs/Web/HTML/Element/Input/image).
+
+- `method`
+
+  - : Cet attribut définit la méthode [HTTP](/fr/docs/Web/HTTP) qui sera utilisée pour envoyer les données au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :
+
+    - `post` : La méthode [POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) ; données du formulaire envoyées comme [corps de la requête](/fr/docs/Web/API/Body).
+    - `get` : La méthode [GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3) ; données du formulaire annexées à l'URL `action` avec un séparateur `?`. Utilisez cette méthode lorsque le formulaire [n'a pas d'effets secondaires](/fr/docs/Glossary/Idempotent).
+    - `dialog` : Lorsque le formulaire se trouve à l'intérieur d'un [`<dialog>`](/fr/docs/Web/HTML/Element/dialog), ferme la boîte de dialogue à la soumission.
+
+    Si cet attribut n'est pas défini, la valeur par défaut utilisée est `get`. Cette valeur peut-être remplacée par un attribut [`formmethod`](/fr/docs/Web/HTML/Element/Button#attr-formmethod) sur un [`<button>`](/fr/docs/Web/HTML/Element/Button), [`<input type="submit">`](/fr/docs/Web/HTML/Element/Input/submit), ou [`<input type="image">`](/fr/docs/Web/HTML/Element/Input/image).
+
+- `novalidate`
+  - : Cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas défini, le formulaire sera validé lors de sa soumission. Il peut être surchargé par l'attribut [`formnovalidate`](/fr/docs/Web/HTML/Element/Button#attr-formnovalidate) des éléments [`<button>`](/fr/docs/Web/HTML/Element/Button) ou [`<input>`](/fr/docs/Web/HTML/Element/Input) appartenant au formulaire.
+- `target`
+
+  - : Un nom ou un mot-clé indiquant où afficher la réponse après avoir envoyé le formulaire. Dans HTML 4, c'est le nom, ou le mot-clé, d'une frame. Dans HTML5, c'est le nom, ou le mot-clé, d'un _contexte de navigation_ (onglet, fenêtre, frame). Les mots-clés suivants ont un sens particulier :
+
+    - `_self` (par défaut) : Charger dans le même contexte de navigation que le contexte actuel.
+    - `_blank`: Chargement dans un nouveau contexte de navigation sans nom.
+    - `_parent`: Charge dans le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, se comporte de la même manière que `_self`.
+    - `_top`: Charger dans le contexte de navigation de niveau supérieur (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte actuel et qui n'a pas de parent). S'il n'y a pas de parent, se comporte de la même manière que `_self`.
+
+    Cette valeur peut être remplacée par un attribut [`formtarget`](/fr/docs/Web/HTML/Element/Button#attr-formtarget) sur un [`<button>`](/fr/docs/Web/HTML/Element/Button), [`<input type="submit">`](/fr/docs/Web/HTML/Element/Input/submit), ou [`<input type="image">`](/fr/docs/Web/HTML/Element/Input/image).
+
+    > **Note :**La définition de `target="_blank"` sur les éléments `<form>` fournit implicitement le même comportement `rel` que la définition de [`rel="noopener"`](/fr/docs/Web/HTML/Link_types/noopener) qui ne définit pas `window.opener`.
+
+## Exemples
+
+### HTML
+
+```html
+<!-- Formulaire simple qui enverra une requête GET -->
+<form>
+  <label>Nom :
+    <input name="submitted-name" autocomplete="name">
+  </label>
+  <button>Sauvegarder</button>
+</form>
+
+<!-- Formulaire qui enverra une requête POST à l'URL actuelle -->
+<form method="post">
+  <label>Nom :
+    <input name="submitted-name" autocomplete="name">
+  </label>
+  <button>Sauvegarder</button>
+</form>
+
+<!-- Formulaire avec un ensemble de champs, une légende et une étiquette -->
+<form method="post">
+  <fieldset>
+    <legend>Titre</legend>
+    <label><input type="radio" name="radio">Sélectionnez-moi</label>
+  </fieldset>
+</form>
+```
+
+### Résultat
+
+{{EmbedLiveSample("examples", "100%", 130)}}
+
+## Spécifications
+
+{{Specifications}}
+
+## Compatibilité des navigateurs
+
+{{Compat}}
+
+## Voir aussi
+
+- [Guide des formulaires HTML](/fr/docs/Learn/Forms)
+- D'autres éléments qui sont utilisés lors de la création de formulaires : [`<button>`](/fr/docs/Web/HTML/Element/Button), [`<datalist>`](/fr/docs/Web/HTML/Element/datalist), [`<fieldset>`](/fr/docs/Web/HTML/Element/Fieldset), [`<input>`](/fr/docs/Web/HTML/Element/Input), [`<label>`](/fr/docs/Web/HTML/Element/Label), [`<legend>`](/fr/docs/Web/HTML/Element/Legend), [`<meter>`](/fr/docs/Web/HTML/Element/Meter), [`<optgroup>`](/fr/docs/Web/HTML/Element/Optgroup), [`<option>`](/fr/docs/Web/HTML/Element/Option), [`<output>`](/fr/docs/Web/HTML/Element/output), [`<progress>`](/fr/docs/Web/HTML/Element/Progress), [`<select>`](/fr/docs/Web/HTML/Element/select), [`<textarea>`](/fr/docs/Web/HTML/Element/Textarea).
+- Obtenir une liste des éléments du formulaire : [`HTMLFormElement.elements`](/fr/docs/Web/API/HTMLFormElement/elements)
+- [ARIA : rôle `form`](/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role)
+- [ARIA : rôle `search`](/fr/docs/Web/Accessibility/ARIA/Roles/Search_role)
diff --git a/files/fr/web/html/element/frame/index.md b/files/fr/web/html/element/frame/index.md
index 00b383057d..b1e817205a 100644
--- a/files/fr/web/html/element/frame/index.md
+++ b/files/fr/web/html/element/frame/index.md
@@ -10,55 +10,51 @@ tags:
 translation_of: Web/HTML/Element/frame
 browser-compat: html.elements.frame
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.</p>
-</div>
+> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.
 
-<p>L'élément HTML <strong><code>&lt;frame&gt;</code></strong> définit une zone particulière dans laquelle un autre document HTML est affiché. Une <code>&lt;frame&gt;</code> (un « cadre ») doit être utilisée dans un élément <a href="/fr/docs/Web/HTML/Element/frameset"><code>&lt;frameset&gt;</code></a>.</p>
+L'élément HTML **`<frame>`** définit une zone particulière dans laquelle un autre document HTML est affiché. Une `<frame>` (un « cadre ») doit être utilisée dans un élément [`<frameset>`](/fr/docs/Web/HTML/Element/frameset).
 
-<p>Utiliser l'élément <code>&lt;frame&gt;</code> est déconseillé en raison de certains inconvénients tels que des problèmes de performance, et un manque d'accessibilité pour les utilisateurs de lecteurs d'écran.</p>
+Utiliser l'élément `<frame>` est déconseillé en raison de certains inconvénients tels que des problèmes de performance, et un manque d'accessibilité pour les utilisateurs de lecteurs d'écran.
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément prend en charge les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément prend en charge les [attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<dl>
-  <dt><code>src</code></dt>
-  <dd>Cet attribut indique le document qui doit être affiché dans la frame.</dd>
-  <dt><code>name</code></dt>
-  <dd>Cet attribut sert à nommer les frames. Sans nommage, tous les liens seront ouverts dans la frame où ils se trouvent. Voir <a href="/fr/docs/Web/HTML/Element/a#attr-target"><code>target</code></a> pour plus d'informations.</dd>
-  <dt><code>noresize</code></dt>
-  <dd>Cet attribut empêche aux utilisateurs de redimensionner les frames.</dd>
-  <dt><code>scrolling</code></dt>
-  <dd>Cet attribut définit l'existence des barres de défilement. Si cet attribut n'est pas utilisé, le navigateur mettre une barre de défilement si nécessaire. Il y a deux options : <code>yes</code> pour afficher les barres de défilement même quand ce n'est pas nécessaire, et <code>no</code> pour ne pas afficher les barres de défilement même quand c'est nécessaire.</dd>
-  <dt><code>marginheight</code></dt>
-  <dd>Cet attribut définit la hauteur des marges entre les frames.</dd>
-  <dt><code>marginwidth</code></dt>
-  <dd>Cet attribut définit la largeur des marges entre les frames.</dd>
-  <dt><code>frameborder</code></dt>
-  <dd>Cet attribut permet de mettre des bordures à la frame.</dd>
-</dl>
+- `src`
+  - : Cet attribut indique le document qui doit être affiché dans la frame.
+- `name`
+  - : Cet attribut sert à nommer les frames. Sans nommage, tous les liens seront ouverts dans la frame où ils se trouvent. Voir [`target`](/fr/docs/Web/HTML/Element/a#attr-target) pour plus d'informations.
+- `noresize`
+  - : Cet attribut empêche aux utilisateurs de redimensionner les frames.
+- `scrolling`
+  - : Cet attribut définit l'existence des barres de défilement. Si cet attribut n'est pas utilisé, le navigateur mettre une barre de défilement si nécessaire. Il y a deux options : `yes` pour afficher les barres de défilement même quand ce n'est pas nécessaire, et `no` pour ne pas afficher les barres de défilement même quand c'est nécessaire.
+- `marginheight`
+  - : Cet attribut définit la hauteur des marges entre les frames.
+- `marginwidth`
+  - : Cet attribut définit la largeur des marges entre les frames.
+- `frameborder`
+  - : Cet attribut permet de mettre des bordures à la frame.
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<pre class="brush: html">&lt;frameset cols="50%,50%"&gt;
-  &lt;frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe" /&gt;
-  &lt;frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frame" /&gt;
-&lt;/frameset&gt;</pre>
+```html
+<frameset cols="50%,50%">
+  <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe" />
+  <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frame" />
+</frameset>
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/frameset"><code>&lt;frameset&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a></li>
-</ul>
+- L'élément [`<frameset>`](/fr/docs/Web/HTML/Element/frameset)
+- L'élément [`<iframe>`](/fr/docs/Web/HTML/Element/iframe)
diff --git a/files/fr/web/html/element/frameset/index.md b/files/fr/web/html/element/frameset/index.md
index 33576fbbfb..e7bfcbc6b9 100644
--- a/files/fr/web/html/element/frameset/index.md
+++ b/files/fr/web/html/element/frameset/index.md
@@ -10,47 +10,41 @@ tags:
 translation_of: Web/HTML/Element/frameset
 browser-compat: html.elements.frameset
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<div class="warning">
-  <p><strong>Attention :</strong> Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.</p>
-</div>
+> **Attention :** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la prendre en charge, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications web l'utilisant peuvent cesser de fonctionner à tout moment.
 
-<p>L'élément HTML <strong><code>&lt;frameset&gt;</code></strong> est utilisé pour contenir les éléments <a href="/fr/docs/Web/HTML/Element/frame"><code>&lt;frame&gt;</code></a>.</p>
+L'élément HTML **`<frameset>`** est utilisé pour contenir les éléments [`<frame>`](/fr/docs/Web/HTML/Element/frame).
 
-<div class="note">
-  <p><strong>Note :</strong>L'utilisation de cadres étant désormais déconseillée au profit de l'utilisation de <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a>, cet élément n'est généralement pas utilisé par les sites web modernes.</p>
-</div>
+> **Note :**L'utilisation de cadres étant désormais déconseillée au profit de l'utilisation de [`<iframe>`](/fr/docs/Web/HTML/Element/iframe), cet élément n'est généralement pas utilisé par les sites web modernes.
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<dl>
-  <dt><code>cols</code></dt>
-  <dd>Cet attribut définit le nombre et la taille des espaces horizontaux dans un <code>&lt;frameset&gt;</code>.</dd>
-  <dt><code>rows</code></dt>
-  <dd>Cet attribut définit le nombre et la taille des espaces verticaux dans un <code>&lt;frameset&gt;</code>.</dd>
-</dl>
+- `cols`
+  - : Cet attribut définit le nombre et la taille des espaces horizontaux dans un `<frameset>`.
+- `rows`
+  - : Cet attribut définit le nombre et la taille des espaces verticaux dans un `<frameset>`.
 
-<h2 id="example">Exemple</h2>
+## Exemple
 
-<pre class="brush:html">&lt;frameset cols="50%,50%"&gt;
-  &lt;frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frameset" /&gt;
-  &lt;frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frame" /&gt;
-&lt;/frameset&gt;</pre>
+```html
+<frameset cols="50%,50%">
+  <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frameset" />
+  <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frame" />
+</frameset>
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/frame"><code>&lt;frame&gt;</code></a></li>
-  <li>L'élément <a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a></li>
-</ul>
+- L'élément [`<frame>`](/fr/docs/Web/HTML/Element/frame)
+- L'élément [`<iframe>`](/fr/docs/Web/HTML/Element/iframe)
diff --git a/files/fr/web/html/element/head/index.md b/files/fr/web/html/element/head/index.md
index c8b62fc80a..f5ba498b1e 100644
--- a/files/fr/web/html/element/head/index.md
+++ b/files/fr/web/html/element/head/index.md
@@ -8,116 +8,107 @@ tags:
   - Web
 translation_of: Web/HTML/Element/head
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong>&lt;head&gt;</strong> fournit des informations générales (métadonnées) sur le document, incluant son titre et des liens ou des définitions vers des scripts et feuilles de style.</p>
+L'élément HTML **\<head>** fournit des informations générales (métadonnées) sur le document, incluant son titre et des liens ou des définitions vers des scripts et feuilles de style.
 
-<div class="blockIndicator note">
-<p><strong>Note :</strong> L'élément <code>&lt;head&gt;</code> contient principalement des données destinées au traitement automatisé et pas nécessairement lisibles par des humains. Pour afficher des informations lisibles pour les utilisateurs dans des en-têtes ou titre, voir l'élément {{HTMLElement("header")}}.</p>
-</div>
+> **Note :** L'élément `<head>` contient principalement des données destinées au traitement automatisé et pas nécessairement lisibles par des humains. Pour afficher des informations lisibles pour les utilisateurs dans des en-têtes ou titre, voir l'élément {{HTMLElement("header")}}.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme tous les éléments HTML, cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Comme tous les éléments HTML, cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("profile")}}{{obsolete_inline}}</dt>
- <dd>L'URI d'un ou plusieurs profils de métadonnées, séparés par un espace.</dd>
-</dl>
+- {{htmlattrdef("profile")}}{{obsolete_inline}}
+  - : L'URI d'un ou plusieurs profils de métadonnées, séparés par un espace.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;html&gt;
-  &lt;head&gt;
-    &lt;title&gt;Titre du document&lt;/title&gt;
-  &lt;/head&gt;
-&lt;/html&gt;
-</pre>
+```html
+<html>
+  <head>
+    <title>Titre du document</title>
+  </head>
+</html>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>La plupart des navigateurs conformes à HTML5 construisent automatiquement l'élément <code>&lt;head&gt;</code> si les balises sont omises dans le balisage. <a href="https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/">Cependant, ce comportement n'est pas garanti pour les navigateurs antérieurs</a>.</p>
+La plupart des navigateurs conformes à HTML5 construisent automatiquement l'élément `<head>` si les balises sont omises dans le balisage. [Cependant, ce comportement n'est pas garanti pour les navigateurs antérieurs](https://www.stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/).
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td>Aucune</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Si le document est un document source ({{htmlattrxref("srcdoc", "iframe")}}) d'une {{HTMLElement("iframe")}} ou si l'information pour le titre est disponible via un protocole de plus haut niveau zéro ou plusieurs éléments de méta-données.<br>
-    Sinon un ou plusieurs éléments de méta-données dont un (et un seul) est un élément {{HTMLElement("title")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>La balise de début peut être absente si le premier contenu est un élément.<br>
-    La balise de fermeture peut être absente si le premier objet suivant l'élément <code>&lt;head&gt;</code> n'est pas un caractère blanc ou un commentaire.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Cet élément doit être le premier enfant de l'élément {{HTMLElement("html")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLHeadElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>Aucune</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        Si le document est un document source
+        ({{htmlattrxref("srcdoc", "iframe")}}) d'une
+        {{HTMLElement("iframe")}} ou si l'information pour le titre est
+        disponible via un protocole de plus haut niveau zéro ou plusieurs
+        éléments de méta-données.<br />Sinon un ou plusieurs éléments de
+        méta-données dont un (et un seul) est un élément
+        {{HTMLElement("title")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        La balise de début peut être absente si le premier contenu est un
+        élément.<br />La balise de fermeture peut être absente si le premier
+        objet suivant l'élément <code>&#x3C;head></code> n'est pas un caractère
+        blanc ou un commentaire.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Cet élément doit être le premier enfant de l'élément
+        {{HTMLElement("html")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLHeadElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '&lt;head&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification depuis la dernière dérivation.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '&lt;head&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>L'attribut <code>profile</code> est désormais obsolète.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'global.html#h-7.4.1', '&lt;head&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                    | État                             | Commentaires                                       |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '&lt;head&gt;')}}         | {{Spec2('HTML WHATWG')}} | Aucune modification depuis la dernière dérivation. |
+| {{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '&lt;head&gt;')}} | {{Spec2('HTML5 W3C')}}     | L'attribut `profile` est désormais obsolète.       |
+| {{SpecName('HTML4.01', 'global.html#h-7.4.1', '&lt;head&gt;')}}                             | {{Spec2('HTML4.01')}}     |                                                    |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.head")}}</p>
+{{Compat("html.elements.head")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les éléments qui peuvent être utilisés à l'intérieur de l'élément <code>&lt;head&gt;</code> :
+- Les éléments qui peuvent être utilisés à l'intérieur de l'élément `<head>` :
 
-  <ul>
-   <li>{{HTMLElement("title")}}</li>
-   <li>{{HTMLElement("base")}}</li>
-   <li>{{HTMLElement("link")}}</li>
-   <li>{{HTMLElement("style")}}</li>
-   <li>{{HTMLElement("meta")}}</li>
-   <li>{{HTMLElement("script")}}</li>
-   <li>{{HTMLElement("noscript")}}</li>
-   <li>{{HTMLElement("template")}}</li>
-  </ul>
- </li>
-</ul>
+  - {{HTMLElement("title")}}
+  - {{HTMLElement("base")}}
+  - {{HTMLElement("link")}}
+  - {{HTMLElement("style")}}
+  - {{HTMLElement("meta")}}
+  - {{HTMLElement("script")}}
+  - {{HTMLElement("noscript")}}
+  - {{HTMLElement("template")}}
diff --git a/files/fr/web/html/element/header/index.md b/files/fr/web/html/element/header/index.md
index b03ea5384e..f997c7e81c 100644
--- a/files/fr/web/html/element/header/index.md
+++ b/files/fr/web/html/element/header/index.md
@@ -8,117 +8,130 @@ tags:
   - Web
 translation_of: Web/HTML/Element/header
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'<strong>élément HTML <code>&lt;header&gt;</code></strong> représente un groupe de contenu introductif ou de contenu aidant à la navigation. Il peut contenir des éléments de titre, mais aussi d'autres éléments tels qu'un logo, un formulaire de recherche, etc.</p>
+L'**élément HTML `<header>`** représente un groupe de contenu introductif ou de contenu aidant à la navigation. Il peut contenir des éléments de titre, mais aussi d'autres éléments tels qu'un logo, un formulaire de recherche, etc.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/header.html", "tabbed-standard")}}
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a> mais sans élément descendant qui soit {{HTMLElement("footer")}} ou <code>&lt;header&gt;</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Il est à noter qu'un élément <code>&lt;header&gt;</code> ne doit pas descendre d'un élément {{HTMLElement("address")}}, {{HTMLElement("footer")}} ou d'un autre élément <code>&lt;header&gt;</code>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >
+        mais sans élément descendant qui soit {{HTMLElement("footer")}}
+        ou <code>&#x3C;header></code>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >. Il est à noter qu'un élément <code>&#x3C;header></code> ne doit pas
+        descendre d'un élément {{HTMLElement("address")}},
+        {{HTMLElement("footer")}} ou d'un autre élément
+        <code>&#x3C;header></code>.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>
+        {{ARIARole("group")}}, {{ARIARole("presentation")}}
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>L'élément <code>&lt;header&gt;</code> n'est pas une section de contenu et n'introduit donc pas de nouvelle section dans ls <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">structure</a>. Cela dit, un élément <code>&lt;header&gt;</code> est généralement destiné à contenir l'en-tête de la section environnante (un élément <code>h1</code>-<code>h6</code>), mais ce <strong>n'est pas</strong> obligatoire.</p>
+L'élément `<header>` n'est pas une section de contenu et n'introduit donc pas de nouvelle section dans ls [structure](/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document). Cela dit, un élément `<header>` est généralement destiné à contenir l'en-tête de la section environnante (un élément `h1`-`h6`), mais ce **n'est pas** obligatoire.
 
-<h3 id="Usage_historique">Usage historique</h3>
+### Usage historique
 
-<p>Bien que l'élément <code>&lt;header&gt;</code> ne fasse pas partie de la spécification HTML avant {{glossary("HTML5")}} , il existait de façon implicite depuis les premières versions. <a href="http://info.cern.ch/">En consultant le premier site web</a>, il était originellement utilisé comme l'élément <code>&lt;head&gt;</code>. À un moment donné, il a été décidé d'utiliser un nom différent. Cela a permis à <code>&lt;header&gt;</code> d'être libre de remplir un rôle différent par la suite.</p>
+Bien que l'élément `<header>` ne fasse pas partie de la spécification HTML avant {{glossary("HTML5")}} , il existait de façon implicite depuis les premières versions. [En consultant le premier site web](http://info.cern.ch/), il était originellement utilisé comme l'élément `<head>`. À un moment donné, il a été décidé d'utiliser un nom différent. Cela a permis à `<header>` d'être libre de remplir un rôle différent par la suite.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme tous les éléments HTML, cet élément possède les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p>
+Comme tous les éléments HTML, cet élément possède les [attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="En-tête_de_page">En-tête de page</h3>
+### En-tête de page
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;header&gt;
-  &lt;h1&gt;Titre principal&lt;/h1&gt;
-  &lt;img src="mdn-logo-sm.png" alt="MDN logo"&gt;
-&lt;/header&gt;</pre>
+```html
+<header>
+  <h1>Titre principal</h1>
+  <img src="mdn-logo-sm.png" alt="MDN logo">
+</header>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("En-tête_de_page","100%","200")}}</p>
+{{EmbedLiveSample("En-tête_de_page","100%","200")}}
 
-<h3 id="En-tête_pour_un_article">En-tête pour un article</h3>
+### En-tête pour un article
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;article&gt;
-  &lt;header&gt;
-    &lt;h2&gt;La planète Terre&lt;/h2&gt;
-    &lt;p&gt;Publié le &lt;time datetime="2017-10-04"&gt;4 octobre 2017&lt;/time&gt; par Jeanne Smith&lt;/p&gt;
-  &lt;/header&gt;
-  &lt;p&gt;Nous vivons sur une planète bleue et verte&lt;/p&gt;
-  &lt;p&gt;&lt;a href="https://example.com/the-planet-earth/"&gt;Poursuivre la lecture…&lt;/a&gt;&lt;/p&gt;
-&lt;/article&gt;
-</pre>
+```html
+<article>
+  <header>
+    <h2>La planète Terre</h2>
+    <p>Publié le <time datetime="2017-10-04">4 octobre 2017</time> par Jeanne Smith</p>
+  </header>
+  <p>Nous vivons sur une planète bleue et verte</p>
+  <p><a href="https://example.com/the-planet-earth/">Poursuivre la lecture…</a></p>
+</article>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("En-tête_pour_un_article","100%","200")}}</p>
+{{EmbedLiveSample("En-tête_pour_un_article","100%","200")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-header-element', '&lt;header&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'sections.html#the-header-element', '&lt;header&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-header-element', '&lt;header&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'sections.html#the-header-element', '&lt;header&gt;')}}     | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.header")}}</p>
+{{Compat("html.elements.header")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Autres éléments liés à la section d'un document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}</li>
- <li><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Plan et sections d'un document HTML5</a></li>
-</ul>
+- Autres éléments liés à la section d'un document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("footer")}}, {{HTMLElement("section")}}, {{HTMLElement("address")}}
+- [Plan et sections d'un document HTML5](/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document)
diff --git a/files/fr/web/html/element/heading_elements/index.md b/files/fr/web/html/element/heading_elements/index.md
index f659ec97d0..bd88c0b8ce 100644
--- a/files/fr/web/html/element/heading_elements/index.md
+++ b/files/fr/web/html/element/heading_elements/index.md
@@ -8,241 +8,229 @@ tags:
   - Web
 translation_of: Web/HTML/Element/Heading_Elements
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Les éléments <strong><code>&lt;h1&gt;</code></strong> à <strong><code>&lt;h6&gt;</code></strong> représentent six niveaux de titres dans un document, <code>&lt;h1&gt;</code> est le plus important et <code>&lt;h6&gt;</code> est le moins important. Un élément de titre décrit brièvement le sujet de la section qu'il introduit.</p>
+Les éléments **`<h1>`** à **`<h6>`** représentent six niveaux de titres dans un document, `<h1>` est le plus important et `<h6>` est le moins important. Un élément de titre décrit brièvement le sujet de la section qu'il introduit.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/h1-h6.html", "tabbed-standard")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Ces éléments acceptent uniquement les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> (communs à l'ensemble des éléments).</p>
+Ces éléments acceptent uniquement les [attributs universels](/fr/docs/Web/HTML/Attributs_universels) (communs à l'ensemble des éléments).
 
-<div class="note">
-<p><strong>Note :</strong> L'attribut <code><strong>align</strong></code> est obsolète et ne doit pas être utilisé.</p>
-</div>
+> **Note :** L'attribut **`align`** est obsolète et ne doit pas être utilisé.
 
-<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<ul>
- <li>L'information d'un titre peut être utilisée par les agents utilisateurs, par exemple, pour construire automatiquement une table des matières d'un document.</li>
- <li>Les titres ne doivent pas être utilisé afin de réduire ou d'augmenter la taille de la police d'un texte : il faut pour cela utiliser la propriété CSS {{cssxref('font-size')}} à la place.</li>
- <li>On évitera de sauter des niveaux de titre : on commence toujours par <code>&lt;h1&gt;</code> puis <code>&lt;h2&gt;</code> et ainsi de suite. On essaye également d'avoir un seul titre de niveau 1 sur une page.</li>
- <li>Jusqu'à HTML5, il fallait éviter d'utiliser plus d'un élément <code>&lt;h1&gt;</code> sur une même page. En HTML5, il est possible d'utiliser les balises sémantiques pour créer une hiérarchie valide avec plusieurs <code>&lt;h1&gt;</code>. Voir {{SectionOnPage("/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document","Définir_des_sections_en_HTML5")}} pour plus d'informations.</li>
-</ul>
+- L'information d'un titre peut être utilisée par les agents utilisateurs, par exemple, pour construire automatiquement une table des matières d'un document.
+- Les titres ne doivent pas être utilisé afin de réduire ou d'augmenter la taille de la police d'un texte : il faut pour cela utiliser la propriété CSS {{cssxref('font-size')}} à la place.
+- On évitera de sauter des niveaux de titre : on commence toujours par `<h1>` puis `<h2>` et ainsi de suite. On essaye également d'avoir un seul titre de niveau 1 sur une page.
+- Jusqu'à HTML5, il fallait éviter d'utiliser plus d'un élément `<h1>` sur une même page. En HTML5, il est possible d'utiliser les balises sémantiques pour créer une hiérarchie valide avec plusieurs `<h1>`. Voir {{SectionOnPage("/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document","Définir_des_sections_en_HTML5")}} pour plus d'informations.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Tous_les_titres">Tous les titres</h3>
+### Tous les titres
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h1&gt;Titre de niveau 1&lt;/h1&gt;
-&lt;h2&gt;Titre de niveau 2&lt;/h2&gt;
-&lt;h3&gt;Titre de niveau 3&lt;/h3&gt;
-&lt;h4&gt;Titre de niveau 4&lt;/h4&gt;
-&lt;h5&gt;Titre de niveau 5&lt;/h5&gt;
-&lt;h6&gt;Titre de niveau 6&lt;/h6&gt;
-</pre>
+```html
+<h1>Titre de niveau 1</h1>
+<h2>Titre de niveau 2</h2>
+<h3>Titre de niveau 3</h3>
+<h4>Titre de niveau 4</h4>
+<h5>Titre de niveau 5</h5>
+<h6>Titre de niveau 6</h6>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Tous_les_titres","280","300")}}</p>
+{{EmbedLiveSample("Tous_les_titres","280","300")}}
 
-<h3 id="Exemple_de_page">Exemple de page</h3>
+### Exemple de page
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;h1&gt;Élément de titre&lt;/h1&gt;
-&lt;h2&gt;Présentation&lt;/h2&gt;
-&lt;p&gt;Du texte...&lt;/p&gt;
+```html
+<h1>Élément de titre</h1>
+<h2>Présentation</h2>
+<p>Du texte...</p>
 
-&lt;h2&gt;Exemples&lt;/h2&gt;
-&lt;h3&gt;Exemple 1&lt;/h3&gt;
-&lt;p&gt;Du texte...&lt;/p&gt;
+<h2>Exemples</h2>
+<h3>Exemple 1</h3>
+<p>Du texte...</p>
 
-&lt;h3&gt;Exemple 2&lt;/h3&gt;
-&lt;p&gt;Du texte...&lt;/p&gt;
+<h3>Exemple 2</h3>
+<p>Du texte...</p>
 
-&lt;h2&gt;Voir également&lt;/h2&gt;
-&lt;p&gt;Du texte...&lt;/p&gt;
-</pre>
+<h2>Voir également</h2>
+<p>Du texte...</p>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_de_page","280","480")}}</p>
+{{EmbedLiveSample("Exemple_de_page","280","480")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<h3 id="Navigation">Navigation</h3>
+### Navigation
 
-<p>Les personnes utilisant des lecteurs d'écran utilisent fréquemment les niveaux de titre en passant de l'un à l'autre afin de déterminer rapidement le contenu de la page. Pour cette raison, il est important de ne pas sauter un niveau de titre. En effet, l'absence d'un titre intermédiaire pourrait amener le lecteur à se demander où le titre a été placé.</p>
+Les personnes utilisant des lecteurs d'écran utilisent fréquemment les niveaux de titre en passant de l'un à l'autre afin de déterminer rapidement le contenu de la page. Pour cette raison, il est important de ne pas sauter un niveau de titre. En effet, l'absence d'un titre intermédiaire pourrait amener le lecteur à se demander où le titre a été placé.
 
-<h4 id="Mauvaises_pratiques">Mauvaises pratiques</h4>
+#### Mauvaises pratiques
 
-<pre class="brush: html example-bad">&lt;h1&gt;Heading level 1&lt;/h1&gt;
-&lt;h3&gt;Heading level 3&lt;/h3&gt;
-&lt;h4&gt;Heading level 4&lt;/h4&gt;
-</pre>
+```html example-bad
+<h1>Heading level 1</h1>
+<h3>Heading level 3</h3>
+<h4>Heading level 4</h4>
+```
 
-<h4 id="Bonnes_pratiques">Bonnes pratiques</h4>
+#### Bonnes pratiques
 
-<pre class="brush: html example-good">&lt;h1&gt;Heading level 1&lt;/h1&gt;
-&lt;h2&gt;Heading level 2&lt;/h2&gt;
-&lt;h3&gt;Heading level 3&lt;/h3&gt;
-</pre>
+```html example-good
+<h1>Heading level 1</h1>
+<h2>Heading level 2</h2>
+<h3>Heading level 3</h3>
+```
 
-<h4 id="Imbrication">Imbrication</h4>
+#### Imbrication
 
-<p>Les niveaux de titres peuvent être imbriqués afin de créer des sous-sections qui reflètent l'organisation de la page. La plupart des lecteurs d'écran peuvent également générer une liste ordonnée des titres de la page afin d'aider les visiteurs à connaître la hiérarchie du contenu :</p>
+Les niveaux de titres peuvent être imbriqués afin de créer des sous-sections qui reflètent l'organisation de la page. La plupart des lecteurs d'écran peuvent également générer une liste ordonnée des titres de la page afin d'aider les visiteurs à connaître la hiérarchie du contenu :
 
-<ol>
- <li><code>h1</code> Les abeilles
+1.  `h1` Les abeilles
 
-  <ol>
-   <li><code>h2</code> Étymologie</li>
-   <li><code>h2</code> Répartition</li>
-   <li><code>h2</code> Évolution
-    <ol>
-     <li><code>h3</code> Paléozoïque ancien</li>
-     <li><code>h3</code> Jurassique</li>
-     <li><code>h3</code> Crétacée</li>
-    </ol>
-   </li>
-   <li><code>h2</code> Morphologie externe
-    <ol>
-     <li><code>h3</code>Tête
-      <ol>
-       <li><code>h4</code> Mandibules</li>
-      </ol>
-     </li>
-     <li><code>h3</code> Thorax
-      <ol>
-       <li><code>h4</code> Prothorax</li>
-       <li><code>h4</code> Ptérothorax</li>
-      </ol>
-     </li>
-     <li><code>h3</code> Pattes</li>
-     <li><code>h3</code> Ailes</li>
-     <li><code>h3</code> Abdomen</li>
-    </ol>
-   </li>
-  </ol>
- </li>
-</ol>
+    1.  `h2` Étymologie
+    2.  `h2` Répartition
+    3.  `h2` Évolution
 
-<p>Lorsque les niveaux sont imbriqués, il est possible de sauter un niveau lorsqu'on <strong>ferme</strong> une sous-section</p>
+        1.  `h3` Paléozoïque ancien
+        2.  `h3` Jurassique
+        3.  `h3` Crétacée
 
-<ul>
- <li><a href="https://www.w3.org/WAI/tutorials/page-structure/headings/">Les titres et la structure d'une page - Tutoriels WAI pour l'accessibilité web (en anglais)</a></li>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">Comprendre les règles WCAG 1.3</a></li>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are"> Comprendre les règles WCAG 2.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html"><em>Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html"><em>Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html"><em>Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html"><em>Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
+    4.  `h2` Morphologie externe
 
-<h3 id="Libeller_une_section">Libeller une section</h3>
+        1.  `h3`Tête
 
-<p>Les outils comme les lecteurs d'écran peuvent également générer une liste du <a href="/en-US/docs/Web/HTML/Element#Content_sectioning">contenu sectionnant</a> afin de déterminer le plan de la page.</p>
+            1.  `h4` Mandibules
 
-<p>Le contenu sectionnant peut être libellé en combinant les attributs <code><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></code> et {{htmlattrxref("id")}}. Dans ce cas, le libellé décrit, de façon concise, le but de la section. Cette technique s'avère utile lorsqu'on a une page qui possède plusieurs éléments sectionnants.</p>
+        2.  `h3` Thorax
 
-<h4 id="Exemple">Exemple</h4>
+            1.  `h4` Prothorax
+            2.  `h4` Ptérothorax
 
-<pre class="brush: html">&lt;header&gt;
-  &lt;nav aria-labelledby="primary-navigation"&gt;
-    &lt;h2 id="primary-navigation"&gt;Outils de navigation&lt;/h2&gt;
-    &lt;!-- éléments relatifs à la navigation --&gt;
-  &lt;/nav&gt;
-&lt;/header&gt;
-
-&lt;!-- contenu de la page --&gt;
-
-&lt;footer&gt;
-  &lt;nav aria-labelledby="footer-navigation"&gt;
-    &lt;h2 id="footer-navigation"&gt;Navigation dans le pied de page&lt;/h2&gt;
-    &lt;!-- éléments relatifs à la navigation --&gt;
-  &lt;/nav&gt;
-&lt;/footer&gt;
-</pre>
-
-<p>Dans l'exemple qui précède, un lecteur d'écran annoncerait deux section {{HTMLElement("nav")}}, l'une étant appelée "Outils de navigation" et l'autre "Navigation dans le pied de page". Si les libellés n'avaient pas été fournis, la personne utilisant un lecteur d'écran aurait été obligée d'étudier les contenus de chaque élément <code>nav</code> afin d'en déterminer l'objectif.</p>
-
-<ul>
- <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Utiliser l'attribut <code>aria-labelledby</code></a></li>
- <li><a href="https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby"><em>Libeller des régions - Structure d'une page - Tutoriels W3C WAI pour l'accessibilité web</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+        3.  `h3` Pattes
+        4.  `h3` Ailes
+        5.  `h3` Abdomen
+
+Lorsque les niveaux sont imbriqués, il est possible de sauter un niveau lorsqu'on **ferme** une sous-section
+
+- [Les titres et la structure d'une page - Tutoriels WAI pour l'accessibilité web (en anglais)](https://www.w3.org/WAI/tutorials/page-structure/headings/)
+- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways)
+- [ Comprendre les règles WCAG 2.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are)
+- [_Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)
+- [_Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html)
+- [_Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html)
+- [_Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-headings.html)
+
+### Libeller une section
+
+Les outils comme les lecteurs d'écran peuvent également générer une liste du [contenu sectionnant](/en-US/docs/Web/HTML/Element#Content_sectioning) afin de déterminer le plan de la page.
+
+Le contenu sectionnant peut être libellé en combinant les attributs [`aria-labelledby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) et {{htmlattrxref("id")}}. Dans ce cas, le libellé décrit, de façon concise, le but de la section. Cette technique s'avère utile lorsqu'on a une page qui possède plusieurs éléments sectionnants.
+
+#### Exemple
+
+```html
+<header>
+  <nav aria-labelledby="primary-navigation">
+    <h2 id="primary-navigation">Outils de navigation</h2>
+    <!-- éléments relatifs à la navigation -->
+  </nav>
+</header>
+
+<!-- contenu de la page -->
+
+<footer>
+  <nav aria-labelledby="footer-navigation">
+    <h2 id="footer-navigation">Navigation dans le pied de page</h2>
+    <!-- éléments relatifs à la navigation -->
+  </nav>
+</footer>
+```
+
+Dans l'exemple qui précède, un lecteur d'écran annoncerait deux section {{HTMLElement("nav")}}, l'une étant appelée "Outils de navigation" et l'autre "Navigation dans le pied de page". Si les libellés n'avaient pas été fournis, la personne utilisant un lecteur d'écran aurait été obligée d'étudier les contenus de chaque élément `nav` afin d'en déterminer l'objectif.
+
+- [Utiliser l'attribut `aria-labelledby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute)
+- [_Libeller des régions - Structure d'une page - Tutoriels W3C WAI pour l'accessibilité web_ (en anglais)](https://www.w3.org/WAI/tutorials/page-structure/labels/#using-aria-labelledby)
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, contenu de titre, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balise</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte le <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> ; n'utilisez pas de titre comme enfant d'un élément {{HTMLElement("hgroup")}}, c'est à présent obsolète.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLHeadingElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >, contenu de titre,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balise</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte le
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >
+        ; n'utilisez pas de titre comme enfant d'un élément
+        {{HTMLElement("hgroup")}}, c'est à présent obsolète.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLHeadingElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                                                                                                            | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}     | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'struct/global.html#h-7.5.5', '&lt;h1&gt;, &lt;h2&gt;, &lt;h3&gt;, &lt;h4&gt;, &lt;h5&gt;, and &lt;h6&gt;')}}                                         | {{Spec2('HTML4.01')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.h1")}}</p>
+{{Compat("html.elements.h1")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("p")}}</li>
- <li>{{HTMLElement("div")}}</li>
- <li>{{HTMLElement("section")}}</li>
-</ul>
+- {{HTMLElement("p")}}
+- {{HTMLElement("div")}}
+- {{HTMLElement("section")}}
diff --git a/files/fr/web/html/element/hgroup/index.md b/files/fr/web/html/element/hgroup/index.md
index 517aa07981..4b4e76d8c1 100644
--- a/files/fr/web/html/element/hgroup/index.md
+++ b/files/fr/web/html/element/hgroup/index.md
@@ -8,134 +8,144 @@ tags:
   - Web
 translation_of: Web/HTML/Element/hgroup
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;hgroup&gt;</code></strong> représente un titre de plusieurs niveaux pour une section d'un document. Il regroupe un ensemble d'éléments <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code>.</p>
+L'élément HTML **`<hgroup>`** représente un titre de plusieurs niveaux pour une section d'un document. Il regroupe un ensemble d'éléments [`<h1>–<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<div class="note">
-<p><strong>Note :</strong> l'élement <code>&lt;hgroup&gt;</code> a été retiré de la spécification HTML5 (W3C) mais est toujours inscrit dans la version WHATWG de HTML. Il est partiellement implémenté dans la plupart des navigateurs et à ce titre, il est peu probable qu'il disparaisse.<br>
- Cependant, le but d'un élément <code>&lt;hgroup&gt;</code> est d'affecter la façon dont les titres sont affichés <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">par l'algorithme de mise en plan défini dans la spécification HTML</a>. <strong>Cet algorithme n'est pas implémenté dans la plupart des navigateurs </strong>et la sémantique de l'élément <code>&lt;hgroup&gt;</code> est donc uniquement théorique.<br>
- La spécification HTML5 (W3C) fournit quelques indications pour baliser <a href="https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements">les sous-titres et les titres alternatifs</a> sans requérir à <code>&lt;hgroup&gt;</code>.</p>
-</div>
+> **Note :** l'élement `<hgroup>` a été retiré de la spécification HTML5 (W3C) mais est toujours inscrit dans la version WHATWG de HTML. Il est partiellement implémenté dans la plupart des navigateurs et à ce titre, il est peu probable qu'il disparaisse.
+> Cependant, le but d'un élément `<hgroup>` est d'affecter la façon dont les titres sont affichés [par l'algorithme de mise en plan défini dans la spécification HTML](/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm). **Cet algorithme n'est pas implémenté dans la plupart des navigateurs** et la sémantique de l'élément `<hgroup>` est donc uniquement théorique.
+> La spécification HTML5 (W3C) fournit quelques indications pour baliser [les sous-titres et les titres alternatifs](https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#common-idioms-without-dedicated-elements) sans requérir à `<hgroup>`.
 
-<p>L'élément <code>&lt;hgroup&gt;</code> permet de regrouper le titre principal d'une section avec son (ou ses) sous-titre(s) afin d'obtenir un titre sur plusieurs niveaux sémantiques.</p>
+L'élément `<hgroup>` permet de regrouper le titre principal d'une section avec son (ou ses) sous-titre(s) afin d'obtenir un titre sur plusieurs niveaux sémantiques.
 
-<p>Autrement dit, l'élément <code>&lt;hgroup&gt;</code> évite que l'utilisation d'éléments <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> secondaires crée différentes sections dans le plan (ce qui est le résultat obtenu normalement lorsque <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> sont utilisés hors d'un <code>&lt;hgroup&gt;</code>).</p>
+Autrement dit, l'élément `<hgroup>` évite que l'utilisation d'éléments [`<h1>–<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements) secondaires crée différentes sections dans le plan (ce qui est le résultat obtenu normalement lorsque [`<h1>–<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements) sont utilisés hors d'un `<hgroup>`).
 
-<p>Dans le plan d'un document, obtenu par <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm">l'algorithme défini dans la spécification HTML</a>, l'élément <code>&lt;hgroup&gt;</code> forme une seule entité logique contenant l'ensemble des éléments-fils <code><a href="/fr/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;–&lt;h6&gt;</a></code> du <code>&lt;hgroup&gt;</code> et qui fait donc apparaître une seule section pour ce groupe de titres dans le plan.</p>
+Dans le plan d'un document, obtenu par [l'algorithme défini dans la spécification HTML](/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines#The_HTML5_outline_algorithm), l'élément `<hgroup>` forme une seule entité logique contenant l'ensemble des éléments-fils [`<h1>–<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements) du `<hgroup>` et qui fait donc apparaître une seule section pour ce groupe de titres dans le plan.
 
-<p>Pour afficher le contenu d'un tel titre, l'agent utilisateur doit choisir comment représenter l'élément <code>&lt;hgroup&gt;</code> afin d'exprimer notamment les différents niveaux. Voici quelques exemples des approches qui seraient possibles :</p>
+Pour afficher le contenu d'un tel titre, l'agent utilisateur doit choisir comment représenter l'élément `<hgroup>` afin d'exprimer notamment les différents niveaux. Voici quelques exemples des approches qui seraient possibles :
 
-<ul>
- <li>Un élément <code>&lt;hgroup&gt;</code> peut afficher un titre où les deux points (:) sont utilisés comme séparateur entre le titre principal et le premier titre secondaire</li>
- <li>Un élément <code>&lt;hgroup&gt;</code> peut afficher le titre principal, suivi du/des titre(s) secondaires entre parenthèses</li>
-</ul>
+- Un élément `<hgroup>` peut afficher un titre où les deux points (:) sont utilisés comme séparateur entre le titre principal et le premier titre secondaire
+- Un élément `<hgroup>` peut afficher le titre principal, suivi du/des titre(s) secondaires entre parenthèses
 
-<p>Prenons ce document HTML par exemple :</p>
+Prenons ce document HTML par exemple :
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;title&gt;HTML Standard&lt;/title&gt;
-&lt;body&gt;
-  &lt;hgroup id="document-title"&gt;
-    &lt;h1&gt;HTML&lt;/h1&gt;
-    &lt;h2&gt;Living Standard — Last Updated 12 August 2016&lt;/h2&gt;
-  &lt;/hgroup&gt;
-  &lt;p&gt;Some intro to the document.&lt;/p&gt;
-  &lt;h2&gt;Table of contents&lt;/h2&gt;
-  &lt;ol id=toc&gt;...&lt;/ol&gt;
-  &lt;h2&gt;First section&lt;/h2&gt;
-  &lt;p&gt;Some intro to the first section.&lt;/p&gt;
-&lt;/body&gt;</pre>
+```html
+<!DOCTYPE html>
+<title>HTML Standard</title>
+<body>
+  <hgroup id="document-title">
+    <h1>HTML</h1>
+    <h2>Living Standard — Last Updated 12 August 2016</h2>
+  </hgroup>
+  <p>Some intro to the document.</p>
+  <h2>Table of contents</h2>
+  <ol id=toc>...</ol>
+  <h2>First section</h2>
+  <p>Some intro to the first section.</p>
+</body>
+```
 
-<p>Le rendu de ce document pourrait être :</p>
+Le rendu de ce document pourrait être :
 
-<p><img alt="" src="outline-colon.png"></p>
+![](outline-colon.png)
 
-<p>Où on voit que le titre principal est suivi de deux points puis d'un espace avant le titre secondaire, <em>Living Standard — Last Updated 12 August 2016</em>.</p>
+Où on voit que le titre principal est suivi de deux points puis d'un espace avant le titre secondaire, _Living Standard — Last Updated 12 August 2016_.
 
-<p>On pourrait également avoir cet affichage :</p>
+On pourrait également avoir cet affichage :
 
-<p><img alt="Plan rendu en incluant un élément &lt;hgroup&gt;, avec des parenthèses autour du titre secondaire" src="outline-paren.png"></p>
+![Plan rendu en incluant un élément <hgroup>, avec des parenthèses autour du titre secondaire](outline-paren.png)
 
-<p>Ici, le titre secondaire est placé entre parenthèses après le titre principal.</p>
+Ici, le titre secondaire est placé entre parenthèses après le titre principal.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;hgroup id="document-title"&gt;
-  &lt;h1&gt;HTML&lt;/h1&gt;
-  &lt;h2&gt;Living Standard — dernière mise à jour le 12 août 2016&lt;/h2&gt;
-&lt;/hgroup&gt;
-</pre>
+```html
+<hgroup id="document-title">
+  <h1>HTML</h1>
+  <h2>Living Standard — dernière mise à jour le 12 août 2016</h2>
+</hgroup>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
-<h2 id="Résumé_technique">Résumé technique</h2>
+{{EmbedLiveSample("Exemples")}}
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_titre">contenu de titre</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Un ou plusieurs éléments {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balise</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '&lt;hgroup&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_titre"
+          >contenu de titre</a
+        >,
+        <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        Un ou plusieurs éléments {{HTMLElement("h1")}},
+        {{HTMLElement("h2")}}, {{HTMLElement("h3")}},
+        {{HTMLElement("h4")}}, {{HTMLElement("h5")}},
+        {{HTMLElement("h6")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balise</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>{{ARIARole("tab")}}, {{ARIARole("presentation")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
+
+| Spécification                                                                                                | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '&lt;hgroup&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.hgroup")}}</p>
+{{Compat("html.elements.hgroup")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les autres éléments HTML relatifs aux sections du document : {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
- <li><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Les sections et le plan d'un document HTML5</a></li>
-</ul>
+- Les autres éléments HTML relatifs aux sections du document : {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
+- [Les sections et le plan d'un document HTML5](/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document)
diff --git a/files/fr/web/html/element/hr/index.md b/files/fr/web/html/element/hr/index.md
index d29d2b3bb1..4fffaea7de 100644
--- a/files/fr/web/html/element/hr/index.md
+++ b/files/fr/web/html/element/hr/index.md
@@ -8,127 +8,121 @@ tags:
   - Web
 translation_of: Web/HTML/Element/hr
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;hr&gt;</code></strong> représente un changement thématique entre des éléments de paragraphe (par exemple, un changement de décor dans un récit, un changement de sujet au sein d'une section).</p>
+L'élément HTML **`<hr>`** représente un changement thématique entre des éléments de paragraphe (par exemple, un changement de décor dans un récit, un changement de sujet au sein d'une section).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/hr.html", "tabbed-shorter")}}
 
-<p>Dans les versions précédentes d'HTML, il représente une ligne horizontale. Bien qu'il puisse toujours être représenté ainsi par les navigateurs graphiques, il possède désormais une signification sémantique et ne représente plus un élément de mise en forme.</p>
+Dans les versions précédentes d'HTML, il représente une ligne horizontale. Bien qu'il puisse toujours être représenté ainsi par les navigateurs graphiques, il possède désormais une signification sémantique et ne représente plus un élément de mise en forme.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h3 id="Attributs_dépréciés_obsolètes_ou_non-standard">Attributs dépréciés, obsolètes ou non-standard</h3>
+### Attributs dépréciés, obsolètes ou non-standard
 
-<dl>
- <dt>{{htmlattrdef("align")}} {{deprecated_inline}}</dt>
- <dd>Définit l'alignement de la ligne horizontale sur la page. Si aucune valeur n'est renseignée, la valeur prise par défaut est <code>left</code>.</dd>
- <dt>{{htmlattrdef("color")}} {{Non-standard_inline}}</dt>
- <dd>Définit la couleur à utiliser pour la ligne horizontale, grâce à un nom de couleur SVG ou à un code hexadécimal (précédé d'un #).</dd>
- <dt>{{htmlattrdef("noshade")}} {{deprecated_inline}}</dt>
- <dd>Avec cet attribut, la ligne horizontale n'aura pas d'ombre.</dd>
- <dt>{{htmlattrdef("size")}} {{deprecated_inline}}</dt>
- <dd>Définit la hauteur de la ligne, exprimée en pixels.</dd>
- <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>
- <dd>Définit la longueur de la ligne, exprimée par une valeur en pixels ou en pourcents.</dd>
-</dl>
+- {{htmlattrdef("align")}} {{deprecated_inline}}
+  - : Définit l'alignement de la ligne horizontale sur la page. Si aucune valeur n'est renseignée, la valeur prise par défaut est `left`.
+- {{htmlattrdef("color")}} {{Non-standard_inline}}
+  - : Définit la couleur à utiliser pour la ligne horizontale, grâce à un nom de couleur SVG ou à un code hexadécimal (précédé d'un #).
+- {{htmlattrdef("noshade")}} {{deprecated_inline}}
+  - : Avec cet attribut, la ligne horizontale n'aura pas d'ombre.
+- {{htmlattrdef("size")}} {{deprecated_inline}}
+  - : Définit la hauteur de la ligne, exprimée en pixels.
+- {{htmlattrdef("width")}} {{deprecated_inline}}
+  - : Définit la longueur de la ligne, exprimée par une valeur en pixels ou en pourcents.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Ceci est le premier paragraphe du texte.
   Les pandas roux sont géniaux.
   C'est mignon et c'est tout doux.
-&lt;/p&gt;
+</p>
 
-&lt;hr&gt;
+<hr>
 
-&lt;p&gt;
+<p>
   Ceci est le deuxième paragraphe du texte.
   Les poneys ne sont pas pareils.
   Ils sont plus grands et moins exotiques.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+{{EmbedLiveSample("Exemples","100%","200")}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu" title="HTML/Content_categories">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">Contenu de flux</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Aucun, c'est un élément vide.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>Cet élément doit avoir une balise ouvrante mais ne doit pas avoir de balise fermante.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" title="HTML/Content categories#Flow content">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>{{ARIARole("presentation")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLHRElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a
+          href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          title="HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          title="HTML/Content categories#Flow content"
+          >Contenu de flux</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Aucun, c'est un élément vide.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        Cet élément doit avoir une balise ouvrante mais ne doit pas avoir de
+        balise fermante.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a
+          href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          title="HTML/Content categories#Flow content"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>{{ARIARole("presentation")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLHRElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-hr-element', '&lt;hr&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition de l'élément <code>hr</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'rendering.html#the-hr-element-0')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Suggestion de rendu par défaut de l'élément <code>hr</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '&lt;hr&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '&lt;hr&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Les attributs <code>align</code>, <code>noshade</code>, <code>size</code>, <code>width</code> sont désormais dépréciés.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires                                                                |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-hr-element', '&lt;hr&gt;')}}     | {{Spec2('HTML WHATWG')}} | Définition de l'élément `hr`                                                |
+| {{SpecName('HTML WHATWG', 'rendering.html#the-hr-element-0')}}                     | {{Spec2('HTML WHATWG')}} | Suggestion de rendu par défaut de l'élément `hr`                            |
+| {{SpecName('HTML5 W3C', 'grouping-content.html#the-hr-element', '&lt;hr&gt;')}} | {{Spec2('HTML5 W3C')}}     |                                                                             |
+| {{SpecName('HTML4.01', 'present/graphics.html#h-15.3', '&lt;hr&gt;')}}             | {{Spec2('HTML4.01')}}     | Les attributs `align`, `noshade`, `size`, `width` sont désormais dépréciés. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.hr")}}</p>
+{{Compat("html.elements.hr")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("p")}} qui permet de constituer des paragraphes.</li>
-</ul>
+- {{HTMLElement("p")}} qui permet de constituer des paragraphes.
diff --git a/files/fr/web/html/element/html/index.md b/files/fr/web/html/element/html/index.md
index 34e0bfaabf..5c3656024f 100644
--- a/files/fr/web/html/element/html/index.md
+++ b/files/fr/web/html/element/html/index.md
@@ -8,117 +8,104 @@ tags:
   - Web
 translation_of: Web/HTML/Element/html
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;html&gt;</code></strong> représente la racine d'un document HTML ou XHTML. Tout autre élément du document doit être un descendant de cet élément.</p>
+L'élément HTML **`<html>`** représente la racine d'un document HTML ou XHTML. Tout autre élément du document doit être un descendant de cet élément.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("manifest")}}{{obsolete_inline}}</dt>
- <dd>Définit l'URI d'un manifeste de ressources signifiant que les ressources devraient être mises en cache localement. Voir <a href="/fr/docs/Utiliser_Application_Cache" title="en/Offline_resources_in_Firefox">Ressources hors-ligne dans Firefox</a> pour plus de détails.</dd>
- <dt>{{htmlattrdef("version")}}{{obsolete_inline}}</dt>
- <dd>Définit la version du document HTML <em>Document Type Definition</em> qui s'applique pour le document courant. Cet attribut n'est pas nécessaire car il est redondant avec l'information de version se trouvant dans la déclaration de type du document (<em>doctype</em>).</dd>
- <dt>{{htmlattrdef("xmlns")}}</dt>
- <dd>Définit l'espace de noms XML du document. La valeur par défaut est "http://www.w3.org/1999/xhtml". Cet attribut est obligatoire dans un document XML et optionnel dans un document de type text/html.</dd>
-</dl>
+- {{htmlattrdef("manifest")}}{{obsolete_inline}}
+  - : Définit l'URI d'un manifeste de ressources signifiant que les ressources devraient être mises en cache localement. Voir [Ressources hors-ligne dans Firefox](/fr/docs/Utiliser_Application_Cache "en/Offline_resources_in_Firefox") pour plus de détails.
+- {{htmlattrdef("version")}}{{obsolete_inline}}
+  - : Définit la version du document HTML _Document Type Definition_ qui s'applique pour le document courant. Cet attribut n'est pas nécessaire car il est redondant avec l'information de version se trouvant dans la déclaration de type du document (_doctype_).
+- {{htmlattrdef("xmlns")}}
+  - : Définit l'espace de noms XML du document. La valeur par défaut est "http\://www\.w3.org/1999/xhtml". Cet attribut est obligatoire dans un document XML et optionnel dans un document de type text/html.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<p>Le DOCTYPE utilisé dans l'exemple suivant indique que le document est un document HTML5.</p>
+Le DOCTYPE utilisé dans l'exemple suivant indique que le document est un document HTML5.
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html lang="fr"&gt;
-  &lt;head&gt;...&lt;/head&gt;
-  &lt;body&gt;...&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+```html
+<!DOCTYPE html>
+<html lang="fr">
+  <head>...</head>
+  <body>...</body>
+</html>
+```
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Puisque l'élément <code>&lt;html&gt;</code> est le premier élément dans un document, autre que les commentaires, il est désigné comme l'élément racine du document. Bien que cette balise soit implicite, ou non requise dans un document <a href="/fr/docs/Web/HTML">HTML</a>, il est requis dans un document <a href="/fr/docs/XHTML">XHTML</a> (à la fois pour la balise ouvrante et pour la balise fermante).</p>
+Puisque l'élément `<html>` est le premier élément dans un document, autre que les commentaires, il est désigné comme l'élément racine du document. Bien que cette balise soit implicite, ou non requise dans un document [HTML](/fr/docs/Web/HTML), il est requis dans un document [XHTML](/fr/docs/XHTML) (à la fois pour la balise ouvrante et pour la balise fermante).
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>L'utilisation d'un attribut {{htmlattrxref("lang")}} <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">valide (au sens de l'IETF)</a> pour l'élément HTML permettra aux lecteurs d'écran de déterminer la langue à utiliser pour l'énonciation. La balise de langage utilisée doit correspondre à celle utilisée pour la majorité du contenu de la page. Sans cet attribut, les lecteurs d'écran utiliseront la lange paramétrée par le système d'exploitation, ce qui pourra entraîner des défauts de prononciations.</p>
+L'utilisation d'un attribut {{htmlattrxref("lang")}} [valide (au sens de l'IETF)](https://www.ietf.org/rfc/bcp/bcp47.txt) pour l'élément HTML permettra aux lecteurs d'écran de déterminer la langue à utiliser pour l'énonciation. La balise de langage utilisée doit correspondre à celle utilisée pour la majorité du contenu de la page. Sans cet attribut, les lecteurs d'écran utiliseront la lange paramétrée par le système d'exploitation, ce qui pourra entraîner des défauts de prononciations.
 
-<p>Ajouter un attribut <code>lang</code> valide au sein de l'élément HTML permet également de s'assurer que les métadonnées importantes contenue dans l'élément {{HTMLElement("head")}}, telle que le titre de la page (cf. {{HTMLElement("title")}}) sont énoncées correctement.</p>
+Ajouter un attribut `lang` valide au sein de l'élément HTML permet également de s'assurer que les métadonnées importantes contenue dans l'élément {{HTMLElement("head")}}, telle que le titre de la page (cf. {{HTMLElement("title")}}) sont énoncées correctement.
 
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.1_%E2%80%94_Readable_Make_text_content_readable_and_understandable">Comprendre les règles WCAG 3.1</a></li>
- <li><em><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/meaning-doc-lang-id.html">Understanding Success Criterion 3.1.1 - W3C Understanding WCAG 2.0</a></em></li>
-</ul>
+- [Comprendre les règles WCAG 3.1](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.1_%E2%80%94_Readable_Make_text_content_readable_and_understandable)
+- _[Understanding Success Criterion 3.1.1 - W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/meaning-doc-lang-id.html)_
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td>Aucune</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Un élément {{HTMLElement("head")}} suivi par un élément {{HTMLElement("body")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>La balise de début peut être absente si le premier objet appartenant à l'élément <code>&lt;html&gt;</code> n'est pas un commentaire.<br>
-    La balise de fin peut être absente si l'élément <code>&lt;html&gt;</code> n'est pas directement suivi par un commentaire et qu'il contient un élément {{HTMLElement("body")}} qui n'est ni vide ou dont la balise de début est présente.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Aucun élément, c'est la racine du document.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLHtmlElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Aucune</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        Un élément {{HTMLElement("head")}} suivi par un élément
+        {{HTMLElement("body")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        La balise de début peut être absente si le premier objet appartenant à
+        l'élément <code>&#x3C;html></code> n'est pas un commentaire.<br />La
+        balise de fin peut être absente si l'élément
+        <code>&#x3C;html></code> n'est pas directement suivi par un commentaire
+        et qu'il contient un élément {{HTMLElement("body")}} qui n'est
+        ni vide ou dont la balise de début est présente.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>Aucun élément, c'est la racine du document.</td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLHtmlElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '&lt;html&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Ajout de l'attribut <code>manifest</code>. L'attribut <code>version</code> est désormais obsolète.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.3', '&lt;html&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>L'attribut <code>version</code> est désormais déprécié.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires                                                                 |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-html-element', '&lt;html&gt;')}} | {{Spec2('HTML WHATWG')}} |                                                                              |
+| {{SpecName('HTML5 W3C', 'semantics.html#the-html-element', '&lt;html&gt;')}}     | {{Spec2('HTML5 W3C')}}     | Ajout de l'attribut `manifest`. L'attribut `version` est désormais obsolète. |
+| {{SpecName('HTML4.01', 'struct/global.html#h-7.3', '&lt;html&gt;')}}             | {{Spec2('HTML4.01')}}     | L'attribut `version` est désormais déprécié.                                 |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.html")}}</p>
+{{Compat("html.elements.html")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément MathML de plus haut niveau : {{MathMLElement("math")}}</li>
- <li>L'élément SVG de plus haut niveau : {{SVGElement("svg")}}</li>
-</ul>
+- L'élément MathML de plus haut niveau : {{MathMLElement("math")}}
+- L'élément SVG de plus haut niveau : {{SVGElement("svg")}}
diff --git a/files/fr/web/html/element/i/index.md b/files/fr/web/html/element/i/index.md
index 8307b0f26c..b47eb89872 100644
--- a/files/fr/web/html/element/i/index.md
+++ b/files/fr/web/html/element/i/index.md
@@ -8,115 +8,116 @@ tags:
   - Web
 translation_of: Web/HTML/Element/i
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;i&gt;</code></strong> représente un morceau de texte qui se différencie du texte principal. Cela peut par exemple être le cas pour des termes techniques, des phrases dans une langue étrangère ou encore l'expression des pensées d'un personnage. Le contenu de cet élément est généralement affiché en italique.</p>
+L'élément HTML **`<i>`** représente un morceau de texte qui se différencie du texte principal. Cela peut par exemple être le cas pour des termes techniques, des phrases dans une langue étrangère ou encore l'expression des pensées d'un personnage. Le contenu de cet élément est généralement affiché en italique.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/i.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/i.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément possède uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément possède uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   La phrase latine
-  &lt;i class="latin"&gt;
+  <i class="latin">
     Veni, vidi, vici
-  &lt;/i&gt;
+  </i>
   est souvent employée en littérature.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
+{{EmbedLiveSample("Exemples","100%","200")}}
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Dans certaines versions antérieures de HTML, la balise <code>&lt;i&gt;</code> ne jouait qu'un rôle de mise en forme, utilisé pour afficher le texte en italique (de la même façon que la balise &lt;b&gt; était utilisée pour afficher le texte en gras). Désormais, ces balises ont un rôle strictement sémantique et l'élément &lt;i&gt; représente une portion de texte dont la sémantique est différente, la représentation choisie pour cela par le navigateur étant la plupart du temps une mise en italique. Cela signifie que le navigateur affiche généralement le contenu en italique comme c'était le cas auparavant mais que ce traitement de mise en forme n'est plus du tout obligatoire.</p>
+Dans certaines versions antérieures de HTML, la balise `<i>` ne jouait qu'un rôle de mise en forme, utilisé pour afficher le texte en italique (de la même façon que la balise \<b> était utilisée pour afficher le texte en gras). Désormais, ces balises ont un rôle strictement sémantique et l'élément \<i> représente une portion de texte dont la sémantique est différente, la représentation choisie pour cela par le navigateur étant la plupart du temps une mise en italique. Cela signifie que le navigateur affiche généralement le contenu en italique comme c'était le cas auparavant mais que ce traitement de mise en forme n'est plus du tout obligatoire.
 
-<p>Cet élément ne doit être utilisé seulement si aucun autre ne permet d'exprimer la sémantique du contenu de façon plus appropriée. Ainsi :</p>
+Cet élément ne doit être utilisé seulement si aucun autre ne permet d'exprimer la sémantique du contenu de façon plus appropriée. Ainsi :
 
-<ul>
- <li>{{HTMLElement("em")}} doit être utilisé pour insister, mettre l'accent sur le contenu</li>
- <li>{{HTMLElement("strong")}} doit être utilisé pour exprimer l'importance du contenu</li>
- <li>{{HTMLElement("mark")}} doit être utilisé pour exprimer la pertinence du contenu</li>
- <li>{{HTMLElement("cite")}} doit être utilisé pour marquer le nom d'une œuvre telle qu'un livre, une pièce ou une chanson.</li>
- <li>{{HTMLElement("dfn")}} doit être utilisé pour souligner l'occurence d'un mot utilisée pour sa définition</li>
-</ul>
+- {{HTMLElement("em")}} doit être utilisé pour insister, mettre l'accent sur le contenu
+- {{HTMLElement("strong")}} doit être utilisé pour exprimer l'importance du contenu
+- {{HTMLElement("mark")}} doit être utilisé pour exprimer la pertinence du contenu
+- {{HTMLElement("cite")}} doit être utilisé pour marquer le nom d'une œuvre telle qu'un livre, une pièce ou une chanson.
+- {{HTMLElement("dfn")}} doit être utilisé pour souligner l'occurence d'un mot utilisée pour sa définition
 
-<p>C'est une bonne pratique que d'utiliser l'attribut <code><strong>class</strong></code> pour identifier les raisons qui poussent à utiliser cet élément. Cela permet par exemple de maintenir la mise en forme du document plus efficacement grâce aux feuilles de style CSS.</p>
+C'est une bonne pratique que d'utiliser l'attribut **`class`** pour identifier les raisons qui poussent à utiliser cet élément. Cela permet par exemple de maintenir la mise en forme du document plus efficacement grâce aux feuilles de style CSS.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td><dfn>Interface DOM </dfn> {{domxref("HTMLElement")}}. </td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td><dfn>Interface DOM </dfn>{{domxref("HTMLElement")}}.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-i-element', '&lt;i&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-i-element', '&lt;i&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                    | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-i-element', '&lt;i&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-i-element', '&lt;i&gt;')}}     | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}                 | {{Spec2('HTML4.01')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.i")}}</p>
+{{Compat("html.elements.i")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("em")}} qui permet d'indiquer une emphase et qui ne doit pas être confondu avec l'élément <code>&lt;i&gt;</code></li>
-</ul>
+- {{HTMLElement("em")}} qui permet d'indiquer une emphase et qui ne doit pas être confondu avec l'élément `<i>`
diff --git a/files/fr/web/html/element/iframe/index.md b/files/fr/web/html/element/iframe/index.md
index 041dfcbb65..ea6c809a01 100644
--- a/files/fr/web/html/element/iframe/index.md
+++ b/files/fr/web/html/element/iframe/index.md
@@ -17,23 +17,41 @@ tags:
 translation_of: Web/HTML/Element/iframe
 browser-compat: html.elements.iframe
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;iframe&gt;</code></strong> représente un <a href="/fr/docs/Glossary/Browsing_context">contexte de navigation</a> imbriqué qui permet en fait d'obtenir une page HTML intégrée dans la page courante.</p>
+L'élément HTML **`<iframe>`** représente un [contexte de navigation](/fr/docs/Glossary/Browsing_context) imbriqué qui permet en fait d'obtenir une page HTML intégrée dans la page courante.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/iframe.html", "tabbed-standard")}}
 
-<p>Chaque contexte de navigation possède son propre <a href="/fr/docs/Web/API/History">historique</a> et son propre <a href="/fr/docs/Web/API/Document">document actif</a>. Le contexte de navigation qui contient le contenu intégré est appelé « contexte de navigation parent ». Le contexte de navigation le plus élevé (qui n'a pas de contexte parent) correspond généralement à la fenêtre du navigateur (cf. <a href="/fr/docs/Web/API/Window"><code>Window</code></a>).</p>
+Chaque contexte de navigation possède son propre [historique](/fr/docs/Web/API/History) et son propre [document actif](/fr/docs/Web/API/Document). Le contexte de navigation qui contient le contenu intégré est appelé « contexte de navigation parent ». Le contexte de navigation le plus élevé (qui n'a pas de contexte parent) correspond généralement à la fenêtre du navigateur (cf. [`Window`](/fr/docs/Web/API/Window)).
 
-<div class="warning">
-  <p><strong>Attention :</strong> Chaque contexte de navigation créé par un élément <code>&lt;iframe&gt;</code> représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de la page. Aussi, bien qu'en théorie on puisse ajouter autant d'<em>iframes</em> que possible sur autant de niveaux d'imbrication que voulus, on gardera à l'esprit que cela peut nuire aux performances.</p>
-</div>
+> **Attention :** Chaque contexte de navigation créé par un élément `<iframe>` représente un document à part entière et cela peut donc augmenter les ressources nécessaires à l'utilisation de la page. Aussi, bien qu'en théorie on puisse ajouter autant d'_iframes_ que possible sur autant de niveaux d'imbrication que voulus, on gardera à l'esprit que cela peut nuire aux performances.
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content"
+          >contenu intégré</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content"
+          >contenu interactif</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
@@ -41,7 +59,10 @@ browser-compat: html.elements.iframe
     </tr>
     <tr>
       <th scope="row">Omission de balise</th>
-      <td>Aucune omission, la balise ouvrante et la balise fermante doivent être présentes.</td>
+      <td>
+        Aucune omission, la balise ouvrante et la balise fermante doivent être
+        présentes.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
@@ -49,180 +70,192 @@ browser-compat: html.elements.iframe
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Aucun rôle correspondant</a></td>
+      <td>
+        <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+          >Aucun rôle correspondant</a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td><a href="https://w3c.github.io/aria/#application"><code>application</code></a>, <a href="https://w3c.github.io/aria/#document"><code>document</code></a>, <a href="https://w3c.github.io/aria/#img"><code>img</code></a>, <a href="https://w3c.github.io/aria/#none"><code>none</code></a>, <a href="https://w3c.github.io/aria/#presentation"><code>presentation</code></a></td>
+      <td>
+        <a href="https://w3c.github.io/aria/#application"
+          ><code>application</code></a
+        >,
+        <a href="https://w3c.github.io/aria/#document"><code>document</code></a
+        >, <a href="https://w3c.github.io/aria/#img"><code>img</code></a
+        >, <a href="https://w3c.github.io/aria/#none"><code>none</code></a
+        >,
+        <a href="https://w3c.github.io/aria/#presentation"
+          ><code>presentation</code></a
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLIFrameElement"><code>HTMLIFrameElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLIFrameElement"
+          ><code>HTMLIFrameElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
- </table>
-
-<h2 id="attributes">Attributs</h2>
-
-<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
-
-<dl>
-  <dt><code>allow</code></dt>
-  <dd>L'attribut <code>allow</code> permet de définir une <a href="/fr/docs/Web/HTTP/Feature_Policy">politique de fonctionnalité</a> pour l'<i>iframe</i>. Cette politique définit les fonctionnalités disponibles au sein de l'<i>iframe</i> selon l'origine de la requête (les fonctionnalités peuvent être l'accès au micro, à la caméra, aux informations de batterie, etc.). Pour plus d'informations, voir <a href="/fr/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy#the_iframe_allow_attribute">l'article sur l'utilisation de <code>Feature-Policy</code></a>.</dd>
-  <dt><code>allowfullscreen</code></dt>
-  <dd>Cet attribut, lorsqu'il vaut <code>true</code>, indique que l'<i>iframe</i> intégrée peut être passée en plein écran via la méthode<a href="/fr/docs/Web/API/Element/requestFullScreen"><code>Element.requestFullscreen()</code></a>.
-    <div class="note">
-      <p><strong>Note :</strong>Cet attribut est considéré comme historique et a été redéfini avec <code>allow="fullscreen"</code>.</p>
-    </div>
-  </dd>
-  <dt><code>allowpaymentrequest</code></dt>
-  <dd>Cet attribut, lorsqu'il vaut <code>true</code>, permet à l'<i>iframe</i> intégrée d'appeler l'API <a href="/fr/docs/Web/API/Payment_Request_API">Payment Request</a>.
-    <div class="note">
-      <p><strong>Note :</strong>Cet attribut est considéré comme historique et a été redéfini avec <code>allow="payment"</code>.</p>
-    </div>
-  </dd>
-  <dt><code>csp</code> {{experimental_inline}}</dt>
-  <dd>L'attribut <code>csp</code> définit <a href="/fr/docs/Web/HTTP/CSP">la politique de sécurité du contenu</a> que le document intégré doit respecter. Voir <a href="/fr/docs/Web/API/HTMLIFrameElement/csp"><code>HTMLIFrameElement.csp</code></a> pour plus de détails.</dd>
-  <dt><code>height</code></dt>
-  <dd>Cet attribut définit la hauteur du cadre en pixels CSS. La valeur par défaut est <code>150</code>.</dd>
-  <dt><code>loading</code> {{experimental_inline}}</dt>
-  <dd>Cet attribut indique la façon dont le navigateur devrait charger l'<i>iframe</i> :
-    <ul>
-      <li><code>eager</code> : L'<i>iframe</i> doit être chargée immédiatement, même si elle n'est pas dans la zone d'affichage (<i>viewport</i>) visible. C'est la valeur par défaut.</li>
-      <li><code>lazy</code> : Le chargement de l'<i>iframe</i> est retardé jusqu'à ce que celle-ci atteigne une distance donnée du <i>viewport</i>, définie par le navigateur.</li>
-    </ul>
-  </dd>
-  <dt><code>name</code></dt>
-  <dd>Un nom pour le contexte de navigation (ou la <em>frame</em>). Ce nom peut être utilisé comme la valeur de l'attribut <code>target</code> <em>(cible)</em> d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a> <em>(formulaire)</em> ou comme valeur de l'attribut <code>formtarget</code> d'un élément <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a> <em>(entrée)</em> ou <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a> <em>(bouton)</em>. Il peut également être utilisé comme valeur pour le paramètre <code>windowName</code> de la méthode <a href="/fr/docs/Web/API/Window/open"><code>window.open()</code></a>.</dd>
-  <dt><code>referrerpolicy</code></dt>
-  <dd>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération de la ressource :
-    <ul>
-      <li><code>no-referrer</code> signifie que l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> ne sera pas envoyé.</li>
-      <li><code>no-referrer-when-downgrade</code> signifie qu'aucun en-tête <code>Referer</code> ne sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas <a href="/fr/docs/Glossary/TLS">TLS</a> (<a href="/fr/docs/Glossary/https">HTTPS</a>). C'est le comportement par défaut de l'agent utilisateur.</li>
-      <li><code>origin</code> signifie que le référent sera l'origine de la page (c'est-à-dire son <a href="/fr/docs/Learn/Common_questions/What_is_a_URL">schéma</a>, son <a href="/fr/docs/Glossary/Host">hôte</a> et le <a href="/fr/docs/Glossary/Port">port</a> utilisé).</li>
-      <li><code>origin-when-cross-origin</code> signifie que les navigations vers d'autres origines seront limitées aux schémas, hôtes et ports. Les navigations sur la même origine incluront le chemin explicite du référent.</li>
-      <li><code>same-origin</code> un référent sera envoyé pour <a href="/fr/docs/Web/Security/Same-origin_policy">les mêmes origines</a> mais les requêtes multi-origines ne contiendront pas d'informations de référent.</li>
-      <li><code>strict-origin</code> seule l'origine du document est envoyée comme référent lorsque le protocole de sécurité est le même (HTTPS→HTTPS). L'origine n'est pas envoyée lorsque la destination est moins sécurisée (HTTPS→HTTP).</li>
-      <li><code>strict-origin-when-cross-origin</code> : l'URL complète est envoyée pour les requêtes de même origine, seule l'origine est envoyée lorsque le protocole de sécurité est le même (HTTPS→HTTPS) et aucun en-tête n'est envoyé pour une destination moins sécurisée (HTTPS→HTTP).</li>
-      <li><code>unsafe-url</code> signifie que le référent inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom utilisateur). <strong>Cette valeur n'est pas sûre</strong>, car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines non sécurisées.</li>
-    </ul>
-  </dd>
-  <dt><code>sandbox</code></dt>
-  <dd>Cet attribut permet d'appliquer des restrictions sur le contenu qui peut apparaître dans l'<i>iframe</i>. Si cet attribut vaut la chaîne de caractères vide, toutes les restrictions sont appliquées, sinon, on peut utiliser une liste de mots-clés séparés par des espaces pour définir des restrictions précises. Les mots-clés qui peuvent être utilisés sont :
-    <ul>
-      <li><code>allow-downloads-without-user-activation</code> {{experimental_inline}} : permet aux téléchargements d'avoir lieu sans un signe de l'utilisateur.</li>
-      <li><code>allow-downloads</code> : permet aux téléchargements d'avoir lieu après une action de la part de l'utilisateur.</li>
-      <li><code>allow-forms</code> : le contexte de navigation intégré peut envoyer des formulaires. Si ce mot-clé n'est pas utilisé, cette opération n'est pas autorisée.</li>
-      <li><code>allow-modals</code> : le contexte de navigation peut ouvrir des fenêtres modales.</li>
-      <li><code>allow-orientation-lock</code> : le contexte de navigation peut désactiver le verrouillage de l'orientation de l'écran.</li>
-      <li><code>allow-pointer-lock</code> : le contexte de navigation peut utliser <a href="/fr/docs/Web/API/Pointer_Lock_API">l'API Pointer Lock</a>.</li>
-      <li><code>allow-popups</code> : le contexte de navigation peut déclencher des fenêtres contextuelles (par exemple avec <code>window.open</code>, <code>target="_blank"</code>, <code>showModalDialog</code>). Si ce mot-clé n'est pas utilisé, la fonctionnalité échouera sans message d'erreur.</li>
-      <li><code>allow-popups-to-escape-sandbox</code> : ce mot-clé permet à un document isolé dans un bac à sable (<em>sandboxed</em>) d'ouvrir de nouvelles fenêtres sans avoir à forcer la mise en bac à sable pour ces fenêtres. Cela permettra par exemple à une publicité tierce d'être correctement mise dans un bac à sable sans appliquer les mêmes restrictions sur la page initiale.</li>
-      <li><code>allow-presentation</code> : ce mot-clé permet à un <i>iframe</i> de démarrer <a href="/fr/docs/Web/API/PresentationRequest">une session de présentation</a>.</li>
-      <li><code>allow-same-origin</code> : ce mot-clé permet au document isolé de supporter les tests de <a href="/fr/docs/Glossary/Same-origin_policy">same-origin policy</a> en désactivant le remplacement de l'origine de l'<i>iframe</i> par une origine unique.</li>
-      <li><code>allow-scripts</code> : le contexte de navigation peut exécuter des scripts (mais ne peut pas créer de fenêtres contextuelles). Si ce mot-clé n'est pas utilisé, cette opération n'est pas autorisée.</li>
-      <li><code>allow-storage-access-by-user-activation</code> {{experimental_inline}} : ce mot-clé permet au contexte de navigation embarqué de demander l'accès aux fonctionnalités de stockage du document parent (ex. ses cookies, <a href="/fr/docs/Web/API/Web_Storage_API">le stockage web</a>) grâce à l'<a href="/fr/docs/Web/API/Storage_Access_API">API Storage Access</a>.</li>
-      <li><code>allow-top-navigation</code> : le contexte de navigation peut charger du contenu depuis le contexte de navigation de plus haut niveau. Si ce mot-clé est absent, cette opération n'est pas autorisée.</li>
-      <li><code>allow-top-navigation-by-user-activation</code> : le contexte de navigation peut charger du contenu depuis le contexte de plus haut niveau uniquement si l'action provient de l'utilisateur. Si ce mot-clé est absent, cette opération n'est pas autorisée.</li>
-    </ul>
-    <div class="note">
-      <p><strong>Note :</strong></p>
-      <ul>
-        <li>Lorsque le document intégré possède la même origine que la page principale, il est <strong>fortement déconseillé</strong> d'employer <code>allow-scripts</code> et <code>allow-same-origin</code> simultanément, car cela permet de retirer l'attribut <code>sandbox</code> via un programme, c'est donc aussi sûr que de ne pas utiliser l'attribut <code>sandbox</code>.</li>
-        <li>La mise en bac à sable (<em>sandboxing</em>) est d'une aide minime si un attaquant peut faire en sorte qu'un contenu potentiellement hostile soit affiché dans le navigateur de l'utilisateur en dehors d'un <i>iframe</i> sous sandbox. Aussi, il est recommandé de diffuser le contenu depuis un domaine dédié séparé, afin de limiter les éventuels dommages.</li>
-        <li>L'attribut <code>sandbox</code> n'est pas pris en charge par Internet Explorer 9 et les versions antérieures.</li>
-      </ul>
-    </div>
-  </dd>
-  <dt><code>src</code></dt>
-  <dd>L'URL de la page qu'on souhaite intégrer. On pourra utiliser <code>about:blank</code> pour les pages vides afin de respecter les règles de même origine (<em>Same-Origin Policy</em>). On notera également que retirer l'attribut <code>src</code> d'un élément <code>&lt;iframe&gt;</code> à l'aide d'un script (par exemple avec <a href="/fr/docs/Web/API/Element/removeAttribute"><code>Element.removeAttribute()</code></a>) provoquera le chargement de <code>about:blank</code> dans la <em>frame</em> pour Firefox à partir de la version 65, pour les navigateurs basés sur Chromium ainsi que pour Safari.</dd>
-  <dt><code>srcdoc</code></dt>
-  <dd>Le contenu de la page qu'on souhaite intégrer dans le contexte de navigation et qui surcharge celui indiqué par <code>src</code>.</dd>
-  <dt><code>width</code></dt>
-  <dd>Cet attribut indique la largeur de l'<i>iframe</i> en pixels CSS. Par défaut, cet attribut vaut <code>300</code>.</dd>
-</dl>
-
-<h3 id="deprecated_attributes">Attributs dépréciés</h3>
-
-<dl>
-  <dt><code>align</code> {{deprecated_inline}}</dt>
-  <dd>Cet attribut obsolète permettait de définir l'alignement de l'<i>iframe</i> par rapport à son contexte englobant.</dd>
-  <dt><code>frameborder</code> {{deprecated_inline}}</dt>
-  <dd>Lorsqu'il vaut 1 (la valeur par défaut), cet attribut indique au navigateur de définir une bordure entre ce cadre et tout autre cadre. Lorsqu'il vaut 0, aucune bordure n'est dessinée. Plutôt que cet attribut, on utilisera la propriété CSS <a href="/fr/docs/Web/CSS/border"><code>border</code></a> pour dessiner la bordure autour d'une iframe.</dd>
-  <dt><code>longdesc</code> {{deprecated_inline}}</dt>
-  <dd>Un URI vers une description détaillée du cadre. En raison d'un mauvais usage, cet attribut n'est pas utile pour les navigateurs non-visuels.</dd>
-  <dt><code>marginheight</code> {{deprecated_inline}}</dt>
-  <dd>L'espace, exprimé en pixels, entre le contenu du cadre et ses marges haute et basse.</dd>
-  <dt><code>marginwidth</code> {{deprecated_inline}}</dt>
-  <dd>L'espace, exprimé en pixels, entre le contenu du cadre et ses marges gauche et droite.</dd>
-  <dt><code>scrolling</code> {{deprecated_inline}}</dt>
-  <dd>Un attribut à valeur contrainte qui indique si le navigateur doit afficher une barre de défilement (ou tout autre moyen de défilement) pour<em> </em>le cadre :
-    <ul>
-      <li><code>auto</code> : la barre de défilement est uniquement affichée lorsque c'est nécessaire.</li>
-      <li><code>yes</code> : la barre de défilement est toujours affichée.</li>
-      <li><code>no</code> : aucune barre de défilement n'est affichée.</li>
-    </ul>
-  </dd>
-</dl>
-
-<h3 id="non-standard_attributes">Attributs non-standard {{non-standard_inline}}</h3>
-
-<dl>
-  <dt><code>mozbrowser</code> {{non-standard_inline}}</dt>
-  <dd>Cet attribut est uniquement disponible pour les <a href="/fr/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. L'<i>iframe</i> se comporte comme une fenêtre de navigateur de plus haut niveau. Voir <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1318532">le bug 1318532</a> quant à l'exposition de cet attribut dans Firefox.</dd>
-</dl>
-
-<h2 id="scripting">Scripts</h2>
-
-<p>Les <code>iframes</code> (et aussi les <a href="/fr/docs/Web/HTML/Element/frame"><code>&lt;frame&gt;</code></a>) font partie du pseudo-tableau <a href="/fr/docs/Web/API/Window/frames"><code>window.frames</code></a>.</p>
-
-<p>En utilisant l'élément <a href="/fr/docs/Web/API/HTMLIFrameElement"><code>HTMLIFrameElement</code></a> du DOM, les scripts peuvent accéder à l'objet <a href="/fr/docs/Web/API/Window"><code>window</code></a> de la page HTML incluse par la propriété <a href="/fr/docs/Web/API/HTMLIFrameElement/contentWindow"><code>contentWindow</code></a>. La propriété <a href="/fr/docs/Web/API/HTMLIFrameElement/contentDocument"><code>contentDocument</code></a> fait référence au document contenu dans l'<code>iframe</code> (l'équivalent de <code>contentWindow.document</code>).</p>
-
-<p>Depuis l'<i>iframe</i>, un script peut obtenir une référence à la fenêtre parente via la propriété <a href="/fr/docs/Web/API/Window/parent"><code>window.parent</code></a>.</p>
-
-<p>Les scripts qui tentent d'accéder au contenu de l'<i>iframe</i> doivent respecter <a href="/fr/docs/Web/Security/Same-origin_policy" title="Same origin policy for JavaScript">les règles de même origine</a> et ne peuvent pas accéder à la plupart des propriétés d'une autre fenêtre s'ils ont été chargés depuis un domaine différent. Cela s'applique également aux scripts d'un <i>iframe</i> qui souhaitent accéder au contexte englobant. On peut toutefois communiquer entre différents domaines grâce à la méthode <a href="/fr/docs/Web/API/Window/postMessage"><code>Window.postMessage()</code></a>.</p>
-
-<h2 id="positioning_and_scaling">Positionnement et redimensionnement</h2>
-
-<p>En tant qu'<a href="/fr/docs/Web/CSS/Replaced_element">élément remplacé</a>, la position, l'alignement et le redimensionnement du document embarqué via <code>&lt;iframe&gt;</code> peuvent être ajustés via les propriétés <a href="/fr/docs/Web/CSS/object-position"><code>object-position</code></a> et <a href="/fr/docs/Web/CSS/object-fit"><code>object-fit</code></a>.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="example1">Une &lt;iframe&gt; simple</h3>
-
-<p>L'exemple qui suit utilise la page située à <a href="https://example.org">https://example.org</a> pour l'intégrer à la page courante via une iframe.</p>
-
-<h4 id="html">HTML</h4>
-
-<pre class="brush: html">&lt;iframe src="https://example.org"
-        title="Exemple d'iframe" width="400" height="300"&gt;
-&lt;/iframe&gt;</pre>
-
-<h4 id="result">Résultat</h4>
-
-<p>{{EmbedLiveSample('example1', 640, 400)}}</p>
-
-<h2 id="accessibility_concerns">Accessibilité</h2>
-
-<p>Les personnes qui utilisent des outils d'assistance tels que des lecteurs d'écran peuvent utiliser l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#title"><code>title</code></a> pour obtenir la description du contenu embarqué par l'<code>iframe</code>. La valeur du titre doit décrire, de façon claire et concise, le contenu embarqué.</p>
-
-<pre class="brush: html">&lt;iframe
+</table>
+
+## Attributs
+
+Cet élément prend en charge [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
+
+- `allow`
+  - : L'attribut `allow` permet de définir une [politique de fonctionnalité](/fr/docs/Web/HTTP/Feature_Policy) pour l'_iframe_. Cette politique définit les fonctionnalités disponibles au sein de l'_iframe_ selon l'origine de la requête (les fonctionnalités peuvent être l'accès au micro, à la caméra, aux informations de batterie, etc.). Pour plus d'informations, voir [l'article sur l'utilisation de `Feature-Policy`](/fr/docs/Web/HTTP/Feature_Policy/Using_Feature_Policy#the_iframe_allow_attribute).
+- `allowfullscreen`
+
+  - : Cet attribut, lorsqu'il vaut `true`, indique que l'_iframe_ intégrée peut être passée en plein écran via la méthode[`Element.requestFullscreen()`](/fr/docs/Web/API/Element/requestFullScreen).
+
+    > **Note :**Cet attribut est considéré comme historique et a été redéfini avec `allow="fullscreen"`.
+
+- `allowpaymentrequest`
+
+  - : Cet attribut, lorsqu'il vaut `true`, permet à l'_iframe_ intégrée d'appeler l'API [Payment Request](/fr/docs/Web/API/Payment_Request_API).
+
+    > **Note :**Cet attribut est considéré comme historique et a été redéfini avec `allow="payment"`.
+
+- `csp` {{experimental_inline}}
+  - : L'attribut `csp` définit [la politique de sécurité du contenu](/fr/docs/Web/HTTP/CSP) que le document intégré doit respecter. Voir [`HTMLIFrameElement.csp`](/fr/docs/Web/API/HTMLIFrameElement/csp) pour plus de détails.
+- `height`
+  - : Cet attribut définit la hauteur du cadre en pixels CSS. La valeur par défaut est `150`.
+- `loading` {{experimental_inline}}
+
+  - : Cet attribut indique la façon dont le navigateur devrait charger l'_iframe_ :
+
+    - `eager` : L'_iframe_ doit être chargée immédiatement, même si elle n'est pas dans la zone d'affichage (_viewport_) visible. C'est la valeur par défaut.
+    - `lazy` : Le chargement de l'_iframe_ est retardé jusqu'à ce que celle-ci atteigne une distance donnée du _viewport_, définie par le navigateur.
+
+- `name`
+  - : Un nom pour le contexte de navigation (ou la _frame_). Ce nom peut être utilisé comme la valeur de l'attribut `target` _(cible)_ d'un élément [`<a>`](/fr/docs/Web/HTML/Element/a) ou [`<form>`](/fr/docs/Web/HTML/Element/Form) _(formulaire)_ ou comme valeur de l'attribut `formtarget` d'un élément [`<input>`](/fr/docs/Web/HTML/Element/Input) _(entrée)_ ou [`<button>`](/fr/docs/Web/HTML/Element/Button) _(bouton)_. Il peut également être utilisé comme valeur pour le paramètre `windowName` de la méthode [`window.open()`](/fr/docs/Web/API/Window/open).
+- `referrerpolicy`
+
+  - : Une chaîne de caractères qui indique le référent (_referrer_) à utiliser lors de la récupération de la ressource :
+
+    - `no-referrer` signifie que l'en-tête [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) ne sera pas envoyé.
+    - `no-referrer-when-downgrade` signifie qu'aucun en-tête `Referer` ne sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas [TLS](/fr/docs/Glossary/TLS) ([HTTPS](/fr/docs/Glossary/https)). C'est le comportement par défaut de l'agent utilisateur.
+    - `origin` signifie que le référent sera l'origine de la page (c'est-à-dire son [schéma](/fr/docs/Learn/Common_questions/What_is_a_URL), son [hôte](/fr/docs/Glossary/Host) et le [port](/fr/docs/Glossary/Port) utilisé).
+    - `origin-when-cross-origin` signifie que les navigations vers d'autres origines seront limitées aux schémas, hôtes et ports. Les navigations sur la même origine incluront le chemin explicite du référent.
+    - `same-origin` un référent sera envoyé pour [les mêmes origines](/fr/docs/Web/Security/Same-origin_policy) mais les requêtes multi-origines ne contiendront pas d'informations de référent.
+    - `strict-origin` seule l'origine du document est envoyée comme référent lorsque le protocole de sécurité est le même (HTTPS→HTTPS). L'origine n'est pas envoyée lorsque la destination est moins sécurisée (HTTPS→HTTP).
+    - `strict-origin-when-cross-origin` : l'URL complète est envoyée pour les requêtes de même origine, seule l'origine est envoyée lorsque le protocole de sécurité est le même (HTTPS→HTTPS) et aucun en-tête n'est envoyé pour une destination moins sécurisée (HTTPS→HTTP).
+    - `unsafe-url` signifie que le référent inclura l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom utilisateur). **Cette valeur n'est pas sûre**, car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines non sécurisées.
+
+- `sandbox`
+
+  - : Cet attribut permet d'appliquer des restrictions sur le contenu qui peut apparaître dans l'_iframe_. Si cet attribut vaut la chaîne de caractères vide, toutes les restrictions sont appliquées, sinon, on peut utiliser une liste de mots-clés séparés par des espaces pour définir des restrictions précises. Les mots-clés qui peuvent être utilisés sont :
+
+    - `allow-downloads-without-user-activation` {{experimental_inline}} : permet aux téléchargements d'avoir lieu sans un signe de l'utilisateur.
+    - `allow-downloads` : permet aux téléchargements d'avoir lieu après une action de la part de l'utilisateur.
+    - `allow-forms` : le contexte de navigation intégré peut envoyer des formulaires. Si ce mot-clé n'est pas utilisé, cette opération n'est pas autorisée.
+    - `allow-modals` : le contexte de navigation peut ouvrir des fenêtres modales.
+    - `allow-orientation-lock` : le contexte de navigation peut désactiver le verrouillage de l'orientation de l'écran.
+    - `allow-pointer-lock` : le contexte de navigation peut utliser [l'API Pointer Lock](/fr/docs/Web/API/Pointer_Lock_API).
+    - `allow-popups` : le contexte de navigation peut déclencher des fenêtres contextuelles (par exemple avec `window.open`, `target="_blank"`, `showModalDialog`). Si ce mot-clé n'est pas utilisé, la fonctionnalité échouera sans message d'erreur.
+    - `allow-popups-to-escape-sandbox` : ce mot-clé permet à un document isolé dans un bac à sable (_sandboxed_) d'ouvrir de nouvelles fenêtres sans avoir à forcer la mise en bac à sable pour ces fenêtres. Cela permettra par exemple à une publicité tierce d'être correctement mise dans un bac à sable sans appliquer les mêmes restrictions sur la page initiale.
+    - `allow-presentation` : ce mot-clé permet à un _iframe_ de démarrer [une session de présentation](/fr/docs/Web/API/PresentationRequest).
+    - `allow-same-origin` : ce mot-clé permet au document isolé de supporter les tests de [same-origin policy](/fr/docs/Glossary/Same-origin_policy) en désactivant le remplacement de l'origine de l'_iframe_ par une origine unique.
+    - `allow-scripts` : le contexte de navigation peut exécuter des scripts (mais ne peut pas créer de fenêtres contextuelles). Si ce mot-clé n'est pas utilisé, cette opération n'est pas autorisée.
+    - `allow-storage-access-by-user-activation` {{experimental_inline}} : ce mot-clé permet au contexte de navigation embarqué de demander l'accès aux fonctionnalités de stockage du document parent (ex. ses cookies, [le stockage web](/fr/docs/Web/API/Web_Storage_API)) grâce à l'[API Storage Access](/fr/docs/Web/API/Storage_Access_API).
+    - `allow-top-navigation` : le contexte de navigation peut charger du contenu depuis le contexte de navigation de plus haut niveau. Si ce mot-clé est absent, cette opération n'est pas autorisée.
+    - `allow-top-navigation-by-user-activation` : le contexte de navigation peut charger du contenu depuis le contexte de plus haut niveau uniquement si l'action provient de l'utilisateur. Si ce mot-clé est absent, cette opération n'est pas autorisée.
+
+    > **Note :**
+    >
+    > - Lorsque le document intégré possède la même origine que la page principale, il est **fortement déconseillé** d'employer `allow-scripts` et `allow-same-origin` simultanément, car cela permet de retirer l'attribut `sandbox` via un programme, c'est donc aussi sûr que de ne pas utiliser l'attribut `sandbox`.
+    > - La mise en bac à sable (_sandboxing_) est d'une aide minime si un attaquant peut faire en sorte qu'un contenu potentiellement hostile soit affiché dans le navigateur de l'utilisateur en dehors d'un _iframe_ sous sandbox. Aussi, il est recommandé de diffuser le contenu depuis un domaine dédié séparé, afin de limiter les éventuels dommages.
+    > - L'attribut `sandbox` n'est pas pris en charge par Internet Explorer 9 et les versions antérieures.
+
+- `src`
+  - : L'URL de la page qu'on souhaite intégrer. On pourra utiliser `about:blank` pour les pages vides afin de respecter les règles de même origine (_Same-Origin Policy_). On notera également que retirer l'attribut `src` d'un élément `<iframe>` à l'aide d'un script (par exemple avec [`Element.removeAttribute()`](/fr/docs/Web/API/Element/removeAttribute)) provoquera le chargement de `about:blank` dans la _frame_ pour Firefox à partir de la version 65, pour les navigateurs basés sur Chromium ainsi que pour Safari.
+- `srcdoc`
+  - : Le contenu de la page qu'on souhaite intégrer dans le contexte de navigation et qui surcharge celui indiqué par `src`.
+- `width`
+  - : Cet attribut indique la largeur de l'_iframe_ en pixels CSS. Par défaut, cet attribut vaut `300`.
+
+### Attributs dépréciés
+
+- `align` {{deprecated_inline}}
+  - : Cet attribut obsolète permettait de définir l'alignement de l'_iframe_ par rapport à son contexte englobant.
+- `frameborder` {{deprecated_inline}}
+  - : Lorsqu'il vaut 1 (la valeur par défaut), cet attribut indique au navigateur de définir une bordure entre ce cadre et tout autre cadre. Lorsqu'il vaut 0, aucune bordure n'est dessinée. Plutôt que cet attribut, on utilisera la propriété CSS [`border`](/fr/docs/Web/CSS/border) pour dessiner la bordure autour d'une iframe.
+- `longdesc` {{deprecated_inline}}
+  - : Un URI vers une description détaillée du cadre. En raison d'un mauvais usage, cet attribut n'est pas utile pour les navigateurs non-visuels.
+- `marginheight` {{deprecated_inline}}
+  - : L'espace, exprimé en pixels, entre le contenu du cadre et ses marges haute et basse.
+- `marginwidth` {{deprecated_inline}}
+  - : L'espace, exprimé en pixels, entre le contenu du cadre et ses marges gauche et droite.
+- `scrolling` {{deprecated_inline}}
+
+  - : Un attribut à valeur contrainte qui indique si le navigateur doit afficher une barre de défilement (ou tout autre moyen de défilement) pour\* \*le cadre :
+
+    - `auto` : la barre de défilement est uniquement affichée lorsque c'est nécessaire.
+    - `yes` : la barre de défilement est toujours affichée.
+    - `no` : aucune barre de défilement n'est affichée.
+
+### Attributs non-standard {{non-standard_inline}}
+
+- `mozbrowser` {{non-standard_inline}}
+  - : Cet attribut est uniquement disponible pour les [WebExtensions](/fr/docs/Mozilla/Add-ons/WebExtensions). L'_iframe_ se comporte comme une fenêtre de navigateur de plus haut niveau. Voir [le bug 1318532](https://bugzilla.mozilla.org/show_bug.cgi?id=1318532) quant à l'exposition de cet attribut dans Firefox.
+
+## Scripts
+
+Les `iframes` (et aussi les [`<frame>`](/fr/docs/Web/HTML/Element/frame)) font partie du pseudo-tableau [`window.frames`](/fr/docs/Web/API/Window/frames).
+
+En utilisant l'élément [`HTMLIFrameElement`](/fr/docs/Web/API/HTMLIFrameElement) du DOM, les scripts peuvent accéder à l'objet [`window`](/fr/docs/Web/API/Window) de la page HTML incluse par la propriété [`contentWindow`](/fr/docs/Web/API/HTMLIFrameElement/contentWindow). La propriété [`contentDocument`](/fr/docs/Web/API/HTMLIFrameElement/contentDocument) fait référence au document contenu dans l'`iframe` (l'équivalent de `contentWindow.document`).
+
+Depuis l'_iframe_, un script peut obtenir une référence à la fenêtre parente via la propriété [`window.parent`](/fr/docs/Web/API/Window/parent).
+
+Les scripts qui tentent d'accéder au contenu de l'_iframe_ doivent respecter [les règles de même origine](/fr/docs/Web/Security/Same-origin_policy "Same origin policy for JavaScript") et ne peuvent pas accéder à la plupart des propriétés d'une autre fenêtre s'ils ont été chargés depuis un domaine différent. Cela s'applique également aux scripts d'un _iframe_ qui souhaitent accéder au contexte englobant. On peut toutefois communiquer entre différents domaines grâce à la méthode [`Window.postMessage()`](/fr/docs/Web/API/Window/postMessage).
+
+## Positionnement et redimensionnement
+
+En tant qu'[élément remplacé](/fr/docs/Web/CSS/Replaced_element), la position, l'alignement et le redimensionnement du document embarqué via `<iframe>` peuvent être ajustés via les propriétés [`object-position`](/fr/docs/Web/CSS/object-position) et [`object-fit`](/fr/docs/Web/CSS/object-fit).
+
+## Exemples
+
+### Une \<iframe> simple
+
+L'exemple qui suit utilise la page située à <https://example.org> pour l'intégrer à la page courante via une iframe.
+
+#### HTML
+
+```html
+<iframe src="https://example.org"
+        title="Exemple d'iframe" width="400" height="300">
+</iframe>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('example1', 640, 400)}}
+
+## Accessibilité
+
+Les personnes qui utilisent des outils d'assistance tels que des lecteurs d'écran peuvent utiliser l'attribut [`title`](/fr/docs/Web/HTML/Global_attributes#title) pour obtenir la description du contenu embarqué par l'`iframe`. La valeur du titre doit décrire, de façon claire et concise, le contenu embarqué.
+
+```html
+<iframe
   title="La page Wikipédia consacrée à Robert Louis Stevenson"
-  src="https://fr.wikipedia.org/wiki/Robert_Louis_Stevenson"&gt;
-&lt;/iframe&gt;</pre>
+  src="https://fr.wikipedia.org/wiki/Robert_Louis_Stevenson">
+</iframe>
+```
 
-<p>Sans cette description, les utilisateurs peuvent devoir naviguer à l'intérieur de l'<code>iframe</code> et parcourir le contenu afin de comprendre de quoi il s'agit. Le changement de contexte peut être source de confusion et demander un temps de réflexion, notamment pour les pages qui contiennent plusieurs <code>iframe</code> et/ou du contenu interactif tel que des vidéos ou de la musique.</p>
+Sans cette description, les utilisateurs peuvent devoir naviguer à l'intérieur de l'`iframe` et parcourir le contenu afin de comprendre de quoi il s'agit. Le changement de contexte peut être source de confusion et demander un temps de réflexion, notamment pour les pages qui contiennent plusieurs `iframe` et/ou du contenu interactif tel que des vidéos ou de la musique.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Web/Privacy">Vie privée, autorisations et sécurité de l'information</a></li>
-</ul>
+- [Vie privée, autorisations et sécurité de l'information](/fr/docs/Web/Privacy)
diff --git a/files/fr/web/html/element/image/index.md b/files/fr/web/html/element/image/index.md
index 086e6a1f93..9fe5cef625 100644
--- a/files/fr/web/html/element/image/index.md
+++ b/files/fr/web/html/element/image/index.md
@@ -9,29 +9,25 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/image
 ---
-<div>{{HTMLRef}}{{obsolete_header}}{{non-standard_header}}</div>
+{{HTMLRef}}{{obsolete_header}}{{non-standard_header}}
 
-<p>L'élément HTML <strong><code>&lt;image&gt;</code></strong> est un élément obsolète, remplacé depuis longtemps par l'élément standard {{HTMLElement("img")}}.</p>
+L'élément HTML **`<image>`** est un élément obsolète, remplacé depuis longtemps par l'élément standard {{HTMLElement("img")}}.
 
-<div class="warning">
-<p><strong>Attention :</strong> Si vous souhaitez afficher des images, c'est l'élément {{HTMLElement("img")}} qui doit être utilisé.</p>
-</div>
+> **Attention :** Si vous souhaitez afficher des images, c'est l'élément {{HTMLElement("img")}} qui doit être utilisé.
 
-<p>Bien que les navigateurs essaient de convertir cet élément {{HTMLElement("img")}}, cela peut avoir des résultats incertains voire inattendus.</p>
+Bien que les navigateurs essaient de convertir cet élément {{HTMLElement("img")}}, cela peut avoir des résultats incertains voire inattendus.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cet élément ne fait partie d'aucune spécification.</p>
+Cet élément ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>La plupart du temps, les navigateurs essaieront de convertir cet élément en un élément <code>&lt;img&gt;</code> si l'attribut {{htmlattrxref("src", "img")}} est utilisé. Créer un élément <code>&lt;image&gt;</code> sans attribut entraînera la création d'un objet <code>HTMLElement</code> avec le nom "image". Si l'élément est créé avec un attribut <code>src</code>, ce sera un objet <code>HTMLImageElement</code> qui sera créé et son nom sera "img".</p>
+La plupart du temps, les navigateurs essaieront de convertir cet élément en un élément `<img>` si l'attribut {{htmlattrxref("src", "img")}} est utilisé. Créer un élément `<image>` sans attribut entraînera la création d'un objet `HTMLElement` avec le nom "image". Si l'élément est créé avec un attribut `src`, ce sera un objet `HTMLImageElement` qui sera créé et son nom sera "img".
 
-<p>{{Compat("html.elements.image")}}</p>
+{{Compat("html.elements.image")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément {{HTMLElement("img")}} qui doit être utilisé afin d'afficher une image dans un document.</li>
- <li>L'élément {{HTMLElement("picture")}} qui permet de sélectionner parmi plusieurs images en fonction de requête média afin d'avoir des images <em>responsive</em>.</li>
-</ul>
+- L'élément {{HTMLElement("img")}} qui doit être utilisé afin d'afficher une image dans un document.
+- L'élément {{HTMLElement("picture")}} qui permet de sélectionner parmi plusieurs images en fonction de requête média afin d'avoir des images _responsive_.
diff --git a/files/fr/web/html/element/img/index.md b/files/fr/web/html/element/img/index.md
index 35508bb966..45eb9499c7 100644
--- a/files/fr/web/html/element/img/index.md
+++ b/files/fr/web/html/element/img/index.md
@@ -22,319 +22,335 @@ tags:
 translation_of: Web/HTML/Element/img
 browser-compat: html.elements.img
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;img&gt;</code></strong> intègre une image dans le document.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}</div>
-
-<p>Dans l'exemple qui précède, on utilise l'élément <code>&lt;img&gt;</code> simplement.</p>
-
-<ul>
-  <li>L'attribut <code>src</code> est obligatoire et contient le chemin de l'image qu'on souhaite afficher.</li>
-  <li>L'attribut <code>alt</code> contient une description textuelle de l'image, qui n'est pas obligatoire mais qui est <strong>incroyablement utile</strong> pour l'accessibilité — les lecteurs d'écran lisent cette description à leurs utilisateurs pour qu'ils sachent ce que signifie l'image. Le texte Alt est également affiché sur la page si l'image ne peut pas être chargée pour une raison quelconque : par exemple, erreurs de réseau, blocage du contenu ou linkrot.</li>
-</ul>
-
-<p>Il existe d'autres attributs qui peuvent être utilisés dans différents cas. Ces attributs sont détaillés ci-après. Entre autres, on pourra utiliser :</p>
-
-<ul>
-	<li><a href="/fr/docs/Web/HTTP/Headers/Referrer-Policy">Referrer</a>/<a href="/fr/docs/Glossary/CORS">CORS</a> contrôle pour la sécurité et la confidentialité : voir <a href="#attr-crossorigin"><code>crossorigin</code></a> et <a href="#attr-referrerpolicy"><code>referrerpolicy</code></a>.</li>
-	<li><a href="#attr-width"><code>width</code></a> et <a href="#attr-height"><code>height</code></a> pour définir la taille intrinsèque de l'image, ce qui lui permet d'occuper de l'espace avant son chargement, afin d'atténuer les décalages de présentation du contenu.</li>
-	<li>Des indications d'images adaptatives avec <a href="#attr-sizes"><code>sizes</code></a> et <a href="#attr-srcset"><code>srcset</code></a>. (voir aussi l'élément <a href="/fr/docs/Web/HTML/Element/picture"><code>&lt;picture&gt;</code></a> et notre <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Tutoriel sur les images adaptatives</a>).</li>
-</ul>
-
-<h2 id="supported_image_formats">Formats d'image pris en charge</h2>
-
-<p>La norme HTML ne donne pas de liste des formats d'image qui doivent être pris en charge, de sorte que chaque <a href="/fr/docs/Glossary/User_agent">agent utilisateur</a> prend en charge un ensemble différent de formats.</p>
-
-<p>{{page("/fr/docs/Web/Media/Formats/Types_des_images", "table-of-image-file-types")}}</p>
-
-<div class="note">
-  <p><strong>Note :</strong> Voir le <a href="/fr/docs/Web/Media/Formats/Image_types">Guide des types et formats de fichiers image</a> pour des informations plus complètes sur les formats d'image pris en charge par les navigateurs web. Cela inclut les formats d'image pris en charge mais non recommandés pour le contenu web (par exemple, ICO, BMP, etc.).</p>
-</div>
-
-<h2 id="image_loading_errors">Erreurs de chargement des images</h2>
-
-<p>Si une erreur se produit lors du chargement ou de l'affichage de l'image et qu'un gestionnaire d'événement <a href="/fr/docs/Web/HTML/Global_attributes#attr-onerror"><code>onerror</code></a> a été paramétré afin d'écouter l'événement <a href="/fr/docs/Web/Reference/Events/error">error</a>, le gestionnaire d'événement sera invoqué. Cela peut se produire lorsque :</p>
-
-<ul>
-  <li>L'attribut <a href="#attr-src"><code>src</code></a> est vide (<code>""</code>) ou vaut <code>null</code>.</li>
-  <li>L'<a href="/fr/docs/Glossary/URL">URL</a> indiquée dans l'attribut <code>src</code> est la même URL que celle de la page sur laquelle se trouve l'utilisateur.</li>
-  <li>L'image indiquée est corrompue et ne peut pas être chargée.</li>
-  <li>Les métadonnées de l'image sont corrompues et il est impossible de récupérer ses dimensions et aucune dimension n'est indiquée dans les attributs de l'élément <code>&lt;img&gt;</code>.</li>
-  <li>Le format de l'image n'est pas pris en charge par l'agent utilisateur.</li>
-</ul>
-
-<h2 id="attributes">Attributs</h2>
-
-<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Global_attributes">attributs globaux</a>.</p>
-
-<dl>
-  <dt><code>alt</code></dt>
-  <dd>Cet attribut définit le texte alternatif utilisé lorsqu'il est impossible d'afficher l'image (par exemple si l'URL est incorrecte ou si l'image n'est pas encore téléchargée).
-    <div class="note">
-      <p><strong>Note :</strong></p>
-			<p>Les navigateurs n'affichent pas toujours les images. Il existe un certain nombre de situations dans lesquelles un navigateur peut ne pas afficher les images, par exemple :</p>
-			<ul>
-				<li>Navigateurs non visuels (tels que ceux utilisés par les personnes souffrant de déficiences visuelles)</li>
-				<li>L'utilisateur choisit de ne pas afficher les images (économie de bande passante, raisons de confidentialité).</li>
-				<li>L'image n'est pas valide ou le <a href="#supported_image_formats">type n'est pas pris en charge</a>.</li>
-			</ul>
-
-			<p>Dans ces cas, le navigateur peut remplacer l'image par le texte de l'attribut <code>alt</code> de l'élément. Pour ces raisons et d'autres, fournissez une valeur utile pour <code>alt</code> dans la mesure du possible.</p>
-    </div>
-
-    <p>Omettre complètement <code>alt</code> indique que l'image est un élément clé du contenu et qu'aucun équivalent textuel n'est disponible. Définir cet attribut sur une chaîne vide (<code>alt=""</code>) indique que cette image n'est <em>pas</em> un élément clé du contenu (il s'agit d'une décoration ou d'un pixel de suivi), et que les navigateurs non visuels peuvent l'omettre au <a href="/fr/docs/Glossary/Rendering_engine">rendu</a>. Les navigateurs visuels masqueront également l'icône d'image brisée si le <code>alt</code> est vide et que l'image n'a pas réussi à s'afficher.</p>
-  
-    <p>Cet attribut est également utilisé pour copier et coller l'image dans du texte, ou pour enregistrer une image liée dans un signet.</p>
-  </dd>
-  <dt><code>crossorigin</code></dt>
-  <dd>
-    <p>Indique si la récupération de l'image doit être effectuée à l'aide d'une requête <a href="/fr/docs/Glossary/CORS">CORS</a>. Les données d'image d'une <a href="/fr/docs/Web/HTML/CORS_enabled_image">image compatible avec le système CORS</a> renvoyées par une requête CORS peuvent être réutilisées dans l'élément <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> sans être marquées « <a href="/fr/docs/Web/HTML/CORS_enabled_image#what_is_a_tainted_canvas">corrompu</a> ».</p>
-  
-    <p>Si l'attribut <code>crossorigin</code> <em>n'est pas</em> spécifié, une requête non-CORS est envoyée (sans l'en-tête de requête <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a>), et le navigateur marque l'image comme étant corrompue et restreint l'accès à ses données d'image, empêchant son utilisation dans les éléments <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a>.</p>
-  
-    <p>Si l'attribut <code>crossorigin</code> <em>est</em> spécifié, alors une requête CORS est envoyée (avec l'en-tête de requête <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a>) ; mais si le serveur n'autorise pas l'accès croisé aux données de l'image par le site d'origine (en n'envoyant pas d'en-tête de réponse <a href="/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a> ou en n'incluant pas l'origine du site dans l'en-tête de réponse <a href="/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a> qu'il envoie), le navigateur bloque le chargement de l'image et enregistre une erreur CORS dans la console devtools.</p>
-  
-    <p>Valeurs autorisées :</p>
-
-    <dl>
-      <dt><code>anonymous</code></dt>
-      <dd>Une requête entre deux origines est effectuée (avec l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a>) mais aucune information d'authentification n'est transmise (aucun cookie, aucun certificat X.5090, aucune authentification simple par HTTP). Si le serveur ne fournit pas d'informations d'authentification pour le site d'origine (en n'utilisant pas l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a>), l'image sera corrompue et son utilisation sera restreinte.</dd>
-      <dt><code>use-credentials</code></dt>
-      <dd>Une requête entre deux origines est effectuée (avec l'en-tête <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>Origin</code></a>) avec des informations d'authentification qui sont envoyées (par exemple un cookie, un certificat et une authentification HTTP). Si le serveur ne fournit pas d'informations d'authentification au site d'origine (via l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin"><code>Access-Control-Allow-Origin</code></a>), l'image sera corrompue et son utilisation sera restreinte.</dd>
-    </dl>
-  Lorsque cet attribut est absent, la ressource est récupérée sans requête <em>CORS</em> (c'est-à-dire sans envoyer l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Origin"><code>origin</code></a>) ce qui empêche de l'utiliser dans un <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> sans qu'elle soit considérée comme corrompue. Si la valeur de l'attribut est invalide, elle sera considérée comme <code><strong>anonymous</strong></code>. Voir la page <a href="/fr/docs/Web/HTML/Attributes/crossorigin">réglage des attributs CORS</a> pour plus d'informations.</dd>
-  <dt><code>decoding</code></dt>
-  <dd>
-    <p>Cet attribut fournit une indication à l'agent utilisateur pour le décodage de l'information. Les valeurs possibles sont :</p>
-    <dl>
-      <dt><code>sync</code></dt>
-      <dd>L'image est décodée de façon synchrone afin d'être présentée de façon atomique avec le reste du contenu.</dd>
-      <dt><code>async</code></dt>
-      <dd>L'image est décodée de façon asynchrone afin de réduire le temps nécessaire à la présentation du reste du contenu.</dd>
-      <dt><code>auto</code></dt>
-      <dd>Le mode par défaut qui indique l'absence de préférence pour le mode de décodage. Dans ce cas, l'agent utilisateur décide de la meilleure stratégie.</dd>
-    </dl>
-  </dd>
-  <dt><code>height</code></dt>
-  <dd>La hauteur intrinsèque de l'image, en pixels. Doit être un nombre entier sans unité.</dd>
-  <dt><code>intrinsicsize</code> {{deprecated_inline}}</dt>
-  <dd>Cet attribut indique au navigateur d'ignorer la taille intrinsèque réelle de l'image et d'utiliser la taille fournie par les attributs. La matrice contenant l'image aurait donc ces dimensions et calculer <code>naturalWidth</code>/<code>naturalHeight</code> sur de telles images renverrait les valeurs de cet attribut. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explications</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">exemples</a>.</dd>
-  <dt><code>ismap</code></dt>
-  <dd>Un attribut booléen dont la valeur indique si l'image fait partie d'une carte cliquable. Si c'est le cas, les coordonnées du clic seront envoyées au serveur.
-    <div class="note">
-      <p><strong>Note :</strong>Cet attribut est uniquement autorisé si l'élément <code>&lt;img&gt;</code> descend d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> dont l'attribut <a href="/fr/docs/Web/HTML/Element/a#attr-href"><code>href</code></a> est valide.</p>
-    </div>
-  </dd>
-  <dt><code>loading</code> {{experimental_inline}}</dt>
-  <dd>Indique comment le navigateur doit charger l'image :
-    <ul>
-      <li><code>eager</code> : Charge l'image immédiatement, que l'image se trouve ou non dans le viewport visible (c'est la valeur par défaut).</li>
-      <li><code>lazy</code> : Diffère le chargement de l'image au moment où elle atteint une certaine distance de la fenêtre de visualisation, telle que définie par le navigateur. Le but est d'éviter que le réseau et la zone de stockage nécessaires à la manipulation de l'image ne soient utilisés tant qu'il n'est pas relativement sûr que celle-ci sera nécessaire. Cela permet généralement d'améliorer les performances du contenu dans la plupart des cas d'utilisation typiques.
-        <div class="note">
-          <p><strong>Note :</strong>Le chargement n'est différé que lorsque JavaScript est activé. Il s'agit d'une mesure anti-pistage, car si un agent utilisateur prenait en charge le chargement différé lorsque les scripts sont désactivés, il serait toujours possible pour un site de suivre la position de défilement approximative d'un utilisateur tout au long d'une session, en plaçant stratégiquement des images dans le balisage d'une page de sorte qu'un serveur puisse suivre le nombre d'images demandées et le moment où elles le sont.</p>
-        </div>
-      </li>
-    </ul>
-  </dd>
-  <dt><code>referrerpolicy</code> {{experimental_inline}}</dt>
-  <dd>Une chaîne de caractères indiquant le référent à utiliser lors de la récupération de la ressource :
-    <ul>
-      <li><code>no-referrer</code> : l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> ne sera pas envoyé.</li>
-      <li><code>no-referrer-when-downgrade</code> : aucun en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> n'est envoyé lorsqu'on navigue vers une origine sans <a href="/fr/docs/Glossary/https">HTTPS</a>. Cette valeur est le comportement par défaut de l'agent utilisateur si aucune valeur n'est fournie.</li>
-      <li><code>origin</code> : l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> contiendra le schéma, l'<a href="/fr/docs/Glossary/Host">hôte</a> et le <a href="/fr/docs/Glossary/Port">port</a> de la page d'origine.</li>
-      <li><code>origin-when-cross-origin</code> : lorsque la navigation se fait vers d'autres origines, les données du référent se limiteront au schéma, à l'hôte et au part. Si on navigue sur la même origine, le chemin complet de la ressource sera indiqué.</li>
-      <li><code>unsafe-url</code> : l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a> incluera l'origine et le chemin mais aucun fragment, mot de passe ou nom d'utilisateur. Ce cas de figure n'est pas sécurisé, car il peut laisser fuire des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.</li>
-    </ul>
-  </dd>
-  <dt><code>sizes</code></dt>
-  <dd>Une ou plusieurs chaînes de caractères séparées par des virgules, indiquant un ensemble de tailles sources. Chaque taille source est composée de :
-    <ol>
-      <li>D'une <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries#syntax">condition sur le média</a>. Qui doit être absente pour le dernier élément de la liste.</li>
-      <li>Une valeur de taille de la source.</li>
-    </ol>
-
-    <p>Les conditions de média décrivent les propriétés de la <em>fenêtre de visualisation</em> (ou « viewport »), et non de l'<em>image</em>. Par exemple, <code>(max-height : 500px) 1000px</code> propose d'utiliser une source de 1000px de largeur, si la <em>fenêtre de visualisation</em> n'est pas supérieure à 500px.</p>
-  
-    <p>Les valeurs de taille de la source spécifient la taille d'affichage prévue de l'image. <a href="/fr/docs/Glossary/User_agent">Les agents utilisateurs</a> utilisent la taille actuelle de la source pour sélectionner l'une des sources fournies par l'attribut <code>srcset</code>, lorsque ces sources sont décrites à l'aide de descripteurs de largeur (<code>w</code>). La taille de la source sélectionnée affecte la <a href="/fr/docs/Glossary/Intrinsic_size">taille intrinsèque</a> de l'image (la taille d'affichage de l'image si aucun style <a href="/fr/docs/Glossary/CSS">CSS</a> n'est appliqué). Si l'attribut <code>srcset</code> est absent, ou ne contient aucune valeur avec un descripteur de largeur, alors l'attribut <code>sizes</code> n'a aucun effet.</p>
-  </dd>
-  <dt><code>src</code></dt>
-  <dd>L'<a href="/fr/docs/Glossary/URL">URL</a> de l'image. Cet attribut est obligatoire pour l'élément <code>&lt;img&gt;</code>. Pour les <a href="/fr/docs/Glossary/Browser">navigateurs</a> qui prennent en charge <code>srcset</code>, <code>src</code> est considéré comme une image candidate dont la densité de pixel vaut <code>1x</code> si aucune autre image avec cette densité n'est définie via <code>srcset</code> ou si <code>srcset</code> contient des descripteurs « <code>w</code> ».</dd>
-  <dt><code>srcset</code>*</dt>
-  <dd>Une liste de une ou plusieurs chaînes de caractères, séparées par des virgules, qui indiquent un ensemble d'images sources parmi lequel l'agent utilisateur pourra choisir la meilleure image à afficher. Chaque chaîne de caractères se compose :
-  <ol>
-    <li>D'une <a href="/fr/docs/Glossary/URL">URL</a> vers une image,</li>
-    <li>Éventuellement d'un espace suivi :
-      <ul>
-        <li>D'un descripteur de largeur ou un entier positif directement suivi par « <code>w</code> ». Le descripteur de largeur est divisé par la taille de la condition de taille définie dans l'attribut <code>sizes</code> afin de calculer la densité de pixel réelle.</li>
-        <li>D'un descripteur de densité de pixel qui est un nombre décimal directement suivi par « <code>x</code> ».</li>
-      </ul>
-    </li>
-  </ol>
-
-  <p>Si aucun descripteur n'est utilisé, la source aura un descripteur par défaut qui vaut <code>1x</code>.</p>
-
-  <p>Au sein d'un même attribut <code>srcset</code>, on ne peut pas mélanger des descripteurs exprimés en densité de pixels et des descripteurs exprimés en largeur. Il est également invalide d'avoir deux sources pour lesquelles le descripteur est le même (par exemple, deux sources décrites par « <code>2x</code> »).</p>
-
-	<p>L'agent utilisateur sélectionne l'une des sources disponibles à sa discrétion. Il dispose ainsi d'une marge de manœuvre importante pour adapter sa sélection en fonction de choses comme les préférences de l'utilisateur ou les conditions de <a href="/fr/docs/Glossary/Bandwidth">bande passante</a>. Voir notre <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Tutoriel sur les images responsives</a> pour un exemple.</p>
-  </dd>
-  <dt><code>width</code></dt>
-  <dd>La largeur intrinsèque de l'image en pixels. Doit être un nombre entier sans unité.</dd>
-  <dt><code>usemap</code></dt>
-  <dd>Le fragment d'URL (commençant avec #) d'une <a href="/fr/docs/Web/HTML/Element/map">carte d'images</a> associée à cet élément.
-    <div class="note">
-      <p><strong>Note :</strong>Cet attribut ne peut pas être utilisé si l'élément <code>&lt;img&gt;</code> est un descendant d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> ou d'un élément <a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a>.</p>
-    </div>
-  </dd>
-</dl>
-
-<h3 id="deprecated_attributes">Attributs obsolètes</h3>
-
-<dl>
-  <dt><code>align</code> {{deprecated_inline}}</dt>
-  <dd><p>L'alignement de l'image selon le contexte qui l'entoure. En HTML5, on privilégiera les propriétés CSS <a href="/fr/docs/Web/CSS/float"><code>float</code></a> et/ou <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> voire la propriété <a href="/fr/docs/Web/CSS/object-position"><code>object-position</code></a> qui permet de positionner l'image au sein de la boîte de l'élément. Les valeurs autorisées sont :</p>
-    <dl>
-      <dt><code>top</code></dt>
-      <dd>Équivalent à <code>vertical-align: top;</code> ou à <code>vertical-align: text-top;</code></dd>
-      <dt><code>middle</code></dt>
-      <dd>Équivalent à <code>vertical-align: -moz-middle-with-baseline;</code></dd>
-      <dt><code>bottom</code></dt>
-      <dd>La valeur utilisée par défaut. Équivalent à <code>vertical-align: unset;</code> ou à <code>vertical-align: initial;</code></dd>
-      <dt><code>left</code></dt>
-      <dd>Équivalent à <code>float: left;</code></dd>
-      <dt><code>right</code></dt>
-      <dd>Équivalent à <code>float: right;</code></dd>
-    </dl>
-  </dd>
-  <dt><code>border</code> {{deprecated_inline}}</dt>
-  <dd>La largeur d'une bordure autour de l'image. Utilisez plutôt la propriété <a href="/fr/docs/Glossary/CSS">CSS</a> <a href="/fr/docs/Web/CSS/border"><code>border</code></a>.</dd>
-  <dt><code>hspace</code> {{deprecated_inline}}</dt>
-  <dd>Le nombre de pixels blancs à insérer à droite et à gauche de l'image. En HTML5, on privilégiera la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</dd>
-  <dt><code>longdesc</code> {{deprecated_inline}}</dt>
-  <dd><p>Un lien vers une description plus détaillée de l'image. Les valeurs possibles sont une URL ou un identifiant (<a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a>) d'un élément.</p>
-    <div class="note">
-      <p><strong>Note :</strong>Cet attribut est mentionné dans la dernière version du <a href="/fr/docs/Glossary/W3C">W3C</a>, <a href="https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc">HTML 5.2</a>, mais a été supprimé du <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">HTML Living Standard</a> du <a href="/fr/docs/Glossary/WHATWG">WHATWG</a>. Son avenir est incertain ; les auteurs devraient utiliser une alternative <a href="/fr/docs/Glossary/WAI">WAI</a>-<a href="/fr/docs/Glossary/ARIA">ARIA</a> telle que <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby"><code>aria-describedby</code></a> ou <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-details"><code>aria-details</code></a>.</p>
-    </div>
-  </dd>
-  <dt><code>name</code> {{deprecated_inline}}</dt>
-  <dd>Un nom pour l'élément. Utilisez plutôt l'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-id"><code>id</code></a>.</dd>
-  <dt><code>vspace</code> {{deprecated_inline}}</dt>
-  <dd>Le nombre de pixels blancs à insérer en dessous et au-dessus de l'image. En HTML5, on privilégiera la propriété CSS <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>.</dd>
-</dl>
-
-<h2 id="styling_with_css">Mettre en forme avec CSS</h2>
-
-<p><code>&lt;img&gt;</code> est un <a href="/fr/docs/Web/CSS/Replaced_element">élément remplacé</a> ; il a une valeur <a href="/fr/docs/Web/CSS/display"><code>display</code></a> de <code>inline</code> par défaut, mais ses dimensions par défaut sont définies par les valeurs intrinsèques de l'image intégrée, comme s'il s'agissait de <code>inline-block</code>. Vous pouvez définir des propriétés comme <a href="/fr/docs/Web/CSS/border"><code>border</code></a>/<a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>/<a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, <a href="/fr/docs/Web/CSS/width"><code>width</code></a>, <a href="/fr/docs/Web/CSS/height"><code>height</code></a>, etc. sur une image.</p>
-
-<p><code>&lt;img&gt;</code> n'a pas de ligne de base, donc lorsque les images sont utilisées dans un contexte de mise en forme en ligne avec <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a><code> : baseline</code>, le bas de l'image sera placé sur la ligne de base du texte.</p>
-
-<p>Vous pouvez utiliser la propriété <a href="/fr/docs/Web/CSS/object-position"><code>object-position</code></a> pour positionner l'image dans la boîte de l'élément, et la propriété <a href="/fr/docs/Web/CSS/object-fit"><code>object-fit</code></a> pour ajuster la taille de l'image dans la boîte (par exemple, si l'image doit s'adapter à la boîte ou la remplir même si un découpage est nécessaire).</p>
-
-<p>En fonction de son type, une image peut avoir une largeur et une hauteur intrinsèques. Pour certains types d'images, cependant, les dimensions intrinsèques sont inutiles. Les images <a href="/fr/docs/Glossary/SVG">SVG</a>, par exemple, n'ont pas de dimensions intrinsèques si leur élément <a href="/fr/docs/Web/SVG/Element/svg"><code>&lt;svg&gt;</code></a> n'a pas de <code>width</code> ou de <code>height</code> défini sur lui.</p>
-
-<h2 id="examples">Exemples</h2>
-
-<h3 id="Alternative_text">Texte alternatif</h3>
-
-<p>L'exemple suivant intègre une image dans la page et inclut un texte alternatif pour l'accessibilité.</p>
-
-<pre class="brush: html">&lt;img src="favicon144.png"
-  alt="MDN logo"&gt;</pre>
-
-<p>{{EmbedLiveSample('Alternative_text', '100%', '160')}}</p>
-
-<h3 id="image_link">Lien image</h3>
-
-<p>Cet exemple s'appuie sur le précédent, en montrant comment transformer l'image en lien. Pour ce faire, immergez la balise <code>&lt;img&gt;</code> à l'intérieur de l'élément <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>. Vous devez faire en sorte que le texte alternatif décrive la ressource vers laquelle le lien pointe, comme si vous utilisiez un lien texte à la place.</p>
-
-<pre class="brush: html">&lt;a href="https://developer.mozilla.org"&gt;
-  &lt;img src="favicon144.png" alt="Visitez le site du MDN"&gt;
-&lt;/a&gt;</pre>
-
-<p>{{EmbedLiveSample('image_link', '100%', '160')}}</p>
-
-<h3 id="using_the_srcset_attribute">Créer un lien avec une image</h3>
-
-<p>Dans cet exemple, nous incluons un attribut <code>srcset</code> avec une référence à une version haute résolution du logo ; celle-ci sera chargée à la place de l'image <code>src</code> sur les appareils haute résolution. L'image référencée dans l'attribut <code>src</code> est comptée comme un candidat <code>1x</code> dans <a href="/fr/docs/Glossary/User_agent">agent utilisateur</a> qui supporte <code>srcset</code>.</p>
-
-<pre class="brush: html">&lt;img src="favicon72.png"
+{{HTMLRef}}
+
+L'élément HTML **`<img>`** intègre une image dans le document.
+
+{{EmbedInteractiveExample("pages/tabbed/img.html", "tabbed-standard")}}
+
+Dans l'exemple qui précède, on utilise l'élément `<img>` simplement.
+
+- L'attribut `src` est obligatoire et contient le chemin de l'image qu'on souhaite afficher.
+- L'attribut `alt` contient une description textuelle de l'image, qui n'est pas obligatoire mais qui est **incroyablement utile** pour l'accessibilité — les lecteurs d'écran lisent cette description à leurs utilisateurs pour qu'ils sachent ce que signifie l'image. Le texte Alt est également affiché sur la page si l'image ne peut pas être chargée pour une raison quelconque : par exemple, erreurs de réseau, blocage du contenu ou linkrot.
+
+Il existe d'autres attributs qui peuvent être utilisés dans différents cas. Ces attributs sont détaillés ci-après. Entre autres, on pourra utiliser :
+
+- [Referrer](/fr/docs/Web/HTTP/Headers/Referrer-Policy)/[CORS](/fr/docs/Glossary/CORS) contrôle pour la sécurité et la confidentialité : voir [`crossorigin`](#attr-crossorigin) et [`referrerpolicy`](#attr-referrerpolicy).
+- [`width`](#attr-width) et [`height`](#attr-height) pour définir la taille intrinsèque de l'image, ce qui lui permet d'occuper de l'espace avant son chargement, afin d'atténuer les décalages de présentation du contenu.
+- Des indications d'images adaptatives avec [`sizes`](#attr-sizes) et [`srcset`](#attr-srcset). (voir aussi l'élément [`<picture>`](/fr/docs/Web/HTML/Element/picture) et notre [Tutoriel sur les images adaptatives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)).
+
+## Formats d'image pris en charge
+
+La norme HTML ne donne pas de liste des formats d'image qui doivent être pris en charge, de sorte que chaque [agent utilisateur](/fr/docs/Glossary/User_agent) prend en charge un ensemble différent de formats.
+
+{{page("/fr/docs/Web/Media/Formats/Types_des_images", "table-of-image-file-types")}}
+
+> **Note :** Voir le [Guide des types et formats de fichiers image](/fr/docs/Web/Media/Formats/Image_types) pour des informations plus complètes sur les formats d'image pris en charge par les navigateurs web. Cela inclut les formats d'image pris en charge mais non recommandés pour le contenu web (par exemple, ICO, BMP, etc.).
+
+## Erreurs de chargement des images
+
+Si une erreur se produit lors du chargement ou de l'affichage de l'image et qu'un gestionnaire d'événement [`onerror`](/fr/docs/Web/HTML/Global_attributes#attr-onerror) a été paramétré afin d'écouter l'événement [error](/fr/docs/Web/Reference/Events/error), le gestionnaire d'événement sera invoqué. Cela peut se produire lorsque :
+
+- L'attribut [`src`](#attr-src) est vide (`""`) ou vaut `null`.
+- L'[URL](/fr/docs/Glossary/URL) indiquée dans l'attribut `src` est la même URL que celle de la page sur laquelle se trouve l'utilisateur.
+- L'image indiquée est corrompue et ne peut pas être chargée.
+- Les métadonnées de l'image sont corrompues et il est impossible de récupérer ses dimensions et aucune dimension n'est indiquée dans les attributs de l'élément `<img>`.
+- Le format de l'image n'est pas pris en charge par l'agent utilisateur.
+
+## Attributs
+
+Cet élément inclut les [attributs globaux](/fr/docs/Web/HTML/Global_attributes).
+
+- `alt`
+
+  - : Cet attribut définit le texte alternatif utilisé lorsqu'il est impossible d'afficher l'image (par exemple si l'URL est incorrecte ou si l'image n'est pas encore téléchargée).
+
+    > **Note :**
+    >
+    > Les navigateurs n'affichent pas toujours les images. Il existe un certain nombre de situations dans lesquelles un navigateur peut ne pas afficher les images, par exemple :
+    >
+    > - Navigateurs non visuels (tels que ceux utilisés par les personnes souffrant de déficiences visuelles)
+    > - L'utilisateur choisit de ne pas afficher les images (économie de bande passante, raisons de confidentialité).
+    > - L'image n'est pas valide ou le [type n'est pas pris en charge](#supported_image_formats).
+    >
+    > Dans ces cas, le navigateur peut remplacer l'image par le texte de l'attribut `alt` de l'élément. Pour ces raisons et d'autres, fournissez une valeur utile pour `alt` dans la mesure du possible.
+
+    Omettre complètement `alt` indique que l'image est un élément clé du contenu et qu'aucun équivalent textuel n'est disponible. Définir cet attribut sur une chaîne vide (`alt=""`) indique que cette image n'est _pas_ un élément clé du contenu (il s'agit d'une décoration ou d'un pixel de suivi), et que les navigateurs non visuels peuvent l'omettre au [rendu](/fr/docs/Glossary/Rendering_engine). Les navigateurs visuels masqueront également l'icône d'image brisée si le `alt` est vide et que l'image n'a pas réussi à s'afficher.
+
+    Cet attribut est également utilisé pour copier et coller l'image dans du texte, ou pour enregistrer une image liée dans un signet.
+
+- `crossorigin`
+
+  - : Indique si la récupération de l'image doit être effectuée à l'aide d'une requête [CORS](/fr/docs/Glossary/CORS). Les données d'image d'une [image compatible avec le système CORS](/fr/docs/Web/HTML/CORS_enabled_image) renvoyées par une requête CORS peuvent être réutilisées dans l'élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) sans être marquées « [corrompu](/fr/docs/Web/HTML/CORS_enabled_image#what_is_a_tainted_canvas) ».
+
+    Si l'attribut `crossorigin` _n'est pas_ spécifié, une requête non-CORS est envoyée (sans l'en-tête de requête [`Origin`](/fr/docs/Web/HTTP/Headers/Origin)), et le navigateur marque l'image comme étant corrompue et restreint l'accès à ses données d'image, empêchant son utilisation dans les éléments [`<canvas>`](/fr/docs/Web/HTML/Element/canvas).
+
+    Si l'attribut `crossorigin` _est_ spécifié, alors une requête CORS est envoyée (avec l'en-tête de requête [`Origin`](/fr/docs/Web/HTTP/Headers/Origin)) ; mais si le serveur n'autorise pas l'accès croisé aux données de l'image par le site d'origine (en n'envoyant pas d'en-tête de réponse [`Access-Control-Allow-Origin`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) ou en n'incluant pas l'origine du site dans l'en-tête de réponse [`Access-Control-Allow-Origin`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) qu'il envoie), le navigateur bloque le chargement de l'image et enregistre une erreur CORS dans la console devtools.
+
+    Valeurs autorisées :
+
+    - `anonymous`
+      - : Une requête entre deux origines est effectuée (avec l'en-tête [`Origin`](/fr/docs/Web/HTTP/Headers/Origin)) mais aucune information d'authentification n'est transmise (aucun cookie, aucun certificat X.5090, aucune authentification simple par HTTP). Si le serveur ne fournit pas d'informations d'authentification pour le site d'origine (en n'utilisant pas l'en-tête HTTP [`Access-Control-Allow-Origin`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)), l'image sera corrompue et son utilisation sera restreinte.
+    - `use-credentials`
+      - : Une requête entre deux origines est effectuée (avec l'en-tête [`Origin`](/fr/docs/Web/HTTP/Headers/Origin)) avec des informations d'authentification qui sont envoyées (par exemple un cookie, un certificat et une authentification HTTP). Si le serveur ne fournit pas d'informations d'authentification au site d'origine (via l'en-tête HTTP [`Access-Control-Allow-Origin`](/fr/docs/Web/HTTP/Headers/Access-Control-Allow-Origin)), l'image sera corrompue et son utilisation sera restreinte.
+
+    Lorsque cet attribut est absent, la ressource est récupérée sans requête _CORS_ (c'est-à-dire sans envoyer l'en-tête HTTP [`origin`](/fr/docs/Web/HTTP/Headers/Origin)) ce qui empêche de l'utiliser dans un [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) sans qu'elle soit considérée comme corrompue. Si la valeur de l'attribut est invalide, elle sera considérée comme **`anonymous`**. Voir la page [réglage des attributs CORS](/fr/docs/Web/HTML/Attributes/crossorigin) pour plus d'informations.
+
+- `decoding`
+
+  - : Cet attribut fournit une indication à l'agent utilisateur pour le décodage de l'information. Les valeurs possibles sont :
+
+    - `sync`
+      - : L'image est décodée de façon synchrone afin d'être présentée de façon atomique avec le reste du contenu.
+    - `async`
+      - : L'image est décodée de façon asynchrone afin de réduire le temps nécessaire à la présentation du reste du contenu.
+    - `auto`
+      - : Le mode par défaut qui indique l'absence de préférence pour le mode de décodage. Dans ce cas, l'agent utilisateur décide de la meilleure stratégie.
+
+- `height`
+  - : La hauteur intrinsèque de l'image, en pixels. Doit être un nombre entier sans unité.
+- `intrinsicsize` {{deprecated_inline}}
+  - : Cet attribut indique au navigateur d'ignorer la taille intrinsèque réelle de l'image et d'utiliser la taille fournie par les attributs. La matrice contenant l'image aurait donc ces dimensions et calculer `naturalWidth`/`naturalHeight` sur de telles images renverrait les valeurs de cet attribut. [Explications](https://github.com/ojanvafai/intrinsicsize-attribute), [exemples](https://googlechrome.github.io/samples/intrinsic-size/index.html).
+- `ismap`
+
+  - : Un attribut booléen dont la valeur indique si l'image fait partie d'une carte cliquable. Si c'est le cas, les coordonnées du clic seront envoyées au serveur.
+
+    > **Note :**Cet attribut est uniquement autorisé si l'élément `<img>` descend d'un élément [`<a>`](/fr/docs/Web/HTML/Element/a) dont l'attribut [`href`](/fr/docs/Web/HTML/Element/a#attr-href) est valide.
+
+- `loading` {{experimental_inline}}
+
+  - : Indique comment le navigateur doit charger l'image :
+
+    - `eager` : Charge l'image immédiatement, que l'image se trouve ou non dans le viewport visible (c'est la valeur par défaut).
+    - `lazy` : Diffère le chargement de l'image au moment où elle atteint une certaine distance de la fenêtre de visualisation, telle que définie par le navigateur. Le but est d'éviter que le réseau et la zone de stockage nécessaires à la manipulation de l'image ne soient utilisés tant qu'il n'est pas relativement sûr que celle-ci sera nécessaire. Cela permet généralement d'améliorer les performances du contenu dans la plupart des cas d'utilisation typiques.
+
+      > **Note :**Le chargement n'est différé que lorsque JavaScript est activé. Il s'agit d'une mesure anti-pistage, car si un agent utilisateur prenait en charge le chargement différé lorsque les scripts sont désactivés, il serait toujours possible pour un site de suivre la position de défilement approximative d'un utilisateur tout au long d'une session, en plaçant stratégiquement des images dans le balisage d'une page de sorte qu'un serveur puisse suivre le nombre d'images demandées et le moment où elles le sont.
+
+- `referrerpolicy` {{experimental_inline}}
+
+  - : Une chaîne de caractères indiquant le référent à utiliser lors de la récupération de la ressource :
+
+    - `no-referrer` : l'en-tête HTTP [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) ne sera pas envoyé.
+    - `no-referrer-when-downgrade` : aucun en-tête HTTP [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) n'est envoyé lorsqu'on navigue vers une origine sans [HTTPS](/fr/docs/Glossary/https). Cette valeur est le comportement par défaut de l'agent utilisateur si aucune valeur n'est fournie.
+    - `origin` : l'en-tête HTTP [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) contiendra le schéma, l'[hôte](/fr/docs/Glossary/Host) et le [port](/fr/docs/Glossary/Port) de la page d'origine.
+    - `origin-when-cross-origin` : lorsque la navigation se fait vers d'autres origines, les données du référent se limiteront au schéma, à l'hôte et au part. Si on navigue sur la même origine, le chemin complet de la ressource sera indiqué.
+    - `unsafe-url` : l'en-tête HTTP [`Referer`](/fr/docs/Web/HTTP/Headers/Referer) incluera l'origine et le chemin mais aucun fragment, mot de passe ou nom d'utilisateur. Ce cas de figure n'est pas sécurisé, car il peut laisser fuire des origines et des chemins de ressources protégées par TLS vers des origines non-sécurisées.
+
+- `sizes`
+
+  - : Une ou plusieurs chaînes de caractères séparées par des virgules, indiquant un ensemble de tailles sources. Chaque taille source est composée de :
+
+    1.  D'une [condition sur le média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#syntax). Qui doit être absente pour le dernier élément de la liste.
+    2.  Une valeur de taille de la source.
+
+    Les conditions de média décrivent les propriétés de la _fenêtre de visualisation_ (ou « viewport »), et non de l'_image_. Par exemple, `(max-height : 500px) 1000px` propose d'utiliser une source de 1000px de largeur, si la _fenêtre de visualisation_ n'est pas supérieure à 500px.
+
+    Les valeurs de taille de la source spécifient la taille d'affichage prévue de l'image. [Les agents utilisateurs](/fr/docs/Glossary/User_agent) utilisent la taille actuelle de la source pour sélectionner l'une des sources fournies par l'attribut `srcset`, lorsque ces sources sont décrites à l'aide de descripteurs de largeur (`w`). La taille de la source sélectionnée affecte la [taille intrinsèque](/fr/docs/Glossary/Intrinsic_size) de l'image (la taille d'affichage de l'image si aucun style [CSS](/fr/docs/Glossary/CSS) n'est appliqué). Si l'attribut `srcset` est absent, ou ne contient aucune valeur avec un descripteur de largeur, alors l'attribut `sizes` n'a aucun effet.
+
+- `src`
+  - : L'[URL](/fr/docs/Glossary/URL) de l'image. Cet attribut est obligatoire pour l'élément `<img>`. Pour les [navigateurs](/fr/docs/Glossary/Browser) qui prennent en charge `srcset`, `src` est considéré comme une image candidate dont la densité de pixel vaut `1x` si aucune autre image avec cette densité n'est définie via `srcset` ou si `srcset` contient des descripteurs « `w` ».
+- `srcset`\*
+
+  - : Une liste de une ou plusieurs chaînes de caractères, séparées par des virgules, qui indiquent un ensemble d'images sources parmi lequel l'agent utilisateur pourra choisir la meilleure image à afficher. Chaque chaîne de caractères se compose :
+
+    1.  D'une [URL](/fr/docs/Glossary/URL) vers une image,
+    2.  Éventuellement d'un espace suivi :
+
+        - D'un descripteur de largeur ou un entier positif directement suivi par « `w` ». Le descripteur de largeur est divisé par la taille de la condition de taille définie dans l'attribut `sizes` afin de calculer la densité de pixel réelle.
+        - D'un descripteur de densité de pixel qui est un nombre décimal directement suivi par « `x` ».
+
+    Si aucun descripteur n'est utilisé, la source aura un descripteur par défaut qui vaut `1x`.
+
+    Au sein d'un même attribut `srcset`, on ne peut pas mélanger des descripteurs exprimés en densité de pixels et des descripteurs exprimés en largeur. Il est également invalide d'avoir deux sources pour lesquelles le descripteur est le même (par exemple, deux sources décrites par « `2x` »).
+
+    L'agent utilisateur sélectionne l'une des sources disponibles à sa discrétion. Il dispose ainsi d'une marge de manœuvre importante pour adapter sa sélection en fonction de choses comme les préférences de l'utilisateur ou les conditions de [bande passante](/fr/docs/Glossary/Bandwidth). Voir notre [Tutoriel sur les images responsives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) pour un exemple.
+
+- `width`
+  - : La largeur intrinsèque de l'image en pixels. Doit être un nombre entier sans unité.
+- `usemap`
+
+  - : Le fragment d'URL (commençant avec #) d'une [carte d'images](/fr/docs/Web/HTML/Element/map) associée à cet élément.
+
+    > **Note :**Cet attribut ne peut pas être utilisé si l'élément `<img>` est un descendant d'un élément [`<a>`](/fr/docs/Web/HTML/Element/a) ou d'un élément [`<button>`](/fr/docs/Web/HTML/Element/Button).
+
+### Attributs obsolètes
+
+- `align` {{deprecated_inline}}
+
+  - : L'alignement de l'image selon le contexte qui l'entoure. En HTML5, on privilégiera les propriétés CSS [`float`](/fr/docs/Web/CSS/float) et/ou [`vertical-align`](/fr/docs/Web/CSS/vertical-align) voire la propriété [`object-position`](/fr/docs/Web/CSS/object-position) qui permet de positionner l'image au sein de la boîte de l'élément. Les valeurs autorisées sont :
+
+    - `top`
+      - : Équivalent à `vertical-align: top;` ou à `vertical-align: text-top;`
+    - `middle`
+      - : Équivalent à `vertical-align: -moz-middle-with-baseline;`
+    - `bottom`
+      - : La valeur utilisée par défaut. Équivalent à `vertical-align: unset;` ou à `vertical-align: initial;`
+    - `left`
+      - : Équivalent à `float: left;`
+    - `right`
+      - : Équivalent à `float: right;`
+
+- `border` {{deprecated_inline}}
+  - : La largeur d'une bordure autour de l'image. Utilisez plutôt la propriété [CSS](/fr/docs/Glossary/CSS) [`border`](/fr/docs/Web/CSS/border).
+- `hspace` {{deprecated_inline}}
+  - : Le nombre de pixels blancs à insérer à droite et à gauche de l'image. En HTML5, on privilégiera la propriété CSS [`margin`](/fr/docs/Web/CSS/margin).
+- `longdesc` {{deprecated_inline}}
+
+  - : Un lien vers une description plus détaillée de l'image. Les valeurs possibles sont une URL ou un identifiant ([`id`](/fr/docs/Web/HTML/Global_attributes#attr-id)) d'un élément.
+
+    > **Note :**Cet attribut est mentionné dans la dernière version du [W3C](/fr/docs/Glossary/W3C), [HTML 5.2](https://www.w3.org/TR/html52/obsolete.html#element-attrdef-img-longdesc), mais a été supprimé du [HTML Living Standard](https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element) du [WHATWG](/fr/docs/Glossary/WHATWG). Son avenir est incertain ; les auteurs devraient utiliser une alternative [WAI](/fr/docs/Glossary/WAI)-[ARIA](/fr/docs/Glossary/ARIA) telle que [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby) ou [`aria-details`](https://www.w3.org/TR/wai-aria-1.1/#aria-details).
+
+- `name` {{deprecated_inline}}
+  - : Un nom pour l'élément. Utilisez plutôt l'attribut [`id`](/fr/docs/Web/HTML/Global_attributes#attr-id).
+- `vspace` {{deprecated_inline}}
+  - : Le nombre de pixels blancs à insérer en dessous et au-dessus de l'image. En HTML5, on privilégiera la propriété CSS [`margin`](/fr/docs/Web/CSS/margin).
+
+## Mettre en forme avec CSS
+
+`<img>` est un [élément remplacé](/fr/docs/Web/CSS/Replaced_element) ; il a une valeur [`display`](/fr/docs/Web/CSS/display) de `inline` par défaut, mais ses dimensions par défaut sont définies par les valeurs intrinsèques de l'image intégrée, comme s'il s'agissait de `inline-block`. Vous pouvez définir des propriétés comme [`border`](/fr/docs/Web/CSS/border)/[`border-radius`](/fr/docs/Web/CSS/border-radius), [`padding`](/fr/docs/Web/CSS/padding)/[`margin`](/fr/docs/Web/CSS/margin), [`width`](/fr/docs/Web/CSS/width), [`height`](/fr/docs/Web/CSS/height), etc. sur une image.
+
+`<img>` n'a pas de ligne de base, donc lorsque les images sont utilisées dans un contexte de mise en forme en ligne avec [`vertical-align`](/fr/docs/Web/CSS/vertical-align)` : baseline`, le bas de l'image sera placé sur la ligne de base du texte.
+
+Vous pouvez utiliser la propriété [`object-position`](/fr/docs/Web/CSS/object-position) pour positionner l'image dans la boîte de l'élément, et la propriété [`object-fit`](/fr/docs/Web/CSS/object-fit) pour ajuster la taille de l'image dans la boîte (par exemple, si l'image doit s'adapter à la boîte ou la remplir même si un découpage est nécessaire).
+
+En fonction de son type, une image peut avoir une largeur et une hauteur intrinsèques. Pour certains types d'images, cependant, les dimensions intrinsèques sont inutiles. Les images [SVG](/fr/docs/Glossary/SVG), par exemple, n'ont pas de dimensions intrinsèques si leur élément [`<svg>`](/fr/docs/Web/SVG/Element/svg) n'a pas de `width` ou de `height` défini sur lui.
+
+## Exemples
+
+### Texte alternatif
+
+L'exemple suivant intègre une image dans la page et inclut un texte alternatif pour l'accessibilité.
+
+```html
+<img src="favicon144.png"
+  alt="MDN logo">
+```
+
+{{EmbedLiveSample('Alternative_text', '100%', '160')}}
+
+### Lien image
+
+Cet exemple s'appuie sur le précédent, en montrant comment transformer l'image en lien. Pour ce faire, immergez la balise `<img>` à l'intérieur de l'élément [`<a>`](/fr/docs/Web/HTML/Element/a). Vous devez faire en sorte que le texte alternatif décrive la ressource vers laquelle le lien pointe, comme si vous utilisiez un lien texte à la place.
+
+```html
+<a href="https://developer.mozilla.org">
+  <img src="favicon144.png" alt="Visitez le site du MDN">
+</a>
+```
+
+{{EmbedLiveSample('image_link', '100%', '160')}}
+
+### Créer un lien avec une image
+
+Dans cet exemple, nous incluons un attribut `srcset` avec une référence à une version haute résolution du logo ; celle-ci sera chargée à la place de l'image `src` sur les appareils haute résolution. L'image référencée dans l'attribut `src` est comptée comme un candidat `1x` dans [agent utilisateur](/fr/docs/Glossary/User_agent) qui supporte `srcset`.
+
+```html
+<img src="favicon72.png"
   alt="Logo MDN"
-  srcset="favicon144.png 2x"&gt;</pre>
+  srcset="favicon144.png 2x">
+```
 
-<p>{{EmbedLiveSample('using_the_srcset_attribute', '100%', '160')}}</p>
+{{EmbedLiveSample('using_the_srcset_attribute', '100%', '160')}}
 
-<h3 id="using_the_srcset_and_sizes_attributes">Utiliser les attributs <code>srcset</code> et <code>sizes</code></h3>
+### Utiliser les attributs `srcset` et `sizes`
 
-<p>L'attribut <code>src</code> est ignoré lorsque l'agent utilisateur prend en charge <code>srcset</code> et que ce dernier contient des descripteurs avec '<code>w</code>'. Dans cet exemple, lorsque la condition <code>(min-width: 600px)</code> est vérifiée pour le média utilisé, la largeur de l'image sera 200px, sinon, elle occupera <code>50vw</code> (ce qui correspond à 50% de la largeur de la zone d'affichage (<em>viewport</em>)).</p>
+L'attribut `src` est ignoré lorsque l'agent utilisateur prend en charge `srcset` et que ce dernier contient des descripteurs avec '`w`'. Dans cet exemple, lorsque la condition `(min-width: 600px)` est vérifiée pour le média utilisé, la largeur de l'image sera 200px, sinon, elle occupera `50vw` (ce qui correspond à 50% de la largeur de la zone d'affichage (_viewport_)).
 
-<pre class="brush: html">&lt;img src="clock-demo-200px.png"
+```html
+<img src="clock-demo-200px.png"
   alt="Clock"
   srcset="clock-demo-200px.png 200w,
           clock-demo-400px.png 400w"
-  sizes="(min-width: 600px) 200px, 50vw"&gt;</pre>
+  sizes="(min-width: 600px) 200px, 50vw">
+```
 
-<p>{{EmbedLiveSample("using_the_srcset_and_sizes_attributes", "100%", 450)}}</p>
+{{EmbedLiveSample("using_the_srcset_and_sizes_attributes", "100%", 450)}}
 
-<div class="note">
-  <p><strong>Note :</strong>Pour observer l'effet du redimensionnement, vous devrez consulter <a href="/fr/docs/Web/HTML/Element/img/Using_the_srcset_and_sizes_attributes">l'exemple sur une page séparée</a> afin de pouvoir modifier la taille de la zone.</p>
-</div>
+> **Note :**Pour observer l'effet du redimensionnement, vous devrez consulter [l'exemple sur une page séparée](/fr/docs/Web/HTML/Element/img/Using_the_srcset_and_sizes_attributes) afin de pouvoir modifier la taille de la zone.
 
-<h2 id="security_and_privacy_concerns">Sécurité et vie privée</h2>
+## Sécurité et vie privée
 
-<p>Bien que les éléments <code>&lt;img&gt;</code> soient la plupart du temps utilisés respectueusement, ils peuvent permettre de récupérer des informations précises, parfois utilisées pour pister les utilisateurs. Voir la page <a href="/fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns">sur l'en-tête referer</a> pour plus d'informations et des façons de résoudre ces problèmes.</p>
+Bien que les éléments `<img>` soient la plupart du temps utilisés respectueusement, ils peuvent permettre de récupérer des informations précises, parfois utilisées pour pister les utilisateurs. Voir la page [sur l'en-tête referer](/fr/docs/Web/Security/Referer_header:_privacy_and_security_concerns) pour plus d'informations et des façons de résoudre ces problèmes.
 
-<h2 id="accessibility_concerns">Problèmes d'accessibilité</h2>
+## Problèmes d'accessibilité
 
-<h3 id="authoring_meaningful_alternate_descriptions">Création de descriptions alternatives significatives</h3>
+### Création de descriptions alternatives significatives
 
-<p>L'attribut <code>alt</code> doit décrire le contenu de l'image de façon claire et concise. L'attribut ne doit pas décrire la présence même de l'image ou le nom du fichier. Si l'attribut <code>alt</code> n'est pas utilisé, car l'image ne possède pas d'équivalent textuel, il faudra utiliser d'autres méthodes alternatives pour présenter le contenu que l'image doit véhiculer.</p>
+L'attribut `alt` doit décrire le contenu de l'image de façon claire et concise. L'attribut ne doit pas décrire la présence même de l'image ou le nom du fichier. Si l'attribut `alt` n'est pas utilisé, car l'image ne possède pas d'équivalent textuel, il faudra utiliser d'autres méthodes alternatives pour présenter le contenu que l'image doit véhiculer.
 
-<h4 id="dont">Ce qu'il ne faut pas faire</h4>
+#### Ce qu'il ne faut pas faire
 
-<pre class="brush: html example-bad">&lt;img alt="image" src="manchot.jpg"&gt;</pre>
+```html example-bad
+<img alt="image" src="manchot.jpg">
+```
 
-<h4 id="do">Ce qu'il faut faire</h4>
+#### Ce qu'il faut faire
 
-<pre class="brush: html example-good">&lt;img alt="Un manchot Rockhopper se tenant sur une plage." src="manchot.jpg"&gt;</pre>
+```html example-good
+<img alt="Un manchot Rockhopper se tenant sur une plage." src="manchot.jpg">
+```
 
-<p>Lorsque l'attribut <code>alt</code> n'est pas présent, certains lecteurs d'écran peuvent énoncer le nom du fichier. Cela peut être source de confusion, car le nom du fichier n'est pas représentatif du contenu de l'image.</p>
+Lorsque l'attribut `alt` n'est pas présent, certains lecteurs d'écran peuvent énoncer le nom du fichier. Cela peut être source de confusion, car le nom du fichier n'est pas représentatif du contenu de l'image.
 
-<ul>
-  <li><em><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></em><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/"> (en anglais)</a></li>
-  <li><em><a href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide — Axess Lab</a></em><a href="https://axesslab.com/alt-texts/"> (en anglais)</a></li>
-  <li><em><a href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction - Deque</a></em><a href="https://www.deque.com/blog/great-alt-text-introduction/"> (en anglais)</a></li>
-  <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li>
-  <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html"><em>Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
+- _[An alt Decision Tree • Images • WAI Web Accessibility Tutorials](https://www.w3.org/WAI/tutorials/images/decision-tree/)_[ (en anglais)](https://www.w3.org/WAI/tutorials/images/decision-tree/)
+- _[Alt-texts: The Ultimate Guide — Axess Lab](https://axesslab.com/alt-texts/)_[ (en anglais)](https://axesslab.com/alt-texts/)
+- _[How to Design Great Alt Text: An Introduction - Deque](https://www.deque.com/blog/great-alt-text-introduction/)_[ (en anglais)](https://www.deque.com/blog/great-alt-text-introduction/)
+- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_—_providing_text_alternatives_for_non-text_content)
+- [_Understanding Success Criterion 1.1.1 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html)
 
-<h3 id="the_title_attribute">L'attribut <code>title</code></h3>
+### L'attribut `title`
 
-<p>L'attribut <a href="/fr/docs/Web/HTML/Global_attributes#attr-title"><code>title</code></a> n'a pas vocation à remplacer l'attribut <code>alt</code>. De plus, on évitera d'utiliser la même valeur pour <code>alt</code> et <code>title</code>, car certains lecteurs d'écran répèteraient deux fois la description, entraînant une certaine confusion.</p>
+L'attribut [`title`](/fr/docs/Web/HTML/Global_attributes#attr-title) n'a pas vocation à remplacer l'attribut `alt`. De plus, on évitera d'utiliser la même valeur pour `alt` et `title`, car certains lecteurs d'écran répèteraient deux fois la description, entraînant une certaine confusion.
 
-<p>L'attribut <code>title</code> ne doit pas non plus être utilisé comme une source d'information complémentaire à la description fournie par <code>alt</code>. Si l'image nécessite une légende, on utilisera plutôt les éléments <a href="/fr/docs/Web/HTML/Element/figure"><code>&lt;figure&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/figcaption"><code>&lt;figcaption&gt;</code></a>.</p>
+L'attribut `title` ne doit pas non plus être utilisé comme une source d'information complémentaire à la description fournie par `alt`. Si l'image nécessite une légende, on utilisera plutôt les éléments [`<figure>`](/fr/docs/Web/HTML/Element/figure) et [`<figcaption>`](/fr/docs/Web/HTML/Element/figcaption).
 
-<p>La valeur de l'attribut <code>title</code> est généralement présentée sous la forme d'une bulle d'information lorsqu'on immobilise le curseur au-dessus de l'image. Bien que cette méthode puisse être utilisée pour fournir des informations supplémentaires, on ne doit pas partir du principe que ce contenu sera nécessairement vu. Si les informations présentées par <code>title</code> sont importantes, il faudra les présenter d'une autre façon (cf. ci-avant) pour que les utilisateurs puissent réellement en bénéficier.</p>
+La valeur de l'attribut `title` est généralement présentée sous la forme d'une bulle d'information lorsqu'on immobilise le curseur au-dessus de l'image. Bien que cette méthode puisse être utilisée pour fournir des informations supplémentaires, on ne doit pas partir du principe que ce contenu sera nécessairement vu. Si les informations présentées par `title` sont importantes, il faudra les présenter d'une autre façon (cf. ci-avant) pour que les utilisateurs puissent réellement en bénéficier.
 
-<ul>
-  <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/"><em>Utiliser l'attribut HTML <code>title</code> - The Paciello Group</em> (en anglais)</a></li>
-</ul>
+- [_Utiliser l'attribut HTML `title` - The Paciello Group_ (en anglais)](https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/)
 
-<h2 id="technical_summary">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
   <tbody>
     <tr>
-      <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content">contenu intégré</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a>. Si l'élément possède un attribut <a href="#attr-usemap"><code>usemap</code></a>, c'est également un <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content">contenu interactif</a>.</td>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#phrasing_content"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#embedded_content"
+          >contenu intégré</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >. Si l'élément possède un attribut
+        <a href="#attr-usemap"><code>usemap</code></a
+        >, c'est également un
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#interactive_content"
+          >contenu interactif</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td>Aucun, cet élément est un <a href="/fr/docs/Glossary/Empty_element">élément vide</a>.</td>
+      <td>
+        Aucun, cet élément est un
+        <a href="/fr/docs/Glossary/Empty_element">élément vide</a>.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balise</th>
-      <td>Cet élément doit avoir une balise de début et ne doit pas avoir de balise de fin.</td>
+      <td>
+        Cet élément doit avoir une balise de début et ne doit pas avoir de
+        balise de fin.
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
@@ -344,8 +360,21 @@ browser-compat: html.elements.img
       <th scope="row">Rôle ARIA implicite</th>
       <td>
         <ul>
-          <li>avec un attribut <code>alt</code> non vide ou sans attribut <code>alt</code> : <code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></code></li>
-          <li>avec un attribut <code>alt</code> vide : <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">pas de rôle correspondant</a></li>
+          <li>
+            avec un attribut <code>alt</code> non vide ou sans attribut
+            <code>alt</code> :
+            <code
+              ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Role_Img"
+                >img</a
+              ></code
+            >
+          </li>
+          <li>
+            avec un attribut <code>alt</code> vide :
+            <a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role"
+              >pas de rôle correspondant</a
+            >
+          </li>
         </ul>
       </td>
     </tr>
@@ -353,50 +382,103 @@ browser-compat: html.elements.img
       <th scope="row">Rôles ARIA autorisés</th>
       <td>
         <ul>
-          <li>avec un attribut <code>alt</code> non vide :
+          <li>
+            avec un attribut <code>alt</code> non vide :
             <ul>
-              <li><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/button_role">button</a></code></li>
-              <li><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/checkbox_role">checkbox</a></code></li>
+              <li>
+                <code
+                  ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/button_role"
+                    >button</a
+                  ></code
+                >
+              </li>
+              <li>
+                <code
+                  ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/checkbox_role"
+                    >checkbox</a
+                  ></code
+                >
+              </li>
               <li><a href="https://w3c.github.io/aria/#link">link</a></li>
-              <li><a href="https://w3c.github.io/aria/#menuitem">menuitem</a></li>
-              <li><a href="https://w3c.github.io/aria/#menuitemcheckbox">menuitemcheckbox</a></li>
-              <li><a href="https://w3c.github.io/aria/#menuitemradio">menuitemradio</a></li>
+              <li>
+                <a href="https://w3c.github.io/aria/#menuitem">menuitem</a>
+              </li>
+              <li>
+                <a href="https://w3c.github.io/aria/#menuitemcheckbox"
+                  >menuitemcheckbox</a
+                >
+              </li>
+              <li>
+                <a href="https://w3c.github.io/aria/#menuitemradio"
+                  >menuitemradio</a
+                >
+              </li>
               <li><a href="https://w3c.github.io/aria/#option">option</a></li>
-              <li><a href="https://w3c.github.io/aria/#progressbar">progressbar</a></li>
-              <li><a href="https://w3c.github.io/aria/#scrollbar">scrollbar</a></li>
-              <li><a href="https://w3c.github.io/aria/#separator">separator</a></li>
+              <li>
+                <a href="https://w3c.github.io/aria/#progressbar"
+                  >progressbar</a
+                >
+              </li>
+              <li>
+                <a href="https://w3c.github.io/aria/#scrollbar">scrollbar</a>
+              </li>
+              <li>
+                <a href="https://w3c.github.io/aria/#separator">separator</a>
+              </li>
               <li><a href="https://w3c.github.io/aria/#slider">slider</a></li>
-              <li><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Switch_role">switch</a></code></li>
-              <li><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></code></li>
-              <li><a href="https://w3c.github.io/aria/#treeitem">treeitem</a></li>
+              <li>
+                <code
+                  ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Switch_role"
+                    >switch</a
+                  ></code
+                >
+              </li>
+              <li>
+                <code
+                  ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Tab_Role"
+                    >tab</a
+                  ></code
+                >
+              </li>
+              <li>
+                <a href="https://w3c.github.io/aria/#treeitem">treeitem</a>
+              </li>
             </ul>
           </li>
-          <li>avec un attribut <code>alt</code> vide, <a href="https://w3c.github.io/aria/#none">none</a> ou <a href="https://w3c.github.io/aria/#presentation">presentation</a></li>
-          <li>sans attribut <code>alt</code>, aucun <code>role</code> autorisé</li>
+          <li>
+            avec un attribut <code>alt</code> vide,
+            <a href="https://w3c.github.io/aria/#none">none</a> ou
+            <a href="https://w3c.github.io/aria/#presentation">presentation</a>
+          </li>
+          <li>
+            sans attribut <code>alt</code>, aucun <code>role</code> autorisé
+          </li>
         </ul>
       </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLImageElement"><code>HTMLImageElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLImageElement"
+          ><code>HTMLImageElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-  <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images en HTML</a></li>
-  <li><a href="/fr/docs/Web/Media/Formats/Image_types">Guide des types et formats de fichiers image</a></li>
-  <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Images responsives</a></li>
-  <li>Les éléments <a href="/fr/docs/Web/HTML/Element/picture"><code>&lt;picture&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/embed"><code>&lt;embed&gt;</code></a></li>
-  <li>Autres propriétés CSS relatives aux images : <a href="/fr/docs/Web/CSS/object-fit"><code>object-fit</code></a>, <a href="/fr/docs/Web/CSS/object-position"><code>object-position</code></a>, <a href="/fr/docs/Web/CSS/image-orientation"><code>image-orientation</code></a>, <a href="/fr/docs/Web/CSS/Image-rendering"><code>image-rendering</code></a> et <a href="/fr/docs/Web/CSS/image-resolution"><code>image-resolution</code></a>.</li>
-</ul>
+- [Images en HTML](/fr/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)
+- [Guide des types et formats de fichiers image](/fr/docs/Web/Media/Formats/Image_types)
+- [Images responsives](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+- Les éléments [`<picture>`](/fr/docs/Web/HTML/Element/picture), [`<object>`](/fr/docs/Web/HTML/Element/object) et [`<embed>`](/fr/docs/Web/HTML/Element/embed)
+- Autres propriétés CSS relatives aux images : [`object-fit`](/fr/docs/Web/CSS/object-fit), [`object-position`](/fr/docs/Web/CSS/object-position), [`image-orientation`](/fr/docs/Web/CSS/image-orientation), [`image-rendering`](/fr/docs/Web/CSS/Image-rendering) et [`image-resolution`](/fr/docs/Web/CSS/image-resolution).
diff --git a/files/fr/web/html/element/index.md b/files/fr/web/html/element/index.md
index d07bd5c022..a28b8c2c90 100644
--- a/files/fr/web/html/element/index.md
+++ b/files/fr/web/html/element/index.md
@@ -10,61 +10,59 @@ tags:
   - l10n:priority
 translation_of: Web/HTML/Element
 ---
-<div>{{HTMLSidebar("Elements")}}</div>
+{{HTMLSidebar("Elements")}}
 
-<p>Cette page répertorie tous les <a href="/fr/docs/Glossary/Element">éléments</a> <a href="/fr/docs/Glossary/HTML">HTML</a>, qui sont créés à l'aide de <a href="/fr/docs/Glossary/Tag">balises</a>. Ils sont regroupés par fonction pour vous aider à trouver facilement ce que vous avez en tête. Une liste alphabétique de tous les éléments est fournie dans la barre latérale de la page de chaque élément ainsi que de celle-ci.</p>
+Cette page répertorie tous les [éléments](/fr/docs/Glossary/Element) [HTML](/fr/docs/Glossary/HTML), qui sont créés à l'aide de [balises](/fr/docs/Glossary/Tag). Ils sont regroupés par fonction pour vous aider à trouver facilement ce que vous avez en tête. Une liste alphabétique de tous les éléments est fournie dans la barre latérale de la page de chaque élément ainsi que de celle-ci.
 
-<div class="note">
-  <p><strong>Note :</strong>Pour plus d'informations sur les bases des éléments et attributs HTML, voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML#elements_%e2%80%94_the_basic_building_blocks">la section sur les éléments dans l'article Introduction au HTML</a>.</p>
-</div>
+> **Note :**Pour plus d'informations sur les bases des éléments et attributs HTML, voir [la section sur les éléments dans l'article Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML#elements_%e2%80%94_the_basic_building_blocks).
 
-<h2 id="main_root">Racine principale</h2>
+## Racine principale
 
-<p>{{HTMLRefTable("HTML Root Element")}}</p>
+{{HTMLRefTable("HTML Root Element")}}
 
-<h2 id="document_metadata">Métadonnées du document</h2>
+## Métadonnées du document
 
-<p>Les métadonnées contiennent des informations à propos de la page. Elles comprennent des informations sur les styles, les scripts et les données qui aident les programmes (<a href="/fr/docs/Glossary/Search_engine">moteur de recherche</a>, <a href="/fr/docs/Glossary/Browser">navigateurs</a>, etc.) à utiliser et à rendre la page. Les métadonnées relatives aux styles et aux scripts peuvent être définies dans la page ou renvoyer à un autre fichier contenant ces informations.</p>
+Les métadonnées contiennent des informations à propos de la page. Elles comprennent des informations sur les styles, les scripts et les données qui aident les programmes ([moteur de recherche](/fr/docs/Glossary/Search_engine), [navigateurs](/fr/docs/Glossary/Browser), etc.) à utiliser et à rendre la page. Les métadonnées relatives aux styles et aux scripts peuvent être définies dans la page ou renvoyer à un autre fichier contenant ces informations.
 
-<p>{{HTMLRefTable("HTML Document Metadata")}}</p>
+{{HTMLRefTable("HTML Document Metadata")}}
 
-<h2 id="sectioning_root">Racine de sectionnement</h2>
+## Racine de sectionnement
 
-<p>{{HTMLRefTable("Sectioning Root Element")}}</p>
+{{HTMLRefTable("Sectioning Root Element")}}
 
-<h2 id="content_sectioning">Sectionnement du contenu</h2>
+## Sectionnement du contenu
 
-<p>Organiser le contenu d'une page en différentes sections permet d'avoir une structure logique au sein d'un document. Grâce à ces éléments, on peut créer un plan pour la page, ajouter des titres pour identifier les sections et également gérer un en-tête et un bas de page.</p>
+Organiser le contenu d'une page en différentes sections permet d'avoir une structure logique au sein d'un document. Grâce à ces éléments, on peut créer un plan pour la page, ajouter des titres pour identifier les sections et également gérer un en-tête et un bas de page.
 
-<p>{{HTMLRefTable("HTML Sections")}}</p>
+{{HTMLRefTable("HTML Sections")}}
 
-<h2 id="text_content">Contenu textuel</h2>
+## Contenu textuel
 
-<p>Le contenu HTML textuel permet d'organiser des blocs ou des sections de contenu entre la balise ouvrante {{HTMLElement("body")}} et la balise fermante <code>&lt;/body&gt;</code>. Ces éléments sont cruciaux pour l'accessibilité et le référencement car ils permettent d'identifier le sens du contenu.</p>
+Le contenu HTML textuel permet d'organiser des blocs ou des sections de contenu entre la balise ouvrante {{HTMLElement("body")}} et la balise fermante `</body>`. Ces éléments sont cruciaux pour l'accessibilité et le référencement car ils permettent d'identifier le sens du contenu.
 
-<p>{{HTMLRefTable("HTML Grouping Content")}}</p>
+{{HTMLRefTable("HTML Grouping Content")}}
 
-<h2 id="inline_text_semantics">Sémantique du texte en ligne</h2>
+## Sémantique du texte en ligne
 
-<p>Les éléments pour le texte en ligne peuvent être utilisés pour définir la signification, la structure ou la mise en forme d'un terme, d'une ligne ou d'un fragment de texte.</p>
+Les éléments pour le texte en ligne peuvent être utilisés pour définir la signification, la structure ou la mise en forme d'un terme, d'une ligne ou d'un fragment de texte.
 
-<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p>
+{{HTMLRefTable("HTML Text-Level Semantics")}}
 
-<h2 id="image_and_multimedia">Images et médias</h2>
+## Images et médias
 
-<p>HTML prend en charge différents fichiers multimédias pour les images, les fichiers audio et vidéo.</p>
+HTML prend en charge différents fichiers multimédias pour les images, les fichiers audio et vidéo.
 
-<p>{{HTMLRefTable("multimedia")}}</p>
+{{HTMLRefTable("multimedia")}}
 
-<h2 id="embedded_content">Contenu embarqué</h2>
+## Contenu embarqué
 
-<p>En plus du contenu multimédia, un document HTML peut embarquer d'autres contenus (bien que les interactions soient plutôt limitées).</p>
+En plus du contenu multimédia, un document HTML peut embarquer d'autres contenus (bien que les interactions soient plutôt limitées).
 
-<p>{{HTMLRefTable("multimedia")}}</p>
+{{HTMLRefTable("multimedia")}}
 
-<h2 id="svg_and_math">SVG et MathML</h2>
+## SVG et MathML
 
-<p>Vous pouvez intégrer du contenu <a href="/en-US/docs/Web/SVG">SVG</a> et <a href="/en-US/docs/Web/MathML">MathML</a> directement dans des documents HTML, en utilisant les éléments <a href="/fr/docs/Web/SVG/Element/svg"><code>&lt;svg&gt;</code></a> et <a href="/fr/docs/Web/MathML/Element/math"><code>&lt;math&gt;</code></a>.</p>
+Vous pouvez intégrer du contenu [SVG](/en-US/docs/Web/SVG) et [MathML](/en-US/docs/Web/MathML) directement dans des documents HTML, en utilisant les éléments [`<svg>`](/fr/docs/Web/SVG/Element/svg) et [`<math>`](/fr/docs/Web/MathML/Element/math).
 
 <table class="no-markdown">
   <thead>
@@ -75,56 +73,72 @@ translation_of: Web/HTML/Element
   </thead>
   <tbody>
     <tr>
-      <td><a href="/fr/docs/Web/SVG/Element/svg"><code>&lt;svg&gt;</code></a></td>
-      <td>L'élément <code>svg</code> est un conteneur qui définit un nouveau système de coordonnées et une <a href="/fr/docs/Web/SVG/Attribute/viewBox">vue</a>. Il est utilisé comme élément le plus externe des documents SVG, mais il peut également être utilisé pour intégrer un fragment SVG à l'intérieur d'un document SVG ou HTML.</td>
+      <td>
+        <a href="/fr/docs/Web/SVG/Element/svg"><code>&#x3C;svg></code></a>
+      </td>
+      <td>
+        L'élément <code>svg</code> est un conteneur qui définit un nouveau
+        système de coordonnées et une
+        <a href="/fr/docs/Web/SVG/Attribute/viewBox">vue</a>. Il est utilisé
+        comme élément le plus externe des documents SVG, mais il peut également
+        être utilisé pour intégrer un fragment SVG à l'intérieur d'un document
+        SVG ou HTML.
+      </td>
     </tr>
     <tr>
-      <td><a href="/fr/docs/Web/MathML/Element/math"><code>&lt;math&gt;</code></a></td>
-      <td>L'élément de niveau supérieur en MathML est <code>&lt;math&gt;</code>. Chaque instance MathML valide doit être enveloppée dans des balises <code>&lt;math&gt;</code>. En outre, vous ne devez pas imbriquer un deuxième élément <code>&lt;math&gt;</code> dans un autre, mais vous pouvez avoir un nombre arbitraire d'autres éléments enfants dans celui-ci.</td>
+      <td>
+        <a href="/fr/docs/Web/MathML/Element/math"><code>&#x3C;math></code></a>
+      </td>
+      <td>
+        L'élément de niveau supérieur en MathML est <code>&#x3C;math></code>.
+        Chaque instance MathML valide doit être enveloppée dans des balises
+        <code>&#x3C;math></code>. En outre, vous ne devez pas imbriquer un
+        deuxième élément <code>&#x3C;math></code> dans un autre, mais vous
+        pouvez avoir un nombre arbitraire d'autres éléments enfants dans
+        celui-ci.
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="scripting">Scripts</h2>
+## Scripts
 
-<p>Afin de créer du contenu dynamique et des applications web, des langages de script peuvent être utilisés pour manipuler le document HTML. Certains éléments HTML permettent de gérer les liens entre les scripts et le document.</p>
+Afin de créer du contenu dynamique et des applications web, des langages de script peuvent être utilisés pour manipuler le document HTML. Certains éléments HTML permettent de gérer les liens entre les scripts et le document.
 
-<p>{{HTMLRefTable("HTML Scripting")}}</p>
+{{HTMLRefTable("HTML Scripting")}}
 
-<h2 id="demarcating_edits">Gestion de l'édition</h2>
+## Gestion de l'édition
 
-<p>Ces éléments permettent d'indiquer si des portions du texte ont été modifiées.</p>
+Ces éléments permettent d'indiquer si des portions du texte ont été modifiées.
 
-<p>{{HTMLRefTable("HTML Edits")}}</p>
+{{HTMLRefTable("HTML Edits")}}
 
-<h2 id="table_content">Contenu tabulaire</h2>
+## Contenu tabulaire
 
-<p>Les éléments listés ici permettent de créer et de gérer des données tabulaires.</p>
+Les éléments listés ici permettent de créer et de gérer des données tabulaires.
 
-<p>{{HTMLRefTable("HTML tabular data")}}</p>
+{{HTMLRefTable("HTML tabular data")}}
 
-<h2 id="forms">Formulaires</h2>
+## Formulaires
 
-<p>HTML fournit un certain nombre d'éléments qui peuvent être utilisés ensemble pour créer des formulaires que l'utilisateur peut remplir et soumettre au site Web ou à l'application. De nombreuses informations complémentaires à ce sujet sont disponibles dans le <a href="/fr/docs/Learn/Forms">guide des formulaires HTML</a>.</p>
+HTML fournit un certain nombre d'éléments qui peuvent être utilisés ensemble pour créer des formulaires que l'utilisateur peut remplir et soumettre au site Web ou à l'application. De nombreuses informations complémentaires à ce sujet sont disponibles dans le [guide des formulaires HTML](/fr/docs/Learn/Forms).
 
-<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p>
+{{HTMLRefTable({"include": \["HTML forms"], "exclude":\["Deprecated"]})}}
 
-<h2 id="interactive_elements">Éléments interactifs</h2>
+## Éléments interactifs
 
-<p>HTML fournit différents éléments qui permettent de créer des interfaces utilisateur interactives.</p>
+HTML fournit différents éléments qui permettent de créer des interfaces utilisateur interactives.
 
-<p>{{HTMLRefTable("HTML interactive elements")}}</p>
+{{HTMLRefTable("HTML interactive elements")}}
 
-<h2 id="web_components"><em>Web Components</em></h2>
+## _Web Components_
 
-<p>Les composants web (ou « <em>Web Components</em> ») permettent de créer et d'utiliser des éléments personnalisés comme s'ils étaient des éléments HTML classiques. Cela permet également de créer ses propres versions des éléments standards HTML.</p>
+Les composants web (ou « _Web Components_ ») permettent de créer et d'utiliser des éléments personnalisés comme s'ils étaient des éléments HTML classiques. Cela permet également de créer ses propres versions des éléments standards HTML.
 
-<p>{{HTMLRefTable({"include":["Web Components"],"exclude":["Deprecated", "Obsolete"]})}}</p>
+{{HTMLRefTable({"include":\["Web Components"],"exclude":\["Deprecated", "Obsolete"]})}}
 
-<h2 id="obsolete_and_deprecated_elements">Éléments obsolètes ou dépréciés</h2>
+## Éléments obsolètes ou dépréciés
 
-<div class="warning">
-  <p><strong>Attention :</strong> Ces éléments sont d'anciens éléments HTML qui sont désormais dépréciés et qui ne devraient plus être utilisés. <strong>Ces éléments ne doivent pas être utilisés dans de nouveaux projets et doivent être remplacés dans les anciens projets dès que possible.</strong> Ces éléments uniquement sont listés ici à des fins d'information.</p>
-</div>
+> **Attention :** Ces éléments sont d'anciens éléments HTML qui sont désormais dépréciés et qui ne devraient plus être utilisés. **Ces éléments ne doivent pas être utilisés dans de nouveaux projets et doivent être remplacés dans les anciens projets dès que possible.** Ces éléments uniquement sont listés ici à des fins d'information.
 
-<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p>
\ No newline at end of file
+{{HTMLRefTable({"include":\["Deprecated","Obsolete"]})}}
diff --git a/files/fr/web/html/element/input/button/index.md b/files/fr/web/html/element/input/button/index.md
index 02a4e420e0..e0ff7fcca8 100644
--- a/files/fr/web/html/element/input/button/index.md
+++ b/files/fr/web/html/element/input/button/index.md
@@ -9,46 +9,53 @@ tags:
   - Web
 translation_of: Web/HTML/Element/input/button
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Les éléments {{HTMLElement("input")}} de type <strong><code>button</code></strong> sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènement {{event("click")}}).</p>
+Les éléments {{HTMLElement("input")}} de type **`button`** sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènement {{event("click")}}).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}
 
-<div class="note">
-<p><strong>Note :</strong> Bien que les éléments <code>&lt;input&gt;</code> de type <code>"button"</code> représentent toujours des éléments HTML valides, l'élément {{HTMLElement("button")}}, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images.</p>
-</div>
+> **Note :** Bien que les éléments `<input>` de type `"button"` représentent toujours des éléments HTML valides, l'élément {{HTMLElement("button")}}, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images.
+
+## Valeur
 
-<h2 id="Valeur">Valeur</h2>
+L'attribut {{htmlattrxref("value", "input")}} d'un t'el élément contient une chaîne de caractères qui est utilisée comme étiquette pour le bouton (autrement dit, comme texte affiché sur le bouton).
 
-<p>L'attribut {{htmlattrxref("value", "input")}} d'un t'el élément contient une chaîne de caractères qui est utilisée comme étiquette pour le bouton (autrement dit, comme texte affiché sur le bouton).</p>
+### Exemple 1
 
-<h3 id="Exemple_1">Exemple 1</h3>
-<pre class="brush: html">&lt;input type="button" value="Bouton cliquer"&gt;</pre>
+```html
+<input type="button" value="Bouton cliquer">
+```
 
-<p>{{EmbedLiveSample("Exemple_1", 650, 30)}}</p>
+{{EmbedLiveSample("Exemple_1", 650, 30)}}
 
-<h3 id="Exemple_2">Exemple 2</h3>
-<p>Si on n'indique aucune valeur, le bouton sera vide :</p>
+### Exemple 2
 
-<pre class="brush: html">&lt;input type="button"&gt;</pre>
+Si on n'indique aucune valeur, le bouton sera vide :
 
-<p>{{EmbedLiveSample("Exemple_2", 650, 30)}}</p>
+```html
+<input type="button">
+```
 
-<h2 id="Utiliser_les_boutons_&lt;input>">Utiliser les boutons <code>&lt;input&gt;</code></h2>
+{{EmbedLiveSample("Exemple_2", 650, 30)}}
 
-<p>Les éléments <code>&lt;input type="button"&gt;</code> ne possèdent pas de comportement particulier (leurs analogues <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et <code><a href="/fr/docs/Web/HTML/Element/input/reset">&lt;input type="reset"&gt;</a></code> permettent respectivement d'envoyer et de réinitialiser des formulaires). Pour qu'un bouton <code>&lt;input type="button"&gt;</code> puisse avoir un effet, il est nécessaire d'écrire quelques lignes JavaScript.</p>
+## Utiliser les boutons `<input>`
 
-<h3 id="Un_bouton_simple">Un bouton simple</h3>
+Les éléments `<input type="button">` ne possèdent pas de comportement particulier (leurs analogues [`<input type="submit">`](/fr/docs/Web/HTML/Element/input/submit) et [`<input type="reset">`](/fr/docs/Web/HTML/Element/input/reset) permettent respectivement d'envoyer et de réinitialiser des formulaires). Pour qu'un bouton `<input type="button">` puisse avoir un effet, il est nécessaire d'écrire quelques lignes JavaScript.
 
-<p>Dans cet exemple, commençons par créer un bouton simple avec un gestionnaire d'évènement permettant de déclencher une action au clic afin de démarrer cette machine (enfin, pour être plus précis : on échangera la valeur de l'attribut <code>value</code> du bouton et le texte situé dans le paragraphe qui suit) :</p>
+### Un bouton simple
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;input type="button" value="Démarrer la machine"&gt;
-&lt;/form&gt;
-&lt;p&gt;La machine est arrêtée.&lt;/p&gt;</pre>
+Dans cet exemple, commençons par créer un bouton simple avec un gestionnaire d'évènement permettant de déclencher une action au clic afin de démarrer cette machine (enfin, pour être plus précis : on échangera la valeur de l'attribut `value` du bouton et le texte situé dans le paragraphe qui suit) :
 
-<pre class="brush: js">var btn = document.querySelector('input');
+```html
+<form>
+  <input type="button" value="Démarrer la machine">
+</form>
+<p>La machine est arrêtée.</p>
+```
+
+```js
+var btn = document.querySelector('input');
 var txt = document.querySelector('p');
 
 btn.addEventListener('click', updateBtn);
@@ -61,26 +68,28 @@ function updateBtn() {
     btn.value = 'Démarrer la machine';
     txt.textContent = 'La machine est arrêtée.';
   }
-}</pre>
+}
+```
 
-<p>Dans ce script, on récupère une référence à l'objet {{domxref("HTMLInputElement")}} qui représente l'élément <code>&lt;input&gt;</code> du DOM et on stocke cette référence dans la variable <code>btn</code>. {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour ensuite lui rattacher une fonction qui sera utilisée lorsque l'évènement {{event("click")}} se produira sur le bouton.</p>
+Dans ce script, on récupère une référence à l'objet {{domxref("HTMLInputElement")}} qui représente l'élément `<input>` du DOM et on stocke cette référence dans la variable `btn`. {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour ensuite lui rattacher une fonction qui sera utilisée lorsque l'évènement {{event("click")}} se produira sur le bouton.
 
-<p>{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}</p>
+{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}
 
-<h3 id="Ajouter_des_raccourcis_clavier">Ajouter des raccourcis clavier</h3>
+### Ajouter des raccourcis clavier
 
-<p>Les raccourcis clavier permettent à un utilisateur de déclencher une action grâce à une touche ou grâce à une combinaison de touches du clavier. Pour ajouter un raccourci clavier déclenchant le bouton, on pourra ajouter l'attribut universel <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code> (qu'on peut d'ailleurs utiliser pour les autres éléments {{HTMLElement("input")}}).</p>
+Les raccourcis clavier permettent à un utilisateur de déclencher une action grâce à une touche ou grâce à une combinaison de touches du clavier. Pour ajouter un raccourci clavier déclenchant le bouton, on pourra ajouter l'attribut universel [`accesskey`](/fr/docs/Web/HTML/Attributs_universels/accesskey) (qu'on peut d'ailleurs utiliser pour les autres éléments {{HTMLElement("input")}}).
 
-<p>Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code> pour la liste de ces touches).</p>
+Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. [`accesskey`](/fr/docs/Web/HTML/Attributs_universels/accesskey) pour la liste de ces touches).
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;input type="button" value="Démarrer la machine" accesskey="s"&gt;
-&lt;/form&gt;
-&lt;p&gt;La machine est arrêtée.&lt;/p&gt;
-</pre>
-</div>
+```html
+<form>
+  <input type="button" value="Démarrer la machine" accesskey="s">
+</form>
+<p>La machine est arrêtée.</p>
+```
 
-<pre class="brush: js hidden">var btn = document.querySelector('input');
+```js hidden
+var btn = document.querySelector('input');
 var txt = document.querySelector('p');
 
 btn.addEventListener('click', updateBtn);
@@ -93,26 +102,31 @@ function updateBtn() {
     btn.value = 'Démarrer la machine';
     txt.textContent = 'La machine est arrêtée.';
   }
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("Ajouter_des_raccourcis_clavier", 650, 100)}}</p>
+{{EmbedLiveSample("Ajouter_des_raccourcis_clavier", 650, 100)}}
 
-<div class="note">
-<p><strong>Note :</strong> Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.</p>
-</div>
+> **Note :** Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.
+
+### Désactiver et activer un bouton
 
-<h3 id="Désactiver_et_activer_un_bouton">Désactiver et activer un bouton</h3>
+Pour désactiver un bouton, il suffit d'ajouter l'attribut universel {{htmlattrxref("disabled")}} :
 
-<p>Pour désactiver un bouton, il suffit d'ajouter l'attribut universel {{htmlattrxref("disabled")}} :</p>
+```html
+<input type="button" value="Je suis désactivé" disabled>
+```
 
-<pre class="brush: html">&lt;input type="button" value="Je suis désactivé" disabled&gt;</pre>
+Il est possible d'activer ou de désactiver des boutons lors de de l'utilisation de la page en modifiant l'attribut `disabled` de l'élément dans le DOM. Dans l'exemple qui suit, le bouton est initialement activé et si on appuie dessus : il devient désactivé (c'est ce que fait la ligne de code `btn.disabled = true`). La fonction {{domxref("WindowTimers.setTimeout","setTimeout()")}} est ensuite utilisée afin de réinitialiser le bouton après deux secondes.
 
-<p>Il est possible d'activer ou de désactiver des boutons lors de de l'utilisation de la page en modifiant l'attribut <code>disabled</code> de l'élément dans le DOM. Dans l'exemple qui suit, le bouton est initialement activé et si on appuie dessus : il devient désactivé (c'est ce que fait la ligne de code <code>btn.disabled = true</code>). La fonction {{domxref("WindowTimers.setTimeout","setTimeout()")}} est ensuite utilisée afin de réinitialiser le bouton après deux secondes.</p>
+#### Exemple 1
 
-<h4 id="Exemple_1">Exemple 1</h4>
-<pre class="brush: html hidden">&lt;input type="button" value="Activé"&gt;</pre>
+```html hidden
+<input type="button" value="Activé">
+```
 
-<pre class="brush: js hidden">var btn = document.querySelector('input');
+```js hidden
+var btn = document.querySelector('input');
 
 btn.addEventListener('click', disableBtn);
 
@@ -123,25 +137,28 @@ function disableBtn() {
     btn.disabled = false;
     btn.value = 'Activé';
   }, 2000);
-}</pre>
-</div>
+}
+```
 
-<p>{{EmbedLiveSample("Exemple_1", 650, 60)}}</p>
+{{EmbedLiveSample("Exemple_1", 650, 60)}}
 
-<p>Si l'attribut <code>disabled</code> n'est pas fourni, il est hérité depuis l'élément parent. De cette façon, on peut activer/désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément {{HTMLElement("fieldset")}}) et en indiquant <code>disabled</code> sur le conteneur.</p>
+Si l'attribut `disabled` n'est pas fourni, il est hérité depuis l'élément parent. De cette façon, on peut activer/désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément {{HTMLElement("fieldset")}}) et en indiquant `disabled` sur le conteneur.
 
-<p>C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut  <code>disabled</code> est activé sur l'élément <code>&lt;fieldset&gt;</code> lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes.</p>
+C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut  `disabled` est activé sur l'élément `<fieldset>` lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes.
 
-<h4 id="Exemple_2">Exemple 2</h4>
+#### Exemple 2
 
-<pre class="brush: html hidden">&lt;fieldset&gt;
-  &lt;legend&gt;Groupe de boutons &lt;/legend&gt;
-  &lt;input type="button" value="Bouton 1"&gt;
-  &lt;input type="button" value="Bouton 2"&gt;
-  &lt;input type="button" value="Bouton 3"&gt;
-&lt;/fieldset&gt;</pre>
+```html hidden
+<fieldset>
+  <legend>Groupe de boutons </legend>
+  <input type="button" value="Bouton 1">
+  <input type="button" value="Bouton 2">
+  <input type="button" value="Bouton 3">
+</fieldset>
+```
 
-<pre class="brush: js hidden">var btn = document.querySelector('input');
+```js hidden
+var btn = document.querySelector('input');
 var fieldset = document.querySelector('fieldset');
 
 btn.addEventListener('click', disableBtn);
@@ -151,33 +168,35 @@ function disableBtn() {
   window.setTimeout(function() {
     fieldset.disabled = false;
   }, 2000);
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("Exemple_2", 650, 60)}}</p>
+{{EmbedLiveSample("Exemple_2", 650, 60)}}
 
-<div class="note">
-<p><strong>Note :</strong> À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p>
-</div>
+> **Note :** À la différence des autres navigateurs, [Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing). L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.
 
-<h2 id="Validation">Validation</h2>
+## Validation
 
-<p>Les éléments <code>&lt;input</code><code> type="button"</code><code>&gt;</code> n'ont pas de contrainte de validation.</p>
+Les éléments ` <input`` type="button" ``> ` n'ont pas de contrainte de validation.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on montre une application de dessin très simple qui utilise un élément {{htmlelement("canvas")}}, une courte feuille de style CSS (masquée) et du code JavaScript. Les deux contrôles situés en haut permettent de choisir la couleur et la taille de la pointe du crayon. Le bouton quant à lui permet de réinitialiser le canevas.</p>
+Dans l'exemple qui suit, on montre une application de dessin très simple qui utilise un élément {{htmlelement("canvas")}}, une courte feuille de style CSS (masquée) et du code JavaScript. Les deux contrôles situés en haut permettent de choisir la couleur et la taille de la pointe du crayon. Le bouton quant à lui permet de réinitialiser le canevas.
 
-<pre class="brush: html">&lt;div class="toolbar"&gt;
-  &lt;input type="color" aria-label="Sélectionner la couleur du crayon"&gt;
-  &lt;input type="range" min="2" max="50" value="30" aria-label="Sélectionner la taille de la pointe du crayon"&gt;&lt;span class="output"&gt;30&lt;/span&gt;
-  &lt;input type="button" value="Réinitialiser le canevas"&gt;
-&lt;/div&gt;
+```html
+<div class="toolbar">
+  <input type="color" aria-label="Sélectionner la couleur du crayon">
+  <input type="range" min="2" max="50" value="30" aria-label="Sélectionner la taille de la pointe du crayon"><span class="output">30</span>
+  <input type="button" value="Réinitialiser le canevas">
+</div>
 
-&lt;canvas class="myCanvas"&gt;
-  &lt;p&gt;Votre navigateur ne semble pas prendre en charge cette fonctionnalité.&lt;/p&gt;
-&lt;/canvas&gt;</pre>
+<canvas class="myCanvas">
+  <p>Votre navigateur ne semble pas prendre en charge cette fonctionnalité.</p>
+</canvas>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   margin: 0;
   overflow: hidden;
   background: #ccc;
@@ -203,9 +222,11 @@ input[type="range"] {
  span {
    position: relative;
    bottom: 5px;
- }</pre>
+ }
+```
 
-<pre class="brush: js">var canvas = document.querySelector('.myCanvas');
+```js
+var canvas = document.querySelector('.myCanvas');
 var width = canvas.width = window.innerWidth;
 var height = canvas.height = window.innerHeight-85;
 var ctx = canvas.getContext('2d');
@@ -265,67 +286,54 @@ function draw() {
   requestAnimationFrame(draw);
 }
 
-draw();</pre>
+draw();
+```
 
-<p>{{EmbedLiveSample("Exemples", '100%', 600)}}</p>
+{{EmbedLiveSample("Exemples", '100%', 600)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>A {{domxref("DOMString")}} used as the button's label</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{event("click")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en Supported common attributes</strong></td>
-   <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>value</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>Aucune</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>A {{domxref("DOMString")}} used as the button's label</td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>{{event("click")}}</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en Supported common attributes</strong></td>
+      <td>
+        {{htmlattrxref("type", "input")}}, and
+        {{htmlattrxref("value", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td><code>value</code></td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>Aucune</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                        | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '&lt;input type="button"&gt;')}}     | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-button")}}</p>
+{{Compat("html.elements.input.input-button")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément {{HTMLElement("input")}}</li>
- <li>L'interface DOM {{domxref("HTMLInputElement")}} implémentée par l'élément</li>
- <li>L'élément {{HTMLElement("button")}}, plus moderne</li>
-</ul>
+- L'élément {{HTMLElement("input")}}
+- L'interface DOM {{domxref("HTMLInputElement")}} implémentée par l'élément
+- L'élément {{HTMLElement("button")}}, plus moderne
diff --git a/files/fr/web/html/element/input/checkbox/index.md b/files/fr/web/html/element/input/checkbox/index.md
index a2e5726900..7304f7b9f8 100644
--- a/files/fr/web/html/element/input/checkbox/index.md
+++ b/files/fr/web/html/element/input/checkbox/index.md
@@ -9,144 +9,130 @@ tags:
   - Web
 translation_of: Web/HTML/Element/input/checkbox
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Les éléments {{htmlelement("input")}} de type <strong><code>checkbox</code></strong> sont affichés sous la forme de boîtes à cocher qui sont cochées lorsqu'elles sont activées. Elles permettent de sélectionner une ou plusieurs valeurs dans un formulaire.</p>
+Les éléments {{htmlelement("input")}} de type **`checkbox`** sont affichés sous la forme de boîtes à cocher qui sont cochées lorsqu'elles sont activées. Elles permettent de sélectionner une ou plusieurs valeurs dans un formulaire.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}
 
-<div class="note">
-<p><strong>Note :</strong> <a href="/fr/docs/Web/HTML/Element/input/radio">Les boutons radio</a> sont semblables aux cases à cocher mais il existe une différence importante : les boutons radio permettent de sélectionner une seule valeur parmi plusieurs alors que les cases à cocher permettent de cocher/décocher plusieurs valeurs d'un groupe.</p>
-</div>
+> **Note :** [Les boutons radio](/fr/docs/Web/HTML/Element/input/radio) sont semblables aux cases à cocher mais il existe une différence importante : les boutons radio permettent de sélectionner une seule valeur parmi plusieurs alors que les cases à cocher permettent de cocher/décocher plusieurs valeurs d'un groupe.
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la case à cocher. Cette chaîne de caractères n'est pas affichée côté client mais est envoyée au serveur comme valeur associée à la donnée envoyée avec le nom de la case à cocher. Par exemple :</p>
+Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la case à cocher. Cette chaîne de caractères n'est pas affichée côté client mais est envoyée au serveur comme valeur associée à la donnée envoyée avec le nom de la case à cocher. Par exemple :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"&gt;
-    &lt;label for="subscribeNews"&gt;Souhaitez-vous vous abonner à la newsletter ?&lt;/label&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button type="submit"&gt;S'abonner&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
+    <label for="subscribeNews">Souhaitez-vous vous abonner à la newsletter ?</label>
+  </div>
+  <div>
+    <button type="submit">S'abonner</button>
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p>
+{{EmbedLiveSample('Valeur', 600, 60)}}
 
-<p>Dans cet exemple, on a le nom (l'attribut <code>name</code>) <code>subscribe</code> utilisé pour la case à cocher avec une valeur (l'attribut <code>value</code>) qui est <code>newsletter</code>. Lorsque le formulaire est envoyé, les données seront transmises sous la forme <code>subscribe=newsletter</code>.</p>
+Dans cet exemple, on a le nom (l'attribut `name`) `subscribe` utilisé pour la case à cocher avec une valeur (l'attribut `value`) qui est `newsletter`. Lorsque le formulaire est envoyé, les données seront transmises sous la forme `subscribe=newsletter`.
 
-<p>Si l'attribut <code>value</code> n'était pas renseigné, la valeur par défaut sera <code>on</code> (dans l'exemple, les données envoyées au serveur auraient la forme <code>subscribe=on</code>).</p>
+Si l'attribut `value` n'était pas renseigné, la valeur par défaut sera `on` (dans l'exemple, les données envoyées au serveur auraient la forme `subscribe=on`).
 
-<div class="note">
-<p><strong>Note :</strong> Si la case à cocher n'est pas cochée lorsque le formulaire est envoyé, aucune valeur n'est envoyée au serveur pour indiquer cet état (autrement dit, le client n'envoie pas quelque chose comme <code>value=unchecked</code>) ; la valeur n'est pas transmise au serveur du tout.</p>
-</div>
+> **Note :** Si la case à cocher n'est pas cochée lorsque le formulaire est envoyé, aucune valeur n'est envoyée au serveur pour indiquer cet état (autrement dit, le client n'envoie pas quelque chose comme `value=unchecked`) ; la valeur n'est pas transmise au serveur du tout.
 
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+## Attributs supplémentaires
 
-<p>En plus des attributs qui sont partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"checkbox"</code> prennent aussi en charge les attributs suivants :</p>
+En plus des attributs qui sont partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"checkbox"` prennent aussi en charge les attributs suivants :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("checked")}}</code></td>
-   <td>Un attribut booléen. Si celui-ci est présent, la case à cocher sera cochée.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("value")}}</code></td>
-   <td>La chaîne de caractères qui sera utilisée pour représenter la valeur lorsque celle-ci sera envoyée au serveur si la case est cochée.</td>
-  </tr>
- </tbody>
-</table>
+| Attribut                   | Description                                                                                                                          |
+| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `{{anch("checked")}}` | Un attribut booléen. Si celui-ci est présent, la case à cocher sera cochée.                                                          |
+| `{{anch("value")}}` | La chaîne de caractères qui sera utilisée pour représenter la valeur lorsque celle-ci sera envoyée au serveur si la case est cochée. |
 
-<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3>
+### {{htmlattrdef("checked")}}
 
-<p>Un attribut booléen qui indique si la case est cochée. Cet attribut n'indique pas si la case est actuellement cochée : si l'état a été modifié, l'attribut dans le document ne reflètera pas cette modification (seul l'attribut IDL <code>checked</code>de l'objet {{domxref("HTMLInputElement")}} est mis à jour).</p>
+Un attribut booléen qui indique si la case est cochée. Cet attribut n'indique pas si la case est actuellement cochée : si l'état a été modifié, l'attribut dans le document ne reflètera pas cette modification (seul l'attribut IDL `checked`de l'objet {{domxref("HTMLInputElement")}} est mis à jour).
 
-<div class="note">
-<p><strong>Note :</strong> À la différence des autres champs, les valeurs des cases à cocher ne sont envoyées au serveur que lorsqu'elles sont cochées. Lorsque c'est le cas, c'est la valeur de l'attribut <code>value</code> qui est envoyé.</p>
-</div>
+> **Note :** À la différence des autres champs, les valeurs des cases à cocher ne sont envoyées au serveur que lorsqu'elles sont cochées. Lorsque c'est le cas, c'est la valeur de l'attribut `value` qui est envoyé.
 
-<p>À la différence des autres navigateurs, Firefox <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">conserve l'état coché placé dynamiquement</a> d'un champ <code>&lt;input&gt;</code> après les rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} peut être utilisé afin de contrôler cette fonctionnalité.</p>
+À la différence des autres navigateurs, Firefox [conserve l'état coché placé dynamiquement](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) d'un champ `<input>` après les rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} peut être utilisé afin de contrôler cette fonctionnalité.
 
-<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3>
+### {{htmlattrdef("value")}}
 
-<p>L'attribut <code>value</code> est partagé par l'ensemble des éléments <code>&lt;input&gt;</code> mais il a un rôle spécifique pour les champs de type <code>checkbox</code> : lorsqu'un formulaire est envoyé, seules les cases à cocher qui sont cochées sont envoyées au serveur et c'est la valeur de l'attribut <code>value</code> qui est envoyée. Si l'attribut <code>value</code> n'est pas renseigné, ce sera la chaîne de caractères <code>"on"</code> qui sera envoyée par défaut.</p>
+L'attribut `value` est partagé par l'ensemble des éléments `<input>` mais il a un rôle spécifique pour les champs de type `checkbox` : lorsqu'un formulaire est envoyé, seules les cases à cocher qui sont cochées sont envoyées au serveur et c'est la valeur de l'attribut `value` qui est envoyée. Si l'attribut `value` n'est pas renseigné, ce sera la chaîne de caractères `"on"` qui sera envoyée par défaut.
 
-<h2 id="Utiliser_les_cases_à_cocher">Utiliser les cases à cocher</h2>
+## Utiliser les cases à cocher
 
-<h3 id="Gérer_plusieurs_cases_à_cocher">Gérer plusieurs cases à cocher</h3>
+### Gérer plusieurs cases à cocher
 
-<p>Dans l'exemple précédent, il n'y a qu'une seule case à cocher. Dans un scénario réaliste, on aura vraisemblablement plusieurs cases à cocher. Si celles-ci n'ont pas de rapport entre elles, il est possible de les gérer de façon séparée avec des cases à cocher « unitaires » comme illustré précédemment. Toutefois, si les valeurs sont liées entre elles, il est alors nécessaire d'indiquer ce lien.</p>
+Dans l'exemple précédent, il n'y a qu'une seule case à cocher. Dans un scénario réaliste, on aura vraisemblablement plusieurs cases à cocher. Si celles-ci n'ont pas de rapport entre elles, il est possible de les gérer de façon séparée avec des cases à cocher « unitaires » comme illustré précédemment. Toutefois, si les valeurs sont liées entre elles, il est alors nécessaire d'indiquer ce lien.
 
-<p>Dans l'exemple qui suit, on affiche différentes cases à cocher pour représenter les intérets d'un utilisateur (voir l'exemple complet dans la section {{anch("Exemples")}}).</p>
+Dans l'exemple qui suit, on affiche différentes cases à cocher pour représenter les intérets d'un utilisateur (voir l'exemple complet dans la section {{anch("Exemples")}}).
 
-<pre class="brush: html">&lt;fieldset&gt;
-  &lt;legend&gt;Veuillez sélectionner vos intérêts :&lt;/legend&gt;
-  &lt;div&gt;
-    &lt;input type="checkbox" id="coding" name="interest" value="coding"&gt;
-    &lt;label for="coding"&gt;Développement&lt;/label&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;input type="checkbox" id="music" name="interest" value="music"&gt;
-    &lt;label for="music"&gt;Musique&lt;/label&gt;
-  &lt;/div&gt;
-&lt;/fieldset&gt;</pre>
+```html
+<fieldset>
+  <legend>Veuillez sélectionner vos intérêts :</legend>
+  <div>
+    <input type="checkbox" id="coding" name="interest" value="coding">
+    <label for="coding">Développement</label>
+  </div>
+  <div>
+    <input type="checkbox" id="music" name="interest" value="music">
+    <label for="music">Musique</label>
+  </div>
+</fieldset>
+```
 
-<p>{{EmbedLiveSample('Gérer_plusieurs_cases_à_cocher', 600, 100)}}</p>
+{{EmbedLiveSample('Gérer_plusieurs_cases_à_cocher', 600, 100)}}
 
-<p>Dans cet exemple on voit que chaque case à cocher utilise le même attribut <code>name</code>. Si les deux cases sont cochées lorsque le formulaire est envoyé, la chaîne des paires nom/valeur qui sera envoyée au serveur sera : <code>interest=coding&amp;interest=music</code>. Lorsque les données parviennent au serveur, on peut ainsi récupérer un tableau des valeurs sélctionnées (voir <a href="https://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">Gérer plusieurs cases à cocher avec une seule variable côté serveur</a> par exemple).</p>
+Dans cet exemple on voit que chaque case à cocher utilise le même attribut `name`. Si les deux cases sont cochées lorsque le formulaire est envoyé, la chaîne des paires nom/valeur qui sera envoyée au serveur sera : `interest=coding&interest=music`. Lorsque les données parviennent au serveur, on peut ainsi récupérer un tableau des valeurs sélctionnées (voir [Gérer plusieurs cases à cocher avec une seule variable côté serveur](https://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable) par exemple).
 
-<h3 id="Cocher_certaines_cases_par_défaut">Cocher certaines cases par défaut</h3>
+### Cocher certaines cases par défaut
 
-<p>Afin qu'une case à cocher soit sélectionnée par défaut, il suffit de placer l'attribut booléen <code>checked</code>. Voir l'exemple qui suit :</p>
+Afin qu'une case à cocher soit sélectionnée par défaut, il suffit de placer l'attribut booléen `checked`. Voir l'exemple qui suit :
 
-<pre class="brush: html">&lt;fieldset&gt;
-  &lt;legend&gt;Veuillez sélectionner vos intérêts&lt;/legend&gt;
-  &lt;div&gt;
-    &lt;input type="checkbox" id="coding" name="interest" value="coding" checked&gt;
-    &lt;label for="coding"&gt;Développement&lt;/label&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;input type="checkbox" id="music" name="interest" value="music"&gt;
-    &lt;label for="music"&gt;Musique&lt;/label&gt;
-  &lt;/div&gt;
-&lt;/fieldset&gt;</pre>
+```html
+<fieldset>
+  <legend>Veuillez sélectionner vos intérêts</legend>
+  <div>
+    <input type="checkbox" id="coding" name="interest" value="coding" checked>
+    <label for="coding">Développement</label>
+  </div>
+  <div>
+    <input type="checkbox" id="music" name="interest" value="music">
+    <label for="music">Musique</label>
+  </div>
+</fieldset>
+```
 
-<p>{{EmbedLiveSample('Cocher_certaines_cases_par_défaut', 600, 100)}}</p>
+{{EmbedLiveSample('Cocher_certaines_cases_par_défaut', 600, 100)}}
 
-<h3 id="Fournir_une_zone_cliquable_plus_grande">Fournir une zone cliquable plus grande</h3>
+### Fournir une zone cliquable plus grande
 
-<p>Dans les exemples précédents, vous avez peut-être remarqué qu'il était possible de cocher une case en cliquant sur l'élément {{htmlelement("label")}} associé. Il s'agit d'une fonctionnalité particulièrement utile des étiquettes de formulaire HTML : il y a ainsi plus d'espace qui peut être utilisé pour sélectionner les options voulues (notamment sur les petits écrans).</p>
+Dans les exemples précédents, vous avez peut-être remarqué qu'il était possible de cocher une case en cliquant sur l'élément {{htmlelement("label")}} associé. Il s'agit d'une fonctionnalité particulièrement utile des étiquettes de formulaire HTML : il y a ainsi plus d'espace qui peut être utilisé pour sélectionner les options voulues (notamment sur les petits écrans).
 
-<p>En plus des raisons liées à l'accessibilité, il s'agit d'une bonne raison pour indiquer correctement des éléments <code>&lt;label&gt;</code> dans vos formulaires.</p>
+En plus des raisons liées à l'accessibilité, il s'agit d'une bonne raison pour indiquer correctement des éléments `<label>` dans vos formulaires.
 
-<h3 id="Gérer_un_état_indéterminé">Gérer un état indéterminé</h3>
+### Gérer un état indéterminé
 
-<p>Il existe un état indéterminé pour les cases à cocher qui indique que la case n'est ni cochée, ni décochée mais indéterminéee. Cet état peut être obtenu via la propriété <code>indeterminate</code> d'un élément {{domxref("HTMLInputElement")}} en JavaScript (il est impossible d'obtenir cet état en utilisant uniquement du HTML) :</p>
+Il existe un état indéterminé pour les cases à cocher qui indique que la case n'est ni cochée, ni décochée mais indéterminéee. Cet état peut être obtenu via la propriété `indeterminate` d'un élément {{domxref("HTMLInputElement")}} en JavaScript (il est impossible d'obtenir cet état en utilisant uniquement du HTML) :
 
-<pre class="brush: js">inputInstance.indeterminate = true;</pre>
+```js
+inputInstance.indeterminate = true;
+```
 
-<p>Dans la plupart des navigateurs, une case à cocher dans un état indéterminé est représentée avec une ligne horizontale en travers de la case.</p>
+Dans la plupart des navigateurs, une case à cocher dans un état indéterminé est représentée avec une ligne horizontale en travers de la case.
 
-<p>Voici un exemple d'utilisation de cet état (tiré de <a href="https://css-tricks.com/indeterminate-checkboxes/">CSS Tricks</a>) où on tient le compte des ingrédients qu'on possède pour une recette. Lorsqu'on coche ou décoche une case d'un ingrédient, une fonction JavaScript vérifie le nombre d'ingrédients possédés (c'est-à-dire cochés) :</p>
+Voici un exemple d'utilisation de cet état (tiré de [CSS Tricks](https://css-tricks.com/indeterminate-checkboxes/)) où on tient le compte des ingrédients qu'on possède pour une recette. Lorsqu'on coche ou décoche une case d'un ingrédient, une fonction JavaScript vérifie le nombre d'ingrédients possédés (c'est-à-dire cochés) :
 
-<ul>
- <li>Si aucun n'est coché, la case associée à la recette est décochée.</li>
- <li>Si un ou deux éléments sont cochés, la case associée à la recette est dans un état indéterminé.</li>
- <li>Si les trois ingrédients sont cochés, la case associée à la recette est cochée.</li>
-</ul>
+- Si aucun n'est coché, la case associée à la recette est décochée.
+- Si un ou deux éléments sont cochés, la case associée à la recette est dans un état indéterminé.
+- Si les trois ingrédients sont cochés, la case associée à la recette est cochée.
 
-<p>Dans cet exemple, l'état <code>indeterminate</code> est utilisé afin d'indiquer qu'on possède certains ingrédients mais pas suffisamment pour une recette.</p>
+Dans cet exemple, l'état `indeterminate` est utilisé afin d'indiquer qu'on possède certains ingrédients mais pas suffisamment pour une recette.
 
-<pre class="brush: js">
+```js
 var overall = document.querySelector('input[id="EnchTbl"]');
 var ingredients = document.querySelectorAll('ul input');
 
@@ -154,13 +140,13 @@ overall.addEventListener('click', function(e) {
   e.preventDefault();
 });
 
-for(var i = 0; i &lt; ingredients.length; i++) {
+for(var i = 0; i < ingredients.length; i++) {
   ingredients[i].addEventListener('click', updateDisplay);
 }
 
 function updateDisplay() {
   var checkedCount = 1;
-  for(var i = 0; i &lt; ingredients.length; i++) {
+  for(var i = 0; i < ingredients.length; i++) {
     if(ingredients[i].checked) {
       checkedCount++;
     }
@@ -176,57 +162,58 @@ function updateDisplay() {
     overall.indeterminate = true;
   }
 }
-</pre>
-
-<p>{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Si vous envoyez un formulaire avec une case à cocher dans un état indéterminé, le résultat obtenu est le même que si la case avait été décochée : aucune donnée n'est envoyée au serveur.</p>
-</div>
-
-<h2 id="Validation">Validation</h2>
-
-<p>Il n'y a pas de mécanisme de validation natif pour la valeur d'une case à cocher.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple suivant, on développe l'exemple vu précédemment avec les groupes de cases à cocher : il y a cette fois plus d'options et un champ texte libre qui permet de saisir une autre valeur. Pour cela on utilise un bloc de code JavaScript et quelques règles CSS pour la mise en forme.</p>
-
-<pre class="brush: html">&lt;form&gt;
-  &lt;fieldset&gt;
-  &lt;legend&gt;Veuillez sélectionner vos intérêts&lt;/legend&gt;
-    &lt;div&gt;
-      &lt;input type="checkbox" id="coding" name="interest" value="coding"&gt;
-      &lt;label for="coding"&gt;Développement&lt;/label&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-      &lt;input type="checkbox" id="music" name="interest" value="music"&gt;
-      &lt;label for="music"&gt;Musique&lt;/label&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-      &lt;input type="checkbox" id="art" name="interest" value="art"&gt;
-      &lt;label for="art"&gt;Art&lt;/label&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-      &lt;input type="checkbox" id="sports" name="interest" value="sports"&gt;
-      &lt;label for="sports"&gt;Sports&lt;/label&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-      &lt;input type="checkbox" id="cooking" name="interest" value="cooking"&gt;
-      &lt;label for="cooking"&gt;Cuisine&lt;/label&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-      &lt;input type="checkbox" id="other" name="interest" value="other"&gt;
-      &lt;label for="other"&gt;Autre&lt;/label&gt;
-      &lt;input type="text" id="otherValue" name="other"&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-      &lt;button type="submit"&gt;Envoyer le formulaire&lt;/button&gt;
-    &lt;/div&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;</pre>
-
-<pre class="brush: css">html {
+```
+
+{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}
+
+> **Note :** Si vous envoyez un formulaire avec une case à cocher dans un état indéterminé, le résultat obtenu est le même que si la case avait été décochée : aucune donnée n'est envoyée au serveur.
+
+## Validation
+
+Il n'y a pas de mécanisme de validation natif pour la valeur d'une case à cocher.
+
+## Exemples
+
+Dans l'exemple suivant, on développe l'exemple vu précédemment avec les groupes de cases à cocher : il y a cette fois plus d'options et un champ texte libre qui permet de saisir une autre valeur. Pour cela on utilise un bloc de code JavaScript et quelques règles CSS pour la mise en forme.
+
+```html
+<form>
+  <fieldset>
+  <legend>Veuillez sélectionner vos intérêts</legend>
+    <div>
+      <input type="checkbox" id="coding" name="interest" value="coding">
+      <label for="coding">Développement</label>
+    </div>
+    <div>
+      <input type="checkbox" id="music" name="interest" value="music">
+      <label for="music">Musique</label>
+    </div>
+    <div>
+      <input type="checkbox" id="art" name="interest" value="art">
+      <label for="art">Art</label>
+    </div>
+    <div>
+      <input type="checkbox" id="sports" name="interest" value="sports">
+      <label for="sports">Sports</label>
+    </div>
+    <div>
+      <input type="checkbox" id="cooking" name="interest" value="cooking">
+      <label for="cooking">Cuisine</label>
+    </div>
+    <div>
+      <input type="checkbox" id="other" name="interest" value="other">
+      <label for="other">Autre</label>
+      <input type="text" id="otherValue" name="other">
+    </div>
+    <div>
+      <button type="submit">Envoyer le formulaire</button>
+    </div>
+  </fieldset>
+</form>
+```
+
+```css
+html {
   font-family: sans-serif;
 }
 
@@ -259,11 +246,12 @@ legend {
 {
   display: inline-block;
 }
-</pre>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var otherCheckbox = document.querySelector('input[value="other"]');
+```js
+var otherCheckbox = document.querySelector('input[value="other"]');
 var otherText = document.querySelector('input[id="otherValue"]');
 otherText.style.visibility = 'hidden';
 
@@ -274,69 +262,56 @@ otherCheckbox.onchange = function() {
   } else {
     otherText.style.visibility = 'hidden';
   }
-};</pre>
+};
+```
 
-<p>{{EmbedLiveSample('Exemples', '100%', 300)}}</p>
+{{EmbedLiveSample('Exemples', '100%', 300)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la case à cocher.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{event("change")}} et {{event("input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td><code>checked</code></td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>checked</code> et <code>value</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui
+        représente la valeur de la case à cocher.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>{{event("change")}} et {{event("input")}}</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td><code>checked</code></td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td><code>checked</code> et <code>value</code></td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '&lt;input type="checkbox"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '&lt;input type="checkbox"&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                                | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '&lt;input type="checkbox"&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '&lt;input type="checkbox"&gt;')}}     | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-checkbox")}}</p>
+{{Compat("html.elements.input.input-checkbox")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément {{HTMLElement("input")}} et l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}.</li>
- <li>{{cssxref(":checked")}}</li>
- <li>{{cssxref("indeterminate")}}</li>
-</ul>
+- L'élément {{HTMLElement("input")}} et l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}.
+- {{cssxref(":checked")}}
+- {{cssxref("indeterminate")}}
diff --git a/files/fr/web/html/element/input/color/index.md b/files/fr/web/html/element/input/color/index.md
index 4fe3dd2319..6245b08820 100644
--- a/files/fr/web/html/element/input/color/index.md
+++ b/files/fr/web/html/element/input/color/index.md
@@ -9,41 +9,42 @@ tags:
   - Web
 translation_of: Web/HTML/Element/input/color
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Les éléments {{HTMLElement("input")}} de type <code><strong>"color"</strong></code> permettent de sélectionner une couleur via une interface (un sélecteur de couleur) ou en saisissant le code hexadécimal de la couleur au format <code>"#rrggbb"</code>. Ce format de valeur peut être utilisé en CSS.</p>
+Les éléments {{HTMLElement("input")}} de type **`"color"`** permettent de sélectionner une couleur via une interface (un sélecteur de couleur) ou en saisissant le code hexadécimal de la couleur au format `"#rrggbb"`. Ce format de valeur peut être utilisé en CSS.
 
-<p>L'apparence du contrôle de sélection des couleurs peut grandement varier d'un navigateur à un autre et d'un système d'exploitation à un autre. Pour certains navigateurs, seul un champ textuel sera affiché afin de saisir le code de la couleur (avec des mécanismes de validation vérifiant le format), pour d'autres, ce sera le sélecteur de couleur du système d'exploitation qui sera utilisé et pour d'autres encore, ce sera un sélecteur de couleur spécifique.</p>
+L'apparence du contrôle de sélection des couleurs peut grandement varier d'un navigateur à un autre et d'un système d'exploitation à un autre. Pour certains navigateurs, seul un champ textuel sera affiché afin de saisir le code de la couleur (avec des mécanismes de validation vérifiant le format), pour d'autres, ce sera le sélecteur de couleur du système d'exploitation qui sera utilisé et pour d'autres encore, ce sera un sélecteur de couleur spécifique.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>L'attribut {{htmlattrxref("value", "input")}} d'un élément <code>&lt;input type="color"&gt;</code> est une chaîne de caractères sur 7 caractères qui correspond au code de la couleur en représentation hexadécimale RGB. Autrement dit, le premier caractère est un croisillon (#) , les deux suivants indiquent la composante rouge (R) de la couleur, les deux suivants indiquent la couleur verte (G pour <em>Green</em> en anglais) et les deux suivants indiquent la composante bleue (B) de la couleur. La valeur respecte nécessairement ce format et n'est jamais vide.</p>
+L'attribut {{htmlattrxref("value", "input")}} d'un élément `<input type="color">` est une chaîne de caractères sur 7 caractères qui correspond au code de la couleur en représentation hexadécimale RGB. Autrement dit, le premier caractère est un croisillon (#) , les deux suivants indiquent la composante rouge (R) de la couleur, les deux suivants indiquent la couleur verte (G pour _Green_ en anglais) et les deux suivants indiquent la composante bleue (B) de la couleur. La valeur respecte nécessairement ce format et n'est jamais vide.
 
-<div class="note">
-<p><strong>Note :</strong> Si la valeur saisie n'est pas un code hexadécimal RGB d'une couleur opaque valide, c'est la valeur <code>"#000000"</code> (c'est-à-dire la couleur noire) qui sera utilisée. Il est notamment impossible d'utiliser les noms de couleurs CSS ou des fonctions CSS afin de définir cette valeur. Il faut garder à l'esprit que HTML et CSS sont deux langages séparés, définis par des spécifications distinctes. De plus, les couleurs avec un canal alpha ne sont pas prises en charges, utiliser un code avec une notation sur 9 caractères entraînera également l'utilisation de <code>"#000000"</code>.</p>
-</div>
+> **Note :** Si la valeur saisie n'est pas un code hexadécimal RGB d'une couleur opaque valide, c'est la valeur `"#000000"` (c'est-à-dire la couleur noire) qui sera utilisée. Il est notamment impossible d'utiliser les noms de couleurs CSS ou des fonctions CSS afin de définir cette valeur. Il faut garder à l'esprit que HTML et CSS sont deux langages séparés, définis par des spécifications distinctes. De plus, les couleurs avec un canal alpha ne sont pas prises en charges, utiliser un code avec une notation sur 9 caractères entraînera également l'utilisation de `"#000000"`.
 
-<h2 id="Utiliser_les_contrôles_de_saisie_des_couleurs">Utiliser les contrôles de saisie des couleurs</h2>
+## Utiliser les contrôles de saisie des couleurs
 
-<p>Les éléments <code>&lt;input type="color"&gt;</code> sont simples à utiliser (notamment en raison du faible nombre d'attributs qu'ils gèrent).</p>
+Les éléments `<input type="color">` sont simples à utiliser (notamment en raison du faible nombre d'attributs qu'ils gèrent).
 
-<h3 id="Fournir_une_couleur_par_défaut">Fournir une couleur par défaut</h3>
+### Fournir une couleur par défaut
 
-<p>Il est possible de créer un sélecteur de couleur qui emploie une valeur par défaut :</p>
+Il est possible de créer un sélecteur de couleur qui emploie une valeur par défaut :
 
-<pre class="brush: html">&lt;input type="color" value="#ff0000"&gt;</pre>
+```html
+<input type="color" value="#ff0000">
+```
 
-<p>{{EmbedLiveSample("Fournir_une_couleur_par_défaut", 700, 30)}}</p>
+{{EmbedLiveSample("Fournir_une_couleur_par_défaut", 700, 30)}}
 
-<p>Si aucune valeur n'est indiquée, c'est <code>"#000000"</code> qui sera utilisée par défaut (la couleur noire). Comme indiqué dans la note ci-avant, la valeur de cet attribut doit être de la forme <code>"#rrggbb"</code>. Pour les couleurs dans un autre format (couleurs nommées CSS ou couleurs calculées à l'aide des fonctions <code>rgb()</code> ou <code>rgba()</code>), il faudra les convertir au format hexadécimal avant de les utiliser pour <code>value</code>.</p>
+Si aucune valeur n'est indiquée, c'est `"#000000"` qui sera utilisée par défaut (la couleur noire). Comme indiqué dans la note ci-avant, la valeur de cet attribut doit être de la forme `"#rrggbb"`. Pour les couleurs dans un autre format (couleurs nommées CSS ou couleurs calculées à l'aide des fonctions `rgb()` ou `rgba()`), il faudra les convertir au format hexadécimal avant de les utiliser pour `value`.
 
-<h3 id="Détecter_le_changement_de_couleur">Détecter le changement de couleur</h3>
+### Détecter le changement de couleur
 
-<p>Comme pour les différents éléments {{HTMLElement("input")}}, deux évènements peuvent être utilisés afin de détecter une modification de la couleur : {{event("input")}} et {{event("change")}}. <code>input</code> est déclenché sur l'élément <code>&lt;input&gt;</code> à chaque fois que la couleur change. L'évènement <code>change</code> est déclenché lorsque l'utilisateur ferme le sélecteur de couleur. Dans tous les cas, il est possible de déterminer la nouvelle valeur de l'élément grâce à {{domxref("HTMLInputElement.value", "value")}}.</p>
+Comme pour les différents éléments {{HTMLElement("input")}}, deux évènements peuvent être utilisés afin de détecter une modification de la couleur : {{event("input")}} et {{event("change")}}. `input` est déclenché sur l'élément `<input>` à chaque fois que la couleur change. L'évènement `change` est déclenché lorsque l'utilisateur ferme le sélecteur de couleur. Dans tous les cas, il est possible de déterminer la nouvelle valeur de l'élément grâce à {{domxref("HTMLInputElement.value", "value")}}.
 
-<pre class="brush: js">colorPicker.addEventListener("input", updateFirst, false);
+```js
+colorPicker.addEventListener("input", updateFirst, false);
 colorPicker.addEventListener("change", watchColorPicker, false);
 
 function watchColorPicker(event) {
@@ -51,147 +52,144 @@ function watchColorPicker(event) {
     p.style.color = event.target.value;
   });
 }
-</pre>
+```
 
-<h3 id="Sélectionner_la_valeur">Sélectionner la valeur</h3>
+### Sélectionner la valeur
 
-<p>Si l'implémentation du navigateur n'affiche pas de sélecteur de couleur mais un champ texte, il est possible de sélectionner la valeur du texte avec la méthode {{domxref("HTMLInputElement.select", "select()")}}. Si le navigateur affiche un sélecteur de couleur, <code>select()</code> ne fera rien. Soyez conscient⋅e de ce comportement afin d'adapter votre code à ce cas.</p>
+Si l'implémentation du navigateur n'affiche pas de sélecteur de couleur mais un champ texte, il est possible de sélectionner la valeur du texte avec la méthode {{domxref("HTMLInputElement.select", "select()")}}. Si le navigateur affiche un sélecteur de couleur, `select()` ne fera rien. Soyez conscient⋅e de ce comportement afin d'adapter votre code à ce cas.
 
-<pre class="brush: js">colorWell.select();</pre>
+```js
+colorWell.select();
+```
 
-<h2 id="Validation">Validation</h2>
+## Validation
 
-<p>La valeur d'un tel champ est considérée invalide si l'interface utilisateur ne parvient pas à convertir la saisie de l'utilisateur en une notation hexadécimale sur sept caractères et en minuscules. Si c'est le cas, la pseudo-classe CSS {{cssxref(":invalid")}} sera appliquée à l'élément.</p>
+La valeur d'un tel champ est considérée invalide si l'interface utilisateur ne parvient pas à convertir la saisie de l'utilisateur en une notation hexadécimale sur sept caractères et en minuscules. Si c'est le cas, la pseudo-classe CSS {{cssxref(":invalid")}} sera appliquée à l'élément.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Créons un exemple qui utilise un sélecteur de couleur et les évènements {{event("change")}} et {{event("input")}} afin de choisir une nouvelle couleur et de l'appliquer sur chaque élément {{HTMLElement("p")}} du document.</p>
+Créons un exemple qui utilise un sélecteur de couleur et les évènements {{event("change")}} et {{event("input")}} afin de choisir une nouvelle couleur et de l'appliquer sur chaque élément {{HTMLElement("p")}} du document.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<p>Le fragment de code HTML utilisé est relativement simple. On utilise quelques paragraphes descriptifs ainsi qu'un élément {{HTMLElement("input")}} de type <code>"color"</code> dont l'identifiant est <code>"colorWell"</code> (c'est la valeur de cette couleur qu'on utilisera pour changer la couleur du texte des paragraphes).</p>
+Le fragment de code HTML utilisé est relativement simple. On utilise quelques paragraphes descriptifs ainsi qu'un élément {{HTMLElement("input")}} de type `"color"` dont l'identifiant est `"colorWell"` (c'est la valeur de cette couleur qu'on utilisera pour changer la couleur du texte des paragraphes).
 
-<pre class="brush: html">&lt;p&gt;Un exemple qui illustre l'utilisation de &lt;code&gt;&amp;lt;input type="color"&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+```html
+<p>Un exemple qui illustre l'utilisation de <code>&lt;input type="color"&gt;</code>.</p>
 
-&lt;label for="colorWell"&gt;Couleur :&lt;/label&gt;
-&lt;input type="color" value="#ff0000" id="colorWell"&gt;
+<label for="colorWell">Couleur :</label>
+<input type="color" value="#ff0000" id="colorWell">
 
-&lt;p&gt;Vous pouvez ici voir que la couleur du premier paragraphe changer
+<p>Vous pouvez ici voir que la couleur du premier paragraphe changer
    lorsqu'on ajuste la valeur dans le sélecteur. Pour cela, on
-   utilise l'évènement &lt;code&gt;input&lt;/code&gt;. Lorsqu'on ferme le
-   sélecteur, l'évènement &lt;code&gt;change&lt;/code&gt; est déclenché et on
-   applique la modification est appliquée à l'ensemble des paragraphes.&lt;/p&gt;</pre>
+   utilise l'évènement <code>input</code>. Lorsqu'on ferme le
+   sélecteur, l'évènement <code>change</code> est déclenché et on
+   applique la modification est appliquée à l'ensemble des paragraphes.</p>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<p>Tout d'abord, on établit certains variables : une pour la couleur du sélecteur et une autre couleur pour la couleur par défaut. On ajoute un gestionnaire {{event("load")}} afin de lancer les actions de démarrage lorsque la page est chargée.</p>
+Tout d'abord, on établit certains variables : une pour la couleur du sélecteur et une autre couleur pour la couleur par défaut. On ajoute un gestionnaire {{event("load")}} afin de lancer les actions de démarrage lorsque la page est chargée.
 
-<pre class="brush: js">var colorWell
+```js
+var colorWell
 var defaultColor = "#0000ff";
 
 window.addEventListener("load", startup, false);
-</pre>
+```
 
-<h4 id="Initialisation">Initialisation</h4>
+#### Initialisation
 
-<p>Lorsque la page est chargée, l'évènement <code>"load"</code> est déclenché et la fonction <code>startup()</code> est donc appelée :</p>
+Lorsque la page est chargée, l'évènement `"load"` est déclenché et la fonction `startup()` est donc appelée :
 
-<pre class="brush: js">function startup() {
+```js
+function startup() {
   colorWell = document.querySelector("#colorWell");
   colorWell.value = defaultColor;
   colorWell.addEventListener("input", updateFirst, false);
   colorWell.addEventListener("change", updateAll, false);
   colorWell.select();
 }
-</pre>
+```
 
-<p>Dans cette fonction, on utilise la variable <code>colorWell</code> déclarée plus haut et on remplit sa valeur avec la valeur par défaut (la valeur de <code>defaultColor</code>). Ensuite, on indique les gestionnaires d'évènements : {{event("input")}} appellera <code>updateFirst()</code> et {{event("change")}} appellera <code>updateAll()</code> qui seront détaillés ensuite.</p>
+Dans cette fonction, on utilise la variable `colorWell` déclarée plus haut et on remplit sa valeur avec la valeur par défaut (la valeur de `defaultColor`). Ensuite, on indique les gestionnaires d'évènements : {{event("input")}} appellera `updateFirst()` et {{event("change")}} appellera `updateAll()` qui seront détaillés ensuite.
 
-<p>Enfin, on appelle {{domxref("HTMLInputElement.select", "select()")}} afin de sélectionner le texte du champ si le contrôle est un champ texte.</p>
+Enfin, on appelle {{domxref("HTMLInputElement.select", "select()")}} afin de sélectionner le texte du champ si le contrôle est un champ texte.
 
-<h4 id="Réagir_suite_aux_modifications_de_couleurs">Réagir suite aux modifications de couleurs</h4>
+#### Réagir suite aux modifications de couleurs
 
-<p>On dispose de deux fonctions qui gèrent les modifications de couleurs. La fonction <code>updateFirst()</code> permet de répondre à l'évènement <code>input</code> et modifie la couleur du premier paragraphe dans le document en utilisant la nouvelle valeur saisie. Étant donné que les évènements <code>input</code> ont lieu à chaque fois qu'un ajustement est fait, cette fonction sera appelée sans cesse lorsque le sélecteur de couleur est utilisé.</p>
+On dispose de deux fonctions qui gèrent les modifications de couleurs. La fonction `updateFirst()` permet de répondre à l'évènement `input` et modifie la couleur du premier paragraphe dans le document en utilisant la nouvelle valeur saisie. Étant donné que les évènements `input` ont lieu à chaque fois qu'un ajustement est fait, cette fonction sera appelée sans cesse lorsque le sélecteur de couleur est utilisé.
 
-<pre class="brush: js">function updateFirst(event) {
+```js
+function updateFirst(event) {
   var p = document.querySelector("p");
 
   if (p) {
     p.style.color = event.target.value;
   }
-}</pre>
+}
+```
 
-<p>Lorsque le sélecteur est fermé, cela signifie que la valeur ne sera plus modifié avant une prochaine ouverture du sélecteur. Un évènement <code>change</code> est alors envoyé et cela déclenche alors l'appel de la fonction <code>updateAll()</code> :</p>
+Lorsque le sélecteur est fermé, cela signifie que la valeur ne sera plus modifié avant une prochaine ouverture du sélecteur. Un évènement `change` est alors envoyé et cela déclenche alors l'appel de la fonction `updateAll()` :
 
-<pre class="brush: js">function updateAll(event) {
+```js
+function updateAll(event) {
   document.querySelectorAll("p").forEach(function(p) {
     p.style.color = event.target.value;
   });
 }
-</pre>
+```
 
-<p>Cela permet de modifier la couleur de chaque bloc {{HTMLElement("p")}} du document afin que la couleur (cf. {{cssxref("color")}}) soit celle sélectionnée dans le contrôle. Pour récupérer cette valeur, on utilise l'objet {{domxref("Event.target", "event.target")}}.</p>
+Cela permet de modifier la couleur de chaque bloc {{HTMLElement("p")}} du document afin que la couleur (cf. {{cssxref("color")}}) soit celle sélectionnée dans le contrôle. Pour récupérer cette valeur, on utilise l'objet {{domxref("Event.target", "event.target")}}.
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 700, 200)}}</p>
+{{EmbedLiveSample("Exemples", 700, 200)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères sur sept caractères qui indique la couleur (cf. {{cssxref("&lt;color&gt;")}}) en notation hexadécimale (en minuscule).</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{event("change")}} et {{event("input")}}.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}} et {{htmlattrxref("list", "input")}}.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>list</code> et <code>value</code>.</td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères sur sept caractères qui indique la couleur (cf.
+        {{cssxref("&lt;color&gt;")}}) en notation hexadécimale (en
+        minuscule).
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>{{event("change")}} et {{event("input")}}.</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}} et
+        {{htmlattrxref("list", "input")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td><code>list</code> et <code>value</code>.</td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#color-state-(type=color)')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                | État                             | Commentaires         |
+| ---------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', '#color-state-(type=color)')}} | {{Spec2('HTML WHATWG')}} |                      |
+| {{SpecName('HTML5 W3C', 'forms.html#the-input-element')}} | {{Spec2('HTML5 W3C')}}     |                      |
+| {{SpecName('HTML4.01', 'interact/forms.html#h-17.4')}}     | {{Spec2('HTML4.01')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-color")}}</p>
+{{Compat("html.elements.input.input-color")}}
diff --git a/files/fr/web/html/element/input/date/index.md b/files/fr/web/html/element/input/date/index.md
index f8107d4b50..0ec7d916c7 100644
--- a/files/fr/web/html/element/input/date/index.md
+++ b/files/fr/web/html/element/input/date/index.md
@@ -9,154 +9,144 @@ tags:
   - Web
 translation_of: Web/HTML/Element/input/date
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <strong><code>date</code></strong> permettent de créer des champs permettant de saisir des dates (composées d'une année, d'un mois et d'un jour mais pas d'une heure , cf. <code><a href="/fr/docs/Web/HTML/Element/input/time">time</a></code>).</p>
+Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`date`** permettent de créer des champs permettant de saisir des dates (composées d'une année, d'un mois et d'un jour mais pas d'une heure , cf. [`time`](/fr/docs/Web/HTML/Element/input/time)).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}
 
-<p>L'apparence du contrôle affiché dépend du navigateur utilisé et la prise en charge de cette fonctionnalité est hétérogène (cf. la section {{anch("Compatibilité des navigateurs")}} pour plus de détails). Pour les navigateurs qui ne prennent pas en charge ce type d'élément <code>&lt;input&gt;</code>, c'est un simple <code><a href="/fr/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code> qui sera affiché.</p>
+L'apparence du contrôle affiché dépend du navigateur utilisé et la prise en charge de cette fonctionnalité est hétérogène (cf. la section {{anch("Compatibilité des navigateurs")}} pour plus de détails). Pour les navigateurs qui ne prennent pas en charge ce type d'élément `<input>`, c'est un simple [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text) qui sera affiché.
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Une chaîne de caractères qui représente la valeur de la date saisie dans le contrôle. Le format à respecter est décrit dans dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates">cette section de l'article sur les formats</a>. Il est possible de fournir une valeur par défaut en renseignant l'attribut {{htmlattrxref("value", "input")}} :</p>
+Une chaîne de caractères qui représente la valeur de la date saisie dans le contrôle. Le format à respecter est décrit dans dans [cette section de l'article sur les formats](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates). Il est possible de fournir une valeur par défaut en renseignant l'attribut {{htmlattrxref("value", "input")}} :
 
-<pre class="brush: html">&lt;input id="date" type="date" value="2017-06-01"&gt;</pre>
+```html
+<input id="date" type="date" value="2017-06-01">
+```
 
-<p>{{EmbedLiveSample('Valeur', 600, 40) }}</p>
+{{EmbedLiveSample('Valeur', 600, 40) }}
 
-<p>On notera que le format d'affichage est différent de la valeur réelle de l'attribut <code>value</code> — le format de la date affichée sera déterminé en fonction de la langue utilisée par le navigateur alors que la valeur de l'attribut <code>value</code> aura toujours la forme <code>yyyy-mm-dd</code> (c'est-à-dire les quatres chiffres de l'année, suivi d'un tiret, suivi des deux chiffres pour le mois, suivi d'un tiret puis des deux chiffres pour le jour).</p>
+On notera que le format d'affichage est différent de la valeur réelle de l'attribut `value` — le format de la date affichée sera déterminé en fonction de la langue utilisée par le navigateur alors que la valeur de l'attribut `value` aura toujours la forme `yyyy-mm-dd` (c'est-à-dire les quatres chiffres de l'année, suivi d'un tiret, suivi des deux chiffres pour le mois, suivi d'un tiret puis des deux chiffres pour le jour).
 
-<p>On peut également récupérer la valeur de la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}} :</p>
+On peut également récupérer la valeur de la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}} :
 
-<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]');
-dateControl.value = '2017-06-01';</pre>
+```js
+var dateControl = document.querySelector('input[type="date"]');
+dateControl.value = '2017-06-01';
+```
 
-<h2 id="Utiliser_les_contrôles_de_saisie_de_date">Utiliser les contrôles de saisie de date</h2>
+## Utiliser les contrôles de saisie de date
 
-<p>Les contrôles de date semblent pratiques : ils fournissent une interface utilisateur simple afin de sélectionner des dates et normalisent la donnée saisie dans un format unique pour l'envoyer au serveur, quelle que soit la locale de l'utilisateur. Malheureusement, il y a certains problèmes de prise en charge par les navigateurs pour <code>&lt;input type="date"&gt;</code>.</p>
+Les contrôles de date semblent pratiques : ils fournissent une interface utilisateur simple afin de sélectionner des dates et normalisent la donnée saisie dans un format unique pour l'envoyer au serveur, quelle que soit la locale de l'utilisateur. Malheureusement, il y a certains problèmes de prise en charge par les navigateurs pour `<input type="date">`.
 
-<p>Nous verrons ici différents cas d'utilisation de <code>&lt;input type="date"&gt;</code>, simples et complexes. Puis nous verrons comment parer aux problèmes de support des navigateurs.</p>
+Nous verrons ici différents cas d'utilisation de `<input type="date">`, simples et complexes. Puis nous verrons comment parer aux problèmes de support des navigateurs.
 
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+## Attributs supplémentaires
 
-<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"date"</code> gèrent les attributs suivants :</p>
+En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"date"` gèrent les attributs suivants :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("max")}}</code></td>
-   <td>La date la plus avancée qui peut être saisie.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("min")}}</code></td>
-   <td>La date la plus reculée qui peut être saisie.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("step")}}</code></td>
-   <td>Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation.</td>
-  </tr>
- </tbody>
-</table>
+| Attribut               | Description                                                                                                                                        |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("max")}}` | La date la plus avancée qui peut être saisie.                                                                                                      |
+| `{{anch("min")}}` | La date la plus reculée qui peut être saisie.                                                                                                      |
+| `{{anch("step")}}` | Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation. |
 
-<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+### {{htmlattrdef("max")}}
 
-<p>La date la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>max</code> n'est pas une chaîne de caractères qui suit le format <code>yyyy-MM-dd</code>, il n'y aura pas de valeur maximale.</p>
+La date la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `max` n'est pas une chaîne de caractères qui suit le format `yyyy-MM-dd`, il n'y aura pas de valeur maximale.
 
-<p>La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p>
+La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut `min`.
 
-<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+### {{htmlattrdef("min")}}
 
-<p>La date minimale qui peut être saisie dans le contrôle. Toute date saisie antérieure à celle-ci ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>min</code> n'est pas une chaîne de caractères qui suit le format <code>yyyy-MM-dd</code>, il n'y aura pas de valeur minimale.</p>
+La date minimale qui peut être saisie dans le contrôle. Toute date saisie antérieure à celle-ci ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `min` n'est pas une chaîne de caractères qui suit le format `yyyy-MM-dd`, il n'y aura pas de valeur minimale.
 
-<p>La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut <code>max</code>.</p>
+La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut `max`.
 
-<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+### {{htmlattrdef("step")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}
 
-<p>Pour les champs <code>date</code>, la valeur de <code>step</code> est exprimée en jours avec un facteur de multiplication de 86 400 000 (soit le nombre de millisecondes en une journée). La valeur par défaut de <code>step</code> est 1.</p>
+Pour les champs `date`, la valeur de `step` est exprimée en jours avec un facteur de multiplication de 86 400 000 (soit le nombre de millisecondes en une journée). La valeur par défaut de `step` est 1.
 
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Utiliser <code>any</code> comme valeur pour <code>step</code> produira le même effet que la valeur <code>1</code> pour les champs <code>date</code>.</p>
-</div>
+> **Note :** Utiliser `any` comme valeur pour `step` produira le même effet que la valeur `1` pour les champs `date`.
 
-<h2 id="Utilisation_des_contrôles_de_saisie_des_dates">Utilisation des contrôles de saisie des dates</h2>
+## Utilisation des contrôles de saisie des dates
 
-<p>Les champs date paraissent pratiques de prime abord : ils fournissent une interface utilisateur simple qui permet de sélectionner des dates et normalisent le format des données envoyées au serveur quelle que soit la locale de l'utilisateur. Toutefois, il existe certains problèmes avec <code>&lt;input type="date"&gt;</code> en raison de la prise en charge limitée des navigateurs.</p>
+Les champs date paraissent pratiques de prime abord : ils fournissent une interface utilisateur simple qui permet de sélectionner des dates et normalisent le format des données envoyées au serveur quelle que soit la locale de l'utilisateur. Toutefois, il existe certains problèmes avec `<input type="date">` en raison de la prise en charge limitée des navigateurs.
 
-<p>Dans les exemples qui suivent, nous verrons comment utiliser <code>&lt;input type="date"&gt;</code> dans des cas simples et complexes en ajoutant des conseils quant à la prise en charge des navigateurs (en espérant que celle-ci s'améliore au fur et à mesure).</p>
+Dans les exemples qui suivent, nous verrons comment utiliser `<input type="date">` dans des cas simples et complexes en ajoutant des conseils quant à la prise en charge des navigateurs (en espérant que celle-ci s'améliore au fur et à mesure).
 
-<h3 id="Utilisation_simple">Utilisation simple</h3>
+### Utilisation simple
 
-<p>Dans son expression la plus simple <code>&lt;input type="date"&gt;</code> s'utilise avec un élément <code>&lt;input&gt;</code> et un élément {{htmlelement("label")}} :</p>
+Dans son expression la plus simple `<input type="date">` s'utilise avec un élément `<input>` et un élément {{htmlelement("label")}} :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="bday"&gt;Veuillez saisir votre date de naissance :&lt;/label&gt;
-    &lt;input type="date" id="bday" name="bday"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <label for="bday">Veuillez saisir votre date de naissance :</label>
+    <input type="date" id="bday" name="bday">
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p>
+{{EmbedLiveSample('Utilisation_simple', 600, 40)}}
 
-<h3 id="Paramétrer_une_date_maximale_et_une_date_minimale">Paramétrer une date maximale et une date minimale</h3>
+### Paramétrer une date maximale et une date minimale
 
-<p>On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre les dates qui peuvent être saisies par l'utilisateur. Dans l'exemple suivant, on indique un date minimum au premier avril 2017 (<code>2017-04-01</code>) et une date maximale au 30 avril 2017 (<code>2017-04-30</code>) :</p>
+On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre les dates qui peuvent être saisies par l'utilisateur. Dans l'exemple suivant, on indique un date minimum au premier avril 2017 (`2017-04-01`) et une date maximale au 30 avril 2017 (`2017-04-30`) :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="party"&gt;Veuillez choisir la meilleure date pour la soirée :&lt;/label&gt;
-    &lt;input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <label for="party">Veuillez choisir la meilleure date pour la soirée :</label>
+    <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30">
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample('Paramétrer_une_date_maximale_et_une_date_minimale', 600, 40)}}</p>
+{{EmbedLiveSample('Paramétrer_une_date_maximale_et_une_date_minimale', 600, 40)}}
 
-<p>On ne peut donc ici que sélectionner une date en avril 2017. Seule la partie du contrôle consacrée aux jours sera éditable et on ne pourra pas sélectionner d'autres mois ou années..</p>
+On ne peut donc ici que sélectionner une date en avril 2017. Seule la partie du contrôle consacrée aux jours sera éditable et on ne pourra pas sélectionner d'autres mois ou années..
 
-<div class="note">
-<p><strong>Note :</strong> On devrait également pouvoir utiliser l'attribut {{htmlattrxref("step", "input")}} afin de faire varier le nombre de jours pour l'incrément de la date (par exemple afin de ne pouvoir sélectionner que les samedis). Cependant, cette fonctionnalité ne semble être présente dans aucune implémentation au moment où nous écrivons ces lignes.</p>
-</div>
+> **Note :** On devrait également pouvoir utiliser l'attribut {{htmlattrxref("step", "input")}} afin de faire varier le nombre de jours pour l'incrément de la date (par exemple afin de ne pouvoir sélectionner que les samedis). Cependant, cette fonctionnalité ne semble être présente dans aucune implémentation au moment où nous écrivons ces lignes.
 
-<h3 id="Contrôler_la_taille_du_champ_de_saisie">Contrôler la taille du champ de saisie</h3>
+### Contrôler la taille du champ de saisie
 
-<p><code>&lt;input type="date"&gt;</code> ne permet pas d'utiliser des attributs de dimensionnement tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser <a href="/fr/docs/Web/CSS">CSS</a> pour adresser ces aspects de mise en forme.</p>
+`<input type="date">` ne permet pas d'utiliser des attributs de dimensionnement tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser [CSS](/fr/docs/Web/CSS) pour adresser ces aspects de mise en forme.
 
-<h2 id="Validation">Validation</h2>
+## Validation
 
-<p>Par défaut <code>&lt;input type="date"&gt;</code> n'applique pas de validation particulière aux valeurs saisies. Les interfaces utilisateur ne permettent généralement pas de saisir une valeur qui n'est pas une date ou qui est une date invalide (par exemple un 32 avril 2017).</p>
+Par défaut `<input type="date">` n'applique pas de validation particulière aux valeurs saisies. Les interfaces utilisateur ne permettent généralement pas de saisir une valeur qui n'est pas une date ou qui est une date invalide (par exemple un 32 avril 2017).
 
-<p>Si on utilise les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre les dates possibles, les navigateurs qui prennent en charge cette fonctionnalité afficheront une erreur si la valeur saisie est en dehors de cet intervalle.</p>
+Si on utilise les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre les dates possibles, les navigateurs qui prennent en charge cette fonctionnalité afficheront une erreur si la valeur saisie est en dehors de cet intervalle.
 
-<p>De plus, si l'attribut {{htmlattrxref("required", "input")}} est actif, il sera obligatoire de saisir ce champ. Une erreur sera affichée si on essaie d'envoyer le formulaire avec un tel champ vide.</p>
+De plus, si l'attribut {{htmlattrxref("required", "input")}} est actif, il sera obligatoire de saisir ce champ. Une erreur sera affichée si on essaie d'envoyer le formulaire avec un tel champ vide.
 
-<p>Prenons un exemple où la date est contrainte entre deux dates et que le champ est obligatoire :</p>
+Prenons un exemple où la date est contrainte entre deux dates et que le champ est obligatoire :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="party"&gt;Sélectionner la meilleure date (entre le premier et le 20 avril) :&lt;/label&gt;
-    &lt;input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;input type="submit"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <label for="party">Sélectionner la meilleure date (entre le premier et le 20 avril) :</label>
+    <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit">
+  </div>
+</form>
+```
 
-<p>Si on essaie de soumettre le formulaire avec une date incomplète (ou en dehors de l'intervalle indiqué), le message affichera une erreur. Vous pouvez essayer ici :</p>
+Si on essaie de soumettre le formulaire avec une date incomplète (ou en dehors de l'intervalle indiqué), le message affichera une erreur. Vous pouvez essayer ici :
 
-<p>{{EmbedLiveSample('Validation', 600, 100)}}</p>
+{{EmbedLiveSample('Validation', 600, 100)}}
 
-<p>Voici la feuille de style utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme un indicateur selon que la valeur est valide ou non. On place cet indicateur dans un élément {{htmlelement("span")}} séparé car pour Chrome, le contenu généré dans les pseudo-classes est intégré dans le contrôle du formulaire et ne peut être mis en forme ou affiché correctement.</p>
+Voici la feuille de style utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme un indicateur selon que la valeur est valide ou non. On place cet indicateur dans un élément {{htmlelement("span")}} séparé car pour Chrome, le contenu généré dans les pseudo-classes est intégré dans le contrôle du formulaire et ne peut être mis en forme ou affiché correctement.
 
-<pre class="brush: css">div {
+```css
+div {
   margin-bottom: 10px;
   display: flex;
   align-items: center;
@@ -175,46 +165,46 @@ input:invalid+span:after {
 input:valid+span:after {
   content: '✓';
   padding-left: 5px;
-}</pre>
+}
+```
 
-<div class="warning">
-<p><strong>Attention :</strong> La validation des valeurs du formulaire HTML par le client ne remplace pas la validation côté serveur afin de vérifier que le format est bien celui attendu. Il est tout à fait possible de modifier le code HTML afin d'outrepasser ces mécanismes de validation ou d'envoyer directement des données au serveur. Il est donc nécessaire de valider les données lorsque celles-ci parviennent au serveur afin d'éviter les effets indésirables entraînés par l'injection de données mal formatées ou malveillantes.</p>
-</div>
+> **Attention :** La validation des valeurs du formulaire HTML par le client ne remplace pas la validation côté serveur afin de vérifier que le format est bien celui attendu. Il est tout à fait possible de modifier le code HTML afin d'outrepasser ces mécanismes de validation ou d'envoyer directement des données au serveur. Il est donc nécessaire de valider les données lorsque celles-ci parviennent au serveur afin d'éviter les effets indésirables entraînés par l'injection de données mal formatées ou malveillantes.
 
-<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2>
+## Gérer la prise en charge des navigateurs
 
-<p>Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est l'hétérogénéité de la prise en charge par les différents navigateurs.</p>
+Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est l'hétérogénéité de la prise en charge par les différents navigateurs.
 
-<p>Les navigateurs qui ne prennent pas en charge ces contrôles utiliseront à la place des champs texte. Toutefois, cette solution de contournement entraîne deux problèmes : le premier concerne l'homogénéité de l'interface utilisateur (le contrôle affiché ne sera pas le même) et le second concerne la gestion des données.</p>
+Les navigateurs qui ne prennent pas en charge ces contrôles utiliseront à la place des champs texte. Toutefois, cette solution de contournement entraîne deux problèmes : le premier concerne l'homogénéité de l'interface utilisateur (le contrôle affiché ne sera pas le même) et le second concerne la gestion des données.
 
-<p>C'est sur ce second point qu'il y a le plus de risques. Comme nous l'avons mentionné avant, un champ date est toujours normalisé sous la forme <code>yyyy-mm-dd</code> (les chiffres de l'année, un tiret, les chiffres du mois, un tiret, les chiffres du jour). Toutefois, pour un champ texte, les navigateurs ne reconnaissant pas le format dans lequel la date doit être écrite. Or, selon les langues, régions, pays, les personnes écrivent les dates de différentes façons. On pourrait ainsi avoir des dates écrites comme :</p>
+C'est sur ce second point qu'il y a le plus de risques. Comme nous l'avons mentionné avant, un champ date est toujours normalisé sous la forme `yyyy-mm-dd` (les chiffres de l'année, un tiret, les chiffres du mois, un tiret, les chiffres du jour). Toutefois, pour un champ texte, les navigateurs ne reconnaissant pas le format dans lequel la date doit être écrite. Or, selon les langues, régions, pays, les personnes écrivent les dates de différentes façons. On pourrait ainsi avoir des dates écrites comme :
 
-<ul>
- <li><code>ddmmyyyy</code></li>
- <li><code>dd/mm/yyyy</code></li>
- <li><code>mm/dd/yyyy</code></li>
- <li><code>dd-mm-yyyy</code></li>
- <li><code>mm-dd-yyyy</code></li>
-</ul>
+- `ddmmyyyy`
+- `dd/mm/yyyy`
+- `mm/dd/yyyy`
+- `dd-mm-yyyy`
+- `mm-dd-yyyy`
 
-<p>Une méthode permettant de parer à cette éventualité est d'utiliser l'attribut {{htmlattrxref("pattern", "input")}}. Bien que celui-ci ne soit pas utilisé pour les contrôles de saisie des dates, il peut être utilisé pour le champ texte. Voici un exemple que vous pouvez consulter dans un navigateur qui ne prend pas en charge cette fonctionnalité :</p>
+Une méthode permettant de parer à cette éventualité est d'utiliser l'attribut {{htmlattrxref("pattern", "input")}}. Bien que celui-ci ne soit pas utilisé pour les contrôles de saisie des dates, il peut être utilisé pour le champ texte. Voici un exemple que vous pouvez consulter dans un navigateur qui ne prend pas en charge cette fonctionnalité :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="bday"&gt;Veuillez saisir votre date de naissance :&lt;/label&gt;
-    &lt;input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;input type="submit"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <label for="bday">Veuillez saisir votre date de naissance :</label>
+    <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}">
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit">
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p>
+{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}
 
-<p>Si vous tentez d'envoyer ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en évidence la valeur invalide si la valeur saisie ne correspond pas au motif <code>nnnn-nn-nn</code> (avec <code>n</code> un chiffre entre 0 et 9). Bien entendu, cela n'empêche pas de saisir des dates invalides ou mal formatées (par exemple avec le motif <code>yyyy-dd-mm</code> alors qu'on souhaiterait avoir <code>yyyy-mm-dd</code>). Il reste donc un problème.</p>
+Si vous tentez d'envoyer ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en évidence la valeur invalide si la valeur saisie ne correspond pas au motif `nnnn-nn-nn` (avec `n` un chiffre entre 0 et 9). Bien entendu, cela n'empêche pas de saisir des dates invalides ou mal formatées (par exemple avec le motif `yyyy-dd-mm` alors qu'on souhaiterait avoir `yyyy-mm-dd`). Il reste donc un problème.
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   margin-bottom: 10px;
 }
 
@@ -236,59 +226,63 @@ input:valid + span:after {
   content: '✓';
   position: absolute;
   right: -18px;
-}</pre>
-
-<p>C'est pour cela que la meilleure solution consiste à avoir trois champs de saisie distincts à destination de l'utilisateur : un pour saisir les jours, le deuxième pour les mois et un troisième pour l'année (chacun avec un élément ({{htmlelement("select")}}). On peut également opter pour l'utilisation d'un bibliothèque JavaScript telle que <a href="https://jqueryui.com/datepicker/">le sélecteur de date jQuery (jQuery date picker)</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on crée deux éléments d'interface utilisateur afin de choisir une date : le premier qui utilise un sélecteur natif <code>&lt;input type="date"&gt;</code> et un second qui utilise trois éléments {{htmlelement("select")}}  qui permettra de choisir une date pour les anciens navigateurs qui ne prendraient pas en charge le contrôle natif.</p>
-
-<p>{{EmbedLiveSample('Exemples', 600, 100)}}</p>
-
-<p>Voici le code HTML utilisé :</p>
-
-<pre class="brush: html">&lt;form&gt;
-    &lt;div class="nativeDatePicker"&gt;
-      &lt;label for="bday"&gt;Veuillez saisir votre date de naissance :&lt;/label&gt;
-      &lt;input type="date" id="bday" name="bday"&gt;
-      &lt;span class="validity"&gt;&lt;/span&gt;
-    &lt;/div&gt;
-    &lt;p class="fallbackLabel"&gt;Veuillez saisir votre date de naissance :&lt;/p&gt;
-    &lt;div class="fallbackDatePicker"&gt;
-      &lt;span&gt;
-        &lt;label for="day"&gt;Jour :&lt;/label&gt;
-        &lt;select id="day" name="day"&gt;
-        &lt;/select&gt;
-      &lt;/span&gt;
-      &lt;span&gt;
-        &lt;label for="month"&gt;Mois :&lt;/label&gt;
-        &lt;select id="month" name="month"&gt;
-          &lt;option selected&gt;Janvier&lt;/option&gt;
-          &lt;option&gt;Février&lt;/option&gt;
-          &lt;option&gt;Mars&lt;/option&gt;
-          &lt;option&gt;Avril&lt;/option&gt;
-          &lt;option&gt;Mai&lt;/option&gt;
-          &lt;option&gt;Juin&lt;/option&gt;
-          &lt;option&gt;Juillet&lt;/option&gt;
-          &lt;option&gt;Août&lt;/option&gt;
-          &lt;option&gt;Septembre&lt;/option&gt;
-          &lt;option&gt;Octobre&lt;/option&gt;
-          &lt;option&gt;Novembre&lt;/option&gt;
-          &lt;option&gt;Décembre&lt;/option&gt;
-        &lt;/select&gt;
-      &lt;/span&gt;
-      &lt;span&gt;
-        &lt;label for="year"&gt;Année :&lt;/label&gt;
-        &lt;select id="year" name="year"&gt;
-        &lt;/select&gt;
-      &lt;/span&gt;
-    &lt;/div&gt;
-&lt;/form&gt;</pre>
-
-<p>Les mois sont écrits « en dur » (ce sont toujours les mêmes) alors que les valeurs pour les jours et les années sont générées dynamiquement en fonction du mois et de l'année sélectionnées (voir les commentaires ci-après qui expliquent le détail des fonctions).</p>
-
-<pre class="brush: css hidden">input:invalid+span:after {
+}
+```
+
+C'est pour cela que la meilleure solution consiste à avoir trois champs de saisie distincts à destination de l'utilisateur : un pour saisir les jours, le deuxième pour les mois et un troisième pour l'année (chacun avec un élément ({{htmlelement("select")}}). On peut également opter pour l'utilisation d'un bibliothèque JavaScript telle que [le sélecteur de date jQuery (jQuery date picker)](https://jqueryui.com/datepicker/).
+
+## Exemples
+
+Dans l'exemple qui suit, on crée deux éléments d'interface utilisateur afin de choisir une date : le premier qui utilise un sélecteur natif `<input type="date">` et un second qui utilise trois éléments {{htmlelement("select")}}  qui permettra de choisir une date pour les anciens navigateurs qui ne prendraient pas en charge le contrôle natif.
+
+{{EmbedLiveSample('Exemples', 600, 100)}}
+
+Voici le code HTML utilisé :
+
+```html
+<form>
+    <div class="nativeDatePicker">
+      <label for="bday">Veuillez saisir votre date de naissance :</label>
+      <input type="date" id="bday" name="bday">
+      <span class="validity"></span>
+    </div>
+    <p class="fallbackLabel">Veuillez saisir votre date de naissance :</p>
+    <div class="fallbackDatePicker">
+      <span>
+        <label for="day">Jour :</label>
+        <select id="day" name="day">
+        </select>
+      </span>
+      <span>
+        <label for="month">Mois :</label>
+        <select id="month" name="month">
+          <option selected>Janvier</option>
+          <option>Février</option>
+          <option>Mars</option>
+          <option>Avril</option>
+          <option>Mai</option>
+          <option>Juin</option>
+          <option>Juillet</option>
+          <option>Août</option>
+          <option>Septembre</option>
+          <option>Octobre</option>
+          <option>Novembre</option>
+          <option>Décembre</option>
+        </select>
+      </span>
+      <span>
+        <label for="year">Année :</label>
+        <select id="year" name="year">
+        </select>
+      </span>
+    </div>
+</form>
+```
+
+Les mois sont écrits « en dur » (ce sont toujours les mêmes) alors que les valeurs pour les jours et les années sont générées dynamiquement en fonction du mois et de l'année sélectionnées (voir les commentaires ci-après qui expliquent le détail des fonctions).
+
+```css hidden
+input:invalid+span:after {
   content: '✖';
   padding-left: 5px;
 }
@@ -296,11 +290,13 @@ input:valid + span:after {
 input:valid+span:after {
   content: '✓';
   padding-left: 5px;
-}</pre>
+}
+```
 
-<p>Une autre partie intéressante est celle où on détecte si le navigateur prend charge la fonctionnalité native <code>&lt;input type="date"&gt;</code>. Pour cela, on crée un nouvelle élément {{htmlelement("input")}} et on change son type en <code>date</code> puis ensuite, on vérifie immédiatement la valeur de son type : pour les navigateurs qui ne prennent pas en charge l'élément natif, ils renverront la valeur <code>text</code> car l'élément natif aura été « converti ». Dans ce cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui qui contient les éléments {{htmlelement("select")}}).</p>
+Une autre partie intéressante est celle où on détecte si le navigateur prend charge la fonctionnalité native `<input type="date">`. Pour cela, on crée un nouvelle élément {{htmlelement("input")}} et on change son type en `date` puis ensuite, on vérifie immédiatement la valeur de son type : pour les navigateurs qui ne prennent pas en charge l'élément natif, ils renverront la valeur `text` car l'élément natif aura été « converti ». Dans ce cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui qui contient les éléments {{htmlelement("select")}}).
 
-<pre class="brush: js">// On définit les différentes variables
+```js
+// On définit les différentes variables
 var nativePicker = document.querySelector('.nativeDatePicker');
 var fallbackPicker = document.querySelector('.fallbackDatePicker');
 var fallbackLabel = document.querySelector('.fallbackLabel');
@@ -313,15 +309,15 @@ var daySelect = document.querySelector('#day');
 fallbackPicker.style.display = 'none';
 fallbackLabel.style.display = 'none';
 
-// On teste si l'élément &lt;input type="date"&gt;
-// se transforme en &lt;input type="text"&gt;
+// On teste si l'élément <input type="date">
+// se transforme en <input type="text">
 var test = document.createElement('input');
 test.type = 'date';
 // Si c'est le cas, cela signifie que l'élément
 // n'est pas pris en charge et
 if(test.type === 'text') {
   // On masque le sélecteur natif et on affiche
-  // le sélecteur avec les &lt;select&gt;
+  // le sélecteur avec les <select>
   nativePicker.style.display = 'none';
   fallbackPicker.style.display = 'block';
   fallbackLabel.style.display = 'block';
@@ -333,8 +329,8 @@ if(test.type === 'text') {
 }
 
 function populateDays(month) {
-  // On supprime les éléments &lt;option&gt; pour l'élément
-  // &lt;select&gt; des jours afin de pouvoir ajouter les prochains
+  // On supprime les éléments <option> pour l'élément
+  // <select> des jours afin de pouvoir ajouter les prochains
   while(daySelect.firstChild){
     daySelect.removeChild(daySelect.firstChild);
   }
@@ -356,9 +352,9 @@ function populateDays(month) {
   }
 
   // on ajoute le bon nombre de jours dans autant
-  // d'éléments &lt;option&gt; pour l'élément &lt;select&gt;
+  // d'éléments <option> pour l'élément <select>
   // pour la journée
-  for(i = 1; i &lt;= dayNum; i++) {
+  for(i = 1; i <= dayNum; i++) {
     var option = document.createElement('option');
     option.textContent = i;
     daySelect.appendChild(option);
@@ -393,9 +389,9 @@ function populateYears() {
   var year = date.getFullYear();
 
   // On affiche l'année courante et les 100 années
-  // précédentes pour l'élément &lt;select&gt; destiné à
+  // précédentes pour l'élément <select> destiné à
   // stocker l'année
-  for(var i = 0; i &lt;= 100; i++) {
+  for(var i = 0; i <= 100; i++) {
     var option = document.createElement('option');
     option.textContent = year-i;
     yearSelect.appendChild(option);
@@ -420,71 +416,66 @@ var previousDay;
 // est utilisée cette valeur)
 daySelect.onchange = function() {
   previousDay = daySelect.value;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p>
-</div>
+> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente une date ou qui est vide.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{event("change")}} et {{event("input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et  {{htmlattrxref("step", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui
+        représente une date ou qui est vide.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>{{event("change")}} et {{event("input")}}</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}},
+        {{htmlattrxref("list", "input")}},
+        {{htmlattrxref("readonly", "input")}} et 
+        {{htmlattrxref("step", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td>
+        <code>list</code>, <code>value</code>, <code>valueAsDate</code>,
+        <code>valueAsNumber</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}},
+        {{domxref("HTMLInputElement.stepDown", "stepDown()")}},
+        {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '&lt;input type="date"&gt;')}}     | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-date")}}</p>
+{{Compat("html.elements.input.input-date")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément générique {{HTMLElement("input")}} et l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}</li>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#date">Un tutoriel sur les sélecteurs de date et d'heure</a></li>
- <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li>
-</ul>
+- L'élément générique {{HTMLElement("input")}} et l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}
+- [Un tutoriel sur les sélecteurs de date et d'heure](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#date)
+- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML)
diff --git a/files/fr/web/html/element/input/datetime-local/index.md b/files/fr/web/html/element/input/datetime-local/index.md
index 23f0f7da9a..b5fc4e9260 100644
--- a/files/fr/web/html/element/input/datetime-local/index.md
+++ b/files/fr/web/html/element/input/datetime-local/index.md
@@ -10,189 +10,178 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/datetime-local
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"datetime-local"</code></strong> permettent de créer des champs destinés à saisir simplement une date (définie par une année, un mois, et un jour) et une heure (définie par une heure et une minute). Il n'y a pas de secondes dans ce contrôle.</p>
+Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`"datetime-local"`** permettent de créer des champs destinés à saisir simplement une date (définie par une année, un mois, et un jour) et une heure (définie par une heure et une minute). Il n'y a pas de secondes dans ce contrôle.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}
 
-<p>L'interface utilisateur du contrôle varie selon les navigateurs. La prise en charge de cette fonctionnalité est hétérogène : Chrome/Opera et Edge l'implémentent pour les navigateurs de bureau et la plupart des navigateurs mobiles l'implémentent. Pour les navigateurs qui n'implémentent pas cette fonctionnalité, le contrôle utilisé est celui de <code><a href="/fr/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code>.</p>
+L'interface utilisateur du contrôle varie selon les navigateurs. La prise en charge de cette fonctionnalité est hétérogène : Chrome/Opera et Edge l'implémentent pour les navigateurs de bureau et la plupart des navigateurs mobiles l'implémentent. Pour les navigateurs qui n'implémentent pas cette fonctionnalité, le contrôle utilisé est celui de [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text).
 
-<p>Les secondes ne sont pas prises en charge.</p>
+Les secondes ne sont pas prises en charge.
 
-<p>Le contrôle est spécifié afin de pouvoir représenter une heure et une date locales et <em>pas nécessairement la date et l'heure locale de l'utilisateur</em>. Autrement dit, une implémentation devrait autoriser toute combinaison valide (d'année / mois / jour / heure / minutes) même si cette combinaison n'est pas valide pour le fuseau horaire de l'utilisateur (par exemple pour les fuseaux horaires qui ne gèrent pas les heures d'été). Certains navigateurs mobiles (sur iOS par exemple) n'implémentent pas cette règle correctement.</p>
+Le contrôle est spécifié afin de pouvoir représenter une heure et une date locales et _pas nécessairement la date et l'heure locale de l'utilisateur_. Autrement dit, une implémentation devrait autoriser toute combinaison valide (d'année / mois / jour / heure / minutes) même si cette combinaison n'est pas valide pour le fuseau horaire de l'utilisateur (par exemple pour les fuseaux horaires qui ne gèrent pas les heures d'été). Certains navigateurs mobiles (sur iOS par exemple) n'implémentent pas cette règle correctement.
 
-<p>En raison du faible support pour <code>datetime-local</code> et des variations dans ses implémentations, mieux vaudra peut-être encore (juillet 2019) utiliser un <em>framework</em> ou une bibliothèque pour une telle saisie. Une autre option consiste à séparer les champs pour la date (<code>type="date"</code>) et pour l'heure (<code>type="heure"</code>) qui sont mieux pris en charge.</p>
+En raison du faible support pour `datetime-local` et des variations dans ses implémentations, mieux vaudra peut-être encore (juillet 2019) utiliser un _framework_ ou une bibliothèque pour une telle saisie. Une autre option consiste à séparer les champs pour la date (`type="date"`) et pour l'heure (`type="heure"`) qui sont mieux pris en charge.
 
-<p>Certains navigateurs pourront utiliser un contrôle avec un texte simple et vérifier que la valeur date/heure est correcte avant de l'envoyer au serveur. Toutefois, ce contrôle ayant lieu côté client, vous devrez nécessairement vérifier le bon format de la donnée côté serveur.</p>
+Certains navigateurs pourront utiliser un contrôle avec un texte simple et vérifier que la valeur date/heure est correcte avant de l'envoyer au serveur. Toutefois, ce contrôle ayant lieu côté client, vous devrez nécessairement vérifier le bon format de la donnée côté serveur.
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la date saisie dans le contrôle. Le format utilisable est décrit dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales">cette section de l'article sur les formats</a>. Il est possible d'indiquer une date par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :</p>
+Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la date saisie dans le contrôle. Le format utilisable est décrit dans [cette section de l'article sur les formats](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales). Il est possible d'indiquer une date par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :
 
-<pre class="brush: html">&lt;label for="party"&gt;Veuillez saisir une date et une heure pour la fête :&lt;/label&gt;
-&lt;input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"&gt;</pre>
+```html
+<label for="party">Veuillez saisir une date et une heure pour la fête :</label>
+<input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30">
+```
 
-<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p>
+{{EmbedLiveSample('Valeur', 600, 60)}}
 
-<p>On notera ici que le format de la date affichée n'est pas celui utilisé pour écrire la valeur de l'attribut <code>value</code>. Le format d'affichage de la date sera choisi en fonction de la locale du système d'exploitation de l'utilisateur. En revanche, l'attribut <code>value</code> sera toujours formaté de la façon suivante : <code>yyyy-MM-ddThh:mm</code>. Lorsque la valeur est envoyée au serveur, elle aura donc ce format : <code>partydate=2017-06-01T08:30</code>.</p>
+On notera ici que le format de la date affichée n'est pas celui utilisé pour écrire la valeur de l'attribut `value`. Le format d'affichage de la date sera choisi en fonction de la locale du système d'exploitation de l'utilisateur. En revanche, l'attribut `value` sera toujours formaté de la façon suivante : `yyyy-MM-ddThh:mm`. Lorsque la valeur est envoyée au serveur, elle aura donc ce format : `partydate=2017-06-01T08:30`.
 
-<div class="note">
-<p><strong>Note :</strong> Attention si les données sont envoyées avec la méthode HTTP <code><a href="/fr/docs/HTTP/Méthode/GET">GET</a></code>, les deux points (:) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra <code>partydate=2017-06-01T08%3A30</code>. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}.</p>
-</div>
+> **Note :** Attention si les données sont envoyées avec la méthode HTTP [`GET`](/fr/docs/HTTP/Méthode/GET), les deux points (:) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra `partydate=2017-06-01T08%3A30`. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}.
 
-<p>En JavaScript, Il est également possible de définir la valeur de la date utilisée dans le contrôle via la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p>
+En JavaScript, Il est également possible de définir la valeur de la date utilisée dans le contrôle via la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :
 
-<pre class="brush: js">var dateControl = document.querySelector('input[type="datetime-local"]');
-date.value = '2017-06-01T08:30';</pre>
+```js
+var dateControl = document.querySelector('input[type="datetime-local"]');
+date.value = '2017-06-01T08:30';
+```
 
-<p>Plusieurs méthodes, fournies par JavaScript (cf. {{jsxref("Date")}}), peuvent être utilisée afin de convertir des informations numériques en une telle chaîne de caractères (par exemple la méthode {{jsxref("Date.toISOString()")}}).</p>
+Plusieurs méthodes, fournies par JavaScript (cf. {{jsxref("Date")}}), peuvent être utilisée afin de convertir des informations numériques en une telle chaîne de caractères (par exemple la méthode {{jsxref("Date.toISOString()")}}).
 
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+## Attributs supplémentaires
 
-<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"date"</code> gèrent les attributs suivants :</p>
+En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"date"` gèrent les attributs suivants :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("max")}}</code></td>
-   <td>La date la plus avancée qui peut être saisie.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("min")}}</code></td>
-   <td>La date la plus reculée qui peut être saisie.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("step")}}</code></td>
-   <td>Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation.</td>
-  </tr>
- </tbody>
-</table>
+| Attribut               | Description                                                                                                                                        |
+| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("max")}}` | La date la plus avancée qui peut être saisie.                                                                                                      |
+| `{{anch("min")}}` | La date la plus reculée qui peut être saisie.                                                                                                      |
+| `{{anch("step")}}` | Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation. |
 
-<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3>
+### {{htmlattrdef("max")}}
 
-<p>La date/heure la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>max</code> n'est pas une chaîne de caractères qui suit le format <code>"yyyy-MM-ddThh:mm"</code>, il n'y aura pas de valeur maximale.</p>
+La date/heure la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `max` n'est pas une chaîne de caractères qui suit le format `"yyyy-MM-ddThh:mm"`, il n'y aura pas de valeur maximale.
 
-<p>La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p>
+La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut `min`.
 
-<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3>
+### {{htmlattrdef("min")}}
 
-<p>La date/heure minimale qui peut être saisie dans le contrôle. Toute date/heure saisie antérieure à celle-ci ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>min</code> n'est pas une chaîne de caractères qui suit le format <code>"yyyy-MM-ddThh:mm"</code>, il n'y aura pas de valeur minimale.</p>
+La date/heure minimale qui peut être saisie dans le contrôle. Toute date/heure saisie antérieure à celle-ci ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `min` n'est pas une chaîne de caractères qui suit le format `"yyyy-MM-ddThh:mm"`, il n'y aura pas de valeur minimale.
 
-<p>La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut <code>max</code>.</p>
+La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut `max`.
 
-<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3>
+### {{htmlattrdef("step")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}
 
-<p>Pour les champs <code>datetime-local</code>, la valeur de l'attribut <code>step</code> est exprimée en secondes avec un facteur d'amplification de 1000 (pour passer des millisecondes aux secondes). La valeur par défaut de <code>step</code> est 60 (soit 1 minute ou 60 000 millisecondes).</p>
+Pour les champs `datetime-local`, la valeur de l'attribut `step` est exprimée en secondes avec un facteur d'amplification de 1000 (pour passer des millisecondes aux secondes). La valeur par défaut de `step` est 60 (soit 1 minute ou 60 000 millisecondes).
 
-<p><em>À l'heure où ces lignes sont écrites, la signification de la valeur <code>any</code> pour l'attribut <code>step</code> pour les champs <code>datetime-local</code> n'est pas certaine. Cette information sera mise à jour dès que possible.</em></p>
+_À l'heure où ces lignes sont écrites, la signification de la valeur `any` pour l'attribut `step` pour les champs `datetime-local` n'est pas certaine. Cette information sera mise à jour dès que possible._
 
-<h2 id="Utiliser_les_contrôles_datetime-local">Utiliser les contrôles <code>datetime-local</code></h2>
+## Utiliser les contrôles `datetime-local`
 
-<p>Ces contrôles sont pratiques : ils permettent d'utiliser une interface simple pour sélectionner une date et une heure et en plus, ils normalisent la valeur saisie avant de l'envoyer au sereveur, quelle que soit la locale de l'utilisateur. Toutefois, il existe actuellement des problèmes liés à la prise en charge partielle de <code>&lt;input type="datetime-local"&gt;</code> dans les différents navigateurs.</p>
+Ces contrôles sont pratiques : ils permettent d'utiliser une interface simple pour sélectionner une date et une heure et en plus, ils normalisent la valeur saisie avant de l'envoyer au sereveur, quelle que soit la locale de l'utilisateur. Toutefois, il existe actuellement des problèmes liés à la prise en charge partielle de `<input type="datetime-local">` dans les différents navigateurs.
 
-<p>Dans les exemples suivants, nous verrons certains cas d'utilisation plus complexes puis nous traiterons de l'adaptation nécessaire en fonction de la prise en charge des navigateurs.</p>
+Dans les exemples suivants, nous verrons certains cas d'utilisation plus complexes puis nous traiterons de l'adaptation nécessaire en fonction de la prise en charge des navigateurs.
 
-<h3 id="Utilisation_simple_de_datetime-local">Utilisation simple de <code>datetime-local</code></h3>
+### Utilisation simple de `datetime-local`
 
-<p>Dans sa forme la plus simple, <code>&lt;input type="datetime-local"&gt;</code> peut s'utilisere avec un élément <code>&lt;input&gt;</code> et un élément {{htmlelement("label")}} comme ceci :</p>
+Dans sa forme la plus simple, `<input type="datetime-local">` peut s'utilisere avec un élément `<input>` et un élément {{htmlelement("label")}} comme ceci :
 
-<pre class="brush: html">&lt;form&gt;
-    &lt;label for="party"&gt;Veuillez choisir une date et une heure pour la fête :&lt;/label&gt;
-    &lt;input id="party" type="datetime-local" name="partydate"&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+    <label for="party">Veuillez choisir une date et une heure pour la fête :</label>
+    <input id="party" type="datetime-local" name="partydate">
+</form>
+```
 
-<p>{{EmbedLiveSample('Utilisation_simple_de_datetime-local', 600, 40)}}</p>
+{{EmbedLiveSample('Utilisation_simple_de_datetime-local', 600, 40)}}
 
-<h3 id="Paramétrer_des_dates_et_heures_minimalesmaximales">Paramétrer des dates et heures minimales/maximales</h3>
+### Paramétrer des dates et heures minimales/maximales
 
-<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre la fenêtre de dates qu'il est possible de choisir. Dans l'exemple qui suit, on indique une date/heure minimale au <code>2017-06-01T08:30</code> et une date maximale au <code>2017-06-30T16:30</code>:</p>
+Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre la fenêtre de dates qu'il est possible de choisir. Dans l'exemple qui suit, on indique une date/heure minimale au `2017-06-01T08:30` et une date maximale au `2017-06-30T16:30`:
 
-<pre class="brush: html">  &lt;form&gt;
-    &lt;label for="party"&gt;Veuillez choisir une date et une heure pour la fête :&lt;/label&gt;
-    &lt;input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"&gt;
-  &lt;/form&gt;</pre>
+```html
+  <form>
+    <label for="party">Veuillez choisir une date et une heure pour la fête :</label>
+    <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30">
+  </form>
+```
 
-<p>{{EmbedLiveSample('Paramétrer_des_dates_et_heures_minimales/maximales', 600, 40)}}</p>
+{{EmbedLiveSample('Paramétrer_des_dates_et_heures_minimales/maximales', 600, 40)}}
 
-<p>Par conséquent :</p>
+Par conséquent :
 
-<ul>
- <li>Seuls les jours de juin 2017 peuvent être sélectionnés et seules les heures entre 08h30 et 16h30 pourront être sélectionnées..</li>
- <li>Selon le navigateur utilisé, il est possible ou non de sélectionner des heures invalides (cf. {{anch("Validation")}}).</li>
-</ul>
+- Seuls les jours de juin 2017 peuvent être sélectionnés et seules les heures entre 08h30 et 16h30 pourront être sélectionnées..
+- Selon le navigateur utilisé, il est possible ou non de sélectionner des heures invalides (cf. {{anch("Validation")}}).
 
-<div class="note">
-<p><strong>Note :</strong> L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité.</p>
-</div>
+> **Note :** L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité.
 
-<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3>
+### Contrôler la taille du champ
 
-<p><code>&lt;input type="datetime-local"&gt;</code> ne prend pas en charge des attributs tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser <a href="/fr/docs/Web/CSS">CSS</a> pour les problèmes relatifs au dimensionnement.</p>
+`<input type="datetime-local">` ne prend pas en charge des attributs tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser [CSS](/fr/docs/Web/CSS) pour les problèmes relatifs au dimensionnement.
 
-<h3 id="Paramétrer_le_fuseau_horaire">Paramétrer le fuseau horaire</h3>
+### Paramétrer le fuseau horaire
 
-<p>Les champs <code>datetime-local</code> ne permettent pas d'indiquer le fuseau horaire de la date/heure utilisée. Cette caractéristique était disponible pour les champs de type <code><a href="/fr/docs/Web/HTML/Element/input/datetime">datetime</a></code> qui est désormais obsolète (retiré de la spécification). Ce type de champ a été retiré en raison d'un manque d'implémentation de la part des navigateurs et des problèmes relatifs à l'ergonomie. Il est plus simple d'avoir un contrôle séparé pour indiquer le fuseau horaire.</p>
+Les champs `datetime-local` ne permettent pas d'indiquer le fuseau horaire de la date/heure utilisée. Cette caractéristique était disponible pour les champs de type [`datetime`](/fr/docs/Web/HTML/Element/input/datetime) qui est désormais obsolète (retiré de la spécification). Ce type de champ a été retiré en raison d'un manque d'implémentation de la part des navigateurs et des problèmes relatifs à l'ergonomie. Il est plus simple d'avoir un contrôle séparé pour indiquer le fuseau horaire.
 
-<p>Ainsi, si vous créez un système où l'utilisateur est déjà connecté et que le fuseau horaire est déjà connu, celui-ci peut être fourni via un champ de type <code><a href="/fr/docs/Web/HTML/Element/input/hidden">hidden</a></code>. Par exemple :</p>
+Ainsi, si vous créez un système où l'utilisateur est déjà connecté et que le fuseau horaire est déjà connu, celui-ci peut être fourni via un champ de type [`hidden`](/fr/docs/Web/HTML/Element/input/hidden). Par exemple :
 
-<pre class="brush: html">&lt;input type="hidden" id="timezone" name="timezone" value="-08:00"&gt;</pre>
+```html
+<input type="hidden" id="timezone" name="timezone" value="-08:00">
+```
 
-<p>Sinon, on peut proposer la sélection d'un fuseau horaire grâce à un élément {{htmlelement("select")}} :</p>
+Sinon, on peut proposer la sélection d'un fuseau horaire grâce à un élément {{htmlelement("select")}} :
 
-<pre class="brush: html">&lt;select name="timezone_offset" id="timezone-offset" class="span5"&gt;
-    &lt;option value="-12:00"&gt;(GMT -12:00) Eniwetok, Kwajalein&lt;/option&gt;
-    &lt;option value="-11:00"&gt;(GMT -11:00) Midway Island, Samoa&lt;/option&gt;
-    &lt;option value="-10:00"&gt;(GMT -10:00) Hawaii&lt;/option&gt;
-    &lt;option value="-09:50"&gt;(GMT -9:30) Taiohae&lt;/option&gt;
-    &lt;option value="-09:00"&gt;(GMT -9:00) Alaska&lt;/option&gt;
-    &lt;option value="-08:00"&gt;(GMT -8:00) Pacific Time (US &amp;amp; Canada)&lt;/option&gt;
+```html
+<select name="timezone_offset" id="timezone-offset" class="span5">
+    <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option>
+    <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option>
+    <option value="-10:00">(GMT -10:00) Hawaii</option>
+    <option value="-09:50">(GMT -9:30) Taiohae</option>
+    <option value="-09:00">(GMT -9:00) Alaska</option>
+    <option value="-08:00">(GMT -8:00) Pacific Time (US &amp; Canada)</option>
 
   ...
 
-&lt;/select&gt;</pre>
-
-<p>Dans ces deux situations, le fuseau horaire et la date sont transmis au serveur séparément (c'est côté serveur que le choix de la représentation pour le stockage est effectué).</p>
+</select>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Le fragment de code précédent est tiré de <a href="https://gist.github.com/nodesocket/3919205">Tous les fuseaux horaires du monde dans un élément <code>&lt;select&gt;</code></a>.</p>
-</div>
+Dans ces deux situations, le fuseau horaire et la date sont transmis au serveur séparément (c'est côté serveur que le choix de la représentation pour le stockage est effectué).
 
-<h2 id="Validation">Validation</h2>
+> **Note :** Le fragment de code précédent est tiré de [Tous les fuseaux horaires du monde dans un élément `<select>`](https://gist.github.com/nodesocket/3919205).
 
-<p>Par défaut, <code>&lt;input type="datetime-local"&gt;</code> n'applique pas de validation aux valeurs saisies. C'est l'interface utilisateur du contrôle qui ne permet pas de saisir autre chose qu'une date et une heure (ce qui est utile) mais il est toujours possible de ne saisir aucune valeur ou de saisir une valeur invalide (le 32 avril par exemple).</p>
+## Validation
 
-<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre les dates disponibles et {{htmlattrxref("required", "input")}} rend la date obligatoire. Dans ces cas, les navigateurs afficheront un message d'erreur si on essaie d'envoyer une date en dehors de l'intervalle ou une date vide.</p>
+Par défaut, `<input type="datetime-local">` n'applique pas de validation aux valeurs saisies. C'est l'interface utilisateur du contrôle qui ne permet pas de saisir autre chose qu'une date et une heure (ce qui est utile) mais il est toujours possible de ne saisir aucune valeur ou de saisir une valeur invalide (le 32 avril par exemple).
 
-<p>Prenons un exemple avec des dates mini/maxi et le champ obligatoire :</p>
+Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre les dates disponibles et {{htmlattrxref("required", "input")}} rend la date obligatoire. Dans ces cas, les navigateurs afficheront un message d'erreur si on essaie d'envoyer une date en dehors de l'intervalle ou une date vide.
 
-<pre class="brush: html">&lt;form&gt;
-    &lt;div&gt;
-        &lt;label for="party"&gt;Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :&lt;/label&gt;
-        &lt;input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required&gt;
-        &lt;span class="validity"&gt;&lt;/span&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-        &lt;input type="submit" value="Réserver !"&gt;
-    &lt;/div&gt;
-&lt;/form&gt;</pre>
+Prenons un exemple avec des dates mini/maxi et le champ obligatoire :
 
-<p>Si vous essayez d'envoyer le formulaire avec une date incomplète ou en dehors de l'intervalle indiqué, le navigateur affichera une erreur. Voici le résultat :</p>
+```html
+<form>
+    <div>
+        <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label>
+        <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required>
+        <span class="validity"></span>
+    </div>
+    <div>
+        <input type="submit" value="Réserver !">
+    </div>
+</form>
+```
 
-<p>{{EmbedLiveSample('Validation', 600, 120)}}</p>
+Si vous essayez d'envoyer le formulaire avec une date incomplète ou en dehors de l'intervalle indiqué, le navigateur affichera une erreur. Voici le résultat :
 
+{{EmbedLiveSample('Validation', 600, 120)}}
 
-<p>Vous trouverez ensuite la feuille de style CSS utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que sa valeur est valide ou non. Les icônes indicatives sont placées dans un élément {{htmlelement("span")}} séparé car, sous Chrome, le contenu généré automatiquement est placé à l'intériur du contrôle et ne peut pas être affiché/mis en forme efficacement.</p>
+Vous trouverez ensuite la feuille de style CSS utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que sa valeur est valide ou non. Les icônes indicatives sont placées dans un élément {{htmlelement("span")}} séparé car, sous Chrome, le contenu généré automatiquement est placé à l'intériur du contrôle et ne peut pas être affiché/mis en forme efficacement.
 
-<pre class="brush: css">div {
+```css
+div {
     margin-bottom: 10px;
     display: flex;
     align-items: center;
@@ -211,57 +200,56 @@ input:invalid+span:after {
 input:valid+span:after {
     content: '✓';
     padding-left: 5px;
-}</pre>
-
-<div class="warning">
-<p><strong>Attention :</strong> La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application.</p>
-</div>
+}
+```
 
-<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2>
+> **Attention :** La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application.
 
-<p>Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge.</p>
+## Gérer la prise en charge des navigateurs
 
+Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge.
 
-<p>Les navigateurs qui n'implémentent pas cette fonctionnalité afficheront un contrôle de saisie textuelle. Toutefois, cela entraîne des problème de cohérence d'interface graphique d'une part et de représentation des données d'autre part.</p>
+Les navigateurs qui n'implémentent pas cette fonctionnalité afficheront un contrôle de saisie textuelle. Toutefois, cela entraîne des problème de cohérence d'interface graphique d'une part et de représentation des données d'autre part.
 
-<p>C'est ce second problème qui est le plus important. Comme nous l'avons mentionné avant, la valeur d'un contrôle <code>datetime-local</code> est toujours normalisée sous la forme <code>yyyy-mm-ddThh:mm</code>. En revanche, avec un champ texte, le navigateur n'utilise pas de formatage particulier et il existe différentes façon d'écrire des dates et heures selon les langues et les régions. On peut par exemple avoir les formats suivants :</p>
+C'est ce second problème qui est le plus important. Comme nous l'avons mentionné avant, la valeur d'un contrôle `datetime-local` est toujours normalisée sous la forme `yyyy-mm-ddThh:mm`. En revanche, avec un champ texte, le navigateur n'utilise pas de formatage particulier et il existe différentes façon d'écrire des dates et heures selon les langues et les régions. On peut par exemple avoir les formats suivants :
 
-<ul>
- <li><code>ddmmyyyy</code></li>
- <li><code>dd/mm/yyyy</code></li>
- <li><code>mm/dd/yyyy</code></li>
- <li><code>dd-mm-yyyy</code></li>
- <li><code>mm-dd-yyyy</code></li>
- <li><code>mm-dd-yyyy hh:mm</code> (heure exprimée sur 12 heures)</li>
- <li><code>mm-dd-yyyy HH:mm</code> (heure exprimée sur 24 heures)</li>
- <li>etc.</li>
-</ul>
+- `ddmmyyyy`
+- `dd/mm/yyyy`
+- `mm/dd/yyyy`
+- `dd-mm-yyyy`
+- `mm-dd-yyyy`
+- `mm-dd-yyyy hh:mm` (heure exprimée sur 12 heures)
+- `mm-dd-yyyy HH:mm` (heure exprimée sur 24 heures)
+- etc.
 
-<p>Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément <code>&lt;input type="</code><code>datetime-local"&gt;</code>. Bien que cet élément n'utilise pas cet attribut, s'il est converti en <code>&lt;input type="text"&gt;</code> par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge <code>&lt;input type="datetime-local"&gt;</code> :</p>
+Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément ` <input type="``datetime-local"> `. Bien que cet élément n'utilise pas cet attribut, s'il est converti en `<input type="text">` par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge `<input type="datetime-local">` :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-     &lt;label for="party"&gt;Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :&lt;/label&gt;
-    &lt;input id="party" type="datetime-local" name="partydate"
+```html
+<form>
+  <div>
+     <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label>
+    <input id="party" type="datetime-local" name="partydate"
            min="2017-06-01T08:30" max="2017-06-30T16:30"
-           pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;input type="submit" value="Réserver !"&gt;
-  &lt;/div&gt;
-  &lt;input type="hidden" id="timezone" name="timezone" value="-08:00"&gt;
-&lt;/form&gt;</pre>
+           pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit" value="Réserver !">
+  </div>
+  <input type="hidden" id="timezone" name="timezone" value="-08:00">
+</form>
+```
 
-<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p>
+{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}
 
-<p>Si vous essayer de soumettre ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en avant le champ invalide si la valeur saisie ne respecte pas la forme <code>nnnn-nn-nnTnn:nn</code> avec <code>n</code> qui est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates/heures invalides ou mal formatées.</p>
+Si vous essayer de soumettre ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en avant le champ invalide si la valeur saisie ne respecte pas la forme `nnnn-nn-nnTnn:nn` avec `n` qui est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates/heures invalides ou mal formatées.
 
-<p>De plus, comment l'utilisateur doit-il comprendre la règle de format qui lui est imposée pour saisir une date et une heure ?</p>
+De plus, comment l'utilisateur doit-il comprendre la règle de format qui lui est imposée pour saisir une date et une heure ?
 
-<p>Bref, il y a toujours un problème.</p>
+Bref, il y a toujours un problème.
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   margin-bottom: 10px;
 }
 
@@ -283,73 +271,77 @@ input:valid + span:after {
   content: '✓';
   position: absolute;
   right: -18px;
-}</pre>
-
-<p>Actuellement, la meilleure façon de gérer les dates/heures d'une façon homogène pour les différents navigateurs est d'utiliser différents contrôles (via des éléments {{htmlelement("select")}}) pour sélectionner l'année, le jour, le mois, la date et l'heure. Il existe également des bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">le sélecteur de date jQuery</a> et <a href="https://timepicker.co/">le sélecteur d'heure jQuery</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans cet exemple, on crée deux ensembles d'éléments pour sélectionner une date et une heure : un sélecteur natif <code>&lt;input type="datetime-local"&gt;</code> d'une part et un ensemble de cinq éléments {{htmlelement("select")}} d'autre part pour les navigateurs qui ne prennent pas en charge le contrôle natif.</p>
-
-<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p>
-
-<p>Voici le fragment de code HTML utilisé :</p>
-
-<pre class="brush: html">&lt;form&gt;
-  &lt;div class="nativeDateTimePicker"&gt;
-    &lt;label for="party"&gt;Veuillez sélectionner une date et une heure pour la fête :&lt;/label&gt;
-    &lt;input type="datetime-local" id="party" name="bday"&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;p class="fallbackLabel"&gt;Veuillez sélectionner une date et une heure pour la fête :&lt;/p&gt;
-  &lt;div class="fallbackDateTimePicker"&gt;
-    &lt;div&gt;
-      &lt;span&gt;
-        &lt;label for="day"&gt;Jour :&lt;/label&gt;
-        &lt;select id="day" name="day"&gt;
-        &lt;/select&gt;
-      &lt;/span&gt;
-      &lt;span&gt;
-        &lt;label for="month"&gt;Mois :&lt;/label&gt;
-        &lt;select id="month" name="month"&gt;
-          &lt;option selected&gt;Janvier&lt;/option&gt;
-          &lt;option&gt;Février&lt;/option&gt;
-          &lt;option&gt;Mars&lt;/option&gt;
-          &lt;option&gt;Avril&lt;/option&gt;
-          &lt;option&gt;Mai&lt;/option&gt;
-          &lt;option&gt;Juin&lt;/option&gt;
-          &lt;option&gt;Juillet&lt;/option&gt;
-          &lt;option&gt;Août&lt;/option&gt;
-          &lt;option&gt;Septembre&lt;/option&gt;
-          &lt;option&gt;Octobre&lt;/option&gt;
-          &lt;option&gt;Novembre&lt;/option&gt;
-          &lt;option&gt;Décembre&lt;/option&gt;
-        &lt;/select&gt;
-      &lt;/span&gt;
-      &lt;span&gt;
-        &lt;label for="year"&gt;Année :&lt;/label&gt;
-        &lt;select id="year" name="year"&gt;
-        &lt;/select&gt;
-      &lt;/span&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-      &lt;span&gt;
-        &lt;label for="hour"&gt;Heure :&lt;/label&gt;
-        &lt;select id="hour" name="hour"&gt;
-        &lt;/select&gt;
-      &lt;/span&gt;
-      &lt;span&gt;
-        &lt;label for="minute"&gt;Minute :&lt;/label&gt;
-        &lt;select id="minute" name="minute"&gt;
-        &lt;/select&gt;
-      &lt;/span&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
-
-<p>Les mois disponibles sont codés de façon statique (ce sont toujours les mêmes). En revanche, les valeurs pour les jours et les années sont générées dynamiquement selon le mois et l'année courante (voir les commentaires du script ci-après). Les heures et les minutes sont également générées dynamiquement.</p>
-
-<pre class="brush: css hidden">div {
+}
+```
+
+Actuellement, la meilleure façon de gérer les dates/heures d'une façon homogène pour les différents navigateurs est d'utiliser différents contrôles (via des éléments {{htmlelement("select")}}) pour sélectionner l'année, le jour, le mois, la date et l'heure. Il existe également des bibliothèques JavaScript telles que [le sélecteur de date jQuery](https://jqueryui.com/datepicker/) et [le sélecteur d'heure jQuery](https://timepicker.co/).
+
+## Exemples
+
+Dans cet exemple, on crée deux ensembles d'éléments pour sélectionner une date et une heure : un sélecteur natif `<input type="datetime-local">` d'une part et un ensemble de cinq éléments {{htmlelement("select")}} d'autre part pour les navigateurs qui ne prennent pas en charge le contrôle natif.
+
+{{EmbedLiveSample('Exemples', 600, 140)}}
+
+Voici le fragment de code HTML utilisé :
+
+```html
+<form>
+  <div class="nativeDateTimePicker">
+    <label for="party">Veuillez sélectionner une date et une heure pour la fête :</label>
+    <input type="datetime-local" id="party" name="bday">
+    <span class="validity"></span>
+  </div>
+  <p class="fallbackLabel">Veuillez sélectionner une date et une heure pour la fête :</p>
+  <div class="fallbackDateTimePicker">
+    <div>
+      <span>
+        <label for="day">Jour :</label>
+        <select id="day" name="day">
+        </select>
+      </span>
+      <span>
+        <label for="month">Mois :</label>
+        <select id="month" name="month">
+          <option selected>Janvier</option>
+          <option>Février</option>
+          <option>Mars</option>
+          <option>Avril</option>
+          <option>Mai</option>
+          <option>Juin</option>
+          <option>Juillet</option>
+          <option>Août</option>
+          <option>Septembre</option>
+          <option>Octobre</option>
+          <option>Novembre</option>
+          <option>Décembre</option>
+        </select>
+      </span>
+      <span>
+        <label for="year">Année :</label>
+        <select id="year" name="year">
+        </select>
+      </span>
+    </div>
+    <div>
+      <span>
+        <label for="hour">Heure :</label>
+        <select id="hour" name="hour">
+        </select>
+      </span>
+      <span>
+        <label for="minute">Minute :</label>
+        <select id="minute" name="minute">
+        </select>
+      </span>
+    </div>
+  </div>
+</form>
+```
+
+Les mois disponibles sont codés de façon statique (ce sont toujours les mêmes). En revanche, les valeurs pour les jours et les années sont générées dynamiquement selon le mois et l'année courante (voir les commentaires du script ci-après). Les heures et les minutes sont également générées dynamiquement.
+
+```css hidden
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -372,11 +364,13 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}</pre>
+}
+```
 
-<p>Une partie intéressante du code est celle où on détecte la prise en charge de la fonctionnalité. Pour cela, dans le script, on crée un nouvel élément {{htmlelement("input")}} auquel on attribut le type <code>datetime-local</code> puis on vérifie son type juste après. Pour les navigateurs qui ne prennent pas en charge ce type de contrôle, le type aura changé et sera <code>text</code>. Si c'est le cas, on masque le contrôle natif et on utilise l'interface utilisateur alternative (composée avec les éléments ({{htmlelement("select")}})).</p>
+Une partie intéressante du code est celle où on détecte la prise en charge de la fonctionnalité. Pour cela, dans le script, on crée un nouvel élément {{htmlelement("input")}} auquel on attribut le type `datetime-local` puis on vérifie son type juste après. Pour les navigateurs qui ne prennent pas en charge ce type de contrôle, le type aura changé et sera `text`. Si c'est le cas, on masque le contrôle natif et on utilise l'interface utilisateur alternative (composée avec les éléments ({{htmlelement("select")}})).
 
-<pre class="brush: js">// On définit les différentes variables
+```js
+// On définit les différentes variables
 var nativePicker = document.querySelector('.nativeDateTimePicker');
 var fallbackPicker = document.querySelector('.fallbackDateTimePicker');
 var fallbackLabel = document.querySelector('.fallbackLabel');
@@ -391,15 +385,15 @@ var minuteSelect = document.querySelector('#minute');
 fallbackPicker.style.display = 'none';
 fallbackLabel.style.display = 'none';
 
-// On teste si l'élément &lt;input type="date"&gt;
-// se transforme en &lt;input type="text"&gt;
+// On teste si l'élément <input type="date">
+// se transforme en <input type="text">
 var test = document.createElement('input');
 test.type = 'date';
 // Si c'est le cas, cela signifie que l'élément
 // n'est pas pris en charge et
 if(test.type === 'text') {
   // On masque le sélecteur natif et on affiche
-  // le sélecteur avec les &lt;select&gt;
+  // le sélecteur avec les <select>
   nativePicker.style.display = 'none';
   fallbackPicker.style.display = 'block';
   fallbackLabel.style.display = 'block';
@@ -413,8 +407,8 @@ if(test.type === 'text') {
 }
 
 function populateDays(month) {
-  // On supprime les éléments &lt;option&gt; pour l'élément
-  // &lt;select&gt; des jours afin de pouvoir ajouter les prochains
+  // On supprime les éléments <option> pour l'élément
+  // <select> des jours afin de pouvoir ajouter les prochains
   while(daySelect.firstChild){
     daySelect.removeChild(daySelect.firstChild);
   }
@@ -436,9 +430,9 @@ function populateDays(month) {
   }
 
   // on ajoute le bon nombre de jours dans autant
-  // d'éléments &lt;option&gt; pour l'élément &lt;select&gt;
+  // d'éléments <option> pour l'élément <select>
   // pour la journée
-  for(i = 1; i &lt;= dayNum; i++) {
+  for(i = 1; i <= dayNum; i++) {
     var option = document.createElement('option');
     option.textContent = i;
     daySelect.appendChild(option);
@@ -473,9 +467,9 @@ function populateYears() {
   var year = date.getFullYear();
 
   // On affiche l'année courante et les 100 années
-  // précédentes pour l'élément &lt;select&gt; destiné à
+  // précédentes pour l'élément <select> destiné à
   // stocker l'année
-  for(var i = 0; i &lt;= 100; i++) {
+  for(var i = 0; i <= 100; i++) {
     var option = document.createElement('option');
     option.textContent = year-i;
     yearSelect.appendChild(option);
@@ -483,21 +477,21 @@ function populateYears() {
 }
 
 function populateHours() {
-  // on crée 24 valeurs pour l'élément &lt;select&gt;
+  // on crée 24 valeurs pour l'élément <select>
   // associé aux heures
-  for(var i = 0; i &lt;= 23; i++) {
+  for(var i = 0; i <= 23; i++) {
     var option = document.createElement('option');
-    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    option.textContent = (i < 10) ? ("0" + i) : i;
     hourSelect.appendChild(option);
   }
 }
 
 function populateMinutes() {
-  // On crée 60 valeurs pour l'élément &lt;select&gt;
+  // On crée 60 valeurs pour l'élément <select>
   // associé aux minutes
-  for(var i = 0; i &lt;= 59; i++) {
+  for(var i = 0; i <= 59; i++) {
     var option = document.createElement('option');
-    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    option.textContent = (i < 10) ? ("0" + i) : i;
     minuteSelect.appendChild(option);
   }
 }
@@ -520,72 +514,70 @@ var previousDay;
 // est utilisée cette valeur)
 daySelect.onchange = function() {
   previousDay = daySelect.value;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p>
-</div>
+> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente une date et une heure (selon le fuseau horaire local) ou bien une chaîne de caractères vide.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code>.</td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui
+        représente une date et une heure (selon le fuseau horaire local) ou bien
+        une chaîne de caractères vide.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>
+        {{domxref("HTMLElement/change_event", "change")}} et
+        {{domxref("HTMLElement/input_event", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}},
+        {{htmlattrxref("list", "input")}},
+        {{htmlattrxref("readonly", "input")}} et
+        {{htmlattrxref("step", "input")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td>
+        <code>list</code>, <code>value</code>, <code>valueAsNumber</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}},
+        {{domxref("HTMLInputElement.stepDown", "stepDown()")}},
+        {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '&lt;input type="datetime-local"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '&lt;input type="datetime-local"&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                                                                | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '&lt;input type="datetime-local"&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '&lt;input type="datetime-local"&gt;')}}     | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-datetime-local")}}</p>
+{{Compat("html.elements.input.input-datetime-local")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}</li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code> and <code><a href="/fr/docs/Web/HTML/Element/input/time">&lt;input type="time"&gt;</a></code></li>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire">Un tutoriel sur les sélecteurs de date et d'heure</a></li>
- <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li>
-</ul>
+- L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}
+- [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date) and [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time)
+- [Un tutoriel sur les sélecteurs de date et d'heure](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire)
+- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML)
diff --git a/files/fr/web/html/element/input/datetime/index.md b/files/fr/web/html/element/input/datetime/index.md
index e3ddf4012c..898c20a171 100644
--- a/files/fr/web/html/element/input/datetime/index.md
+++ b/files/fr/web/html/element/input/datetime/index.md
@@ -10,15 +10,13 @@ tags:
   - Web
 translation_of: Web/HTML/Element/input/datetime
 ---
-<div>{{HTMLRef}}{{obsolete_header}}</div>
+{{HTMLRef}}{{obsolete_header}}
 
-<p>L'élément HTML <code>&lt;input type="datetime"&gt;</code> représentait un contrôle permettant de saisir une date, une heure (avec heures, minutes, secondes et fractions de seconde) ainsi qu'un fuseau horaire. <strong>Cette fonctionnalité a été <a href="https://github.com/whatwg/html/issues/336">retirée de la spécification HTML WHATWG</a></strong> et n'est plus prise en charge par les navigateurs.</p>
+L'élément HTML `<input type="datetime">` représentait un contrôle permettant de saisir une date, une heure (avec heures, minutes, secondes et fractions de seconde) ainsi qu'un fuseau horaire. **Cette fonctionnalité a été [retirée de la spécification HTML WHATWG](https://github.com/whatwg/html/issues/336)** et n'est plus prise en charge par les navigateurs.
 
-<p>Afin de remplacer cette fonctionnalité, les navigateurs implémentent (ou développent) l'élément <code>&lt;input&gt;</code> de type <code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> qui doit être utilisé à la place. Le format utilisé pour ces champs est décrit dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_universelles">cette section de l'article sur les formats</a>.</p>
+Afin de remplacer cette fonctionnalité, les navigateurs implémentent (ou développent) l'élément `<input>` de type [`datetime-local`](/fr/docs/Web/HTML/Element/input/datetime-local) qui doit être utilisé à la place. Le format utilisé pour ces champs est décrit dans [cette section de l'article sur les formats](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_universelles).
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("input")}} element</li>
- <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li>
-</ul>
+- {{HTMLElement("input")}} element
+- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML)
diff --git a/files/fr/web/html/element/input/email/index.md b/files/fr/web/html/element/input/email/index.md
index 2e6f223117..22250ac4cf 100644
--- a/files/fr/web/html/element/input/email/index.md
+++ b/files/fr/web/html/element/input/email/index.md
@@ -7,282 +7,227 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/email
 ---
-<div>{{HTMLRef}}</div>
-
-<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"email"</strong></code> permettent à un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, une liste d'adresses mail. La valeur saisie est automatiquement validée afin de vérifier que le champ est vide ou que l'adresse (ou la liste d'adresses) est correcte. Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées automatiquement selon le cas.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}}</div>
-
-<div class="note">
-<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type <code>"email"</code> emploieront un élément <code>&lt;input&gt;</code> <code><a href="/fr/docs/Web/HTML/Element/input/text">"text"</a></code> à la place.</p>
-</div>
-
-<h2 id="Valeur">Valeur</h2>
-
-<p>La valeur d'un tel élément {{HTMLElement("input")}}, contenue dans l'attribut {{htmlattrxref("value", "input")}}, contient une chaîne de caractères qui est automatiquement validée afin de vérifier que c'est une adresse électronique valide. Pour être plus précis, trois formes sont considérées valides :</p>
-
-<ol>
- <li>Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a saisi aucune valeur ou que la valeur a été retirée.</li>
- <li>Une adresse électronique bien-formée. Cela ne signifie pas que l'adresse en question existe mais qu'elle est correctement formatée. Autrement dit, elle respecte une structure <code>"nom@domaine.tld"</code>. Cette règle est un peu plus complexe (cf. {{anch("Validation")}} pour l'algorithme exact).</li>
- <li>Si et seulement si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, la valeur peut être une liste d'adresses électroniques correctes, séparées par des virgules. Chaque blanc situé avant et après chaque adresse sera retiré.</li>
-</ol>
-
-<p>Pour plus de détails, se référer à la section {{anch("Validation")}} sur la façon dont les adresses mails sont validées.</p>
-
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
-
-<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>email</code> prennent en charge les attributs suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("maxlength")}}</code></td>
-   <td>Le nombre de caractères maximal qui peut être écrit dans ce champ.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("minlength")}}</code></td>
-   <td>Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("multiple")}}</code></td>
-   <td>Un attribut booléen qui indique si plusieurs adresses électroniques peuvent être saisies et séparées par des virgules.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("pattern")}}</code></td>
-   <td>Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("placeholder")}}</code></td>
-   <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("readonly")}}</code></td>
-   <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("size")}}</code></td>
-   <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("spellcheck")}}</code></td>
-   <td>Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée.</td>
-  </tr>
- </tbody>
-</table>
+{{HTMLRef}}
 
-<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3>
+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"email"`** permettent à un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, une liste d'adresses mail. La valeur saisie est automatiquement validée afin de vérifier que le champ est vide ou que l'adresse (ou la liste d'adresses) est correcte. Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées automatiquement selon le cas.
 
+{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}}
 
+> **Note :** Les navigateurs qui ne prennent pas en charge le type `"email"` emploieront un élément `<input>` [`"text"`](/fr/docs/Web/HTML/Element/input/text) à la place.
 
-<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p>
+## Valeur
 
-<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte dépasse <code>maxlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+La valeur d'un tel élément {{HTMLElement("input")}}, contenue dans l'attribut {{htmlattrxref("value", "input")}}, contient une chaîne de caractères qui est automatiquement validée afin de vérifier que c'est une adresse électronique valide. Pour être plus précis, trois formes sont considérées valides :
 
+1.  Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a saisi aucune valeur ou que la valeur a été retirée.
+2.  Une adresse électronique bien-formée. Cela ne signifie pas que l'adresse en question existe mais qu'elle est correctement formatée. Autrement dit, elle respecte une structure `"nom@domaine.tld"`. Cette règle est un peu plus complexe (cf. {{anch("Validation")}} pour l'algorithme exact).
+3.  Si et seulement si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, la valeur peut être une liste d'adresses électroniques correctes, séparées par des virgules. Chaque blanc situé avant et après chaque adresse sera retiré.
 
+Pour plus de détails, se référer à la section {{anch("Validation")}} sur la façon dont les adresses mails sont validées.
 
-<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3>
+## Attributs supplémentaires
 
+En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `email` prennent en charge les attributs suivants :
 
+| Attribut                           | Description                                                                                                                                            |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `{{anch("maxlength")}}`     | Le nombre de caractères maximal qui peut être écrit dans ce champ.                                                                                     |
+| `{{anch("minlength")}}`     | Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.                                              |
+| `{{anch("multiple")}}`     | Un attribut booléen qui indique si plusieurs adresses électroniques peuvent être saisies et séparées par des virgules.                                 |
+| `{{anch("pattern")}}`         | Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.                                                               |
+| `{{anch("placeholder")}}` | Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.                                                                              |
+| `{{anch("readonly")}}`     | Un attribut booléen qui indique si le contenu du champ est en lecture seule.                                                                           |
+| `{{anch("size")}}`             | Un nombre qui indique le nombre de caractères affichés par le champ.                                                                                   |
+| `{{anch("spellcheck")}}`     | Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée. |
 
-<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p>
+### {{htmlattrdef("maxlength")}}
 
-<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte est inférieure à <code>minlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`.
 
+Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte dépasse `maxlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.
 
+### {{htmlattrdef("minlength")}}
 
-<h3 id="htmlattrdef(multiple)">{{htmlattrdef("multiple")}}</h3>
+Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à `maxlength`.
 
-<p>A Boolean attribute which, if present, indicates that the user can enter a list of multiple e-mail addresses, separated by commas and, optionally, whitespace characters. See {{anch("Allowing multiple e-mail addresses")}} for details.</p>
+Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte est inférieure à `minlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.
 
-<div class="note">
-<p><strong>Note:</strong> Normally, if you specify the {{htmlattrxref("required", "input")}} attribute, the user must enter a valid e-mail address for the field to be considered valid. However, if you add the <code>multiple</code> attribute, a list of zero e-mail addresses (an empty string, or one which is entirely whitespace) is a valid value. In other words, the user does not have to enter even one e-mail address when <code>multiple</code> is specified, regardless of the value of <code>required</code>.</p>
-</div>
+### {{htmlattrdef("multiple")}}
 
-<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3>
+A Boolean attribute which, if present, indicates that the user can enter a list of multiple e-mail addresses, separated by commas and, optionally, whitespace characters. See {{anch("Allowing multiple e-mail addresses")}} for details.
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+> **Note :** Normally, if you specify the {{htmlattrxref("required", "input")}} attribute, the user must enter a valid e-mail address for the field to be considered valid. However, if you add the `multiple` attribute, a list of zero e-mail addresses (an empty string, or one which is entirely whitespace) is a valid value. In other words, the user does not have to enter even one e-mail address when `multiple` is specified, regardless of the value of `required`.
 
-<p>Voir la section sur la validation d'un motif ci-après pour plus de détails.</p>
+### {{htmlattrdef("pattern")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+Voir la section sur la validation d'un motif ci-après pour plus de détails.
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}
 
-<h2 id="Attributs_non-standard">Attributs non-standard</h2>
+{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}
 
-<p>Les attributs non-standard suivant sont disponibles pour les champs d'email dans certains navigateurs mais devraient ne pas être utilisés.</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribute</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("autocorrect")}}</code></td>
-   <td>Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. <strong>Uniquement pris en charge par Safari.</strong></td>
-  </tr>
-  <tr>
-   <td><code>{{anch("mozactionhint")}}</code></td>
-   <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. <strong>Uniquement pris en charge par Firefox pour Android.</strong></td>
-  </tr>
- </tbody>
-</table>
+## Attributs non-standard
+
+Les attributs non-standard suivant sont disponibles pour les champs d'email dans certains navigateurs mais devraient ne pas être utilisés.
+
+| Attribute                          | Description                                                                                                                                                                                                                                                                                                                                       |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("autocorrect")}}` | Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. **Uniquement pris en charge par Safari.**                                                                                                                                                                                                 |
+| `{{anch("mozactionhint")}}` | Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. **Uniquement pris en charge par Firefox pour Android.** |
 
-<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+### {{htmlattrdef("autocorrect")}} {{non-standard_inline}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}
 
-<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}
 
-<h2 id="Utiliser_les_champs_de_saisie_d'adresses_électroniques">Utiliser les champs de saisie d'adresses électroniques</h2>
+## Utiliser les champs de saisie d'adresses électroniques
 
-<p>Les adresses mails font partie des informations les plus fréquentes dans les formulaires web : elles sont utilisées pour se connecter, demander des informations, confirmer une commande, envoyer un email, etc. Le type <code>"email"</code> permet de simplifier le travail de construction de l'interface utilisateur et la logique associée pour les adresses électroniques. Lorsqu'on crée un champ dont l'attribut <code>type</code> vaut <code>"email"</code>, le navigateur valide ou non le texte saisi afin de vérifier qu'il s'agit d'une adresse correcte. Cela permet d'éviter les cas où l'utilisateur a fait une faute de saisie ou lorsqu'il a fourni une adresse invalide.</p>
+Les adresses mails font partie des informations les plus fréquentes dans les formulaires web : elles sont utilisées pour se connecter, demander des informations, confirmer une commande, envoyer un email, etc. Le type `"email"` permet de simplifier le travail de construction de l'interface utilisateur et la logique associée pour les adresses électroniques. Lorsqu'on crée un champ dont l'attribut `type` vaut `"email"`, le navigateur valide ou non le texte saisi afin de vérifier qu'il s'agit d'une adresse correcte. Cela permet d'éviter les cas où l'utilisateur a fait une faute de saisie ou lorsqu'il a fourni une adresse invalide.
 
-<p>On notera toutefois que le navigateur ne vérifie pas si l'adresse saisie existe réellement ou correspond à un utilisateur existant du site ou si elle respecte quelque autre critère. Autrement dit, le navigateur vérifie uniquement que l'adresse fournie est bien formée.</p>
+On notera toutefois que le navigateur ne vérifie pas si l'adresse saisie existe réellement ou correspond à un utilisateur existant du site ou si elle respecte quelque autre critère. Autrement dit, le navigateur vérifie uniquement que l'adresse fournie est bien formée.
 
-<div class="note">
-<p><strong>Note :</strong> Il est également important de rappeler qu'un utilisateur peut modifier le HTML de la page grâce aux outils de développement. Votre site <em>ne doit pas</em> reposer sur les mécanismes de validation du navigateur. Il est crucial de vérifier l'adresse électronique <em>côté serveur</em> dès que le texte fournit est impliqué, d'une façon ou d'une autre, dans une fonctionnalité sensible (par exemple la connexion à un site, un achat, etc.).</p>
-</div>
+> **Note :** Il est également important de rappeler qu'un utilisateur peut modifier le HTML de la page grâce aux outils de développement. Votre site _ne doit pas_ reposer sur les mécanismes de validation du navigateur. Il est crucial de vérifier l'adresse électronique _côté serveur_ dès que le texte fournit est impliqué, d'une façon ou d'une autre, dans une fonctionnalité sensible (par exemple la connexion à un site, un achat, etc.).
 
-<h3 id="Un_champ_email_simple">Un champ email simple</h3>
+### Un champ email simple
 
-<p>À l'heure actuelle, l'ensemble des navigateurs qui implémentent cet élément le gèrent comme un champ texte standard auquel certaines fonctionnalités de validation sont ajoutées. La spécification laisse toutefois une marge de manœuvre pour cette validation (l'élément pourrait par exemple consulter le répertoire de l'appareil pour choisir une adresse parmi cette liste). Dans sa forme la plus simple, un champ email peut être écrit de cette façon :</p>
+À l'heure actuelle, l'ensemble des navigateurs qui implémentent cet élément le gèrent comme un champ texte standard auquel certaines fonctionnalités de validation sont ajoutées. La spécification laisse toutefois une marge de manœuvre pour cette validation (l'élément pourrait par exemple consulter le répertoire de l'appareil pour choisir une adresse parmi cette liste). Dans sa forme la plus simple, un champ email peut être écrit de cette façon :
 
-<pre class="brush: html">&lt;input id="emailAddress" type="email"&gt;</pre>
+```html
+<input id="emailAddress" type="email">
+```
 
-<p>{{EmbedLiveSample('Un_champ_email_simple', 600, 40)}}</p>
+{{EmbedLiveSample('Un_champ_email_simple', 600, 40)}}
 
-<p>Un tel champ est considéré comme valide lorsqu'il est vide ou lorsqu'une adresse électronique bien formée est saisie. Dans les autres cas,, la valeur est considérée comme invalide. Si on ajoute l'attribut {{htmlattrxref("required", "input")}}, seuls les adresses électroniques bien formées sont autorisées, il n'est plus possible de laisser la valeur vide.</p>
+Un tel champ est considéré comme valide lorsqu'il est vide ou lorsqu'une adresse électronique bien formée est saisie. Dans les autres cas,, la valeur est considérée comme invalide. Si on ajoute l'attribut {{htmlattrxref("required", "input")}}, seuls les adresses électroniques bien formées sont autorisées, il n'est plus possible de laisser la valeur vide.
 
-<h3 id="Gérer_plusieurs_adresses_mail">Gérer plusieurs adresses mail</h3>
+### Gérer plusieurs adresses mail
 
-<p>Grâce à l'attribut {{htmlattrxref("multiple", "input")}}, on peut configurer le champ afin de saisir plusieurs adresses mail.</p>
+Grâce à l'attribut {{htmlattrxref("multiple", "input")}}, on peut configurer le champ afin de saisir plusieurs adresses mail.
 
-<pre class="brush: html">&lt;input id="emailAddress" type="email" multiple&gt;</pre>
+```html
+<input id="emailAddress" type="email" multiple>
+```
 
-<p>{{EmbedLiveSample('Gérer_plusieurs_adresses_mail', 600, 40)}}</p>
+{{EmbedLiveSample('Gérer_plusieurs_adresses_mail', 600, 40)}}
 
-<p>Avec cet attribut, la valeur saisie est valide quand on saisit zéro, une ou plusieurs adresses électroniques bien formées, séparées par des virgules et éventuellement entourées de blancs.</p>
+Avec cet attribut, la valeur saisie est valide quand on saisit zéro, une ou plusieurs adresses électroniques bien formées, séparées par des virgules et éventuellement entourées de blancs.
 
-<p>Voici certains exemples de chaînes de caractères valides lorsque <code>"multiple"</code> est utilisé :</p>
+Voici certains exemples de chaînes de caractères valides lorsque `"multiple"` est utilisé :
 
-<ul>
- <li><code>""</code></li>
- <li><code>"me@example"</code></li>
- <li><code>"me@example.org"</code></li>
- <li><code>"me@example.org,you@example.org"</code></li>
- <li><code>"me@example.org, you@example.org"</code></li>
- <li><code>"me@example.org,you@example.org,    us@example.org"</code></li>
-</ul>
+- `""`
+- `"me@example"`
+- `"me@example.org"`
+- `"me@example.org,you@example.org"`
+- `"me@example.org, you@example.org"`
+- `"me@example.org,you@example.org, us@example.org"`
 
-<p>En revanche, les exemples suivants sont considérés invalides :</p>
+En revanche, les exemples suivants sont considérés invalides :
 
-<ul>
- <li><code>","</code></li>
- <li><code>"me"</code></li>
- <li><code>"me@example.org you@example.org"</code></li>
-</ul>
+- `","`
+- `"me"`
+- `"me@example.org you@example.org"`
 
-<h3 id="Textes_indicatifs_(placeholders)">Textes indicatifs (<em>placeholders</em>)</h3>
+### Textes indicatifs (_placeholders_)
 
-<p>Il est parfois utile de fournir une indication contextuelle quant à la valeur qui doit être saisie. C'est notamment pertinent quand la disposition de la page ne permet pas d'utiliser des étiquettes suffisamment descriptives (ou longues) pour chaque élément {{HTMLElement("input")}}. Pour fournir une telle indication, on peut fournir un <em>placeholder</em> qui sera affiché dans le champ lorsque la valeur est vide et qui disparaît dès que des données sont saisies.</p>
+Il est parfois utile de fournir une indication contextuelle quant à la valeur qui doit être saisie. C'est notamment pertinent quand la disposition de la page ne permet pas d'utiliser des étiquettes suffisamment descriptives (ou longues) pour chaque élément {{HTMLElement("input")}}. Pour fournir une telle indication, on peut fournir un _placeholder_ qui sera affiché dans le champ lorsque la valeur est vide et qui disparaît dès que des données sont saisies.
 
-<p>Dans l'exemple qui suit, on utilise un élément <code>&lt;input&gt;</code> de type <code>"email"</code> avec le texte indicatif <code>"sophie@example.com"</code>. Vous pouvez manipuler l'exemple afin de voir comment ce texte disparaît/réapparaît lorsqu'on édite la valeur du champ.</p>
+Dans l'exemple qui suit, on utilise un élément `<input>` de type `"email"` avec le texte indicatif `"sophie@example.com"`. Vous pouvez manipuler l'exemple afin de voir comment ce texte disparaît/réapparaît lorsqu'on édite la valeur du champ.
 
-<pre class="brush: html">&lt;input type="email" placeholder="sophie@example.com"&gt;</pre>
+```html
+<input type="email" placeholder="sophie@example.com">
+```
 
-<p>{{EmbedLiveSample('Textes_indicatifs_(placeholders)', 600, 40)}}</p>
+{{EmbedLiveSample('Textes_indicatifs_(placeholders)', 600, 40)}}
 
-<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3>
+### Contrôler la taille du champ
 
-<p>Il est possible de contrôler la taille physique de la boîte de saisie et également la longueur minimale/maximale de la valeur qu'il est possible de saisir.</p>
+Il est possible de contrôler la taille physique de la boîte de saisie et également la longueur minimale/maximale de la valeur qu'il est possible de saisir.
 
-<h4 id="Contrôler_la_taille_physique">Contrôler la taille physique</h4>
+#### Contrôler la taille physique
 
-<p>La taille physique de la boîte de saisie peut être paramétrée grâce à l'attribut {{htmlattrxref("size", "input")}}. Grâce à cet attribut, on peut indiquer le nombre de caractères que le champ peut afficher. Dans l'exemple qui suit, la boîte d'édition pourra contenir jusqu'à 15 caractères :</p>
+La taille physique de la boîte de saisie peut être paramétrée grâce à l'attribut {{htmlattrxref("size", "input")}}. Grâce à cet attribut, on peut indiquer le nombre de caractères que le champ peut afficher. Dans l'exemple qui suit, la boîte d'édition pourra contenir jusqu'à 15 caractères :
 
-<pre class="brush: html">&lt;input type="email" size="15"&gt;</pre>
+```html
+<input type="email" size="15">
+```
 
-<p>{{ EmbedLiveSample('Contrôler_la_taille_physique', 600, 40)}}</p>
+{{ EmbedLiveSample('Contrôler_la_taille_physique', 600, 40)}}
 
-<h4 id="Contrôler_la_taille_de_la_valeur">Contrôler la taille de la valeur</h4>
+#### Contrôler la taille de la valeur
 
-<p>L'attribut <code>size</code> ne contraint pas la longueur de l'adresse qu'on pourra saisir. On peut donc avoir de petits champs qui permettent de saisir de longues adresses. Pour borner la taille de l'adresse mail à saisir, on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}} pour indiquer le nombre minimal de caractères et l'attribut {{htmlattrxref("maxlength", "input")}} pour indiquer le nombre maximal de caractères contenus dans l'adresse électronique.</p>
+L'attribut `size` ne contraint pas la longueur de l'adresse qu'on pourra saisir. On peut donc avoir de petits champs qui permettent de saisir de longues adresses. Pour borner la taille de l'adresse mail à saisir, on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}} pour indiquer le nombre minimal de caractères et l'attribut {{htmlattrxref("maxlength", "input")}} pour indiquer le nombre maximal de caractères contenus dans l'adresse électronique.
 
-<p>Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 32 caractères de large et dans laquelle on ne peut saisir des adresses qui ont au moins 3 caractères et au plus 64 caractères.</p>
+Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 32 caractères de large et dans laquelle on ne peut saisir des adresses qui ont au moins 3 caractères et au plus 64 caractères.
 
-<pre class="brush: html">&lt;input type="email" size="32" minlength="3" maxlength="64"&gt;</pre>
+```html
+<input type="email" size="32" minlength="3" maxlength="64">
+```
 
-<p>{{EmbedLiveSample("Contrôler_la_taille_de_la_valeur", 600, 40)}}</p>
+{{EmbedLiveSample("Contrôler_la_taille_de_la_valeur", 600, 40)}}
 
-<h3 id="Fournir_une_option_par_défaut">Fournir une option par défaut</h3>
+### Fournir une option par défaut
 
-<p>On peut également fournir une valeur par défaut en remplissant l'attribut {{htmlattrxref("value", "input")}} de l'élément :</p>
+On peut également fournir une valeur par défaut en remplissant l'attribut {{htmlattrxref("value", "input")}} de l'élément :
 
-<pre class="brush: html">&lt;input type="email" value="default@example.com"&gt;</pre>
+```html
+<input type="email" value="default@example.com">
+```
 
-<p>{{EmbedLiveSample("Fournir_une_option_par_défaut", 600, 40)}}</p>
+{{EmbedLiveSample("Fournir_une_option_par_défaut", 600, 40)}}
 
-<h4 id="Proposer_des_suggestions">Proposer des suggestions</h4>
+#### Proposer des suggestions
 
-<p>Pour améliorer encore l'ergonomie, on peut fournir une liste d'options par défaut parmi laquelle l'utilisateur peut choisir. Cela fonctionne en utilisant l'attribut {{htmlattrxref("list", "input")}} dont la valeur est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient différents éléments {{HTMLElement("option")}} dont les valeurs des attributs <code>value</code> fournissent les adresses suggérées. L'utilisateur n'est pas contraint à saisir une valeur parmi celles-ci, elles sont uniquement fournies à titre indicatif.</p>
+Pour améliorer encore l'ergonomie, on peut fournir une liste d'options par défaut parmi laquelle l'utilisateur peut choisir. Cela fonctionne en utilisant l'attribut {{htmlattrxref("list", "input")}} dont la valeur est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient différents éléments {{HTMLElement("option")}} dont les valeurs des attributs `value` fournissent les adresses suggérées. L'utilisateur n'est pas contraint à saisir une valeur parmi celles-ci, elles sont uniquement fournies à titre indicatif.
 
-<pre class="brush: html">&lt;input type="email" size="40" list="defaultEmails"&gt;
+```html
+<input type="email" size="40" list="defaultEmails">
 
-&lt;datalist id="defaultEmails"&gt;
-  &lt;option value="jbond007@mi6.defence.gov.uk"&gt;
-  &lt;option value="jbourne@unknown.net"&gt;
-  &lt;option value="nfury@shield.org"&gt;
-  &lt;option value="tony@starkindustries.com"&gt;
-  &lt;option value="hulk@grrrrrrrr.arg"&gt;
-&lt;/datalist&gt;</pre>
+<datalist id="defaultEmails">
+  <option value="jbond007@mi6.defence.gov.uk">
+  <option value="jbourne@unknown.net">
+  <option value="nfury@shield.org">
+  <option value="tony@starkindustries.com">
+  <option value="hulk@grrrrrrrr.arg">
+</datalist>
+```
 
-<p>{{EmbedLiveSample("Proposer_des_suggestions", 600, 40)}}</p>
+{{EmbedLiveSample("Proposer_des_suggestions", 600, 40)}}
 
-<p>Lorsqu'on utilise l'élément {{HTMLElement("datalist")}} et l'élément {{HTMLElement("option")}}, le navigateur affichera les adresses suggérées lors de la saisie, généralement sous la forme d'une liste déroulante ou d'une popup. Bien que les détails d'interface puissent dépendre de chaque navigateur, cliquer sur le champ d'édition affichera généralement la liste sous forme d'un volet déroulant. Ensuite, la liste est restreinte au fur et à mesure des caractères saisis.</p>
+Lorsqu'on utilise l'élément {{HTMLElement("datalist")}} et l'élément {{HTMLElement("option")}}, le navigateur affichera les adresses suggérées lors de la saisie, généralement sous la forme d'une liste déroulante ou d'une popup. Bien que les détails d'interface puissent dépendre de chaque navigateur, cliquer sur le champ d'édition affichera généralement la liste sous forme d'un volet déroulant. Ensuite, la liste est restreinte au fur et à mesure des caractères saisis.
 
-<h2 id="Validation">Validation</h2>
+## Validation
 
-<p>Il existe deux niveaux de validation pour les champs de saisie de type <code>"email"</code>. Tout d'abord, on a le niveau standard qui permet de vérifier automatiquement si l'adresse électronique est bien formatée. Ensuite, il est possible d'ajouter un filtre spécifique si besoin de répondre à des contraintes plus spécifiques.</p>
+Il existe deux niveaux de validation pour les champs de saisie de type `"email"`. Tout d'abord, on a le niveau standard qui permet de vérifier automatiquement si l'adresse électronique est bien formatée. Ensuite, il est possible d'ajouter un filtre spécifique si besoin de répondre à des contraintes plus spécifiques.
 
-<div class="warning">
-<p><strong>Attention :</strong> La validation du formulaire HTML par l'agent utilisateur ne saurait remplacer la vérification des données saisies côté serveur. En effet, il est relativement simple de modifier le document HTML avec son navigateur pour outrepasser les contraintes exprimées ici (quitte à les transmettre directement au serveur). Si les données ne sont pas vérifiées côté serveur, cela pourra entraîner des erreurs (valeurs trop grande, au mauvais format) voire des failles de sécurité.</p>
-</div>
+> **Attention :** La validation du formulaire HTML par l'agent utilisateur ne saurait remplacer la vérification des données saisies côté serveur. En effet, il est relativement simple de modifier le document HTML avec son navigateur pour outrepasser les contraintes exprimées ici (quitte à les transmettre directement au serveur). Si les données ne sont pas vérifiées côté serveur, cela pourra entraîner des erreurs (valeurs trop grande, au mauvais format) voire des failles de sécurité.
 
-<h3 id="Validation_simple">Validation simple</h3>
+### Validation simple
 
-<p>Les navigateurs qui implémentent le type <code>"email"</code> fournissent une validation automatique afin de vérifier que la valeur saisie respecte le format d'une adresse électronique valide. Les navigateurs utilisent <a href="https://dxr.mozilla.org/mozilla-central/source/dom/html/input/SingleLineTextInputTypes.cpp?q=%2Bfunction%3A%22EmailInputType%3A%3AIsValidEmailAddressList%28const+nsAString+%26%29%22&amp;redirect_type=single#184">un algorithme</a> pour respecter <a href="https://w3c.github.io/html/sec-forms.html#email-state-typeemail">la spécification</a>.</p>
+Les navigateurs qui implémentent le type `"email"` fournissent une validation automatique afin de vérifier que la valeur saisie respecte le format d'une adresse électronique valide. Les navigateurs utilisent [un algorithme](https://dxr.mozilla.org/mozilla-central/source/dom/html/input/SingleLineTextInputTypes.cpp?q=%2Bfunction%3A%22EmailInputType%3A%3AIsValidEmailAddressList%28const+nsAString+%26%29%22&redirect_type=single#184) pour respecter [la spécification](https://w3c.github.io/html/sec-forms.html#email-state-typeemail).
 
-<p>Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} peuvent être utilisées afin de mettre en forme la valeur selon qu'elle est valide ou non.</p>
+Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} peuvent être utilisées afin de mettre en forme la valeur selon qu'elle est valide ou non.
 
-<div class="note">
-<p><strong>Note :</strong> La spécification comporte certains problèmes relatifs aux noms de domaines internationaux et à la validation des adresses électroniques en HTML. Pour plus d'informations, lire <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489">le bug n°15489 du W3C</a>.</p>
-</div>
+> **Note :** La spécification comporte certains problèmes relatifs aux noms de domaines internationaux et à la validation des adresses électroniques en HTML. Pour plus d'informations, lire [le bug n°15489 du W3C](https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489).
 
-<h3 id="Validation_grâce_à_une_expression_rationnelle">Validation grâce à une expression rationnelle</h3>
+### Validation grâce à une expression rationnelle
 
-<p>S'il est nécessaire que l'adresse saisie respecte plus de critères, il est possible d'utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">une expression rationnelle</a> contre laquelle la valeur sera vérifiée. Si l'attribut {{htmlattrxref("multiple", "input")}} est actif, chaque élément de la liste devra respecter cette expression rationnelle.</p>
+S'il est nécessaire que l'adresse saisie respecte plus de critères, il est possible d'utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer [une expression rationnelle](/fr/docs/Web/JavaScript/Guide/Expressions_régulières) contre laquelle la valeur sera vérifiée. Si l'attribut {{htmlattrxref("multiple", "input")}} est actif, chaque élément de la liste devra respecter cette expression rationnelle.
 
-<p>Prenons comme exemple l'intranet d'une entreprise avec un site web qui permet de contacter le département du support technique en cas de besoin. Un formulaire simplifier permet de saisir une adresse électronique et un message. Dans ce cas, on souhaite vérifier que l'adresse électronique est saisie mais également que c'est une adresse respectant le format de celles utilisées dans l'entreprise.</p>
+Prenons comme exemple l'intranet d'une entreprise avec un site web qui permet de contacter le département du support technique en cas de besoin. Un formulaire simplifier permet de saisir une adresse électronique et un message. Dans ce cas, on souhaite vérifier que l'adresse électronique est saisie mais également que c'est une adresse respectant le format de celles utilisées dans l'entreprise.
 
-<p>Le navigateur vérifie d'une part que l'adresse électronique est une adresse correctement formatée <em>et</em> que celle-ci respecte l'expression rationnelle indiquée avec {{htmlattrxref("pattern", "input")}}. Voici un exemple d'application :</p>
+Le navigateur vérifie d'une part que l'adresse électronique est une adresse correctement formatée _et_ que celle-ci respecte l'expression rationnelle indiquée avec {{htmlattrxref("pattern", "input")}}. Voici un exemple d'application :
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   font: 16px sans-serif;
 }
 
@@ -300,128 +245,129 @@ label {
 
 label::after {
   content: ":";
-}</pre>
+}
+```
 
-<pre class="brush: html">&lt;form&gt;
- &lt;div class="emailBox"&gt;
-   &lt;label for="emailAddress"&gt;Votre adresse email&lt;/label&gt;&lt;br&gt;
-   &lt;input id="emailAddress" type="email" size="64" maxLength="64" required
+```html
+<form>
+ <div class="emailBox">
+   <label for="emailAddress">Votre adresse email</label><br>
+   <input id="emailAddress" type="email" size="64" maxLength="64" required
           placeholder="nomutilisateur@beststartupever.com" pattern=".+@beststartupever.com"
-          title="Merci de fournir uniquement une adresse Best Startup Ever"&gt;
- &lt;/div&gt;
+          title="Merci de fournir uniquement une adresse Best Startup Ever">
+ </div>
 
- &lt;div class="messageBox"&gt;
-   &lt;label for="message"&gt;Requête&lt;/label&gt;&lt;br&gt;
-   &lt;textarea id="message" cols="80" rows="8" required
-             placeholder="Mes chaussures sont trop petites."&gt;&lt;/textarea&gt;
- &lt;/div&gt;
-  &lt;input type="submit" value="Envoyer la requête"&gt;
-&lt;/form&gt;
-</pre>
+ <div class="messageBox">
+   <label for="message">Requête</label><br>
+   <textarea id="message" cols="80" rows="8" required
+             placeholder="Mes chaussures sont trop petites."></textarea>
+ </div>
+  <input type="submit" value="Envoyer la requête">
+</form>
+```
 
-<p>{{EmbedLiveSample("Validation_grâce_à_une_expression_rationnelle", 700, 275)}}</p>
+{{EmbedLiveSample("Validation_grâce_à_une_expression_rationnelle", 700, 275)}}
 
-<p>Le formulaire ({{HTMLElement("form")}}) contient un élément {{HTMLElement("input")}} de type <code>"email"</code> pour saisir l'adresse de l'utilisateur, un élément {{HTMLElement("textarea")}} permettant de saisir le message et un élément <code>&lt;input&gt;</code> de type <code><a href="/fr/docs/Web/HTML/Element/input/submit">"submit"</a></code> qui formera un bouton permettant d'envoyer le formulaire. Chaque champ possède un élément {{HTMLElement("label")}} associé qui permet d'indiquer ce qui est attendu.</p>
+Le formulaire ({{HTMLElement("form")}}) contient un élément {{HTMLElement("input")}} de type `"email"` pour saisir l'adresse de l'utilisateur, un élément {{HTMLElement("textarea")}} permettant de saisir le message et un élément `<input>` de type [`"submit"`](/fr/docs/Web/HTML/Element/input/submit) qui formera un bouton permettant d'envoyer le formulaire. Chaque champ possède un élément {{HTMLElement("label")}} associé qui permet d'indiquer ce qui est attendu.
 
-<p>Si on regarde le champ de saisie pour l'adresse électronique, on voit que les deux attributs {{htmlattrxref("size", "input")}} et {{htmlattrxref("maxlength", "input")}} ont la valeur 64 (on affiche une boîte de saisie large de 64 caractères et on ne peut saisir une adresse électronique d'au plus 64 caractères). L'attribut {{htmlattrxref("required", "input")}} est présent et l'adresse électronique est donc obligatoire pour l'envoi du formulaire.</p>
+Si on regarde le champ de saisie pour l'adresse électronique, on voit que les deux attributs {{htmlattrxref("size", "input")}} et {{htmlattrxref("maxlength", "input")}} ont la valeur 64 (on affiche une boîte de saisie large de 64 caractères et on ne peut saisir une adresse électronique d'au plus 64 caractères). L'attribut {{htmlattrxref("required", "input")}} est présent et l'adresse électronique est donc obligatoire pour l'envoi du formulaire.
 
-<p>L'attribut {{htmlattrxref("placeholder", "input")}} indique qu'une valeur semblable à <code>"nomutilisateur@beststartupever.com"</code> est attendue. L'intérêt de cette valeur est double : on indique qu'il faut saisir une adresse mail et on suggère que cette adresse provient d'un compte beststartupever.com. Le type <code>"email"</code> permet de valider le texte saisi afin de vérifier qu'il s'agit d'une adresse électronique valide. Si la valeur saisie n'est pas une adresse valide, un message d'erreur sera affiché :</p>
+L'attribut {{htmlattrxref("placeholder", "input")}} indique qu'une valeur semblable à `"nomutilisateur@beststartupever.com"` est attendue. L'intérêt de cette valeur est double : on indique qu'il faut saisir une adresse mail et on suggère que cette adresse provient d'un compte beststartupever.com. Le type `"email"` permet de valider le texte saisi afin de vérifier qu'il s'agit d'une adresse électronique valide. Si la valeur saisie n'est pas une adresse valide, un message d'erreur sera affiché :
 
-<p><img alt="" src="enter-valid-email-address.png"></p>
+![](enter-valid-email-address.png)
 
-<p>Si on utilise uniquement les attributs qu'on vient de décrire, on restreint les valeurs saisissables aux adresses électroniques valides de 64 caractères. Or, on veut également valider le fait que l'adresse respecte le format "<em>nomutilisateur</em>@beststartupever.com". C'est pourquoi on utilise l'attribut {{htmlattrxref("pattern", "input")}} avec la valeur <code>".+@beststartupever.com"</code>. Cette valeur est une expression rationnelle qui permet de vérifier que la chaîne de caractère contient un ou plusieurs caractères quelconques, ensuite suivi d'une arobase (@) puis du nom de domaine "beststartupever.com".</p>
+Si on utilise uniquement les attributs qu'on vient de décrire, on restreint les valeurs saisissables aux adresses électroniques valides de 64 caractères. Or, on veut également valider le fait que l'adresse respecte le format "_nomutilisateur_@beststartupever.com". C'est pourquoi on utilise l'attribut {{htmlattrxref("pattern", "input")}} avec la valeur `".+@beststartupever.com"`. Cette valeur est une expression rationnelle qui permet de vérifier que la chaîne de caractère contient un ou plusieurs caractères quelconques, ensuite suivi d'une arobase (@) puis du nom de domaine "beststartupever.com".
 
-<p>On notera que cette expression rationnelle ne permet pas de vérifier que l'adresse électronique est valide (on pourra par exemple avoir " @beststartupever.com" (avec un espace en début de chaîne) ou encore "@@beststartupever.com" qui ne sont pas valides). En fait, le navigateur vérifie que l'adresse respecte l'expression rationnelle fournie <strong>et</strong> que l'adresse est valide. Autrement dit, avec le type <code>"email"</code> et cette valeur pour l'attribut <code>pattern</code>, on s'assure que l'adresse est une adresse électronique valide et que c'est une bien une adresse avec le nom de domaine "beststartupever.com".</p>
+On notera que cette expression rationnelle ne permet pas de vérifier que l'adresse électronique est valide (on pourra par exemple avoir " @beststartupever.com" (avec un espace en début de chaîne) ou encore "@@beststartupever.com" qui ne sont pas valides). En fait, le navigateur vérifie que l'adresse respecte l'expression rationnelle fournie **et** que l'adresse est valide. Autrement dit, avec le type `"email"` et cette valeur pour l'attribut `pattern`, on s'assure que l'adresse est une adresse électronique valide et que c'est une bien une adresse avec le nom de domaine "beststartupever.com".
 
-<p>Lorsqu'on utilise l'attribut <code>pattern</code> Il est conseillé d'utilisé l'attribut {{htmlattrxref("title")}} afin de décrire le motif de l'expression ratioennelle. Autrement dit, dans ce cas, l'attribut <code>title</code> doit décrire le format souhaité plutôt que contenir une autre information. En effet, cet attribut sera affiché ou prononcé en cas d'erreur. Par exemple, le navigateur pourrait afficher le message "Le texte saisi ne correspond pas au motif requis." suivi du texte indiqué dans la valeur de <code>title</code>. Par exemple si l'attribut <code>title</code> vaut "Adresse email", le message affiché serait "Le texte saisi ne correspond pas au motif requis. Adresse email" ce qui n'est pas correct.</p>
+Lorsqu'on utilise l'attribut `pattern` Il est conseillé d'utilisé l'attribut {{htmlattrxref("title")}} afin de décrire le motif de l'expression ratioennelle. Autrement dit, dans ce cas, l'attribut `title` doit décrire le format souhaité plutôt que contenir une autre information. En effet, cet attribut sera affiché ou prononcé en cas d'erreur. Par exemple, le navigateur pourrait afficher le message "Le texte saisi ne correspond pas au motif requis." suivi du texte indiqué dans la valeur de `title`. Par exemple si l'attribut `title` vaut "Adresse email", le message affiché serait "Le texte saisi ne correspond pas au motif requis. Adresse email" ce qui n'est pas correct.
 
-<p>C'est pour cela qu'on indique la chaîne de caractères "Merci de fournir uniquement une adresse Best Startup Ever". Le message complet obtenu sera donc : "Le texte saisi ne correspond pas au motif requis. Merci de fournir uniquement une adresse Best Startup Ever."</p>
+C'est pour cela qu'on indique la chaîne de caractères "Merci de fournir uniquement une adresse Best Startup Ever". Le message complet obtenu sera donc : "Le texte saisi ne correspond pas au motif requis. Merci de fournir uniquement une adresse Best Startup Ever."
 
-<p><img alt="" src="email-pattern-match-bad.png"></p>
+![](email-pattern-match-bad.png)
 
-<div class="note">
-<p><strong>Note :</strong> Si vous rencontrez des problèmes à propos de l'expression rationnelle, n'hésitez pas à ouvrir la console du navigateur. Cette dernière peut contenir des messages d'erreur aidant à diagnostiquer et résoudre le problème.</p>
-</div>
+> **Note :** Si vous rencontrez des problèmes à propos de l'expression rationnelle, n'hésitez pas à ouvrir la console du navigateur. Cette dernière peut contenir des messages d'erreur aidant à diagnostiquer et résoudre le problème.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte  <code>"user@example.gov"</code> comme indication lorsque le champ est vide. On trouve également l'attribut {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur.</p>
+Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte  `"user@example.gov"` comme indication lorsque le champ est vide. On trouve également l'attribut {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur.
 
-<p>L'élément {{HTMLElement("label")}} qui précède l'élément <code>&lt;input&gt;</code> permettra d'afficher un libellé avant la boîte de saisie. Le lien entre les deux est fait grâce à l'attribut <code>for</code> qui contient <code>"emailAddress"</code> qui est l'identifiant de l'élément {{HTMLElement("input")}}. Grâce à cette association, cliquer sur l'étiquette permettra de placer le focus sur le champ de saisie.</p>
+L'élément {{HTMLElement("label")}} qui précède l'élément `<input>` permettra d'afficher un libellé avant la boîte de saisie. Le lien entre les deux est fait grâce à l'attribut `for` qui contient `"emailAddress"` qui est l'identifiant de l'élément {{HTMLElement("input")}}. Grâce à cette association, cliquer sur l'étiquette permettra de placer le focus sur le champ de saisie.
 
-<pre class="brush: html">&lt;label for="emailAddress"&gt;Email&lt;/label&gt;&lt;br/&gt;
-&lt;input id="emailAddress" type="email" placeholder="user@example.gov"
-       list="defaultEmails" size="64" maxlength="256" multiple&gt;
+```html
+<label for="emailAddress">Email</label><br/>
+<input id="emailAddress" type="email" placeholder="user@example.gov"
+       list="defaultEmails" size="64" maxlength="256" multiple>
 
-&lt;datalist id="defaultEmails"&gt;
-  &lt;option value="jbond007@mi6.defence.gov.uk"&gt;
-  &lt;option value="jbourne@unknown.net"&gt;
-  &lt;option value="nfury@shield.org"&gt;
-  &lt;option value="tony@starkindustries.com"&gt;
-  &lt;option value="hulk@grrrrrrrr.arg"&gt;
-&lt;/datalist&gt;</pre>
+<datalist id="defaultEmails">
+  <option value="jbond007@mi6.defence.gov.uk">
+  <option value="jbourne@unknown.net">
+  <option value="nfury@shield.org">
+  <option value="tony@starkindustries.com">
+  <option value="hulk@grrrrrrrr.arg">
+</datalist>
+```
 
-<p>{{EmbedLiveSample('Exemples', 600, 50)}}</p>
+{{EmbedLiveSample('Exemples', 600, 50)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) représentant une adresse électronique ou une chaîne vide.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("multiple", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>list</code> et <code>value</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) représentant
+        une adresse électronique ou une chaîne vide.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>
+        {{domxref("HTMLElement/change_event", "change")}} et
+        {{domxref("HTMLElement/input_event", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}},
+        {{htmlattrxref("list", "input")}},
+        {{htmlattrxref("maxlength", "input")}},
+        {{htmlattrxref("minlength", "input")}},
+        {{htmlattrxref("multiple", "input")}},
+        {{htmlattrxref("pattern", "input")}},
+        {{htmlattrxref("placeholder", "input")}},
+        {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}
+        et {{htmlattrxref("size", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td><code>list</code> et <code>value</code></td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#e-mail-state-(type=email)', '&lt;input type="email"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '&lt;input type="email"&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                    | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#e-mail-state-(type=email)', '&lt;input type="email"&gt;')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+| {{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '&lt;input type="email"&gt;')}}     | {{Spec2('HTML5.1')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-email")}}</p>
+{{Compat("html.elements.input.input-email")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Le guide relatif aux formulaires HTML</a></li>
- <li>{{HTMLElement("input")}}</li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input">&lt;input type="tel"&gt;</a></code></li>
-</ul>
+- [Le guide relatif aux formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires)
+- {{HTMLElement("input")}}
+- [`<input type="tel">`](/fr/docs/Web/HTML/Element/input)
diff --git a/files/fr/web/html/element/input/file/index.md b/files/fr/web/html/element/input/file/index.md
index 924ba06e65..8d329673d4 100644
--- a/files/fr/web/html/element/input/file/index.md
+++ b/files/fr/web/html/element/input/file/index.md
@@ -7,257 +7,218 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/file
 ---
-<div>{{HTMLRef}}</div>
-
-<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"file"</code></strong> permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les <em>uploader</em> vers un serveur via <a href="/fr/docs/Web/Guide/HTML/Formulaires">un formulaire</a> ou grâce à du code JavaScript <a href="/fr/docs/Using_files_from_web_applications">via l'API <em>File</em></a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</div>
-
-<h2 id="Valeur">Valeur</h2>
-
-<p>L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du/des fichier(s) sélectionné(s). Les autres fichiers peuvent être identifiés grâce à la propriété <code>HTMLInputElement.files</code>.</p>
-
-<div class="note">
-  <p><strong>Note :</strong></p>
-<ol>
- <li>Si plusieurs fichiers sont sélectionnés, la chaîne de caractères représente le chemin du premier fichier sélectionné. Il est possible d'accéder aux autres fichiers en JavaScript <a href="/en-US/docs/Using_files_from_web_applications#Getting_information_about_selected_file(s)">grâce à la propriété <code>FileList</code></a>.</li>
- <li>Si aucun fichier n'est sélectionné, la chaîne de caractères sera vide (<code>""</code>).</li>
- <li>La chaîne de caractères <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly">est préfixée avec <code>C:\fakepath\</code></a> afin d'éviter la fuite d'informations sensibles concernant la structure des fichiers de l'utilisateur.</li>
-</ol>
-</div>
-
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
-
-<p>En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>file</code> peuvent également utiliser les attributs suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("accept")}}</code></td>
-   <td>Un ou plusieurs identifiants de type de fichier décrivants les types de fichier autorisés.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("capture")}}</code></td>
-   <td>La source à utiliser pour capturer des images ou des vidéos.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("files")}}</code></td>
-   <td>Un objet {{domxref("FileList")}} qui liste les fichiers choisis</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("multiple")}}</code></td>
-   <td>Un attribut booléen qui, lorsqu'il est présent, indique que plusieurs fichiers peuvent être sélectionnés.</td>
-  </tr>
- </tbody>
-</table>
+{{HTMLRef}}
 
-<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3>
+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"file"`** permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les _uploader_ vers un serveur via [un formulaire](/fr/docs/Web/Guide/HTML/Formulaires) ou grâce à du code JavaScript [via l'API _File_](/fr/docs/Using_files_from_web_applications).
 
-<p>Une chaîne de caractères qui définit les types de fichier qui devraient être acceptés. Cette chaîne est une liste d'identifiants de type de fichier (cf. ci-après) séparés par des virgules. Un fichier pouvant avoir un format selon différentes extensions et types MIME, il est souvent utile de cibler plusieurs identifiants pour la bonne sélection du fichier.</p>
+{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}
 
-<p>Les fichiers Microsoft Word, par exemple, peuvent être identifiés de différentes façons et, dans un site avec un champ qui accepte les fichiers Word, on pourra écrire :</p>
+## Valeur
 
-<pre class="brush: html">&lt;input type="file" id="docpicker"
-  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"&gt;</pre>
+L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du/des fichier(s) sélectionné(s). Les autres fichiers peuvent être identifiés grâce à la propriété `HTMLInputElement.files`.
 
-<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3>
+> **Note :**
+>
+> 1.  Si plusieurs fichiers sont sélectionnés, la chaîne de caractères représente le chemin du premier fichier sélectionné. Il est possible d'accéder aux autres fichiers en JavaScript [grâce à la propriété `FileList`](</en-US/docs/Using_files_from_web_applications#Getting_information_about_selected_file(s)>).
+> 2.  Si aucun fichier n'est sélectionné, la chaîne de caractères sera vide (`""`).
+> 3.  La chaîne de caractères [est préfixée avec `C:\fakepath\`](https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly) afin d'éviter la fuite d'informations sensibles concernant la structure des fichiers de l'utilisateur.
 
-<p>Une chaîne de caractères qui indique la caméra à utiliser pour capturer des photos et des vidéos si l'attribut <code>accept</code> indique que le fichier est de ce type. Lorsque <code>capture</code> vaut <code>"user"</code>, cela indique que la caméra qui fait face à l'utilisateur devrait être utilisée. Si l'attribut vaut <code>"environment"</code>, c'est la caméra qui est tournée vers l'extérieur devrait être utilisée. Si l'attribut est absent, l'agent utilisateur pourra décider de laquelle utiliser. Si la caméra souhaitée par l'attribut n'est pas disponible, l'agent utilisateur pourra utiliser une autre caméra de l'appareil.</p>
+## Attributs supplémentaires
 
-<div class="note">
-  <p><strong>Note :</strong> <code>capture</code> était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier.</p>
-</div>
+En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `file` peuvent également utiliser les attributs suivants :
 
-<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3>
+| Attribut                       | Description                                                                                               |
+| ------------------------------ | --------------------------------------------------------------------------------------------------------- |
+| `{{anch("accept")}}`     | Un ou plusieurs identifiants de type de fichier décrivants les types de fichier autorisés.                |
+| `{{anch("capture")}}`     | La source à utiliser pour capturer des images ou des vidéos.                                              |
+| `{{anch("files")}}`     | Un objet {{domxref("FileList")}} qui liste les fichiers choisis                                  |
+| `{{anch("multiple")}}` | Un attribut booléen qui, lorsqu'il est présent, indique que plusieurs fichiers peuvent être sélectionnés. |
 
-<p>Un objet {{domxref("FileList")}} qui liste chaque fichier sélectionné. Cette liste n'a qu'un seul élément, sauf si {{htmlattrxref("multiple", "input/file")}} est indiqué.</p>
+### {{htmlattrdef("accept")}}
 
-<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3>
+Une chaîne de caractères qui définit les types de fichier qui devraient être acceptés. Cette chaîne est une liste d'identifiants de type de fichier (cf. ci-après) séparés par des virgules. Un fichier pouvant avoir un format selon différentes extensions et types MIME, il est souvent utile de cibler plusieurs identifiants pour la bonne sélection du fichier.
 
-<p>Lorsque cet attribut booléen est indiqué, le champ peut être utilisé afin de sélectionner plus d'un fichier.</p>
+Les fichiers Microsoft Word, par exemple, peuvent être identifiés de différentes façons et, dans un site avec un champ qui accepte les fichiers Word, on pourra écrire :
 
-<h2 id="Attribut_non-standard">Attribut non-standard</h2>
+```html
+<input type="file" id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
+```
 
-<p>En complément des attributs précédents, les éléments <code>&lt;input type="file"&gt;</code> peuvent utiliser les attributs spécifiques suivants. Ces attributs ne sont pas standard et ne devraient donc pas être utilisés.</p>
+### {{htmlattrdef("capture")}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("webkitdirectory")}}</code></td>
-   <td>Un attribut booléen qui indique si l'utilisateur peut choisir un répertoire (ou plusieurs si <code>{{anch("multiple")}}</code> est présent).</td>
-  </tr>
- </tbody>
-</table>
+Une chaîne de caractères qui indique la caméra à utiliser pour capturer des photos et des vidéos si l'attribut `accept` indique que le fichier est de ce type. Lorsque `capture` vaut `"user"`, cela indique que la caméra qui fait face à l'utilisateur devrait être utilisée. Si l'attribut vaut `"environment"`, c'est la caméra qui est tournée vers l'extérieur devrait être utilisée. Si l'attribut est absent, l'agent utilisateur pourra décider de laquelle utiliser. Si la caméra souhaitée par l'attribut n'est pas disponible, l'agent utilisateur pourra utiliser une autre caméra de l'appareil.
+
+> **Note :** `capture` était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier.
+
+### {{htmlattrdef("files")}}
+
+Un objet {{domxref("FileList")}} qui liste chaque fichier sélectionné. Cette liste n'a qu'un seul élément, sauf si {{htmlattrxref("multiple", "input/file")}} est indiqué.
+
+### {{htmlattrdef("multiple")}}
+
+Lorsque cet attribut booléen est indiqué, le champ peut être utilisé afin de sélectionner plus d'un fichier.
+
+## Attribut non-standard
 
-<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3>
+En complément des attributs précédents, les éléments `<input type="file">` peuvent utiliser les attributs spécifiques suivants. Ces attributs ne sont pas standard et ne devraient donc pas être utilisés.
 
-<p>L'attribut booléen <code>webkitdirectory</code>, lorsqu'il est présent, indique que le contrôle permet de sélectionner un/des répertoires plutôt qu'un/des fichiers. Voir {{domxref("HTMLInputElement.webkitdirectory")}} pour plus de détails et d'exemples.</p>
+| Attribut                               | Description                                                                                                                               |
+| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("webkitdirectory")}}` | Un attribut booléen qui indique si l'utilisateur peut choisir un répertoire (ou plusieurs si `{{anch("multiple")}}` est présent). |
 
-<div class="note">
-<p><strong>Note :</strong> Bien que cet attribut ait initialement été implémenté pour les navigateurs WebKit, <code>webkitdirectory</code> est utilisable avec Microsoft Edge et pour Firefox 50 et supérieurs. Toutefois, bien que la prise en charge soit assez vaste, cet attribut reste non-standard et ne doit pas être utilisé.</p>
-</div>
+### {{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}
 
-<h2 id="Identifiants_de_type_de_fichier">Identifiants de type de fichier</h2>
+L'attribut booléen `webkitdirectory`, lorsqu'il est présent, indique que le contrôle permet de sélectionner un/des répertoires plutôt qu'un/des fichiers. Voir {{domxref("HTMLInputElement.webkitdirectory")}} pour plus de détails et d'exemples.
 
-<p>Un identifiant de type de fichier est une chaîne de caractères qui décrit le type de fichier qui peut être sélectionné par un utilisateur via un élément {{HTMLElement("input")}} de type <code>file</code>. Chaque identifiant peut prendre une des formes suivantes :</p>
+> **Note :** Bien que cet attribut ait initialement été implémenté pour les navigateurs WebKit, `webkitdirectory` est utilisable avec Microsoft Edge et pour Firefox 50 et supérieurs. Toutefois, bien que la prise en charge soit assez vaste, cet attribut reste non-standard et ne doit pas être utilisé.
 
-<ul>
- <li>Une extension de fichier valide, sensible à la casse et qui commence par un point (« . »). Par exemple : <code>.jpg</code>, <code>.pdf</code> ou <code>.doc</code>.</li>
- <li>Un type MIME valide, sans extension.</li>
- <li>La chaîne de caractères <code>audio/*</code> qui indique « n'importe quel fichier audio »</li>
- <li>La chaîne de caractères <code>video/*</code> qui indique « n'importe quel fichier vidéo »</li>
- <li>La chaîne de caractères <code>image/*</code> qui indique « n'importe quel fichier image ».</li>
-</ul>
+## Identifiants de type de fichier
 
-<p>L'attribut <code>accept</code> prend comme valeur une chaîne de caractères composée d'un ou plusieurs identifiants de type, séparés par des virgules. Ainsi, si un sélecteur de fichier doit permettre de sélectionner des images ou des documents PDF, on pourra écrire :</p>
+Un identifiant de type de fichier est une chaîne de caractères qui décrit le type de fichier qui peut être sélectionné par un utilisateur via un élément {{HTMLElement("input")}} de type `file`. Chaque identifiant peut prendre une des formes suivantes :
 
-<pre class="brush: html">&lt;input type="file" accept="image/*,.pdf"&gt;</pre>
+- Une extension de fichier valide, sensible à la casse et qui commence par un point (« . »). Par exemple : `.jpg`, `.pdf` ou `.doc`.
+- Un type MIME valide, sans extension.
+- La chaîne de caractères `audio/*` qui indique « n'importe quel fichier audio »
+- La chaîne de caractères `video/*` qui indique « n'importe quel fichier vidéo »
+- La chaîne de caractères `image/*` qui indique « n'importe quel fichier image ».
 
-<h2 id="Utiliser_&lt;input_typefile>">Utiliser <code>&lt;input type="file"&gt;</code></h2>
+L'attribut `accept` prend comme valeur une chaîne de caractères composée d'un ou plusieurs identifiants de type, séparés par des virgules. Ainsi, si un sélecteur de fichier doit permettre de sélectionner des images ou des documents PDF, on pourra écrire :
 
-<h3 id="Un_exemple_simple">Un exemple simple</h3>
+```html
+<input type="file" accept="image/*,.pdf">
+```
 
-<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
- &lt;div&gt;
-   &lt;label for="file"&gt;Sélectionner le fichier à envoyer&lt;/label&gt;
-   &lt;input type="file" id="file" name="file" multiple&gt;
- &lt;/div&gt;
- &lt;div&gt;
-   &lt;button&gt;Envoyer&lt;/button&gt;
- &lt;/div&gt;
-&lt;/form&gt;</pre>
+## Utiliser `<input type="file">`
 
-<pre class="brush: css hidden">div {
+### Un exemple simple
+
+```html
+<form method="post" enctype="multipart/form-data">
+ <div>
+   <label for="file">Sélectionner le fichier à envoyer</label>
+   <input type="file" id="file" name="file" multiple>
+ </div>
+ <div>
+   <button>Envoyer</button>
+ </div>
+</form>
+```
+
+```css hidden
+div {
   margin-bottom: 10px;
-}</pre>
+}
+```
 
-<p>Ce fragment de code HTML produira le résultat suivant :</p>
+Ce fragment de code HTML produira le résultat suivant :
 
-<p>{{EmbedLiveSample('Un_exemple_simple', 650, 60)}}</p>
+{{EmbedLiveSample('Un_exemple_simple', 650, 60)}}
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez également trouver cet exemple sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">avec le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">la démonstration</a>.</p>
-</div>
+> **Note :** Vous pouvez également trouver cet exemple sur GitHub — [avec le code source](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html) et [la démonstration](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html).
 
-<p>Quel que soit l'appareil ou le système d'exploitation de l'utilisateur, l'élément <code>&lt;input type="file"&gt;</code> fournit un bouton qui ouvre un sélecteur de fichier permettant de choisir un fichier.</p>
+Quel que soit l'appareil ou le système d'exploitation de l'utilisateur, l'élément `<input type="file">` fournit un bouton qui ouvre un sélecteur de fichier permettant de choisir un fichier.
 
-<p>Lorsque l'attribut {{htmlattrxref("multiple", "input")}} est utilisé (comme dans l'exemple précédent), cela signifie que plusieurs fichiers peuvent être sélectionnés de façon simultanée. L'utilisateur doit alors pouvoir choisir plusieurs fichiers depuis le sélecteur de fichier (par exemple en maintenant la touche <kbd>Shift</kbd> ou <kbd>Control</kbd> puis en cliquant). Si on souhaite qu'un seul fichier puisse être envoyé, il suffit de ne pas utiliser l'attribut <code>multiple</code>.</p>
+Lorsque l'attribut {{htmlattrxref("multiple", "input")}} est utilisé (comme dans l'exemple précédent), cela signifie que plusieurs fichiers peuvent être sélectionnés de façon simultanée. L'utilisateur doit alors pouvoir choisir plusieurs fichiers depuis le sélecteur de fichier (par exemple en maintenant la touche <kbd>Shift</kbd> ou <kbd>Control</kbd> puis en cliquant). Si on souhaite qu'un seul fichier puisse être envoyé, il suffit de ne pas utiliser l'attribut `multiple`.
 
-<p>Lorsqu'on envoie le formulaire de l'exemple, le nom de chaque fichier sera ajouté aux paramètres de l'URL de la façon suivante : <code>?file=fichier1.txt&amp;file=fichier2.txt</code></p>
+Lorsqu'on envoie le formulaire de l'exemple, le nom de chaque fichier sera ajouté aux paramètres de l'URL de la façon suivante : `?file=fichier1.txt&file=fichier2.txt`
 
-<h3 id="Obtenir_des_informations_sur_les_fichiers_sélectionnés">Obtenir des informations sur les fichiers sélectionnés</h3>
+### Obtenir des informations sur les fichiers sélectionnés
 
-<p>Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objet {{domxref("FileList")}} renvoyé par la propriété <code>HTMLInputElement.files</code> de l'élement du DOM. Cet objet est une liste d'objets {{domxref("File")}}. Un objet <code>FileList</code> se comporte comme un tableau et on peut donc consulter sa longueur (la propriété <code>length</code>) afin de connaître le nombre de fichiers sélectionnés.</p>
+Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objet {{domxref("FileList")}} renvoyé par la propriété `HTMLInputElement.files` de l'élement du DOM. Cet objet est une liste d'objets {{domxref("File")}}. Un objet `FileList` se comporte comme un tableau et on peut donc consulter sa longueur (la propriété `length`) afin de connaître le nombre de fichiers sélectionnés.
 
-<p>Chaque objet <code>File</code> contient les informations suivantes :</p>
+Chaque objet `File` contient les informations suivantes :
 
-<ul>
- <li><code>name</code> : le nom du fichier.</li>
- <li><code>lastModified</code> : un nombre représentant la date à laquelle le fichier a été modifié pour la dernière fois (sous la forme d'un horodatage UNIX).</li>
- <li><code>lastModifiedDate</code> : un objet {{domxref("Date")}} qui représente la date et l'heure à laquelle le fichier a été modifié pour la dernière fois.</li>
- <li><code>size</code> : un nombre qui représente la taille du fichier en octets.</li>
- <li><code>type</code> : une chaîne de caractères ({{domxref("DOMString")}}) qui représente <a href="/fr/docs/Glossaire/Type_MIME">le type MIME</a> du fichier.</li>
- <li><code>webkitRelativePath</code>{{non-standard_inline}} : une chaîne de caractères qui indique l'emplacement relatif du fichier par rapport au dossier de base indiqué par l'attribut {{htmlattrxref("webkitdirectory", "input")}}. <em>Attention, cette fonctionnalité est non-standard et doit être utilisée avec précaution.</em></li>
-</ul>
+- `name` : le nom du fichier.
+- `lastModified` : un nombre représentant la date à laquelle le fichier a été modifié pour la dernière fois (sous la forme d'un horodatage UNIX).
+- `lastModifiedDate` : un objet {{domxref("Date")}} qui représente la date et l'heure à laquelle le fichier a été modifié pour la dernière fois.
+- `size` : un nombre qui représente la taille du fichier en octets.
+- `type` : une chaîne de caractères ({{domxref("DOMString")}}) qui représente [le type MIME](/fr/docs/Glossaire/Type_MIME) du fichier.
+- `webkitRelativePath`{{non-standard_inline}} : une chaîne de caractères qui indique l'emplacement relatif du fichier par rapport au dossier de base indiqué par l'attribut {{htmlattrxref("webkitdirectory", "input")}}. _Attention, cette fonctionnalité est non-standard et doit être utilisée avec précaution._
 
-<div class="note">
-<p><strong>Note :</strong> Dans la plupart des navigateurs récents, il est possible de récupérer et de modifier l'attribut IDL <code>HTMLInputElement.files</code>. Pour Firefox, cela a été ajouté avec la version 57 (cf. {{bug(1384030)}}).</p>
-</div>
+> **Note :** Dans la plupart des navigateurs récents, il est possible de récupérer et de modifier l'attribut IDL `HTMLInputElement.files`. Pour Firefox, cela a été ajouté avec la version 57 (cf. {{bug(1384030)}}).
 
-<h3 id="Restreindre_les_types_de_fichiers_acceptés">Restreindre les types de fichiers acceptés</h3>
+### Restreindre les types de fichiers acceptés
 
-<p>Il arrive souvent qu'on souhaite sélectionner certains types de fichiers. Par exemple, si on souhaite fournir une image de profil, on restreindra probablemnt les formats à ceux des formats d'image compatibles pour le Web comme <a href="/fr/docs/Glossaire/jpeg">JPEG</a> ou <a href="/fr/docs/Glossaire/PNG">PNG</a>.</p>
+Il arrive souvent qu'on souhaite sélectionner certains types de fichiers. Par exemple, si on souhaite fournir une image de profil, on restreindra probablemnt les formats à ceux des formats d'image compatibles pour le Web comme [JPEG](/fr/docs/Glossaire/jpeg) ou [PNG](/fr/docs/Glossaire/PNG).
 
-<p>Pour cela, on peut utiliser l'attribut {{htmlattrxref("accept","input")}} afin d'indiquer les formats de fichier acceptés (sous la forme d'une liste d'extensions de fichier ou de types MIME séparés par des virgules). Par exemple :</p>
+Pour cela, on peut utiliser l'attribut {{htmlattrxref("accept","input")}} afin d'indiquer les formats de fichier acceptés (sous la forme d'une liste d'extensions de fichier ou de types MIME séparés par des virgules). Par exemple :
 
-<ul>
- <li><code>accept="image/png"</code> ou <code>accept=".png"</code> permettra de n'accepter que les fichiers PNG.</li>
- <li><code>accept="image/png, image/jpeg"</code> ou <code>accept=".png, .jpg, .jpeg"</code> permettra de n'accepter que les fichiers PNG ou JPEG.</li>
- <li><code>accept="image/*"</code> permettra d'accepter n'importe quel fichier dont le type MIME est <code>image/*</code> (pour de nombreux appareils mobiles, cette valeur permet d'utiliser l'appareil photo de l'appareil afin de prendre une photo qui sera utilisée comme fichier à envoyer).</li>
- <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> permettra d'accepter un fichier ressemblant à un document Word.</li>
-</ul>
+- `accept="image/png"` ou `accept=".png"` permettra de n'accepter que les fichiers PNG.
+- `accept="image/png, image/jpeg"` ou `accept=".png, .jpg, .jpeg"` permettra de n'accepter que les fichiers PNG ou JPEG.
+- `accept="image/*"` permettra d'accepter n'importe quel fichier dont le type MIME est `image/*` (pour de nombreux appareils mobiles, cette valeur permet d'utiliser l'appareil photo de l'appareil afin de prendre une photo qui sera utilisée comme fichier à envoyer).
+- `accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` permettra d'accepter un fichier ressemblant à un document Word.
 
-<p>Prenons un exemple :</p>
+Prenons un exemple :
 
-<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
-  &lt;div&gt;
-    &lt;label for="profile_pic"&gt;Sélectionnez le fichier à utiliser&lt;/label&gt;
-    &lt;input type="file" id="profile_pic" name="profile_pic"
-          accept=".jpg, .jpeg, .png"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="profile_pic">Sélectionnez le fichier à utiliser</label>
+    <input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png">
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   margin-bottom: 10px;
-}</pre>
+}
+```
 
-<p>Voici le résultat produit :</p>
+Voici le résultat produit :
 
-<p>{{EmbedLiveSample('Restreindre_les_types_de_fichiers_acceptés', 650, 60)}}</p>
+{{EmbedLiveSample('Restreindre_les_types_de_fichiers_acceptés', 650, 60)}}
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez également consulter cet exemple sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">voir le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">la démonstration <em>live</em></a>.</p>
-</div>
+> **Note :** Vous pouvez également consulter cet exemple sur GitHub — [voir le code source](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html) et [la démonstration _live_](https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html).
 
-<p>Le résultat peut sembler similaire à l'exemple précédent mais lorsque vous essayer de sélectionner un fichier, vous verrez que le sélecteur ne permet de sélectionner que les fichiers du/des type(s) indiqué(s) (il peut y avoir certaines différences selons les navigateurs et les systèmes d'exploitation).</p>
+Le résultat peut sembler similaire à l'exemple précédent mais lorsque vous essayer de sélectionner un fichier, vous verrez que le sélecteur ne permet de sélectionner que les fichiers du/des type(s) indiqué(s) (il peut y avoir certaines différences selons les navigateurs et les systèmes d'exploitation).
 
-<p>L'attribut <code>accept</code> ne permet pas de valider/contrôler le type réel du/des fichier(s) sélectionné(s). Il fournit simplement une indication au navigateur pour aider l'utilisateur à sélectionner les bons fichiers. Toutefois, dans la plupart des cas, l'utilisateur peut toujours choisir une option dans le sélecteur afin de pouvoir choisir un fichier d'un autre type.</p>
+L'attribut `accept` ne permet pas de valider/contrôler le type réel du/des fichier(s) sélectionné(s). Il fournit simplement une indication au navigateur pour aider l'utilisateur à sélectionner les bons fichiers. Toutefois, dans la plupart des cas, l'utilisateur peut toujours choisir une option dans le sélecteur afin de pouvoir choisir un fichier d'un autre type.
 
-<p>Dans tous les cas (et comme pour les autres éléments envoyés au serveur), il est nécessaire de contrôler les données reçues par un mécanisme de validation côté serveur.</p>
+Dans tous les cas (et comme pour les autres éléments envoyés au serveur), il est nécessaire de contrôler les données reçues par un mécanisme de validation côté serveur.
 
-<h3 id="Notes">Notes</h3>
+### Notes
 
-<ol>
- <li>À partir de {{Gecko("2.0")}}, appeler la méthode <code>click()</code> sur un élément de type <code>file</code> ouvre le sélecteur de fichier et permet à un utilisateur de sélectionner les fichiers sur son système d'opération. Pour plus d'exemples, voir Utiliser des fichiers avec des applications web.</li>
- <li>
-  <p>Il n'est pas possible de définir la valeur du sélecteur de fichier via un script. Le code suivant n'aura aucun effet :</p>
+1.  À partir de {{Gecko("2.0")}}, appeler la méthode `click()` sur un élément de type `file` ouvre le sélecteur de fichier et permet à un utilisateur de sélectionner les fichiers sur son système d'opération. Pour plus d'exemples, voir Utiliser des fichiers avec des applications web.
+2.  Il n'est pas possible de définir la valeur du sélecteur de fichier via un script. Le code suivant n'aura aucun effet :
 
-  <pre class="brush: js">const input = document.querySelector("input[type=file]");
-input.value = "toto";
-</pre>
- </li>
- <li>Lorsqu'on choisit un fichier via <code>&lt;input type="file"&gt;</code>, le chemin réel du fichier source n'est pas transmis dans la valeur de l'attribut <code>value</code> pour des raisons de sécurité. À la place, on a le nom du fichier précédé du chemin <code>C:\fakepath\</code>. Cela provient de raisons historiques, est pris en charge par la plupart des navigateurs modernes. Cela a même été <a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">inscrit dans la spécification</a>.</li>
-</ol>
+    ```js
+    const input = document.querySelector("input[type=file]");
+    input.value = "toto";
+    ```
 
-<h2 id="Exemples">Exemples</h2>
+3.  Lorsqu'on choisit un fichier via `<input type="file">`, le chemin réel du fichier source n'est pas transmis dans la valeur de l'attribut `value` pour des raisons de sécurité. À la place, on a le nom du fichier précédé du chemin `C:\fakepath\`. Cela provient de raisons historiques, est pris en charge par la plupart des navigateurs modernes. Cela a même été [inscrit dans la spécification](https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly).
 
-<p>Dans l'exemple qui suit, on présente sélecteur de fichiers plus avancé, qui tire parti des informations disponibles grâce à la propriété <code>HTMLInputElement.files</code>. On montre aussi quelques astuces.</p>
+## Exemples
 
-<div class="note">
-<p><strong>Note :</strong> Le code source complet de cet exemple est disponible sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">voir la démonstration <em>live</em> associée</a>). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique.</p>
-</div>
+Dans l'exemple qui suit, on présente sélecteur de fichiers plus avancé, qui tire parti des informations disponibles grâce à la propriété `HTMLInputElement.files`. On montre aussi quelques astuces.
 
-<p>Tout d'abord, voici le fragment de code HTML utilisé :</p>
+> **Note :** Le code source complet de cet exemple est disponible sur GitHub — [file-example.html](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html) ([voir la démonstration _live_ associée](https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html)). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique.
 
-<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
-  &lt;div&gt;
-    &lt;label for="image_uploads"&gt;Sélectionner des images à uploader (PNG, JPG)&lt;/label&gt;
-    &lt;input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple&gt;
-  &lt;/div&gt;
-  &lt;div class="preview"&gt;
-    &lt;p&gt;Aucun fichier sélectionné pour le moment&lt;/p&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+Tout d'abord, voici le fragment de code HTML utilisé :
 
-<pre class="brush: css hidden">html {
+```html
+<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="image_uploads">Sélectionner des images à uploader (PNG, JPG)</label>
+    <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>
+  </div>
+  <div class="preview">
+    <p>Aucun fichier sélectionné pour le moment</p>
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+```
+
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -273,7 +234,7 @@ form ol {
   padding-left: 0;
 }
 
-form li, div &gt; p {
+form li, div > p {
   background: #eee;
   display: flex;
   justify-content: space-between;
@@ -309,51 +270,48 @@ form label:hover, form button:hover {
 form label:active, form button:active {
   background-color: #0D3F8F;
   color: white;
-}</pre>
+}
+```
 
-<p>Pour l'instant, le fragment HTML ressemble à ce que nous avons déjà vu avant, rien de spécial.</p>
+Pour l'instant, le fragment HTML ressemble à ce que nous avons déjà vu avant, rien de spécial.
 
-<p>Voyons maintenant le code JavaScript utilisé :</p>
+Voyons maintenant le code JavaScript utilisé :
 
-<p>Pour les premières lignes du script, on récupère des références au formulaire et à l'élément {{htmlelement("div")}} qui possède la classe <code>.preview</code>. Ensuite, on masque l'élément {{htmlelement("input")}} car leur apparence peut être incohérente entre les navigateurs et qu'il est difficile de les mettre en forme. Cliquer sur l'élément {{htmlelement("label")}} suffit à ouvrir le sélecteur et nous mettons donc en forme cet élément à la façon d'un bouton. Ainsi, l'utilisateur saura comment interagir avec le document pour <em>uploader</em> des fichiers.</p>
+Pour les premières lignes du script, on récupère des références au formulaire et à l'élément {{htmlelement("div")}} qui possède la classe `.preview`. Ensuite, on masque l'élément {{htmlelement("input")}} car leur apparence peut être incohérente entre les navigateurs et qu'il est difficile de les mettre en forme. Cliquer sur l'élément {{htmlelement("label")}} suffit à ouvrir le sélecteur et nous mettons donc en forme cet élément à la façon d'un bouton. Ainsi, l'utilisateur saura comment interagir avec le document pour _uploader_ des fichiers.
 
-<pre class="brush: js">var input = document.querySelector('input');
+```js
+var input = document.querySelector('input');
 var preview = document.querySelector('.preview');
 
-input.style.opacity = 0;</pre>
-
-<div class="note">
-<p><strong>Note :</strong> La propriété <a href="/fr/docs/Web/CSS/opacity"><code>opacity</code></a> est utilisée pour masquer l'élément <code>&lt;input&gt;</code> plutôt que <a href="/fr/docs/Web/CSS/visibility"><code>visibility: hidden</code></a> ou <a href="/fr/docs/Web/CSS/display"><code>display: none</code></a>. En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.</p>
-</div>
-
-<p>Ensuite, on ajoute <a href="/fr/docs/Web/API/EventTarget/addEventListener">un gestionnaire d'évènement</a> à l'élément <code>&lt;input&gt;</code> afin de réaliser certaines actions lorsque sa valeur (c'est-à-dire les fichiers sélectionnés) change. Ici, le gestionnaire d'évènement appelle la fonction <code>updateImageDisplay()</code> que nous décrirons juste après.</p>
-
-<pre class="brush: js">input.addEventListener('change', updateImageDisplay);</pre>
-
-<p>À chaque fois que la fonction <code>updateImageDisplay()</code> est appelée :</p>
-
-<ul>
- <li>On lance une boucle <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> afin de vider le contenu qui pourrait être dans l'élément <code>&lt;div&gt;</code> servant à la prévisualisation.</li>
- <li>On récupère l'objet {{domxref("FileList")}} qui contient les informations sur les fichiers sélectionnés et on le stocke dans une variable intitulée <code>curFiles</code>.</li>
- <li>On vérifie si aucun fichier n'a été sélectionné (ce qui se traduit par vérifier si <code>curFiles.length</code> vaut 0). Si c'est le cas, on place un message dans le <code>&lt;div&gt;</code> de prévisualisation pour indiquer qu'aucun fichier n'a été sélectionné.</li>
- <li>Si des fichiers ont été sélectionnés, on les parcourt afin d'afficher des informations sur ces fichiers dans l'élément <code>&lt;div&gt;</code>. Quelques notes :
-  <ul>
-   <li>On utilise une fonction <code>validFileType()</code> afin de vérifier si le fichier est bien du bon type (c'est-à-dire qu'il respecte les extensions d'image indiquées dans l'attribut <code>accept</code>).
-    <ul>
-     <li>Si c'est le cas :
-      <ul>
-       <li>On affiche le nom et la taille du fichier dans une liste à l'intérieur du <code>&lt;div&gt;</code> (obtenus à partir de <code>curFiles[i].name</code> et <code>curFiles[i].size</code>). La fonction <code>returnFileSize()</code> est utilisée ici afin d'afficher la taille de façon lisible (en octets, kilo-octets ou mega-octets plutôt que toujours en octets).</li>
-       <li>On génère un aperçu de l'image en appelant la méthode <code>window.<a href="/fr/docs/Web/API/URL/createObjectURL">URL.createObjectURL</a>(curFiles[i])</code> et en réduisant l'image grâce à du CSS puis on insère cette image dans la liste.</li>
-      </ul>
-     </li>
-     <li>Si le type de fichier est invalide, on affiche un message dans la liste afin d'indiquer à l'utilisateur qu'il est nécessaire de sélectionner un autre type de fichier.</li>
-    </ul>
-   </li>
-  </ul>
- </li>
-</ul>
-
-<pre class="brush: js">function updateImageDisplay() {
+input.style.opacity = 0;
+```
+
+> **Note :** La propriété [`opacity`](/fr/docs/Web/CSS/opacity) est utilisée pour masquer l'élément `<input>` plutôt que [`visibility: hidden`](/fr/docs/Web/CSS/visibility) ou [`display: none`](/fr/docs/Web/CSS/display). En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.
+
+Ensuite, on ajoute [un gestionnaire d'évènement](/fr/docs/Web/API/EventTarget/addEventListener) à l'élément `<input>` afin de réaliser certaines actions lorsque sa valeur (c'est-à-dire les fichiers sélectionnés) change. Ici, le gestionnaire d'évènement appelle la fonction `updateImageDisplay()` que nous décrirons juste après.
+
+```js
+input.addEventListener('change', updateImageDisplay);
+```
+
+À chaque fois que la fonction `updateImageDisplay()` est appelée :
+
+- On lance une boucle [`while`](/en-US/docs/Web/JavaScript/Reference/Statements/while) afin de vider le contenu qui pourrait être dans l'élément `<div>` servant à la prévisualisation.
+- On récupère l'objet {{domxref("FileList")}} qui contient les informations sur les fichiers sélectionnés et on le stocke dans une variable intitulée `curFiles`.
+- On vérifie si aucun fichier n'a été sélectionné (ce qui se traduit par vérifier si `curFiles.length` vaut 0). Si c'est le cas, on place un message dans le `<div>` de prévisualisation pour indiquer qu'aucun fichier n'a été sélectionné.
+- Si des fichiers ont été sélectionnés, on les parcourt afin d'afficher des informations sur ces fichiers dans l'élément `<div>`. Quelques notes :
+
+  - On utilise une fonction `validFileType()` afin de vérifier si le fichier est bien du bon type (c'est-à-dire qu'il respecte les extensions d'image indiquées dans l'attribut `accept`).
+
+    - Si c'est le cas :
+
+      - On affiche le nom et la taille du fichier dans une liste à l'intérieur du `<div>` (obtenus à partir de `curFiles[i].name` et `curFiles[i].size`). La fonction `returnFileSize()` est utilisée ici afin d'afficher la taille de façon lisible (en octets, kilo-octets ou mega-octets plutôt que toujours en octets).
+      - On génère un aperçu de l'image en appelant la méthode `window.URL.createObjectURL(curFiles[i])` et en réduisant l'image grâce à du CSS puis on insère cette image dans la liste.
+
+    - Si le type de fichier est invalide, on affiche un message dans la liste afin d'indiquer à l'utilisateur qu'il est nécessaire de sélectionner un autre type de fichier.
+
+```js
+function updateImageDisplay() {
   while(preview.firstChild) {
     preview.removeChild(preview.firstChild);
   }
@@ -366,7 +324,7 @@ input.style.opacity = 0;</pre>
   } else {
     var list = document.createElement('ol');
     preview.appendChild(list);
-    for(var i = 0; i &lt; curFiles.length; i++) {
+    for(var i = 0; i < curFiles.length; i++) {
       var listItem = document.createElement('li');
       var para = document.createElement('p');
       if(validFileType(curFiles[i])) {
@@ -385,108 +343,112 @@ input.style.opacity = 0;</pre>
       list.appendChild(listItem);
     }
   }
-}</pre>
+}
+```
 
-<p>La fonction <code>validFileType()</code> prend un objet {{domxref("File")}} en entrée puis parcourt la liste des types de fichier autorisés pour les comparer à la propriété <code>type</code> du fichier. Si on trouve une correspondance (ce qui signifie que le type est bien autorisé), la fonction renvoie <code>true</code>, sinon, elle renvoie <code>false</code>.</p>
+La fonction `validFileType()` prend un objet {{domxref("File")}} en entrée puis parcourt la liste des types de fichier autorisés pour les comparer à la propriété `type` du fichier. Si on trouve une correspondance (ce qui signifie que le type est bien autorisé), la fonction renvoie `true`, sinon, elle renvoie `false`.
 
-<pre class="brush: js">var fileTypes = [
+```js
+var fileTypes = [
   'image/jpeg',
   'image/pjpeg',
   'image/png'
 ]
 
 function validFileType(file) {
-  for(var i = 0; i &lt; fileTypes.length; i++) {
+  for(var i = 0; i < fileTypes.length; i++) {
     if(file.type === fileTypes[i]) {
       return true;
     }
   }
 
   return false;
-}</pre>
+}
+```
 
-<p>La fonction <code>returnFileSize()</code> prend en entrée un nombre d'octets (dans notre exemple, celui-ci provient de la propriété <code>size</code> du fichier) et le transforme en une chaîne de caractères plus compréhensible avec une taille en octets/Ko/Mo.</p>
+La fonction `returnFileSize()` prend en entrée un nombre d'octets (dans notre exemple, celui-ci provient de la propriété `size` du fichier) et le transforme en une chaîne de caractères plus compréhensible avec une taille en octets/Ko/Mo.
 
-<pre class="brush: js">function returnFileSize(number) {
-  if(number &lt; 1024) {
+```js
+function returnFileSize(number) {
+  if(number < 1024) {
     return number + ' octets';
-  } else if(number &gt;= 1024 &amp;&amp; number &lt; 1048576) {
+  } else if(number >= 1024 && number < 1048576) {
     return (number/1024).toFixed(1) + ' Ko';
-  } else if(number &gt;= 1048576) {
+  } else if(number >= 1048576) {
     return (number/1048576).toFixed(1) + ' Mo';
   }
-}</pre>
+}
+```
 
-<p>Et voici le résultat :</p>
+Et voici le résultat :
 
-<p>{{EmbedLiveSample('Exemples', '100%', 200)}}</p>
+{{EmbedLiveSample('Exemples', '100%', 200)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du fichier sélectionné.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>files</code> et <code>value</code></td>
-  </tr>
-  <tr>
-   <td><strong>Interface DOM</strong></td>
-   <td>{{domxref("HTMLInputElement")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Propriétés</strong></td>
-   <td><a href="/fr/docs/Web/API/HTMLInputElement#Properties_file">Propriétés pour les éléments <code>HTMLInputElement</code> de type <code>file</code></a></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui
+        représente le chemin du fichier sélectionné.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>
+        {{domxref("HTMLElement/change_event", "change")}} et
+        {{domxref("HTMLElement/input_event", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("accept", "input/file")}},
+        {{htmlattrxref("capture", "input/file")}},
+        {{htmlattrxref("files", "input/file")}},
+        {{htmlattrxref("multiple", "input/file")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td><code>files</code> et <code>value</code></td>
+    </tr>
+    <tr>
+      <td><strong>Interface DOM</strong></td>
+      <td>{{domxref("HTMLInputElement")}}</td>
+    </tr>
+    <tr>
+      <td><strong>Propriétés</strong></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLInputElement#Properties_file"
+          >Propriétés pour les éléments <code>HTMLInputElement</code> de type
+          <code>file</code></a
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '&lt;input type="file"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '&lt;input type="file"&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                        | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '&lt;input type="file"&gt;')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+| {{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '&lt;input type="file"&gt;')}}     | {{Spec2('HTML5.1')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-file")}}</p>
+{{Compat("html.elements.input.input-file")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Using_files_from_web_applications">Manipuler des fichiers à partir d'applications web</a> contient différents exemples d'applications relatifs à <code>&lt;input type="file"&gt;</code></li>
- <li><a href="/fr/docs/Web/API/File">L'API <em>File</em></a>.</li>
-</ul>
+- [Manipuler des fichiers à partir d'applications web](/fr/docs/Using_files_from_web_applications) contient différents exemples d'applications relatifs à `<input type="file">`
+- [L'API _File_](/fr/docs/Web/API/File).
diff --git a/files/fr/web/html/element/input/hidden/index.md b/files/fr/web/html/element/input/hidden/index.md
index 5ec54ea676..88af11be58 100644
--- a/files/fr/web/html/element/input/hidden/index.md
+++ b/files/fr/web/html/element/input/hidden/index.md
@@ -7,117 +7,101 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/hidden
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Les éléments {{HTMLElement("input")}} de type <code><strong>"hidden"</strong></code> permettent aux développeurs web d'inclure des données qui ne peuvent pas être vues ou modifiées lorsque le formulaire est envoyé. Cela permet par exemple d'envoyer l'identifiant d'une commande ou un jeton de sécurité unique. Les champs de ce type sont invisibles sur la page.</p>
+Les éléments {{HTMLElement("input")}} de type **`"hidden"`** permettent aux développeurs web d'inclure des données qui ne peuvent pas être vues ou modifiées lorsque le formulaire est envoyé. Cela permet par exemple d'envoyer l'identifiant d'une commande ou un jeton de sécurité unique. Les champs de ce type sont invisibles sur la page.
 
-<div class="note">
-<p><strong>Note :</strong> La ligne de code suivante est suivie du rendu associé... si l'exemple fonctionne correctement, vous ne devriez rien voir :)</p>
-</div>
+> **Note :** La ligne de code suivante est suivie du rendu associé... si l'exemple fonctionne correctement, vous ne devriez rien voir :)
 
-<h2>Exemple simple</h2>
+## Exemple simple
 
-<pre class="brush: html">&lt;input id="prodId" name="prodId" type="hidden" value="xm234jq"&gt;</pre>
+```html
+<input id="prodId" name="prodId" type="hidden" value="xm234jq">
+```
 
-<p>{{EmbedLiveSample('Exemple_simple', 600, 40)}}</p>
+{{EmbedLiveSample('Exemple_simple', 600, 40)}}
 
-<div class="note">
-<p><strong>Note :</strong> Attention, les évènements DOM <code><a href="/fr/docs/Web/API/HTMLElement/input_event">input</a></code> et <code><a href="/fr/docs/Web/API/HTMLElement/change_event">change</a></code> ne s'appliquent pas à ce type de contrôle. Les champs masqués ne peuvent pas recevoir le focus, y compris en JavaScript avec <code>hiddenInput.focus()</code>).</p>
-</div>
+> **Note :** Attention, les évènements DOM [`input`](/fr/docs/Web/API/HTMLElement/input_event) et [`change`](/fr/docs/Web/API/HTMLElement/change_event) ne s'appliquent pas à ce type de contrôle. Les champs masqués ne peuvent pas recevoir le focus, y compris en JavaScript avec `hiddenInput.focus()`).
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>L'attribut {{htmlattrxref("value", "input")}} de l'élément contient une chaîne de caractères masquée qui est envoyée au serveur avec le formulaire. Cette valeur ne peut pas directement être éditée par l'utilisateur sur la page (mais elle est toujours accessible et modifiable via les outils de développement intégrés au navigateur).</p>
+L'attribut {{htmlattrxref("value", "input")}} de l'élément contient une chaîne de caractères masquée qui est envoyée au serveur avec le formulaire. Cette valeur ne peut pas directement être éditée par l'utilisateur sur la page (mais elle est toujours accessible et modifiable via les outils de développement intégrés au navigateur).
 
-<div class="warning">
-<p><strong>Attention :</strong> Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type <code>hidden</code> ne doit donc pas être utilisé comme mécanisme de sécurité.</p>
-</div>
+> **Attention :** Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type `hidden` ne doit donc pas être utilisé comme mécanisme de sécurité.
 
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+## Attributs supplémentaires
 
-<p>En complément des attributs communs à l'ensemble des éléments <code>&lt;input&gt;</code>, les champs masqués peuvent utiliser les attributs suivants :</p>
+En complément des attributs communs à l'ensemble des éléments `<input>`, les champs masqués peuvent utiliser les attributs suivants :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("name")}}</code></td>
-   <td>À l'instar de l'ensemble des champs de saisie, ce sera le nom auquel associer la donnée lors de l'envoi du formulaire. Si la valeur spéciale <code>"_charset_"</code> est utilisée pour cet attribut, la valeur du champ sera l'encodage utilisé pour l'envoi du formulaire.</td>
-  </tr>
- </tbody>
-</table>
+| Attribut               | Description                                                                                                                                                                                                                                                       |
+| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("name")}}` | À l'instar de l'ensemble des champs de saisie, ce sera le nom auquel associer la donnée lors de l'envoi du formulaire. Si la valeur spéciale `"_charset_"` est utilisée pour cet attribut, la valeur du champ sera l'encodage utilisé pour l'envoi du formulaire. |
 
-<h3 id="htmlattrdef(name)">{{htmlattrdef("name")}}</h3>
+### {{htmlattrdef("name")}}
 
-<p>Cet attribut fait partie des attributs communs à l'ensemble des éléments <code>&lt;input&gt;</code> mais il possède un comportement particulier pour les champs masqués. En effet, si cet attribut utilise la valeur spéciale <code>"_charset_"</code>, la valeur du champ envoyée avec le formulaire sera l'encodage utilisé pour l'envoi du formulaire.</p>
+Cet attribut fait partie des attributs communs à l'ensemble des éléments `<input>` mais il possède un comportement particulier pour les champs masqués. En effet, si cet attribut utilise la valeur spéciale `"_charset_"`, la valeur du champ envoyée avec le formulaire sera l'encodage utilisé pour l'envoi du formulaire.
 
-<h2 id="Utiliser_les_valeurs_masquées_dans_les_formulaires">Utiliser les valeurs masquées dans les formulaires</h2>
+## Utiliser les valeurs masquées dans les formulaires
 
-<p>Comme évoqué ci-avant, les éléments <code>&lt;input type="hidden"</code>&gt; peuvent être utilisés lorsque le formulaire sert à transmettre des données avec lesquelles l'utilisateur n'est pas censé intéragir.</p>
+Comme évoqué ci-avant, les éléments `<input type="hidden"`> peuvent être utilisés lorsque le formulaire sert à transmettre des données avec lesquelles l'utilisateur n'est pas censé intéragir.
 
-<h3 id="Suivre_les_modifications_apportées_au_contenu">Suivre les modifications apportées au contenu</h3>
+### Suivre les modifications apportées au contenu
 
-<p>Un usage fréquent de ces éléments est de garder un registre des données qui doivent être mises à jour dans une base de données lorsque le formulaire est envoyé. Le processus est généralement le suivant :</p>
+Un usage fréquent de ces éléments est de garder un registre des données qui doivent être mises à jour dans une base de données lorsque le formulaire est envoyé. Le processus est généralement le suivant :
 
-<ol>
- <li>L'utilisateur édite du contenu (un billet de blog, une fiche d'un produit) en commençant par cliquer sur le bouton Éditer.</li>
- <li>Le contenu à modifier est extrait de la base de données et est chargé dans le formulaire HTML afin que l'utilisateur puis appliquer les modifications voulues.</li>
- <li>Après avoir éditer, l'utilisateur envoie le formulaire et les données mises à jour sont envoyées au serveur qui se charge d'appliquer cette mise à jour en base de données.</li>
-</ol>
+1.  L'utilisateur édite du contenu (un billet de blog, une fiche d'un produit) en commençant par cliquer sur le bouton Éditer.
+2.  Le contenu à modifier est extrait de la base de données et est chargé dans le formulaire HTML afin que l'utilisateur puis appliquer les modifications voulues.
+3.  Après avoir éditer, l'utilisateur envoie le formulaire et les données mises à jour sont envoyées au serveur qui se charge d'appliquer cette mise à jour en base de données.
 
-<p>Ici, lors de la deuxième étape, on peut récupérer l'identifiant de l'enregistrement et le placer dans un champ caché du formulaire. Lorsque le formulaire est envoyé à l'étape 3, l'identifiant est automatiquement envoyé au serveur avec le contenu. L'identifiant permet alors au serveur de connaître l'enregistrement de la base de données qui doit être mis à jour.</p>
+Ici, lors de la deuxième étape, on peut récupérer l'identifiant de l'enregistrement et le placer dans un champ caché du formulaire. Lorsque le formulaire est envoyé à l'étape 3, l'identifiant est automatiquement envoyé au serveur avec le contenu. L'identifiant permet alors au serveur de connaître l'enregistrement de la base de données qui doit être mis à jour.
 
-<p>Pour un exemple complet, voir la section {{anch("Exemples")}} ci-après.</p>
+Pour un exemple complet, voir la section {{anch("Exemples")}} ci-après.
 
-<h3 id="Contribuer_à_la_sécurité_d'un_site_web">Contribuer à la sécurité d'un site web</h3>
+### Contribuer à la sécurité d'un site web
 
-<p>Les champs masqués sont également employés afin de stocker des jetons de sécurité (aussi appelés « secrets ») afin d'améliorer la sécurité d'un site. Pour un formulaire sensible (par exemple le transfert d'argent d'un compte à un autre sur un site bancaire), le secret est généré par le serveur et intégré sur la page afin de prouver l'identité de l'utilisateur et que c'est bien le bon formulaire qui est utilisé pour effectuer le transfert.</p>
+Les champs masqués sont également employés afin de stocker des jetons de sécurité (aussi appelés « secrets ») afin d'améliorer la sécurité d'un site. Pour un formulaire sensible (par exemple le transfert d'argent d'un compte à un autre sur un site bancaire), le secret est généré par le serveur et intégré sur la page afin de prouver l'identité de l'utilisateur et que c'est bien le bon formulaire qui est utilisé pour effectuer le transfert.
 
-<p>Cela permet d'éviter le cas où quelqu'un crée un faux site et un faux formulaire pour transférer de l'argent sur le mauvais compte (c'est ce qu'on appelle <a href="https://fr.wikipedia.org/wiki/Cross-Site_Request_Forgery">Cross Site Request Forgery (CSRF)</a>).</p>
+Cela permet d'éviter le cas où quelqu'un crée un faux site et un faux formulaire pour transférer de l'argent sur le mauvais compte (c'est ce qu'on appelle [Cross Site Request Forgery (CSRF)](https://fr.wikipedia.org/wiki/Cross-Site_Request_Forgery)).
 
-<div class="note">
-<p><strong>Note :</strong> Comme indiqué précédemment, placer le secret dans un champ masqué ne le rend pas plus sécurisé. La composition, l'encodage de la clé et la vérification par le serveur sont autant d'étapes cruciales pour garantir la qualité du secret utilisé. Le champ masqué n'est finalement qu'un outil qui simplifie l'envoi de cette information au serveur lorsque l'utilisateur envoie le formulaire.</p>
-</div>
+> **Note :** Comme indiqué précédemment, placer le secret dans un champ masqué ne le rend pas plus sécurisé. La composition, l'encodage de la clé et la vérification par le serveur sont autant d'étapes cruciales pour garantir la qualité du secret utilisé. Le champ masqué n'est finalement qu'un outil qui simplifie l'envoi de cette information au serveur lorsque l'utilisateur envoie le formulaire.
 
-<h2 id="Validation">Validation</h2>
+## Validation
 
-<p>Aucune contrainte de validation n'est appliquée sur ces valeurs.</p>
+Aucune contrainte de validation n'est appliquée sur ces valeurs.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Voyons comment implémenter une version simple du formulaire d'édition décrit précédemment : on utilise un champ masqué pour mémoriser l'identifiant de la donnée qui est modifiée.</p>
+Voyons comment implémenter une version simple du formulaire d'édition décrit précédemment : on utilise un champ masqué pour mémoriser l'identifiant de la donnée qui est modifiée.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<p>Voici le fragment HTML pour le formulaire :</p>
+Voici le fragment HTML pour le formulaire :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="title"&gt;Titre du billet :&lt;/label&gt;
-    &lt;input type="text" id="title" name="title" value="Mon meilleur billet"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="content"&gt;Contenu :&lt;/label&gt;
-    &lt;textarea id="content" name="content" cols="60" rows="5"&gt;
+```html
+<form>
+  <div>
+    <label for="title">Titre du billet :</label>
+    <input type="text" id="title" name="title" value="Mon meilleur billet">
+  </div>
+  <div>
+    <label for="content">Contenu :</label>
+    <textarea id="content" name="content" cols="60" rows="5">
 Voici le contenu de mon meilleur billet, j'espère que ça vous plaît !
-    &lt;/textarea&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button type="submit"&gt;Mettre à jour le billet&lt;/button&gt;
-  &lt;/div&gt;
-  &lt;input type="hidden" id="postId" name="postId" value="34657"&gt;
-&lt;/form&gt;</pre>
+    </textarea>
+  </div>
+  <div>
+    <button type="submit">Mettre à jour le billet</button>
+  </div>
+  <input type="hidden" id="postId" name="postId" value="34657">
+</form>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<p>Ajoutons quelques éléments de mise en forme :</p>
+Ajoutons quelques éléments de mise en forme :
 
-<pre class="brush: css">html {
+```css
+html {
   font-family: sans-serif;
 }
 
@@ -146,85 +130,69 @@ input, textarea {
 
 textarea {
   height: 60px;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<p>Le serveur génèrera la page HTML avec l'identifiant <code>"postID"</code> qui contient l'identifiant du billet de la base de données. Lorsque l'utilisateur termine l'édition, c'est le navigateur qui envoie cette donnée au serveur ainsi que les autres données du formulaire. Aucun code JavaScript n'est nécessaire pour gérer cela.</p>
+Le serveur génèrera la page HTML avec l'identifiant `"postID"` qui contient l'identifiant du billet de la base de données. Lorsque l'utilisateur termine l'édition, c'est le navigateur qui envoie cette donnée au serveur ainsi que les autres données du formulaire. Aucun code JavaScript n'est nécessaire pour gérer cela.
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '100%', 200)}}</p>
+{{EmbedLiveSample('Exemples', '100%', 200)}}
 
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez consulter l'exemple sur GitHub (cf. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">la démonstration <em>live</em></a>).</p>
-</div>
+> **Note :** Vous pouvez consulter l'exemple sur GitHub (cf. [le code source](https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html) et [la démonstration _live_](https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html)).
 
-<p>Lorsque le formulaire est envoyé, les données envoyées au serveur ressembleront à :</p>
+Lorsque le formulaire est envoyé, les données envoyées au serveur ressembleront à :
 
-<p><code>title=Mon+meilleur+billet&amp;content=Le+contenu+de+mon+meilleur+article.+J'espère+qu'il+vous+plaît!&amp;postId=34657</code></p>
+`title=Mon+meilleur+billet&content=Le+contenu+de+mon+meilleur+article.+J'espère+qu'il+vous+plaît!&postId=34657`
 
-<p>Bien que le champ masqué soit invisible sur la page, il fait toujours partie des données envoyées.</p>
+Bien que le champ masqué soit invisible sur la page, il fait toujours partie des données envoyées.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la donnée masquée qu'on souhaite envoyer au serveur.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>value</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>Aucune.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui
+        représente la valeur de la donnée masquée qu'on souhaite envoyer au
+        serveur.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>{{htmlattrxref("autocomplete", "input")}}</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td><code>value</code></td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>Aucune.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#hidden-state-(type=hidden)', '&lt;input type="hidden"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.2', 'sec-forms.html#hidden-state-typehidden', '&lt;input type="hidden"&gt;')}}</td>
-   <td>{{Spec2('HTML5.2')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                        | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#hidden-state-(type=hidden)', '&lt;input type="hidden"&gt;')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+| {{SpecName('HTML5.2', 'sec-forms.html#hidden-state-typehidden', '&lt;input type="hidden"&gt;')}}     | {{Spec2('HTML5.2')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-hidden")}}</p>
+{{Compat("html.elements.input.input-hidden")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li>
- <li>{{HTMLElement("input")}}</li>
- <li>L'interface DOM {{domxref("HTMLInputElement")}}</li>
-</ul>
+- [Guide sur les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires)
+- {{HTMLElement("input")}}
+- L'interface DOM {{domxref("HTMLInputElement")}}
diff --git a/files/fr/web/html/element/input/image/index.md b/files/fr/web/html/element/input/image/index.md
index 4d3fac19f5..03ffa06680 100644
--- a/files/fr/web/html/element/input/image/index.md
+++ b/files/fr/web/html/element/input/image/index.md
@@ -9,277 +9,223 @@ tags:
   - Web
 translation_of: Web/HTML/Element/input/image
 ---
-<div>{{HTMLRef}}</div>
-
-<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>image</strong></code> sont utilisés afin de créer des boutons graphiques pour l'envoi de formulaire. Autrement dit, le bouton d'envoi aura la forme d'une image plutôt que de contenir un texte.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/input-image.html", "tabbed-standard")}}</div>
-
-<h2 id="Valeur">Valeur</h2>
-
-<p>Les éléments <code>&lt;input type="image"&gt;</code> n'acceptent pas de valeur pour l'attribut <code>value</code>. Le chemin vers l'image à afficher est indiqué grâce à l'attribut <code>src</code>.</p>
-
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
-
-<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons <code>image</code> permettent d'utiliser les attributs suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribute</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("alt")}}</code></td>
-   <td>Texte de remplacement lorsque l'image ne peut pas être affichée</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("formaction")}}</code></td>
-   <td>L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("formenctype")}}</code></td>
-   <td>Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("formmethod")}}</code></td>
-   <td>La méthode HTTP à utiliser pour envoyer le formulaire.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("formnovalidate")}}</code></td>
-   <td>Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">aux contraintes de validation</a> avant l'envoi des données au serveur.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("formtarget")}}</code></td>
-   <td>Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("height")}}</code></td>
-   <td>La hauteur, en pixels CSS, à laquelle dessiner l'image</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("src")}}</code></td>
-   <td>L'URL à partir de laquelle charger l'image</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("width")}}</code></td>
-   <td>La largeur, en pixels CSS, à laquelle dessiner l'image</td>
-  </tr>
- </tbody>
-</table>
+{{HTMLRef}}
 
-<h3 id="htmlattrdefalt">{{htmlattrdef("alt")}}</h3>
+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`image`** sont utilisés afin de créer des boutons graphiques pour l'envoi de formulaire. Autrement dit, le bouton d'envoi aura la forme d'une image plutôt que de contenir un texte.
 
-<p>L'attribut <code>alt</code> fournit un texte alternatif à utiliser comme libellé pour le bouton lorsque l'image ne peut être chargée ou affichée (que ce soit en raison d'une erreur ou de la configuration de l'agent utilisateur). Si cet attribut est fourni, ce doit être une chaîne de caractères non vide et qui décrit clairement le rôle du bouton.</p>
+{{EmbedInteractiveExample("pages/tabbed/input-image.html", "tabbed-standard")}}
 
-<p>Ainsi, si on a un bouton graphique avec une image et/ou une incône avec le texte <em>Se connecter</em>. Le texte alternatif porté par <code>alt</code> devrait être proche de <code>"Se connecter"</code>.</p>
+## Valeur
 
-<div class="note">
-<p><strong>Note :</strong> Bien que, d'un point de vue technique, l'attribut <code>alt</code> soit optionnel. Il faut toujours en inclure un afin d'améliorer l'accessibilité et l'utilisabilité du bouton.</p>
-</div>
+Les éléments `<input type="image">` n'acceptent pas de valeur pour l'attribut `value`. Le chemin vers l'image à afficher est indiqué grâce à l'attribut `src`.
 
-<p>D'un point de vue fonctionnel, l'attribut <code>alt</code> pour <code>&lt;input type="image"&gt;</code> fonctionne de la même façon que l'attribut {{htmlattrdef("alt", "img")}} associé aux éléments {{HTMLElement("img")}}.</p>
+## Attributs supplémentaires
 
-<h3 id="htmlattrdefformaction">{{htmlattrdef("formaction")}}</h3>
+En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons `image` permettent d'utiliser les attributs suivants :
 
-<p>Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ <code>&lt;input&gt;</code>.</p>
+| Attribute                              | Description                                                                                                                                                                                                               |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("alt")}}`                 | Texte de remplacement lorsque l'image ne peut pas être affichée                                                                                                                                                           |
+| `{{anch("formaction")}}`         | L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini.                                                  |
+| `{{anch("formenctype")}}`     | Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire.                                                                                                                        |
+| `{{anch("formmethod")}}`         | La méthode HTTP à utiliser pour envoyer le formulaire.                                                                                                                                                                    |
+| `{{anch("formnovalidate")}}` | Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis [aux contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) avant l'envoi des données au serveur. |
+| `{{anch("formtarget")}}`         | Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire.                                                                                                                    |
+| `{{anch("height")}}`             | La hauteur, en pixels CSS, à laquelle dessiner l'image                                                                                                                                                                    |
+| `{{anch("src")}}`                 | L'URL à partir de laquelle charger l'image                                                                                                                                                                                |
+| `{{anch("width")}}`             | La largeur, en pixels CSS, à laquelle dessiner l'image                                                                                                                                                                    |
 
-<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+### {{htmlattrdef("alt")}}
 
-<h3 id="htmlattrdefformenctype">{{htmlattrdef("formenctype")}}</h3>
+L'attribut `alt` fournit un texte alternatif à utiliser comme libellé pour le bouton lorsque l'image ne peut être chargée ou affichée (que ce soit en raison d'une erreur ou de la configuration de l'agent utilisateur). Si cet attribut est fourni, ce doit être une chaîne de caractères non vide et qui décrit clairement le rôle du bouton.
 
-<p>Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées :</p>
+Ainsi, si on a un bouton graphique avec une image et/ou une incône avec le texte _Se connecter_. Le texte alternatif porté par `alt` devrait être proche de `"Se connecter"`.
 
-<dl>
- <dt><code>application/x-www-form-urlencoded</code></dt>
- <dd>Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. <strong>Cette valeur est la valeur par défaut.</strong></dd>
- <dt><code>multipart/form-data</code></dt>
- <dd>Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'<em>uploader</em>des fichiers. Cet encodage <em>doit</em> être utilisé s'il y a des éléments  {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} <code>"file"</code> (<code><a href="/fr/docs/Web/HTML/Element/input/file">&lt;input type="file"&gt;</a></code>).</dd>
- <dt><code>text/plain</code></dt>
- <dd>Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées.</dd>
-</dl>
+> **Note :** Bien que, d'un point de vue technique, l'attribut `alt` soit optionnel. Il faut toujours en inclure un afin d'améliorer l'accessibilité et l'utilisabilité du bouton.
 
-<p>Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.</p>
+D'un point de vue fonctionnel, l'attribut `alt` pour `<input type="image">` fonctionne de la même façon que l'attribut {{htmlattrdef("alt", "img")}} associé aux éléments {{HTMLElement("img")}}.
 
-<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+### {{htmlattrdef("formaction")}}
 
-<h3 id="htmlattrdefformmethod">{{htmlattrdef("formmethod")}}</h3>
+Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ `<input>`.
 
-<p>Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont :</p>
+Cet attribut est également disponible pour les éléments [`<input type="submit">`](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}.
 
-<dl>
- <dt><code>get</code></dt>
- <dd>Une URL est construite en commençant avec l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec <code>formenctype</code> ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. <strong>C'est la valeur par défaut.</strong></dd>
- <dt><code>post</code></dt>
- <dd>Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour <code>get</code>) et les pièces jointes sous forme de fichiers.</dd>
- <dt><code>dialog</code></dt>
- <dd>Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise.</dd>
-</dl>
+### {{htmlattrdef("formenctype")}}
 
-<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées :
 
-<h3 id="htmlattrdefformnovalidate">{{htmlattrdef("formnovalidate")}}</h3>
+- `application/x-www-form-urlencoded`
+  - : Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. **Cette valeur est la valeur par défaut.**
+- `multipart/form-data`
+  - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments  {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)).
+- `text/plain`
+  - : Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées.
 
-<p>Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent.</p>
+Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.
 
-<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+Cet attribut est également disponible pour les éléments [`<input type="submit">`](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}.
 
-<h3 id="htmlattrdefformtarget">{{htmlattrdef("formtarget")}}</h3>
+### {{htmlattrdef("formmethod")}}
 
-<p>Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom <strong>d'un contexte de navigation</strong> (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent.</p>
+Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont :
 
-<p>En complément des noms des onglets, fenêtres, <em>iframes</em>, quelques mots-clés spéciaux peuvent être utilisés :</p>
+- `get`
+  - : Une URL est construite en commençant avec l'URL fournie par l'attribut `formaction` ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec `formenctype` ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. **C'est la valeur par défaut.**
+- `post`
+  - : Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut `formaction` ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour `get`) et les pièces jointes sous forme de fichiers.
+- `dialog`
+  - : Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise.
 
-<dl>
- <dt><code>_self</code></dt>
- <dd>La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. <strong>Cette valeur est la valeur par défaut.</strong></dd>
- <dt><code>_blank</code></dt>
- <dd>La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur.</dd>
- <dt><code>_parent</code></dt>
- <dd>La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de <code>_self</code>.</dd>
- <dt><code>_top</code></dt>
- <dd>La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de <code>_self</code>.</dd>
-</dl>
+Cet attribut est également disponible pour les éléments [`<input type="submit">`](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}.
 
-<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit">&lt;input type="submit"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+### {{htmlattrdef("formnovalidate")}}
 
-<h3 id="htmlattrdefheight">{{htmlattrdef("height")}}</h3>
+Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent.
 
-<p>Une valeur numérique qui indique la hauteur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut <code>src</code>.</p>
+Cet attribut est également disponible pour les éléments [`<input type="submit">`](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}.
 
-<h3 id="htmlattrdefsrc">{{htmlattrdef("src")}}</h3>
+### {{htmlattrdef("formtarget")}}
 
-<p>Une chaîne de caractères qui définit l'URL du fichier image à afficher pour le bouton. Lorsque l'utilisateur interagit avec l'image, le champ est géré comme tout autre bouton <code>&lt;input&gt;</code>.</p>
+Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom **d'un contexte de navigation** (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent.
 
-<h3 id="htmlattrdefwidth">{{htmlattrdef("width")}}</h3>
+En complément des noms des onglets, fenêtres, _iframes_, quelques mots-clés spéciaux peuvent être utilisés :
 
-<p>Une valeur numérique qui indique la largeur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut <code>src</code>.</p>
+- `_self`
+  - : La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. **Cette valeur est la valeur par défaut.**
+- `_blank`
+  - : La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur.
+- `_parent`
+  - : La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de `_self`.
+- `_top`
+  - : La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de `_self`.
 
-<h2 id="Attributs_obsolètes">Attributs obsolètes</h2>
+Cet attribut est également disponible pour les éléments [`<input type="submit">`](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}.
 
-<p>L'attribut suivant a été défini en HTML4 pour les champs de type <code>image</code> mais n'a pas été implémenté par l'ensemble des navigateurs et a été déprécié depuis :</p>
+### {{htmlattrdef("height")}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribute</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("usemap")}}</code></td>
-   <td>Le nom d'une carte d'images cliquables ({{HTMLElement("map")}}) à utiliser pour l'image. Cet élément est obsolète et c'est l'élément {{HTMLElement("img")}} qui devrait être utilisé pour créer des cartes à la place.</td>
-  </tr>
- </tbody>
-</table>
+Une valeur numérique qui indique la hauteur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut `src`.
+
+### {{htmlattrdef("src")}}
+
+Une chaîne de caractères qui définit l'URL du fichier image à afficher pour le bouton. Lorsque l'utilisateur interagit avec l'image, le champ est géré comme tout autre bouton `<input>`.
+
+### {{htmlattrdef("width")}}
+
+Une valeur numérique qui indique la largeur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut `src`.
+
+## Attributs obsolètes
+
+L'attribut suivant a été défini en HTML4 pour les champs de type `image` mais n'a pas été implémenté par l'ensemble des navigateurs et a été déprécié depuis :
+
+| Attribute                  | Description                                                                                                                                                                                                                        |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("usemap")}}` | Le nom d'une carte d'images cliquables ({{HTMLElement("map")}}) à utiliser pour l'image. Cet élément est obsolète et c'est l'élément {{HTMLElement("img")}} qui devrait être utilisé pour créer des cartes à la place. |
+
+### {{htmlattrdef("usemap")}}
+
+Lorsque l'attribut `usemap` est utilisé, sa valeur doit être le nom d'un élément {{HTMLElement("map")}} qui définit l'image avec des régions cliquables à utiliser. Cette utilisation est obsolète et l'élément {{HTMLElement("img")}} devrait être utilisé pour les images avec des zones cliquables.
 
-<h3 id="htmlattrdefusemap">{{htmlattrdef("usemap")}}</h3>
+## Utiliser les contrôles `<input type="image">`
 
-<p>Lorsque l'attribut <code>usemap</code> est utilisé, sa valeur doit être le nom d'un élément {{HTMLElement("map")}} qui définit l'image avec des régions cliquables à utiliser. Cette utilisation est obsolète et l'élément {{HTMLElement("img")}} devrait être utilisé pour les images avec des zones cliquables.</p>
+Un élément `<input type="image">` est [un élément remplacé](/fr/docs/Web/CSS/Élément_remplacé) (c'est-à-dire un élément dont le contenu n'est pas généré ou géré par le CSS) et se comporte comme un élément {{htmlelement("img")}} tout en permettant [d'envoyer un formulaire (comme un élément `<input type="submit">`)](/fr/docs/Web/HTML/Element/Input/submit).
 
-<h2 id="Utiliser_les_contrôles_&lt;input_typeimage>">Utiliser les contrôles <code>&lt;input type="image"&gt;</code></h2>
+### Les fonctionnalités essentielles
 
-<p>Un élément <code>&lt;input type="image"&gt;</code> est <a href="/fr/docs/Web/CSS/Élément_remplacé">un élément remplacé</a> (c'est-à-dire un élément dont le contenu n'est pas généré ou géré par le CSS) et se comporte comme un élément {{htmlelement("img")}} tout en permettant <a href="/fr/docs/Web/HTML/Element/Input/submit">d'envoyer un formulaire (comme un élément <code>&lt;input type="submit"&gt;</code>)</a>.</p>
+Prenons un exemple simple qui utilise les attributs strictement nécessaires (qui fonctionnent de la même façon que pour un élément `<img>`) :
 
-<h3 id="Les_fonctionnalités_essentielles">Les fonctionnalités essentielles</h3>
+```html
+<input id="image" type="image" width="100" height="30" alt="Login"
+       src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png">
+```
 
-<p>Prenons un exemple simple qui utilise les attributs strictement nécessaires (qui fonctionnent de la même façon que pour un élément <code>&lt;img&gt;</code>) :</p>
+{{EmbedLiveSample('Les_fonctionnalités_essentielles', 600, 50)}}
 
-<pre class="brush: html">&lt;input id="image" type="image" width="100" height="30" alt="Login"
-       src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"&gt;</pre>
+- L'attribut {{htmlattrxref("src", "input")}} indique le chemin de l'image qu'on souhaite afficher sur le bouton.
+- L'attribut {{htmlattrxref("alt", "input")}} fournit un texte alternatif à l'image qui peut notamment être utilisé par un lecteur d'écran pour indiquer ce à quoi correspond l'image. Ce texte sera également affiché si l'image ne peut pas être affichée (par exemple si le chemin est incorrect). Si possible, il est préférable d'utiliser le texte que vous auriez utilisé si vous aviez mis en place un élément \<input type="`submit">`.
+- Les attributs {{htmlattrxref("width", "input")}} et {{htmlattrxref("height", "input")}} sont utilisés afin d'indiquer la largeur et la hauteur, exprimées en pixels, avec lesquelles représenter l'image. Le bouton aura la même taille que l'image. S'il est nécessaire que le bouton soit plus gros que l'image, on pourra utiliser des règles CSS (par exemple avec la propriété {{cssxref("padding")}}). Si un seul des deux attributs est fourni, la seconde dimension sera automatiquement ajustée afin que l'image conserve ses proportions originelles.
 
-<p>{{EmbedLiveSample('Les_fonctionnalités_essentielles', 600, 50)}}</p>
+### Surcharger le comportement par défaut
 
-<ul>
- <li>L'attribut {{htmlattrxref("src", "input")}} indique le chemin de l'image qu'on souhaite afficher sur le bouton.</li>
- <li>L'attribut {{htmlattrxref("alt", "input")}} fournit un texte alternatif à l'image qui peut notamment être utilisé par un lecteur d'écran pour indiquer ce à quoi correspond l'image. Ce texte sera également affiché si l'image ne peut pas être affichée (par exemple si le chemin est incorrect). Si possible, il est préférable d'utiliser le texte que vous auriez utilisé si vous aviez mis en place un élément &lt;input type="<code>submit"&gt;</code>.</li>
- <li>Les attributs {{htmlattrxref("width", "input")}} et {{htmlattrxref("height", "input")}} sont utilisés afin d'indiquer la largeur et la hauteur, exprimées en pixels, avec lesquelles représenter l'image. Le bouton aura la même taille que l'image. S'il est nécessaire que le bouton soit plus gros que l'image, on pourra utiliser des règles CSS (par exemple avec la propriété {{cssxref("padding")}}). Si un seul des deux attributs est fourni, la seconde dimension sera automatiquement ajustée afin que l'image conserve ses proportions originelles.</li>
-</ul>
+Les éléments `<input type="image">` — comme les boutons [`<input type="submit">`](/fr/docs/Web/HTML/Element/input/submit) — prennent en charge différents attributs qui permettent d'adapter le compotement du formulaire :
 
-<h3 id="Surcharger_le_comportement_par_défaut">Surcharger le comportement par défaut</h3>
+- {{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}
+  - : Cet attribut indique l'URI d'un programme qui traite les informations envoyées par l'élément `<input>`. Cet attribut surcharge l'attribut {{htmlattrxref("action","form")}} du formulaire associé.
 
-<p>Les éléments <code>&lt;input type="image"&gt;</code> — comme les boutons <a href="/fr/docs/Web/HTML/Element/input/submit"><code>&lt;input type="submit"&gt;</code></a> — prennent en charge différents attributs qui permettent d'adapter le compotement du formulaire :</p>
+<!---->
 
-<dl>
- <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt>
- <dd>Cet attribut indique l'URI d'un programme qui traite les informations envoyées par l'élément <code>&lt;input&gt;</code>. Cet attribut surcharge l'attribut {{htmlattrxref("action","form")}} du formulaire associé.</dd>
-</dl>
+- {{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}
 
-<dl>
- <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt>
- <dd>Cet attribut définit le type de contenu utilisé pour envoyer le formulaire au serveur. Les valeurs possibles sont :
- <ul>
-  <li><code>application/x-www-form-urlencoded</code> : la valur par défaut si l'attribut n'est pas utilisé.</li>
-  <li><code>text/plain</code>.</li>
- </ul>
+  - : Cet attribut définit le type de contenu utilisé pour envoyer le formulaire au serveur. Les valeurs possibles sont :
 
- <p>Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("enctype","form")}} du formulaire associé.</p>
- </dd>
- <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt>
- <dd>Cet attribut indique la méthode HTTP utilisée par le navigateur afin d'envoyer le formulaire. Les valeurs possibles sont :
- <ul>
-  <li><code>post</code> : les données du formulaire sont incluses dans le corps du formulaire puis envoyées au serveur.</li>
-  <li><code>get</code> : les données du formulaire sont ajoutées après l'URI de l'attribut <code><strong>form</strong></code> avec un point d'interrogation (« ? ») comme séparateur. L'URI alors obtenue est envoyée au serveur. Cette méthode doit uniquement être utilisée lorsque le formulaire n'entraîne aucun effet de bord et que les données ne contiennent que des caractères ASCII.</li>
- </ul>
+    - `application/x-www-form-urlencoded` : la valur par défaut si l'attribut n'est pas utilisé.
+    - `text/plain`.
 
- <p>Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("method","form")}} du formulaire associé.</p>
- </dd>
- <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt>
- <dd>Un attribut booléen qui indique si le formulaire ne doit pas être validé avant d'être envoyé. Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("novalidate","form")}} du formulaire associé.</dd>
- <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt>
- <dd>Un nom ou un mot-clé qui indique où la réponse doit être affichée après que le formulaire a été envoyé. Cette valeur est le nom ou un mot-clé qui désigne un contexte de navigation (par exemple un onglet, une fenêtre ou une <em>iframe</em>). Si cet attribut est indiqué, il surcharge l'attribut {{htmlattrxref("target", "form")}} du formulaire associé. Les mots-clés suivants ont des significations particulières :
- <ul>
-  <li>_<code>self</code> : la réponse est chargée dans le même contexte de navigation que le contexte courant. C'est la valeur par défaut si l'attribut n'est pas utilisé.</li>
-  <li><code>_blank</code> : la réponse est chargée dans un nouveau contexte de navigation anonyme.</li>
-  <li><code>_parent</code> : la réponse est chargée dans le contexte navigation qui est le parent du contexte courant. S'il n'y a aucun contexte parent, cette valeur se comportera comme la valeur <code>_self</code>.</li>
-  <li><code>_top</code> : la réponse est chargée dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte qui est un ancêtre du contexte courant et qui n'a pas de contexte parent). Si le contexte courant n'a pas de parent, cette valeur se comportera comme <code>_self</code>.</li>
- </ul>
- </dd>
-</dl>
+    Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("enctype","form")}} du formulaire associé.
 
-<h3 id="Utiliser_les_coordonnées_x_et_y">Utiliser les coordonnées <code>x</code> et <code>y</code></h3>
+- {{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}
 
-<p>Lorsqu'on envoie un formulaire avec un bouton <code>&lt;input type="image"&gt;</code>, les coordonnées (<code>x</code> et <code>y</code>) du clic sur l'image sont également envoyées au serveur (<a href="https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html">voir cet exemple</a>).</p>
+  - : Cet attribut indique la méthode HTTP utilisée par le navigateur afin d'envoyer le formulaire. Les valeurs possibles sont :
 
-<p>Lorsqu'on clique sur l'image pour envoyer le formulaire, vous pourrez voir que l'URL contient deux autres paramètres (par exemple <code>"?x=52&amp;y=55"</code>). Si le contrôle possède un attribut {{htmlattrxref("name", "input")}}, ce nom sera utilisé comme préfixe. Ainsi, si <code>name</code> vaut <code>"position"</code>, les coordonnées du clic seront envoyées dans l'URL avec le format suivant : <code>"?position.x=52&amp;position.y=55"</code>. Ce préfixe est également appliqué aux autres attributs.</p>
+    - `post` : les données du formulaire sont incluses dans le corps du formulaire puis envoyées au serveur.
+    - `get` : les données du formulaire sont ajoutées après l'URI de l'attribut **`form`** avec un point d'interrogation (« ? ») comme séparateur. L'URI alors obtenue est envoyée au serveur. Cette méthode doit uniquement être utilisée lorsque le formulaire n'entraîne aucun effet de bord et que les données ne contiennent que des caractères ASCII.
 
-<p>Les coordonnées X et Y sont calculées en pixels à partir du coin en haut à gauche de l'image ete peuvent être utilisées lorsque l'emplacement du clic possède une quelconque importance (par exemple une carte). Ces coordonnées peuvent donc être utilisées côté serveur afin de renvoyer des informations pertinentes (par exemple des informations quant aux lieux alentour).</p>
+    Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("method","form")}} du formulaire associé.
 
-<h3 id="Ajuster_la_position_et_léchelle_de_limage">Ajuster la position et l'échelle de l'image</h3>
+- {{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}
+  - : Un attribut booléen qui indique si le formulaire ne doit pas être validé avant d'être envoyé. Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("novalidate","form")}} du formulaire associé.
+- {{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}
 
-<p>Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster la position de l'image au sein de la boîte fournie par l'élément <code>&lt;input&gt;</code>. La propriété CSS {{cssxref("object-fit")}} peut être utilisée afin de contrôler la façon dont l'image est redimensionnée pour tenir dans la boîte. On peut donc ajuster le cadre grâce aux attributs <code>width</code> et <code>height</code> afin de créer un espace fixe sur le document puis ajuster la façon dont l'image occupe cet espace.</p>
+  - : Un nom ou un mot-clé qui indique où la réponse doit être affichée après que le formulaire a été envoyé. Cette valeur est le nom ou un mot-clé qui désigne un contexte de navigation (par exemple un onglet, une fenêtre ou une _iframe_). Si cet attribut est indiqué, il surcharge l'attribut {{htmlattrxref("target", "form")}} du formulaire associé. Les mots-clés suivants ont des significations particulières :
 
-<h2 id="Exemples">Exemples</h2>
+    - \_`self` : la réponse est chargée dans le même contexte de navigation que le contexte courant. C'est la valeur par défaut si l'attribut n'est pas utilisé.
+    - `_blank` : la réponse est chargée dans un nouveau contexte de navigation anonyme.
+    - `_parent` : la réponse est chargée dans le contexte navigation qui est le parent du contexte courant. S'il n'y a aucun contexte parent, cette valeur se comportera comme la valeur `_self`.
+    - `_top` : la réponse est chargée dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte qui est un ancêtre du contexte courant et qui n'a pas de contexte parent). Si le contexte courant n'a pas de parent, cette valeur se comportera comme `_self`.
 
-<h3 id="Un_formulaire_de_connexion">Un formulaire de connexion</h3>
+### Utiliser les coordonnées `x` et `y`
 
-<p>Dans l'exemple suivant, on insère le bouton vu précedemment dans un formulaire de connexion.</p>
+Lorsqu'on envoie un formulaire avec un bouton `<input type="image">`, les coordonnées (`x` et `y`) du clic sur l'image sont également envoyées au serveur ([voir cet exemple](https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html)).
 
-<p>{{EmbedLiveSample('Un_formulaire_de_connexion', 600, 170)}}</p>
+Lorsqu'on clique sur l'image pour envoyer le formulaire, vous pourrez voir que l'URL contient deux autres paramètres (par exemple `"?x=52&y=55"`). Si le contrôle possède un attribut {{htmlattrxref("name", "input")}}, ce nom sera utilisé comme préfixe. Ainsi, si `name` vaut `"position"`, les coordonnées du clic seront envoyées dans l'URL avec le format suivant : `"?position.x=52&position.y=55"`. Ce préfixe est également appliqué aux autres attributs.
 
-<p>Voici le fragment de code HTML utilisé :</p>
+Les coordonnées X et Y sont calculées en pixels à partir du coin en haut à gauche de l'image ete peuvent être utilisées lorsque l'emplacement du clic possède une quelconque importance (par exemple une carte). Ces coordonnées peuvent donc être utilisées côté serveur afin de renvoyer des informations pertinentes (par exemple des informations quant aux lieux alentour).
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;p&gt;Connectez-vous&lt;/p&gt;
-  &lt;div&gt;
-    &lt;label for="userId"&gt;Identifiant&lt;/label&gt;
-    &lt;input type="text" id="userId" name="userId"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="pwd"&gt;Mot de passe&lt;/label&gt;
-    &lt;input type="password" id="pwd" name="pwd"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+### Ajuster la position et l'échelle de l'image
 
-<p>Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments :</p>
+Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster la position de l'image au sein de la boîte fournie par l'élément `<input>`. La propriété CSS {{cssxref("object-fit")}} peut être utilisée afin de contrôler la façon dont l'image est redimensionnée pour tenir dans la boîte. On peut donc ajuster le cadre grâce aux attributs `width` et `height` afin de créer un espace fixe sur le document puis ajuster la façon dont l'image occupe cet espace.
 
-<pre class="brush: css">div {
+## Exemples
+
+### Un formulaire de connexion
+
+Dans l'exemple suivant, on insère le bouton vu précedemment dans un formulaire de connexion.
+
+{{EmbedLiveSample('Un_formulaire_de_connexion', 600, 170)}}
+
+Voici le fragment de code HTML utilisé :
+
+```html
+<form>
+  <p>Connectez-vous</p>
+  <div>
+    <label for="userId">Identifiant</label>
+    <input type="text" id="userId" name="userId">
+  </div>
+  <div>
+    <label for="pwd">Mot de passe</label>
+    <input type="password" id="pwd" name="pwd">
+  </div>
+  <div>
+    <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100">
+  </div>
+</form>
+```
+
+Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments :
+
+```css
+div {
   margin-bottom: 10px;
 }
 
@@ -288,34 +234,38 @@ label {
   width: 70px;
   text-align: right;
   padding-right: 10px;
-}</pre>
+}
+```
 
-<h3 id="Ajuster_la_position_et_l’échelle_de_l’image">Ajuster la position et l’échelle de l’image</h3>
+### Ajuster la position et l’échelle de l’image
 
-<p>Dans l'exemple qui suit, on adapte l'exemple précédent afin de disposer de plus d'espace pour l'image et on ajuste la taille et la position de l'image grâce à {{cssxref("object-fit")}} et {{cssxref("object-position")}}.</p>
+Dans l'exemple qui suit, on adapte l'exemple précédent afin de disposer de plus d'espace pour l'image et on ajuste la taille et la position de l'image grâce à {{cssxref("object-fit")}} et {{cssxref("object-position")}}.
 
-<p>{{EmbedLiveSample("Ajuster_la_position_et_l’échelle_de_l’image", 600, 300)}}</p>
+{{EmbedLiveSample("Ajuster_la_position_et_l’échelle_de_l’image", 600, 300)}}
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;p&gt;Connectez-vous&lt;/p&gt;
-  &lt;div&gt;
-    &lt;label for="userId"&gt;Identifiant&lt;/label&gt;
-    &lt;input type="text" id="userId" name="userId"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="pwd"&gt;Mot de passe&lt;/label&gt;
-    &lt;input type="password" id="pwd" name="pwd"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <p>Connectez-vous</p>
+  <div>
+    <label for="userId">Identifiant</label>
+    <input type="text" id="userId" name="userId">
+  </div>
+  <div>
+    <label for="pwd">Mot de passe</label>
+    <input type="password" id="pwd" name="pwd">
+  </div>
+  <div>
+    <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100">
+  </div>
+</form>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   margin-bottom: 10px;
 }
 
@@ -331,65 +281,60 @@ label {
   object-fit: contain;
   background-color: #ddd;
 }
-</pre>
+```
 
-<p>On voit ici <code>object-position</code> qui permet de dessiner l'image à paritr du coin supérieur droit de l'élément et <code>object-fit</code> qui vaut <code>contain</code> : l'image est ainsi dessinée avec la taille la plus grande possible tout en respectant ses proportions et en ne dépassant pas de la boîte. L'arrière-plan de l'image sera visible s'il y a des zones non-couvertes.</p>
+On voit ici `object-position` qui permet de dessiner l'image à paritr du coin supérieur droit de l'élément et `object-fit` qui vaut `contain` : l'image est ainsi dessinée avec la taille la plus grande possible tout en respectant ses proportions et en ne dépassant pas de la boîte. L'arrière-plan de l'image sera visible s'il y a des zones non-couvertes.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Aucune, l'attribut <code>value</code> ne devrait pas être utilisé.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("alt", "input")}}, {{htmlattrxref("src", "input")}}, {{htmlattrxref("width", "input")}}, {{htmlattrxref("height", "input")}}, {{htmlattrxref("formaction", "input")}}, {{htmlattrxref("formenctype", "input")}}, {{htmlattrxref("formmethod", "input")}}, {{htmlattrxref("formnovalidate", "input")}}, {{htmlattrxref("formtarget", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>Aucune.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Aucune, l'attribut <code>value</code> ne devrait pas être utilisé.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("alt", "input")}},
+        {{htmlattrxref("src", "input")}},
+        {{htmlattrxref("width", "input")}},
+        {{htmlattrxref("height", "input")}},
+        {{htmlattrxref("formaction", "input")}},
+        {{htmlattrxref("formenctype", "input")}},
+        {{htmlattrxref("formmethod", "input")}},
+        {{htmlattrxref("formnovalidate", "input")}},
+        {{htmlattrxref("formtarget", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>Aucune.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#image-button-state-(type=image)', '&lt;input type="image"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '&lt;input type="image"&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                                | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'forms.html#image-button-state-(type=image)', '&lt;input type="image"&gt;')}}     | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '&lt;input type="image"&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-image")}}</p>
+{{Compat("html.elements.input.input-image")}}
 
-<h2 id="Voir_ausi">Voir ausi</h2>
+## Voir ausi
 
-<ul>
- <li>L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente.</li>
-</ul>
+- L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente.
diff --git a/files/fr/web/html/element/input/index.md b/files/fr/web/html/element/input/index.md
index 54df76bc7d..0d528c5c9a 100644
--- a/files/fr/web/html/element/input/index.md
+++ b/files/fr/web/html/element/input/index.md
@@ -10,449 +10,405 @@ tags:
   - Web
 translation_of: Web/HTML/Element/input
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;input&gt;</code></strong> est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l'utilisateur de saisir des données. Les saisies possibles et le comportement de l'élément <code>&lt;input&gt;</code> dépend fortement de la valeur indiquée dans son attribut <code>type</code>.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div>
-
-<h2 id="Les_différents_types_de_champs_&lt;input>">Les différents types de champs <code>&lt;input&gt;</code></h2>
-
-<p>La façon dont un élément <code>&lt;input&gt;</code> fonctionne dépend grandement de la valeur de son attribut <code>type</code>. Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l'attribut <code>type</code> n'est pas présent, il aura la valeur implicite <code>text</code>.</p>
-
-<p>Les types de champs disponibles sont :</p>
-
-<ul>
- <li><code>{{HTMLElement("input/button", "button")}}</code> : un bouton sans comportement défini.</li>
- <li><code>{{HTMLElement("input/checkbox", "checkbox")}}</code> : une case à cocher qui permet de sélectionner/déselectionner une valeur</li>
- <li><code>{{HTMLElement("input/color", "color")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de définir une couleur.</li>
- <li><code>{{HTMLElement("input/date", "date")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date (composé d'un jour,  d'un mois et d'une année).</li>
- <li><code>{{HTMLElement("input/datetime-local", "datetime-local")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date et une heure (sans fuseau horaire).</li>
- <li><code>{{HTMLElement("input/email", "email")}}</code> : {{HTMLVersionInline("5")}} un champ qui permet de saisir une adresse éléctronique.</li>
- <li><code>{{HTMLElement("input/file", "file")}}</code> : un contrôle qui permet de sélectionner un fichier. L'attribut <code><strong>accept</strong></code> définit les types de fichiers qui peuvent être sélectionnés.</li>
- <li><code>{{HTMLElement("input/hidden", "hidden")}}</code> : un contrôle qui n'est pas affiché mais dont la valeur est envoyée au serveur.</li>
- <li><code>{{HTMLElement("input/image", "image")}}</code> : un bouton graphique d'envoi du formulaire. L'attribut <code>src</code> doit être défini avec la source de l'image et l'attribut <code>alt</code> doit être défini avec le texte alternatif. Les attributs <code>height</code> et <code>width</code> permettent de définir la taille de l'image en pixels.</li>
- <li><code>{{HTMLElement("input/month", "month")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un mois et une année (sans fuseau horaire).</li>
- <li><code>{{HTMLElement("input/number", "number")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre.</li>
- <li><code>{{HTMLElement("input/password", "password")}}</code> : un champ texte sur une seule ligne dont la valeur est masquée. Les attributs <code>maxlength</code> et <code>minlength</code> définissent la taille maximale et minimale de la valeur à saisir dans le champ.
-  <div class="note">
-    <p><strong>Note :</strong> Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP.</p></div>
- </li>
- <li><code>{{HTMLElement("input/radio", "radio")}}</code> : un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs.</li>
- <li><code>{{HTMLElement("input/range", "range")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante.</li>
- <li><code>{{HTMLElement("input/reset", "reset")}}</code> : un bouton qui réinitialise le contenu du formulaire avec les valeurs par défaut.</li>
- <li><code>{{HTMLElement("input/search", "search")}}</code> : {{HTMLVersionInline("5")}} un champ texte sur une ligne pour des termes de recherche. Les sauts de ligne sont automatiquement retirés.</li>
- <li><code>{{HTMLElement("input/submit", "submit")}}</code> : un bouton qui envoie le formulaire.</li>
- <li><code>{{HTMLElement("input/tel", "tel")}}</code> : {{HTMLVersionInline("5")}} un contrôle pour saisir un numéro de téléphone.</li>
- <li><code>{{HTMLElement("input/text", "text")}}</code> : un champ texte sur une seule ligne. Les sauts de ligne sont automatiquement retirés.</li>
- <li><code>{{HTMLElement("input/time", "time")}}</code> : {{HTMLVersionInline("5")}} A control for entering a time value with no time zone.</li>
- <li><code>{{HTMLElement("input/url", "url")}}</code> : {{HTMLVersionInline("5")}} un champ permettant de saisir une URL.</li>
- <li><code>{{HTMLElement("input/week", "week")}}</code> : {{HTMLVersionInline("5")}} un contrôle permettant de saisir une date représentée par un numéro de semaine et une année (sans indication de fuseau horaire).</li>
-</ul>
-
-<p>Certains types sont désormais obsolètes :</p>
-
-<ul>
- <li><code>{{HTMLElement("input/datetime", "datetime")}}</code> : {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} un contrôle pour saisir une date et une heure selon un fuseau horaire UTC. <strong>Cette fonctionnalité a été <a href="https://github.com/whatwg/html/issues/336">retirée du standard WHATWG HTML.</a></strong></li>
-</ul>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>L'élément <code>&lt;input&gt;</code> est l'un des éléments HTML les plus complexes et puissants et il peut utiliser de nombreux types et attributs. Chaque élément <code>&lt;input&gt;</code> étant basé sur l'interface DOM {{domxref("HTMLInputElement")}}, ils partagent tous, techniquement, les mêmes attributs. Toutefois, certains attributs ne fonctionnent que pour certains types de champs et certains attributs fonctionnent spécifiquement selon le type de champ.</p>
-
-<p>Sur cette page, vous trouverez des informations sur les attributs communs à l'ensemble des types d'éléments <code>&lt;input&gt;</code> ainsi que la description de quelques attributs notables.</p>
-
-<h3 id="Attributs_communs_à_l'ensemble_des_types">Attributs communs à l'ensemble des types</h3>
-
-<p>This section lists the attributes which are used by all form <code>&lt;input&gt;</code> types. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Les éléments <code>&lt;input&gt;</code> peuvent bien entendu utiliser les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p>
-</div>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("autocomplete")}}</code></td>
-   <td>Une chaîne de caractères qui indique le type d'autocomplétion à utiliser.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("autofocus")}}</code></td>
-   <td>Un attribut booléen qui passe le focus sur le champ lorsque le formulaire est affiché.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("disabled")}}</code></td>
-   <td>Un attribut booléen qui indique si le champ doit être désactivé.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("form")}}</code></td>
-   <td>L'identifiant du formulaire (la valeur de l'attribut <code>id</code> de l'élément {{HTMLElement("form")}}) auquel le champ est rattaché. Si cet attribut est absent, le champ sera rattaché au formulaire le plus proche qui le contient s'il existe.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("list")}}</code></td>
-   <td>L'identifiant (valeur de l'attribut <code>id</code>) d'un élément {{HTMLElement("datalist")}} qui fournit une liste de suggestions.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("name")}}</code></td>
-   <td>Le nom du champ qui sera rattaché à la donnée envoyée via le formulaire.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("readonly")}}</code></td>
-   <td>Un attribut booléen qui indique si le champ peut être édité ou non.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("required")}}</code></td>
-   <td>Un attribut booléen qui indique que le champ doit être renseigné avant de pouvoir envoyer le formulaire.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("tabindex")}}</code></td>
-   <td>Une valeur numérique qui indique à l'agent utilisateur l'ordre selon lequel naviguer au clavier grâce à la touche <kbd>Tab</kbd>.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("type")}}</code></td>
-   <td>Une chaîne de caractère qui indique l<a href="#types">e type de champ représenté par l'élément <code>&lt;input&gt;</code></a>.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("value")}}</code></td>
-   <td>La valeur du champ.</td>
-  </tr>
- </tbody>
-</table>
+{{HTMLRef}}
+
+L'élément HTML **`<input>`** est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l'utilisateur de saisir des données. Les saisies possibles et le comportement de l'élément `<input>` dépend fortement de la valeur indiquée dans son attribut `type`.
+
+{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}
+
+## Les différents types de champs `<input>`
+
+La façon dont un élément `<input>` fonctionne dépend grandement de la valeur de son attribut `type`. Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l'attribut `type` n'est pas présent, il aura la valeur implicite `text`.
+
+Les types de champs disponibles sont :
+
+- `{{HTMLElement("input/button", "button")}}` : un bouton sans comportement défini.
+- `{{HTMLElement("input/checkbox", "checkbox")}}` : une case à cocher qui permet de sélectionner/déselectionner une valeur
+- `{{HTMLElement("input/color", "color")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de définir une couleur.
+- `{{HTMLElement("input/date", "date")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date (composé d'un jour,  d'un mois et d'une année).
+- `{{HTMLElement("input/datetime-local", "datetime-local")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date et une heure (sans fuseau horaire).
+- `{{HTMLElement("input/email", "email")}}` : {{HTMLVersionInline("5")}} un champ qui permet de saisir une adresse éléctronique.
+- `{{HTMLElement("input/file", "file")}}` : un contrôle qui permet de sélectionner un fichier. L'attribut **`accept`** définit les types de fichiers qui peuvent être sélectionnés.
+- `{{HTMLElement("input/hidden", "hidden")}}` : un contrôle qui n'est pas affiché mais dont la valeur est envoyée au serveur.
+- `{{HTMLElement("input/image", "image")}}` : un bouton graphique d'envoi du formulaire. L'attribut `src` doit être défini avec la source de l'image et l'attribut `alt` doit être défini avec le texte alternatif. Les attributs `height` et `width` permettent de définir la taille de l'image en pixels.
+- `{{HTMLElement("input/month", "month")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un mois et une année (sans fuseau horaire).
+- `{{HTMLElement("input/number", "number")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre.
+- `{{HTMLElement("input/password", "password")}}` : un champ texte sur une seule ligne dont la valeur est masquée. Les attributs `maxlength` et `minlength` définissent la taille maximale et minimale de la valeur à saisir dans le champ.
+
+  > **Note :** Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP.
+
+- `{{HTMLElement("input/radio", "radio")}}` : un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs.
+- `{{HTMLElement("input/range", "range")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante.
+- `{{HTMLElement("input/reset", "reset")}}` : un bouton qui réinitialise le contenu du formulaire avec les valeurs par défaut.
+- `{{HTMLElement("input/search", "search")}}` : {{HTMLVersionInline("5")}} un champ texte sur une ligne pour des termes de recherche. Les sauts de ligne sont automatiquement retirés.
+- `{{HTMLElement("input/submit", "submit")}}` : un bouton qui envoie le formulaire.
+- `{{HTMLElement("input/tel", "tel")}}` : {{HTMLVersionInline("5")}} un contrôle pour saisir un numéro de téléphone.
+- `{{HTMLElement("input/text", "text")}}` : un champ texte sur une seule ligne. Les sauts de ligne sont automatiquement retirés.
+- `{{HTMLElement("input/time", "time")}}` : {{HTMLVersionInline("5")}} A control for entering a time value with no time zone.
+- `{{HTMLElement("input/url", "url")}}` : {{HTMLVersionInline("5")}} un champ permettant de saisir une URL.
+- `{{HTMLElement("input/week", "week")}}` : {{HTMLVersionInline("5")}} un contrôle permettant de saisir une date représentée par un numéro de semaine et une année (sans indication de fuseau horaire).
+
+Certains types sont désormais obsolètes :
+
+- `{{HTMLElement("input/datetime", "datetime")}}` : {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} un contrôle pour saisir une date et une heure selon un fuseau horaire UTC. **Cette fonctionnalité a été [retirée du standard WHATWG HTML.](https://github.com/whatwg/html/issues/336)**
+
+## Attributs
+
+L'élément `<input>` est l'un des éléments HTML les plus complexes et puissants et il peut utiliser de nombreux types et attributs. Chaque élément `<input>` étant basé sur l'interface DOM {{domxref("HTMLInputElement")}}, ils partagent tous, techniquement, les mêmes attributs. Toutefois, certains attributs ne fonctionnent que pour certains types de champs et certains attributs fonctionnent spécifiquement selon le type de champ.
 
-<h4 id="htmlattrdef(autocomplete)">{{htmlattrdef("autocomplete")}}</h4>
+Sur cette page, vous trouverez des informations sur les attributs communs à l'ensemble des types d'éléments `<input>` ainsi que la description de quelques attributs notables.
 
-<p>Une chaîne de caractères qui décrit si le champ doit fournir des fonctionnalités d'autocomplétion. Cette autocomplétion peut notamment provenir des valeurs précédemment saisies dans le champ. D'autres méthodes plus complexes peuvent être utilisées : un navigateur pourra par exemple interagir avec la liste des contacts de l'appareil afin de proposer l'autocomplétion pour les adresses électroniques. Voir {{SectionOnPage("/fr/docs/Web/HTML/Attributs/autocomplete", "Valeurs")}} pour les valeurs qui peuvent être utilisées avec cet attribut.</p>
+### Attributs communs à l'ensemble des types
 
-<p>Cet attribut n'aura aucun effet sur les champs qui ne renvoient pas de valeurs numériques ou de textes (les champs <code>checkbox</code> ou <code>image</code> par exemple).</p>
+This section lists the attributes which are used by all form `<input>` types. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages.
 
-<p>Pour plus d'informations, voir <a href="/fr/docs/Web/HTML/Attributs/autocomplete">la page de documentation sur l'attribut HTML <code>autocomplete</code></a>.</p>
+> **Note :** Les éléments `<input>` peuvent bien entendu utiliser les [attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h4 id="htmlattrdef(autofocus)">{{htmlattrdef("autofocus")}}</h4>
+| Attribut                           | Description                                                                                                                                                                                                                                         |
+| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("autocomplete")}}` | Une chaîne de caractères qui indique le type d'autocomplétion à utiliser.                                                                                                                                                                           |
+| `{{anch("autofocus")}}`     | Un attribut booléen qui passe le focus sur le champ lorsque le formulaire est affiché.                                                                                                                                                              |
+| `{{anch("disabled")}}`     | Un attribut booléen qui indique si le champ doit être désactivé.                                                                                                                                                                                    |
+| `{{anch("form")}}`             | L'identifiant du formulaire (la valeur de l'attribut `id` de l'élément {{HTMLElement("form")}}) auquel le champ est rattaché. Si cet attribut est absent, le champ sera rattaché au formulaire le plus proche qui le contient s'il existe. |
+| `{{anch("list")}}`             | L'identifiant (valeur de l'attribut `id`) d'un élément {{HTMLElement("datalist")}} qui fournit une liste de suggestions.                                                                                                                   |
+| `{{anch("name")}}`             | Le nom du champ qui sera rattaché à la donnée envoyée via le formulaire.                                                                                                                                                                            |
+| `{{anch("readonly")}}`     | Un attribut booléen qui indique si le champ peut être édité ou non.                                                                                                                                                                                 |
+| `{{anch("required")}}`     | Un attribut booléen qui indique que le champ doit être renseigné avant de pouvoir envoyer le formulaire.                                                                                                                                            |
+| `{{anch("tabindex")}}`     | Une valeur numérique qui indique à l'agent utilisateur l'ordre selon lequel naviguer au clavier grâce à la touche <kbd>Tab</kbd>.                                                                                                                   |
+| `{{anch("type")}}`             | Une chaîne de caractère qui indique l[e type de champ représenté par l'élément `<input>`](#types).                                                                                                                                                  |
+| `{{anch("value")}}`         | La valeur du champ.                                                                                                                                                                                                                                 |
 
-<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ doit recevoir le focus lorsque le chargement de la page est terminé (ou que la boîte de dialogue ({{HTMLElement("dialog")}}) contenant l'élément est affichée).</p>
+#### {{htmlattrdef("autocomplete")}}
 
-<div class="note">
-<p><strong>Note :</strong> Un élément ayant l'attribut <code>autofocus</code> peut avoir le focus avant que l'évènement {{domxref("DOMContentLoaded")}} soit déclenché.</p>
-</div>
+Une chaîne de caractères qui décrit si le champ doit fournir des fonctionnalités d'autocomplétion. Cette autocomplétion peut notamment provenir des valeurs précédemment saisies dans le champ. D'autres méthodes plus complexes peuvent être utilisées : un navigateur pourra par exemple interagir avec la liste des contacts de l'appareil afin de proposer l'autocomplétion pour les adresses électroniques. Voir {{SectionOnPage("/fr/docs/Web/HTML/Attributs/autocomplete", "Valeurs")}} pour les valeurs qui peuvent être utilisées avec cet attribut.
 
-<p>Seul un élément du document peut avoir l'attribut <code>autofocus</code>. Il n'est pas possible d'utiliser l'attribut <code>autofocus</code> sur les champs de type <code>hidden</code> car ces derniers, masqués, ne peuvent pas avoir le focus.</p>
+Cet attribut n'aura aucun effet sur les champs qui ne renvoient pas de valeurs numériques ou de textes (les champs `checkbox` ou `image` par exemple).
 
-<div class="warning">
-<p><strong>Attention :</strong> Le focus automatique sur un champ de formulaire peut être source de confusion, notamment pour les personnes qui utilisent des lecteurs d'écran. En effet, lorsque <code>autofocus</code> est utilisé, les lecteurs d'écran « téléportent » l'utilisateur sur le contrôle du champ, sans aucun avertissement.</p>
-</div>
+Pour plus d'informations, voir [la page de documentation sur l'attribut HTML `autocomplete`](/fr/docs/Web/HTML/Attributs/autocomplete).
 
-<h4 id="htmlattrdef(disabled)">{{htmlattrdef("disabled")}}</h4>
+#### {{htmlattrdef("autofocus")}}
 
-<p>Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir interagir avec le champ. Les champs désactivés sont généralement affichés avec une couleur plus pale et/ou avec d'autres indications.</p>
+Un attribut booléen qui, lorsqu'il est présent, indique que le champ doit recevoir le focus lorsque le chargement de la page est terminé (ou que la boîte de dialogue ({{HTMLElement("dialog")}}) contenant l'élément est affichée).
 
-<p>Les champs désactivés avec cet attribut ne reçoivent pas l'évènement {{event("click")}} et ne sont pas envoyés avec le formulaire.</p>
+> **Note :** Un élément ayant l'attribut `autofocus` peut avoir le focus avant que l'évènement {{domxref("DOMContentLoaded")}} soit déclenché.
 
-<div class="note">
-<p><strong>Note :</strong> Bien que ce ne soit pas indiqué dans la spécification, Firefox conserver l'état désactivé des champs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">y compris si cet état a été obtenu dynamiquement</a>, lors des rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} pourra être utilisé afin de contrôler cette fonctionnalité.</p>
-</div>
+Seul un élément du document peut avoir l'attribut `autofocus`. Il n'est pas possible d'utiliser l'attribut `autofocus` sur les champs de type `hidden` car ces derniers, masqués, ne peuvent pas avoir le focus.
 
-<h4 id="htmlattrdef(form)">{{htmlattrdef("form")}}</h4>
+> **Attention :** Le focus automatique sur un champ de formulaire peut être source de confusion, notamment pour les personnes qui utilisent des lecteurs d'écran. En effet, lorsque `autofocus` est utilisé, les lecteurs d'écran « téléportent » l'utilisateur sur le contrôle du champ, sans aucun avertissement.
 
-<p>Une chaîne de caractères qui indique l'élément {{HTMLElement("form")}} auquel le champ est associé (on parle de « formulaire propriétaire »). La valeur de cette chaîne de caractères doit correspondre à la valeur de l'attribut {{htmlattrxref("id")}} d'un élément <code>&lt;form&gt;</code> du document. Si cet attribut n'est pas utilisé, l'élément <code>&lt;input&gt;</code> est rattaché au formulaire le plus proche qui le contient (si un tel formulaire existe).</p>
+#### {{htmlattrdef("disabled")}}
 
-<p>Grâce à cet attribut, on peut placer un champ n'importe où dans le document et avoir un lien entre le champ et un formulaire situé ailleurs.</p>
+Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir interagir avec le champ. Les champs désactivés sont généralement affichés avec une couleur plus pale et/ou avec d'autres indications.
 
-<div class="note">
-<p><strong>Note :</strong> Un champ ne peut être associé qu'à un seul formulaire.</p>
-</div>
+Les champs désactivés avec cet attribut ne reçoivent pas l'évènement {{event("click")}} et ne sont pas envoyés avec le formulaire.
 
-<h4 id="htmlattrdef(list)">{{htmlattrdef("list")}}</h4>
+> **Note :** Bien que ce ne soit pas indiqué dans la spécification, Firefox conserver l'état désactivé des champs, [y compris si cet état a été obtenu dynamiquement](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing), lors des rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} pourra être utilisé afin de contrôler cette fonctionnalité.
 
-<p>Cet attribut est une chaîne de caractères qui correspond à l'identifiant ({{domxref("Element.id", "id")}}) d'un élément {{HTMLElement("datalist")}} du document et qui fournit une liste de valeurs à suggérer à l'utilisateur pour ce champ. Les valeurs de cette liste qui ne sont pas compatibles avec ce type de champ ne seront pas incluses dans les suggestions.</p>
+#### {{htmlattrdef("form")}}
 
-<p>L'attribut <code>list</code> n'est pas pris en charge pour les types <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> ou pour les boutons.</p>
+Une chaîne de caractères qui indique l'élément {{HTMLElement("form")}} auquel le champ est associé (on parle de « formulaire propriétaire »). La valeur de cette chaîne de caractères doit correspondre à la valeur de l'attribut {{htmlattrxref("id")}} d'un élément `<form>` du document. Si cet attribut n'est pas utilisé, l'élément `<input>` est rattaché au formulaire le plus proche qui le contient (si un tel formulaire existe).
 
-<h4 id="htmlattrdef(name)">{{htmlattrdef("name")}}</h4>
+Grâce à cet attribut, on peut placer un champ n'importe où dans le document et avoir un lien entre le champ et un formulaire situé ailleurs.
 
-<p>Une chaîne de caractères qui définit le nom associé au champ. Ce nom sera envoyé avec la valeur lors de l'envoi du formulaire.</p>
+> **Note :** Un champ ne peut être associé qu'à un seul formulaire.
 
-<p>Lorsqu'un champ a un nom, cette valeur devient une propriété de  {{domxref("HTMLFormElement.elements")}} qu'on pourra utiliser en JavaScript (ex. si on a un attribut <code>name</code> qui vaut <code>hat-size</code> :</p>
+#### {{htmlattrdef("list")}}
 
-<pre class="brush: js">let form = document.querySelector("form");
+Cet attribut est une chaîne de caractères qui correspond à l'identifiant ({{domxref("Element.id", "id")}}) d'un élément {{HTMLElement("datalist")}} du document et qui fournit une liste de valeurs à suggérer à l'utilisateur pour ce champ. Les valeurs de cette liste qui ne sont pas compatibles avec ce type de champ ne seront pas incluses dans les suggestions.
+
+L'attribut `list` n'est pas pris en charge pour les types `hidden`, `password`, `checkbox`, `radio`, `file` ou pour les boutons.
+
+#### {{htmlattrdef("name")}}
+
+Une chaîne de caractères qui définit le nom associé au champ. Ce nom sera envoyé avec la valeur lors de l'envoi du formulaire.
+
+Lorsqu'un champ a un nom, cette valeur devient une propriété de  {{domxref("HTMLFormElement.elements")}} qu'on pourra utiliser en JavaScript (ex. si on a un attribut `name` qui vaut `hat-size` :
+
+```js
+let form = document.querySelector("form");
 let guestName = form.elements.guest;
 let hatSize = form.elements["hat-size"];
-</pre>
+```
+
+Avec ce code, la variable `guestName` correspondra à l'élément {{domxref("HTMLInputElement")}} du champ `guest` et `hatSize` à l'objet pour le champ `hat-size`.
+
+> **Attention :** Il est préférable de ne pas utiliser de valeurs pour `name` qui correspondent à une propriété native de l'objet du DOM car cela surchargerait la propriété préexistante avec une référence au champ concerné.
 
-<p>Avec ce code, la variable <code>guestName</code> correspondra à l'élément {{domxref("HTMLInputElement")}} du champ <code>guest</code> et <code>hatSize</code> à l'objet pour le champ <code>hat-size</code>.</p>
+Le nom `_charset_` possède une signification spéciale. Si cette valeur est utilisée comme nom pour un élément `<input>` de type [`hidden`](/fr/docs/Web/HTML/Element/Input/hidden), la valeur du champ (l'attribut `value`) sera automatiquememnt renseignée par l'agent utilisateur et correspondra à l'encodage utilisé pour envoyer le formulaire.
 
-<div class="warning">
-<p><strong>Attention :</strong> Il est préférable de ne pas utiliser de valeurs pour <code>name</code> qui correspondent à une propriété native de l'objet du DOM car cela surchargerait la propriété préexistante avec une référence au champ concerné.</p>
-</div>
+Si l'attribut `name` n'est pas présent ou qu'il est vide, la valeur du champ ne sera pas envoyée avec le formulaire.
 
-<p>Le nom <code>_charset_</code> possède une signification spéciale. Si cette valeur est utilisée comme nom pour un élément <code>&lt;input&gt;</code> de type <code><a href="/fr/docs/Web/HTML/Element/Input/hidden">hidden</a></code>, la valeur du champ (l'attribut <code>value</code>) sera automatiquememnt renseignée par l'agent utilisateur et correspondra à l'encodage utilisé pour envoyer le formulaire.</p>
+> **Note :** Pour certaines raisons historiques, le nom `isindex` n'est pas autorisé. Pour en savoir plus, voir la section [Nommage des contrôles de formulaire : l'attribut `name`](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name) de la spécification HTML.
 
-<p>Si l'attribut <code>name</code> n'est pas présent ou qu'il est vide, la valeur du champ ne sera pas envoyée avec le formulaire.</p>
+#### {{htmlattrdef("readonly")}}
 
-<div class="note">
-<p><strong>Note :</strong> Pour certaines raisons historiques, le nom <code>isindex</code> n'est pas autorisé. Pour en savoir plus, voir la section <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name">Nommage des contrôles de formulaire : l'attribut <code>name</code></a> de la spécification HTML.</p>
-</div>
+Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir éditer la valeur du champ.
 
-<h4 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h4>
+`disabled` et `readonly` sont bien différents : `readonly` permet d'avoir un contrôle fonctionnel mais non éditable alors que les champs `disabled` ne fonctionnent pas comme des contrôles.
 
-<p>Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir éditer la valeur du champ.</p>
+> **Note :** L'attribut `required` n'est pas autorisé sur les éléments `<input>` avec l'attribut `readonly`. Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de `readonly` ou de `disabled`.
 
-<p><code>disabled</code> et <code>readonly</code> sont bien différents : <code>readonly</code> permet d'avoir un contrôle fonctionnel mais non éditable alors que les champs <code>disabled</code> ne fonctionnent pas comme des contrôles.</p>
+#### {{htmlattrdef("required")}}
 
-<div class="note">
-<p><strong>Note :</strong> L'attribut <code>required</code> n'est pas autorisé sur les éléments <code>&lt;input&gt;</code> avec l'attribut <code>readonly</code>. Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de <code>readonly</code> ou de <code>disabled</code>.</p>
-</div>
+Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur doit fournir une valeur pour ce champ avant de pouvoir envoyer le formulaire. L'attribut `required` est pris en charge pour tous les types d'éléments `<input>` exceptés :
 
-<h4 id="htmlattrdef(required)">{{htmlattrdef("required")}}</h4>
+- [`color`](/fr/docs/Web/HTML/Element/input/color)
+- [`hidden`](/fr/docs/Web/HTML/Element/input/hidden)
+- [`range`](/fr/docs/Web/HTML/Element/input/range)
+- [`submit`](/fr/docs/Web/HTML/Element/input/submit)
+- [`image`](/fr/docs/Web/HTML/Element/input/image)
+- [`reset`](/fr/docs/Web/HTML/Element/input/reset)
+- [`button`](/fr/docs/Web/HTML/Element/input/button)
 
-<p>Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur doit fournir une valeur pour ce champ avant de pouvoir envoyer le formulaire. L'attribut <code>required</code> est pris en charge pour tous les types d'éléments <code>&lt;input&gt;</code> exceptés :</p>
+Lorsqu'un champ contient l'attribut, la pseudo-classe CSS {{cssxref(":required")}} lui est appliqué. À l'inverse, les champs qui n'ont pas d'attribut `required` auront la pseudo-classe {{cssxref(":optional")}} appliquée (cela ne s'applique pas aux types de champ qui ne prennent pas en charge `require`).
 
-<div class="threecolumns">
-<ul>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/color">color</a></code></li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/hidden">hidden</a></code></li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/range">range</a></code></li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/submit">submit</a></code></li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/image">image</a></code></li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/reset">reset</a></code></li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/button">button</a></code></li>
-</ul>
-</div>
+> **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura pas d'effet sur les champs ayant également l'attribut {{htmlattrxref("readonly", "input/text")}}.
 
-<p>Lorsqu'un champ contient l'attribut, la pseudo-classe CSS {{cssxref(":required")}} lui est appliqué. À l'inverse, les champs qui n'ont pas d'attribut <code>required</code> auront la pseudo-classe {{cssxref(":optional")}} appliquée (cela ne s'applique pas aux types de champ qui ne prennent pas en charge <code>require</code>).</p>
+#### {{htmlattrdef("tabindex")}}
 
-<div class="note">
-<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura pas d'effet sur les champs ayant également l'attribut {{htmlattrxref("readonly", "input/text")}}.</p>
-</div>
+Une valeur nnumérique qui définit si le champ peut recevoir le focus via la navigation au clavier (en navigant avec la touche <kbd>Tab</kbd>) et la façon dont l'élément s'inscrit dans l'ordre de la navigation au clavier.
 
-<h4 id="htmlattrdef(tabindex)">{{htmlattrdef("tabindex")}}</h4>
+Les valeurs de `tabindex` auront un sens différents selon leur signe :
 
-<p>Une valeur nnumérique qui définit si le champ peut recevoir le focus via la navigation au clavier (en navigant avec la touche <kbd>Tab</kbd>) et la façon dont l'élément s'inscrit dans l'ordre de la navigation au clavier.</p>
+- Lorsque `tabindex` est une valeur négative, cela indique que l'élément peut recevoir le focus de la part de l'utilisateur mais sans utiliser la navigation séquentielle au clavier. Il est recommandé de toujours utiliser une valeur de `-1` dans ce cas.
+- Lorsque `tabindex` est nul, cela indique que l'élément peut recevoir le focus et peut être accessible via la navigation au clavier mais que l'ordre de navigation est laissé à la discrétion de l'agent utilisateur. C'est généralement la meilleure valeur à utiliser.
+- Lorsque `tabindex` est une valeur positive, cette dernière définit l'ordre de l'élément dans la navigation au clavier. Chaque fois que l'utilisateur appuie sur la touche
 
-<p>Les valeurs de <code>tabindex</code> auront un sens différents selon leur signe :</p>
+  <kbd>Tab</kbd>
 
-<ul>
- <li>Lorsque <code>tabindex</code> est une valeur négative, cela indique que l'élément peut recevoir le focus de la part de l'utilisateur mais sans utiliser la navigation séquentielle au clavier. Il est recommandé de toujours utiliser une valeur de <code>-1</code> dans ce cas.</li>
- <li>Lorsque <code>tabindex</code> est nul, cela indique que l'élément peut recevoir le focus et peut être accessible via la navigation au clavier mais que l'ordre de navigation est laissé à la discrétion de l'agent utilisateur. C'est généralement la meilleure valeur à utiliser.</li>
- <li>Lorsque <code>tabindex</code> est une valeur positive, cette dernière définit l'ordre de l'élément dans la navigation au clavier. Chaque fois que l'utilisateur appuie sur la touche <kbd>Tab</kbd>, le focus passe à un élément qui possède un attribut <code>tabindex</code> plus élevé. La plupart des plateformes disposent également d'une fonctionnalité pour « reculer » dans la navigation au clavier, généralement via la combinaison de touches <kbd>Shift</kbd> + <kbd>Tab</kbd>.</li>
-</ul>
+  , le focus passe à un élément qui possède un attribut `tabindex` plus élevé. La plupart des plateformes disposent également d'une fonctionnalité pour « reculer » dans la navigation au clavier, généralement via la combinaison de touches
 
-<p>Si cet attribut est absent ou n'est pas un entier valide, ce sera à l'agent utilisateur de respecter les conventions de la plateforme sous-jacente pour la navigation au clavier et la gestion du focus.</p>
+  <kbd>Shift</kbd>
 
-<h4 id="htmlattrdef(type)">{{htmlattrdef("type")}}</h4>
+  \+
 
-<p>Une chaîne de caractères qui indique le type de contrôle à afficher. On pourra par exemple avoir une case à cocher en utilisant la valeur <code>checkbox</code>. Lorsque cet attribut est absent ou qu'une valeur inconnue est utilisée, la valeur par défaut sera <code>text</code> et le contrôle créé permettra de saisir un texte.</p>
+  <kbd>Tab</kbd>
 
-<p>Les valeurs autorisées pour cet attribut sont <a href="#types">présentées plus haut</a>.</p>
+  .
 
-<h4 id="htmlattrdef(value)">{{htmlattrdef("value")}}</h4>
+Si cet attribut est absent ou n'est pas un entier valide, ce sera à l'agent utilisateur de respecter les conventions de la plateforme sous-jacente pour la navigation au clavier et la gestion du focus.
 
-<p>La valeur du champ. Lorsque cet attribut est indiqué en HTML, il correspond à la valeur initiale du champ qui peut ensuite être modifié par l'utilisateur. Cette valeur peut également être récupérée et modifiée en JavaScript grâce à la propriété <code>value</code> de l'objet {{domxref("HTMLInputElement")}}. Cet attribut est toujours optionnel.</p>
+#### {{htmlattrdef("type")}}
 
-<div class="note">
-<p><strong>Note :</strong> À la différence des autres contrôles, les cases à cocher et les boutons radio sont uniquemnet envoyés via le formulaire lorsque l'attribut <code>checked</code> est vrai. Dans ce cas, l'attribut <code>value</code> sera la valeur associée au champ.</p>
+Une chaîne de caractères qui indique le type de contrôle à afficher. On pourra par exemple avoir une case à cocher en utilisant la valeur `checkbox`. Lorsque cet attribut est absent ou qu'une valeur inconnue est utilisée, la valeur par défaut sera `text` et le contrôle créé permettra de saisir un texte.
 
-<p>Aussi, si on a une case à cocher dont l'attribut <code>name</code> vaut <code>status</code>, que l'attribut <code>value</code> vaut <code>active</code> et que la case est cochée, les données envoyées au formulaire contiendront <code>status=active</code>. Si la case à cocher n'est pas cochée, ses données ne seront pas envoyées avec le formulaire. Pour les cases à cocher et les boutons radio, la valeur par défaut de l'attribut <code>value</code> est <code>on</code>.</p>
-</div>
+Les valeurs autorisées pour cet attribut sont [présentées plus haut](#types).
 
-<h2 id="Exemples">Exemples</h2>
+#### {{htmlattrdef("value")}}
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+La valeur du champ. Lorsque cet attribut est indiqué en HTML, il correspond à la valeur initiale du champ qui peut ensuite être modifié par l'utilisateur. Cette valeur peut également être récupérée et modifiée en JavaScript grâce à la propriété `value` de l'objet {{domxref("HTMLInputElement")}}. Cet attribut est toujours optionnel.
 
-<h4 id="HTML">HTML</h4>
+> **Note :** À la différence des autres contrôles, les cases à cocher et les boutons radio sont uniquemnet envoyés via le formulaire lorsque l'attribut `checked` est vrai. Dans ce cas, l'attribut `value` sera la valeur associée au champ.
+>
+> Aussi, si on a une case à cocher dont l'attribut `name` vaut `status`, que l'attribut `value` vaut `active` et que la case est cochée, les données envoyées au formulaire contiendront `status=active`. Si la case à cocher n'est pas cochée, ses données ne seront pas envoyées avec le formulaire. Pour les cases à cocher et les boutons radio, la valeur par défaut de l'attribut `value` est `on`.
 
-<pre class="brush: html">&lt;p&gt;Un élément de saisie simple &lt;/p&gt;
-&lt;input type="text" value="Saisir un texte ici"&gt;
-</pre>
+## Exemples
 
-<h4 id="Résultat">Résultat</h4>
+### Exemple simple
 
-<p>{{EmbedLiveSample('Exemple_simple', '', '100')}}</p>
+#### HTML
 
-<h3 id="Un_scénario_fréquent">Un scénario fréquent</h3>
+```html
+<p>Un élément de saisie simple </p>
+<input type="text" value="Saisir un texte ici">
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### Résultat
 
-<pre class="brush: html">&lt;p&gt;Un formulaire avec différents types de champs&lt;/p&gt;
-&lt;form action="getform.php" method="get"&gt;
-  &lt;label&gt;Prénom : &lt;input type="text"&gt;&lt;/label&gt;&lt;br&gt;
-  &lt;label&gt;Nom : &lt;input type="text"&gt;&lt;/label&gt;&lt;br&gt;
-  &lt;label&gt;Adresse email : &lt;input type="email"&gt;&lt;/label&gt;&lt;br&gt;
-  &lt;input type="submit" value="Envoyer"&gt;
-&lt;/form&gt;
-</pre>
+{{EmbedLiveSample('Exemple_simple', '', '100')}}
 
-<h4 id="Résultat_2">Résultat</h4>
+### Un scénario fréquent
 
-<p>{{EmbedLiveSample('Un_scénario_fréquent', '', '200')}}</p>
+#### HTML
 
-<h2 id="Localisation">Localisation</h2>
+```html
+<p>Un formulaire avec différents types de champs</p>
+<form action="getform.php" method="get">
+  <label>Prénom : <input type="text"></label><br>
+  <label>Nom : <input type="text"></label><br>
+  <label>Adresse email : <input type="email"></label><br>
+  <input type="submit" value="Envoyer">
+</form>
+```
 
-<p>Pour certains types d'éléments <code>&lt;input&gt;</code>, les valeurs saisies autorisées dépendent de la locale utilisée. Ainsi, dans certaines locales, 1,000.00 est un nombre valide alors que dans d'autres, il faudra avoir saisi 1.000,00 pour exprimer le même nombre.</p>
+#### Résultat
 
-<p>Firefox utilise la méthode heuristique suivante afin de déterminer la locale pour laquelle valider la saisie de l'utilisateur (au moins dans le cas de <code>type="number"</code>):</p>
+{{EmbedLiveSample('Un_scénario_fréquent', '', '200')}}
 
-<ul>
- <li>Utiliser la langue définie par l'attribut <code>lang</code>/<code>xml:lang</code> de l'élément ou par celui de ses parents.</li>
- <li>Sinon utiliser la langue définie dans l'en-tête HTTP {{httpheader("Content-Language")}}</li>
- <li>Sinon, utiliser la locale du navigateur</li>
-</ul>
+## Localisation
 
-<h2 id="Accessibilité">Accessibilité</h2>
+Pour certains types d'éléments `<input>`, les valeurs saisies autorisées dépendent de la locale utilisée. Ainsi, dans certaines locales, 1,000.00 est un nombre valide alors que dans d'autres, il faudra avoir saisi 1.000,00 pour exprimer le même nombre.
 
-<h3 id="Utilisation_de_libellés">Utilisation de libellés</h3>
+Firefox utilise la méthode heuristique suivante afin de déterminer la locale pour laquelle valider la saisie de l'utilisateur (au moins dans le cas de `type="number"`):
 
-<p>Lorsqu'on utilise des champs de formulaire, il est recommandé d'ajouter des libellés pour chacun de ces champs. Ainsi, les personnes qui utilisent des outils d'assistance pourront connaître la signification du champ.</p>
+- Utiliser la langue définie par l'attribut `lang`/`xml:lang` de l'élément ou par celui de ses parents.
+- Sinon utiliser la langue définie dans l'en-tête HTTP {{httpheader("Content-Language")}}
+- Sinon, utiliser la locale du navigateur
 
-<p>Dans l'exemple suivant, on illustre comment associer un élément <code>&lt;label&gt;</code> avec un élément <code>&lt;input&gt;</code>. Pour ce faire, on ajoutera un identifiant (un attribut <code>id</code>) à l'élément <code>&lt;input&gt;</code> et on référencera cet identifiant via l'attribut <code>for</code> de l'élément <code>&lt;label&gt;</code>.</p>
+## Accessibilité
 
-<pre>&lt;label for="ptipois"&gt;Aimez-vous les petits-pois ?&lt;/label&gt;
-&lt;input type="checkbox" name="petitspois" id="ptipois"&gt;
-</pre>
+### Utilisation de libellés
 
-<h3 id="Dimensionnement_-_taille">Dimensionnement - taille</h3>
+Lorsqu'on utilise des champs de formulaire, il est recommandé d'ajouter des libellés pour chacun de ces champs. Ainsi, les personnes qui utilisent des outils d'assistance pourront connaître la signification du champ.
 
-<p>Les éléments interactifs tels que les champs de formulaire doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">pixels CSS</a>.</p>
+Dans l'exemple suivant, on illustre comment associer un élément `<label>` avec un élément `<input>`. Pour ce faire, on ajoutera un identifiant (un attribut `id`) à l'élément `<input>` et on référencera cet identifiant via l'attribut `for` de l'élément `<label>`.
 
-<ul>
- <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)</a></li>
- <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Taille des cibles et critère 2.5.5, billet en anglais de Adrian Roselli</a></li>
- <li><a href="https://a11yproject.com/posts/large-touch-targets/">Test rapide : cibles tactiles suffisamment grande - Projet A11Y (billet en anglais)</a></li>
-</ul>
+    <label for="ptipois">Aimez-vous les petits-pois ?</label>
+    <input type="checkbox" name="petitspois" id="ptipois">
 
-<h2 id="Notes">Notes</h2>
+### Dimensionnement - taille
 
-<h3 id="Messages_personnalisés_pour_les_erreurs">Messages personnalisés pour les erreurs</h3>
+Les éléments interactifs tels que les champs de formulaire doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 [pixels CSS](https://www.w3.org/TR/WCAG21/#dfn-css-pixels).
 
-<p>Si on souhaite afficher un message d'erreur personnalisé lors de l'échec de la validation d'un champs, il faudra utiliser <a href="/en-US/docs/Web/API/Constraint_validation#Constraint_validation_interfaces">les fonctionnalités de contraintes de validation</a> qui sont disponibles sur les éléments <code>&lt;input&gt;</code>. Par exemple :</p>
+- [Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)
+- [Taille des cibles et critère 2.5.5, billet en anglais de Adrian Roselli](http://adrianroselli.com/2019/06/target-size-and-2-5-5.html)
+- [Test rapide : cibles tactiles suffisamment grande - Projet A11Y (billet en anglais)](https://a11yproject.com/posts/large-touch-targets/)
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="name"&gt;Saisir un nom d'utilisateur (lettres minuscules et majuscules) : &lt;/label&gt;
-  &lt;input type="text" name="name" id="name" required pattern="[A-Za-z]+"&gt;
-  &lt;button&gt;Envoyer&lt;/button&gt;
-&lt;/form&gt;</pre>
+## Notes
 
-<p>Les fonctionnalités de validation HTML déclencheront un message d'erreur par défaut si on souhaite envoyer le formulaire avec une valeur invalide (qui ne respecte pas <code>pattern</code>) ou sans valeur.</p>
+### Messages personnalisés pour les erreurs
 
-<p>Si on souhaite plutôt afficher un message d'erreur personnalisé, on pourra utiliser un fragment de code JavaScript comme celui-ci :</p>
+Si on souhaite afficher un message d'erreur personnalisé lors de l'échec de la validation d'un champs, il faudra utiliser [les fonctionnalités de contraintes de validation](/en-US/docs/Web/API/Constraint_validation#Constraint_validation_interfaces) qui sont disponibles sur les éléments `<input>`. Par exemple :
 
-<pre class="brush: js">const nameInput = document.querySelector('input');
+```html
+<form>
+  <label for="name">Saisir un nom d'utilisateur (lettres minuscules et majuscules) : </label>
+  <input type="text" name="name" id="name" required pattern="[A-Za-z]+">
+  <button>Envoyer</button>
+</form>
+```
+
+Les fonctionnalités de validation HTML déclencheront un message d'erreur par défaut si on souhaite envoyer le formulaire avec une valeur invalide (qui ne respecte pas `pattern`) ou sans valeur.
+
+Si on souhaite plutôt afficher un message d'erreur personnalisé, on pourra utiliser un fragment de code JavaScript comme celui-ci :
+
+```js
+const nameInput = document.querySelector('input');
 const form = document.querySelector('form');
 
-nameInput.addEventListener('input', () =&gt; {
+nameInput.addEventListener('input', () => {
   nameInput.setCustomValidity('');
   nameInput.checkValidity();
 });
 
-nameInput.addEventListener('invalid', () =&gt; {
+nameInput.addEventListener('invalid', () => {
   if(nameInput.value === '') {
     nameInput.setCustomValidity("Veuillez saisir votre nom d'utilisateur !");
   } else {
     nameInput.setCustomValidity("Un nom d'utilisateur ne peut contenir que des lettres minuscules et majuscules, veuillez réessayer");
   }
-});</pre>
+});
+```
 
-<p>Voici le résultat qui pourra être obtenu :</p>
+Voici le résultat qui pourra être obtenu :
 
-<p>{{EmbedLiveSample("Messages_personnalisés_pour_les_erreurs")}}</p>
+{{EmbedLiveSample("Messages_personnalisés_pour_les_erreurs")}}
 
-<p>Voici un récapitulatif de la logique de cet exemple :</p>
+Voici un récapitulatif de la logique de cet exemple :
 
-<ul>
- <li>On vérifie la validité du champ chaque fois que sa valeur est modifiée en exécutant la méthode <code><a href="/fr/docs/Web/API/HTMLSelectElement/checkValidity">checkValidity()</a></code> grâce au gestionnaire d'évènement attaché à <code>input</code>.</li>
- <li>Si la valeur est invalide, on génère un évènement <code>invalid</code> et le gestionnaire d'évènement associé est exécuté. Dans cette fonction, on analyse avec un bloc <code>if()</code> si la valeur est invalide parce qu'elle est vide ou parce qu'elle ne correspond pas au motif désiré. Selon le cas de figure, on utilise le message d'erreur correspondant.</li>
- <li>Ainsi, si le champ saisi est invalide, lorsque le bouton Envoyer est utilisé, un des messages d'erreur sera affiché.</li>
- <li>Si la valeur est valide, elle sera envoyée normalement. Pour cela, il faudra annuler la vérification spécifique en appelant <code><a href="/fr/docs/Web/API/HTMLSelectElement/setCustomValidity">setCustomValidity()</a></code> avec une chaîne de caractères vide. On effectue cela à chaque évènement <code>input</code>. Sans cette étape, avec une validation spécifique, le champ saisi serait considéré comme invalide même si sa valeur respectait les contraintes exprimées dans le HTML.</li>
-</ul>
+- On vérifie la validité du champ chaque fois que sa valeur est modifiée en exécutant la méthode [`checkValidity()`](/fr/docs/Web/API/HTMLSelectElement/checkValidity) grâce au gestionnaire d'évènement attaché à `input`.
+- Si la valeur est invalide, on génère un évènement `invalid` et le gestionnaire d'évènement associé est exécuté. Dans cette fonction, on analyse avec un bloc `if()` si la valeur est invalide parce qu'elle est vide ou parce qu'elle ne correspond pas au motif désiré. Selon le cas de figure, on utilise le message d'erreur correspondant.
+- Ainsi, si le champ saisi est invalide, lorsque le bouton Envoyer est utilisé, un des messages d'erreur sera affiché.
+- Si la valeur est valide, elle sera envoyée normalement. Pour cela, il faudra annuler la vérification spécifique en appelant [`setCustomValidity()`](/fr/docs/Web/API/HTMLSelectElement/setCustomValidity) avec une chaîne de caractères vide. On effectue cela à chaque évènement `input`. Sans cette étape, avec une validation spécifique, le champ saisi serait considéré comme invalide même si sa valeur respectait les contraintes exprimées dans le HTML.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, contenu de formulaire (listé, envoyable, réinitialisable), <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>. Si l'attribut {{htmlattrxref("type", "input")}} ne vaut pas <code>hidden</code>, c'est un élément étiquetable et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Aucun, cet élément est un élément vide.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>Cet élément doit avoir une balise de début et ne pas avoir de balise de fin.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>
-    <ul>
-     <li><code>type=button</code> : {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li>
-     <li><code>type=checkbox</code> : {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li>
-     <li><code>type=image</code> : {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li>
-     <li><code>type=radio</code> : {{ARIARole("menuitemradio")}}</li>
-     <li><code>type=color|date|email|file|hidden</code> : aucun</li>
-     <li><code>type=month|number|password|range|reset</code> : aucun</li>
-     <li><code>type=search|submit|tel|text|url|week</code> : aucun</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLInputElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >, contenu de formulaire (listé, envoyable, réinitialisable),
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >. Si l'attribut {{htmlattrxref("type", "input")}} ne vaut
+        pas <code>hidden</code>, c'est un élément étiquetable et
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Aucun, cet élément est un élément vide.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        Cet élément doit avoir une balise de début et ne pas avoir de balise de
+        fin.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>
+        <ul>
+          <li>
+            <code>type=button</code> : {{ARIARole("link")}},
+            {{ARIARole("menuitem")}},
+            {{ARIARole("menuitemcheckbox")}},
+            {{ARIARole("menuitemradio")}},
+            {{ARIARole("radio")}}, {{ARIARole("switch")}},
+            {{ARIARole("tab")}}
+          </li>
+          <li>
+            <code>type=checkbox</code> : {{ARIARole("button")}},
+            {{ARIARole("menuitemcheckbox")}},
+            {{ARIARole("option")}}, {{ARIARole("switch")}}
+          </li>
+          <li>
+            <code>type=image</code> : {{ARIARole("link")}},
+            {{ARIARole("menuitem")}},
+            {{ARIARole("menuitemcheckbox")}},
+            {{ARIARole("menuitemradio")}},
+            {{ARIARole("radio")}}, {{ARIARole("switch")}}
+          </li>
+          <li>
+            <code>type=radio</code> : {{ARIARole("menuitemradio")}}
+          </li>
+          <li><code>type=color|date|email|file|hidden</code> : aucun</li>
+          <li><code>type=month|number|password|range|reset</code> : aucun</li>
+          <li><code>type=search|submit|tel|text|url|week</code> : aucun</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLInputElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','&lt;input capture&gt;')}}</td>
-   <td>{{Spec2('HTML Media Capture')}}</td>
-   <td>Ajout de l'élément <code>capture</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '&lt;input&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                    | État                                     | Commentaires                 |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#the-input-element', '&lt;input&gt;')}}             | {{Spec2('HTML WHATWG')}}         |                              |
+| {{SpecName('HTML Media Capture', '#the-capture-attribute','&lt;input capture&gt;')}} | {{Spec2('HTML Media Capture')}} | Ajout de l'élément `capture` |
+| {{SpecName('HTML5 W3C', 'forms.html#the-input-element', '&lt;input&gt;')}}             | {{Spec2('HTML5 W3C')}}             |                              |
+| {{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '&lt;form&gt;')}}                     | {{Spec2('HTML4.01')}}             |                              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input")}}</p>
+{{Compat("html.elements.input")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les autres éléments relatifs aux formulaires HTML : {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li>
- <li>Dans certains cas, l'élément <code>&lt;input&gt;</code> est un <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">élément remplacé</a>, sa position et sa taille dans le cadre de l'élément peuvent être ajustées grâce aux propriétés CSS {{cssxref("object-position")}} et {{cssxref("object-fit")}}.</li>
- <li>L'objet DOM correspondant : {{domxref("HTMLInputElement")}}</li>
-</ul>
+- Les autres éléments relatifs aux formulaires HTML : {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
+- Dans certains cas, l'élément `<input>` est un [élément remplacé](/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9), sa position et sa taille dans le cadre de l'élément peuvent être ajustées grâce aux propriétés CSS {{cssxref("object-position")}} et {{cssxref("object-fit")}}.
+- L'objet DOM correspondant : {{domxref("HTMLInputElement")}}
diff --git a/files/fr/web/html/element/input/month/index.md b/files/fr/web/html/element/input/month/index.md
index 6f21f8d10d..e09147781e 100644
--- a/files/fr/web/html/element/input/month/index.md
+++ b/files/fr/web/html/element/input/month/index.md
@@ -7,184 +7,170 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/month
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"month"</strong></code> permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format <code>"YYYY-MM"</code>, où <code>YYYY</code> représente l'année sur quatre chiffre et <code>MM</code> le mois sur deux chiffres.</p>
+Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`"month"`** permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format `"YYYY-MM"`, où `YYYY` représente l'année sur quatre chiffre et `MM` le mois sur deux chiffres.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}
 
-<p>L'interface utilisateur associée à ce contrôle varie d'un navigateur à l'autre et la prise en charge de cette fonctionnalité reste encore hétérogène : seuls Chrome, Opéra et Edge implémentent cette fonctionnalité sur ordinateur et la plupart des navigateurs mobiles possèdent une implémentation. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, l'élément sera transformé en un simple <code><a href="/fr/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code>.</p>
+L'interface utilisateur associée à ce contrôle varie d'un navigateur à l'autre et la prise en charge de cette fonctionnalité reste encore hétérogène : seuls Chrome, Opéra et Edge implémentent cette fonctionnalité sur ordinateur et la plupart des navigateurs mobiles possèdent une implémentation. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, l'élément sera transformé en un simple [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text).
 
-<p>Si votre navigateur ne prend pas en charge ce type d'élément, voici ensuite une capture d'écran de Chrome : cliquer sur la flèche vers le bas permettra de faire apparaître un sélecteur de date qui permettra de choisir le mois et l'année.</p>
+Si votre navigateur ne prend pas en charge ce type d'élément, voici ensuite une capture d'écran de Chrome : cliquer sur la flèche vers le bas permettra de faire apparaître un sélecteur de date qui permettra de choisir le mois et l'année.
 
-<p><img alt="" src="month-control-chrome.png"></p>
+![](month-control-chrome.png)
 
-<p>Voici un aperçu du contrôle sous Edge :</p>
+Voici un aperçu du contrôle sous Edge :
 
-<p><img alt="" src="month-control-edge.png"></p>
+![](month-control-edge.png)
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du mois et de l'année saisies via le contrôle, au format YYYY-MM (c'est-à-dire une année sur 4 chiffres suivi d'un tiret (<code>"-"</code>) suivi du mois sur deux chiffres. Le format détaillé est <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_mois">décrit dans l'article sur les formats des dates/heures</a>.</p>
+Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du mois et de l'année saisies via le contrôle, au format YYYY-MM (c'est-à-dire une année sur 4 chiffres suivi d'un tiret (`"-"`) suivi du mois sur deux chiffres. Le format détaillé est [décrit dans l'article sur les formats des dates/heures](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_mois).
 
-<p>Il est possible de définir une valeur par défaut pour le contrôle en utilisant l'attribut {{htmlattrxref("value", "input")}} de la façon suivante :</p>
+Il est possible de définir une valeur par défaut pour le contrôle en utilisant l'attribut {{htmlattrxref("value", "input")}} de la façon suivante :
 
-<h3 id="Exemple_1">Exemple 1</h3>
+### Exemple 1
 
-<pre class="brush: html">&lt;label for="bday-month"&gt;Quel est le mois de votre naissance ?&lt;/label&gt;
-&lt;input id="bday-month" type="month" name="bday-month" value="2017-06"&gt;</pre>
+```html
+<label for="bday-month">Quel est le mois de votre naissance ?</label>
+<input id="bday-month" type="month" name="bday-month" value="2017-06">
+```
 
-<p>{{EmbedLiveSample('Exemple_1', 600, 60)}}</p>
+{{EmbedLiveSample('Exemple_1', 600, 60)}}
 
-<p>On notera que la façon dont la date est affichée peut varier selon la locale de l'utilisateur et être présentée sous un format différent. En revanche, d'un point de vue technique, la valeur de l'attribut <code>value</code> suivra toujours le format <code>YYYY-MM</code>.</p>
+On notera que la façon dont la date est affichée peut varier selon la locale de l'utilisateur et être présentée sous un format différent. En revanche, d'un point de vue technique, la valeur de l'attribut `value` suivra toujours le format `YYYY-MM`.
 
-<p>Par exemple, lorsque le formulaire précédent sera envoyé vers le serveur, l'information sera transmise de cette façon : <code>bday-month=1978-06</code>.</p>
+Par exemple, lorsque le formulaire précédent sera envoyé vers le serveur, l'information sera transmise de cette façon : `bday-month=1978-06`.
 
-<p>Il est également possible de manipuler la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p>
+Il est également possible de manipuler la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :
 
-<h3 id="Exemple_2">Exemple 2</h3>
+### Exemple 2
 
-<pre class="brush: html hidden">&lt;label for="bday-month"&gt;Quel est le mois de votre naissance ?&lt;/label&gt;
-&lt;input id="bday-month" type="month" name="bday-month" value="2017-06"&gt;</pre>
-</div>
+```html hidden
+<label for="bday-month">Quel est le mois de votre naissance ?</label>
+<input id="bday-month" type="month" name="bday-month" value="2017-06">
+```
 
-<pre class="brush: js hidden">var monthControl = document.querySelector('input[type="month"]');
-monthControl.value = '1978-06';</pre>
+```js hidden
+var monthControl = document.querySelector('input[type="month"]');
+monthControl.value = '1978-06';
+```
 
-<p>{{EmbedLiveSample("Exemple_2", 600, 60)}}</p>
+{{EmbedLiveSample("Exemple_2", 600, 60)}}
 
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+## Attributs supplémentaires
 
-<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mois gèrent les attributs suivants :</p>
+En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mois gèrent les attributs suivants :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("max")}}</code></td>
-   <td>Le mois (et l'année) le plus tardif qui est considéré comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("min")}}</code></td>
-   <td>Le mois (et l'année) le plus tôt qui est considéré comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("readonly")}}</code></td>
-   <td>Un booléen qui indique si l'utilisateur peut modifier la valeur du champ.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("step")}}</code></td>
-   <td>Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur.</td>
-  </tr>
- </tbody>
-</table>
+| Attribut                       | Description                                                                                                                                             |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("max")}}`         | Le mois (et l'année) le plus tardif qui est considéré comme valide.                                                                                     |
+| `{{anch("min")}}`         | Le mois (et l'année) le plus tôt qui est considéré comme valide.                                                                                        |
+| `{{anch("readonly")}}` | Un booléen qui indique si l'utilisateur peut modifier la valeur du champ.                                                                               |
+| `{{anch("step")}}`         | Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur. |
 
-<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3>
+### {{htmlattrdef("max")}}
 
-<p>Le mois le plus tardif, indiqué avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-MM"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle.</p>
+Le mois le plus tardif, indiqué avec l'année, sous la forme d'une chaîne de caractères au format `"yyyy-MM"`. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle.
 
-<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p>
+Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut `min`.
 
-<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3>
+### {{htmlattrdef("min")}}
 
-<p>Le mois le plus tôt, indiqué avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-MM"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle.</p>
+Le mois le plus tôt, indiqué avec l'année, sous la forme d'une chaîne de caractères au format `"yyyy-MM"`. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle.
 
-<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p>
+Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut `max`.
 
-<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3>
+### {{htmlattrdef("readonly")}}
 
-<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. La valeur de l'attribut <code>value</code> peut toutefois être modifiée grâce à du code JavaScript qui changerait la propriété {{domxref("HTMLInputElement.value")}}.</p>
+Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. La valeur de l'attribut `value` peut toutefois être modifiée grâce à du code JavaScript qui changerait la propriété {{domxref("HTMLInputElement.value")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura aucun effet si l'attribut <code>readonly</code> est défini.</p>
-</div>
+> **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura aucun effet si l'attribut `readonly` est défini.
 
-<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3>
+### {{htmlattrdef("step")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}
 
-<p>Pour les champs <code>month</code>, la valeur de l'attribut <code>step</code> est exprimée en mois et le facteur d'amplification est égal à 1 (la valeur sous-jacente est également exprimée en mois). La valeur par défaut pour cet attribut est 1.</p>
+Pour les champs `month`, la valeur de l'attribut `step` est exprimée en mois et le facteur d'amplification est égal à 1 (la valeur sous-jacente est également exprimée en mois). La valeur par défaut pour cet attribut est 1.
 
-<h2 id="Utiliser_&lt;input_typemonth>">Utiliser <code>&lt;input type="month"&gt;</code></h2>
+## Utiliser `<input type="month">`
 
-<p>Un élément <code>&lt;input&gt;</code> de type <code>month</code> permet d'avoir une interface utilisateur simple d'utilisation pour choisir un mois et également de respecter un même format, quelle que soit la locale de l'utilisateur. Toutefois, <code>&lt;input type="month"&gt;</code> n'est pas pris en charge par l'ensemble des navigateurs ce qui peut poser problème.</p>
+Un élément `<input>` de type `month` permet d'avoir une interface utilisateur simple d'utilisation pour choisir un mois et également de respecter un même format, quelle que soit la locale de l'utilisateur. Toutefois, `<input type="month">` n'est pas pris en charge par l'ensemble des navigateurs ce qui peut poser problème.
 
-<p>Nous verrons ici quelques cas d'utilisation, simples puis complexes et nous aborderons ensuite comment gérer l'absence de prise en charge.</p>
+Nous verrons ici quelques cas d'utilisation, simples puis complexes et nous aborderons ensuite comment gérer l'absence de prise en charge.
 
-<h3 id="Utilisation_simple">Utilisation simple</h3>
+### Utilisation simple
 
-<p>Dans son expression la plus simple, il suffit d'employer un élément <code>&lt;input&gt;</code> ainsi qu'un élément {{htmlelement("label")}} :</p>
+Dans son expression la plus simple, il suffit d'employer un élément `<input>` ainsi qu'un élément {{htmlelement("label")}} :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="bday-month"&gt;Quel est le mois de votre naissance ?&lt;/label&gt;
-  &lt;input id="bday-month" type="month" name="bday-month"&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <label for="bday-month">Quel est le mois de votre naissance ?</label>
+  <input id="bday-month" type="month" name="bday-month">
+</form>
+```
 
-<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p>
+{{EmbedLiveSample('Utilisation_simple', 600, 40)}}
 
-<h3 id="Indiquer_une_date_maximale_et_une_date_minimale">Indiquer une date maximale et une date minimale</h3>
+### Indiquer une date maximale et une date minimale
 
-<p>On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre la période pendant laquelle l'utilisateur peut choisir un mois. Dans l'exemple qui suit, on définit une date au plus tôt avec <code>1900-01</code> et une date au plus tard avec <code>2017-08</code>:</p>
+On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre la période pendant laquelle l'utilisateur peut choisir un mois. Dans l'exemple qui suit, on définit une date au plus tôt avec `1900-01` et une date au plus tard avec `2017-08`:
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="bday-month"&gt;Quel est le mois de votre naissance ?&lt;/label&gt;
-  &lt;input id="bday-month" type="month" name="bday-month"
-         min="1900-01" max="2017-08"&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <label for="bday-month">Quel est le mois de votre naissance ?</label>
+  <input id="bday-month" type="month" name="bday-month"
+         min="1900-01" max="2017-08">
+</form>
+```
 
-<p>{{EmbedLiveSample('Indiquer_une_date_maximale_et_une_date_minimale', 600, 40)}}</p>
+{{EmbedLiveSample('Indiquer_une_date_maximale_et_une_date_minimale', 600, 40)}}
 
-<p>Grâce ce fragment de code :</p>
+Grâce ce fragment de code :
 
-<ul>
- <li>Seuls les mois entre janvier 1900 et août 2017 peuvent être sélectionnés (le contrôle ne doit pas permettre de sélectionner un mois en dehors de cette période)</li>
- <li>Selon le navigateur, les mois en dehors de la période ne peuvent pas être sélectionnés (Edge) ou sont invalides mais toujours disponibles (Chrome).</li>
-</ul>
+- Seuls les mois entre janvier 1900 et août 2017 peuvent être sélectionnés (le contrôle ne doit pas permettre de sélectionner un mois en dehors de cette période)
+- Selon le navigateur, les mois en dehors de la période ne peuvent pas être sélectionnés (Edge) ou sont invalides mais toujours disponibles (Chrome).
 
-<div class="note">
-<p><strong>Note :</strong> L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité.</p>
-</div>
+> **Note :** L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité.
 
-<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3>
+### Contrôler la taille du champ
 
-<p><code>&lt;input type="month"&gt;</code> ne peut pas être dimensionné grâce à {{htmlattrxref("size", "input")}}, il vous faudra utiliser <a href="/fr/docs/Web/CSS">CSS</a> si besoin.</p>
+`<input type="month">` ne peut pas être dimensionné grâce à {{htmlattrxref("size", "input")}}, il vous faudra utiliser [CSS](/fr/docs/Web/CSS) si besoin.
 
-<h2 id="Validation">Validation</h2>
+## Validation
 
-<p>Par défaut, <code>&lt;input type="month"&gt;</code> n'applique pas de validation particulière sur la valeur saisie. C'est l'interface utilisateur qui ne permet pas de choisir autre chose qu'un mois.</p>
+Par défaut, `<input type="month">` n'applique pas de validation particulière sur la valeur saisie. C'est l'interface utilisateur qui ne permet pas de choisir autre chose qu'un mois.
 
-<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de limiter la période valide et l'attribut {{htmlattrxref("required", "input")}} rend le champ obligatoire. Avec ces attributs, les navigateurs afficheront un message d'erreur si la date choisie est hors de la période ou si la valeur est vide.</p>
+Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de limiter la période valide et l'attribut {{htmlattrxref("required", "input")}} rend le champ obligatoire. Avec ces attributs, les navigateurs afficheront un message d'erreur si la date choisie est hors de la période ou si la valeur est vide.
 
-<p>Prenons un exemple avec une période délimitée et un champ obligatoire :</p>
+Prenons un exemple avec une période délimitée et un champ obligatoire :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="month"&gt;À quel mois souhaitez-vous venir cet été ?&lt;/label&gt;
-    &lt;input id="month" type="month" name="month"
-           min="2017-06" max="2017-09" required&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-      &lt;input type="submit" value="Envoyer le formulaire"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <label for="month">À quel mois souhaitez-vous venir cet été ?</label>
+    <input id="month" type="month" name="month"
+           min="2017-06" max="2017-09" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+      <input type="submit" value="Envoyer le formulaire">
+  </div>
+</form>
+```
 
-<p>Si vous tentez d'envoyer le formulaire avec une date incomplète ou en dehors de cette période, le navigateur doit afficher un message d'erreur. Voici le résultat <em>live</em> :</p>
+Si vous tentez d'envoyer le formulaire avec une date incomplète ou en dehors de cette période, le navigateur doit afficher un message d'erreur. Voici le résultat _live_ :
 
-<p>{{EmbedLiveSample('Validation', 600, 120)}}</p>
+{{EmbedLiveSample('Validation', 600, 120)}}
 
-<p>Voici une capture d'écran qui illustre le résultat obtenu avec un navigateur prenant en charge cette fonctionnalité :</p>
+Voici une capture d'écran qui illustre le résultat obtenu avec un navigateur prenant en charge cette fonctionnalité :
 
-<p><img alt="" src="month-required.png"></p>
+![](month-required.png)
 
-<p>Voici ensuite la feuille de style CSS utilisée dans l'exemple précédent. On utilise {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est invalide. Les icônes ajoutées sont placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de gérer du contenu généré à même le contrôle ni de mettre en forme ce contenu généré.</p>
+Voici ensuite la feuille de style CSS utilisée dans l'exemple précédent. On utilise {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est invalide. Les icônes ajoutées sont placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de gérer du contenu généré à même le contrôle ni de mettre en forme ce contenu généré.
 
-<pre class="brush: css">div {
+```css
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -207,52 +193,52 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}</pre>
+}
+```
 
-<div class="warning">
-<p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p>
-</div>
+> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
 
-<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2>
+## Gérer la prise en charge des navigateurs
 
-<p>Comme évoqué plus haut, le problème principal relatif à ces contrôles est l'absence partielle de prise en charge des navigateurs. Seuls Chrome, Opera et Edge supportent ce type de contrôle sur ordinateurs et la plupart des navigateurs mobiles le prennent en charge. À titre d'exemple, voici une capture d'écran du contrôle sous Chrome pour Android :</p>
+Comme évoqué plus haut, le problème principal relatif à ces contrôles est l'absence partielle de prise en charge des navigateurs. Seuls Chrome, Opera et Edge supportent ce type de contrôle sur ordinateurs et la plupart des navigateurs mobiles le prennent en charge. À titre d'exemple, voici une capture d'écran du contrôle sous Chrome pour Android :
 
-<p><img alt="" src="month-android.png"></p>
+![](month-android.png)
 
-<p>Les navigateurs qui ne prennent pas en charge cette fonctionnalité basculent sur un contrôle textuel classique mais cela pose problème à la fois en termes de cohérence de l'interface utilisateur et aussi par rapport à la gestion des données.</p>
+Les navigateurs qui ne prennent pas en charge cette fonctionnalité basculent sur un contrôle textuel classique mais cela pose problème à la fois en termes de cohérence de l'interface utilisateur et aussi par rapport à la gestion des données.
 
-<p>C'est ce deuxième aspect qui est le plus problématique. Comme nous l'avons mentionné, la valeur d'une date saisie dans un contrôle <code>&lt;input type="month"&gt;</code> est toujours normalisée au format <code>"YYYY-MM"</code>. En revanche, avec un champ textuel, le navigateur ne convertit pas la valeur saisie et les personnes peuvent très bien écrire un mois sous plusieurs formes :</p>
+C'est ce deuxième aspect qui est le plus problématique. Comme nous l'avons mentionné, la valeur d'une date saisie dans un contrôle `<input type="month">` est toujours normalisée au format `"YYYY-MM"`. En revanche, avec un champ textuel, le navigateur ne convertit pas la valeur saisie et les personnes peuvent très bien écrire un mois sous plusieurs formes :
 
-<ul>
- <li><code>MMYYYY</code></li>
- <li><code>MM/YYYY</code></li>
- <li><code>MM-YYYY</code></li>
- <li><code>YYYY-MM</code></li>
- <li>etc.</li>
-</ul>
+- `MMYYYY`
+- `MM/YYYY`
+- `MM-YYYY`
+- `YYYY-MM`
+- etc.
 
-<p>Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur l'élément <code>&lt;input type="month"&gt;</code>. Bien que le contrôle de type <code>month</code> ne gère pas cet attribut, ce dernier sera pris en charge par le champ texte. Vous pouvez essayer l'exemple suivant dans un navigateur qui ne prend pas en charge le contrôle de saisie des mois :</p>
+Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur l'élément `<input type="month">`. Bien que le contrôle de type `month` ne gère pas cet attribut, ce dernier sera pris en charge par le champ texte. Vous pouvez essayer l'exemple suivant dans un navigateur qui ne prend pas en charge le contrôle de saisie des mois :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="month"&gt;À quel mois souhaitez-vous venir cet été ? (utilisez le format yyyy-mm)&lt;/label&gt;
-    &lt;input id="month" type="month" name="month"
+```html
+<form>
+  <div>
+    <label for="month">À quel mois souhaitez-vous venir cet été ? (utilisez le format yyyy-mm)</label>
+    <input id="month" type="month" name="month"
            min="2017-06" max="2017-09" required
-           pattern="[0-9]{4}-[0-9]{2}"&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-      &lt;input type="submit" value="Envoyer le formulaire"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+           pattern="[0-9]{4}-[0-9]{2}">
+    <span class="validity"></span>
+  </div>
+  <div>
+      <input type="submit" value="Envoyer le formulaire">
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p>
+{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}
 
-<p>Si vous tentez d'envoyer ce formulaire, vous verrez un message d'erreur si la valeur saisie ne respecte pas le format <code>nnnn-nn</code>, où <code>n</code> est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates inexistantes ou au mauvais format.</p>
+Si vous tentez d'envoyer ce formulaire, vous verrez un message d'erreur si la valeur saisie ne respecte pas le format `nnnn-nn`, où `n` est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates inexistantes ou au mauvais format.
 
-<p>De plus, cela présage que l'utilisateur comprenne le format dans lequel il faut saisir la valeur. Bref, le problème subsiste.</p>
+De plus, cela présage que l'utilisateur comprenne le format dans lequel il faut saisir la valeur. Bref, le problème subsiste.
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -275,56 +261,60 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}</pre>
-
-<p>La meilleure façon de gérer la saisie de mois pour l'ensemble des navigateurs consiste actuellement à saisir le mois et l'année dans deux contrôles séparés, représentés chacun par un élément {{htmlelement("select")}}. On peut également utiliser certaines bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> ou le plugin <a href="http://timepicker.co/">jQuery timepicker</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on crée deux ensembles d'éléments pour choisir un mois : un sélecteur natif <code>&lt;input type="month"&gt;</code> d'une part et un ensemble de deux éléments {{htmlelement("select")}} pour choisir le mois et l'année d'autre part (ce sont ces deux éléments qui seront utilisés lorsque le navigateur ne prend pas en charge le contrôle natif).</p>
-
-<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p>
-
-<p>Voici le fragment de code HTML utilisé :</p>
-
-<pre class="brush: html">&lt;form&gt;
-  &lt;div class="nativeDatePicker"&gt;
-    &lt;label for="month-visit"&gt;À quel mois souhaitez-vous venir cet été ?&lt;/label&gt;
-    &lt;input type="month" id="month-visit" name="month-visit"&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;p class="fallbackLabel"&gt;À quel mois souhaitez-vous venir cet été ?&lt;/p&gt;
-  &lt;div class="fallbackDatePicker"&gt;
-    &lt;div&gt;
-      &lt;span&gt;
-        &lt;label for="month"&gt;Mois :&lt;/label&gt;
-        &lt;select id="month" name="month"&gt;
-          &lt;option selected&gt;Janvier&lt;/option&gt;
-          &lt;option&gt;Février&lt;/option&gt;
-          &lt;option&gt;Mars&lt;/option&gt;
-          &lt;option&gt;Avril&lt;/option&gt;
-          &lt;option&gt;Mai&lt;/option&gt;
-          &lt;option&gt;Juin&lt;/option&gt;
-          &lt;option&gt;Juillet&lt;/option&gt;
-          &lt;option&gt;Août&lt;/option&gt;
-          &lt;option&gt;Septembre&lt;/option&gt;
-          &lt;option&gt;Octobre&lt;/option&gt;
-          &lt;option&gt;Novembre&lt;/option&gt;
-          &lt;option&gt;Décembre&lt;/option&gt;
-        &lt;/select&gt;
-      &lt;/span&gt;
-      &lt;span&gt;
-        &lt;label for="year"&gt;Année :&lt;/label&gt;
-        &lt;select id="year" name="year"&gt;
-        &lt;/select&gt;
-      &lt;/span&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
-
-<p>Les mois sont représentés statiquement (ce sont toujours les mêmes) et les valeurs pour les années sont générées dynamiquement à partir de l'année courante (voir les commentaires dans le code suivant).</p>
-
-<pre class="brush: css hidden">div {
+}
+```
+
+La meilleure façon de gérer la saisie de mois pour l'ensemble des navigateurs consiste actuellement à saisir le mois et l'année dans deux contrôles séparés, représentés chacun par un élément {{htmlelement("select")}}. On peut également utiliser certaines bibliothèques JavaScript telles que [jQuery date picker](https://jqueryui.com/datepicker/) ou le plugin [jQuery timepicker](http://timepicker.co/).
+
+## Exemples
+
+Dans l'exemple qui suit, on crée deux ensembles d'éléments pour choisir un mois : un sélecteur natif `<input type="month">` d'une part et un ensemble de deux éléments {{htmlelement("select")}} pour choisir le mois et l'année d'autre part (ce sont ces deux éléments qui seront utilisés lorsque le navigateur ne prend pas en charge le contrôle natif).
+
+{{EmbedLiveSample('Exemples', 600, 140)}}
+
+Voici le fragment de code HTML utilisé :
+
+```html
+<form>
+  <div class="nativeDatePicker">
+    <label for="month-visit">À quel mois souhaitez-vous venir cet été ?</label>
+    <input type="month" id="month-visit" name="month-visit">
+    <span class="validity"></span>
+  </div>
+  <p class="fallbackLabel">À quel mois souhaitez-vous venir cet été ?</p>
+  <div class="fallbackDatePicker">
+    <div>
+      <span>
+        <label for="month">Mois :</label>
+        <select id="month" name="month">
+          <option selected>Janvier</option>
+          <option>Février</option>
+          <option>Mars</option>
+          <option>Avril</option>
+          <option>Mai</option>
+          <option>Juin</option>
+          <option>Juillet</option>
+          <option>Août</option>
+          <option>Septembre</option>
+          <option>Octobre</option>
+          <option>Novembre</option>
+          <option>Décembre</option>
+        </select>
+      </span>
+      <span>
+        <label for="year">Année :</label>
+        <select id="year" name="year">
+        </select>
+      </span>
+    </div>
+  </div>
+</form>
+```
+
+Les mois sont représentés statiquement (ce sont toujours les mêmes) et les valeurs pour les années sont générées dynamiquement à partir de l'année courante (voir les commentaires dans le code suivant).
+
+```css hidden
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -347,11 +337,13 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}</pre>
+}
+```
 
-<p>Une partie intéressante du code est celle qui permet de détecter la prise en charge de fonctionnalité. Pour détecter si le navigateur prend en charge ce contrôle, on crée un nouvel élément {{htmlelement("input")}} dont on modifie le type afin qu'il vaille <code>month</code> puis on vérifie immédiatement la valeur associée au type : les navigateurs qui ne prennent pas en charge la fonctionnalité renverront <code>text</code> car le champ <code>month</code> a automatiquement transformé en <code>text</code>. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui construit avec les éléments {{htmlelement("select")}}).</p>
+Une partie intéressante du code est celle qui permet de détecter la prise en charge de fonctionnalité. Pour détecter si le navigateur prend en charge ce contrôle, on crée un nouvel élément {{htmlelement("input")}} dont on modifie le type afin qu'il vaille `month` puis on vérifie immédiatement la valeur associée au type : les navigateurs qui ne prennent pas en charge la fonctionnalité renverront `text` car le champ `month` a automatiquement transformé en `text`. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui construit avec les éléments {{htmlelement("select")}}).
 
-<pre class="brush: js">// On définit des variables
+```js
+// On définit des variables
 var nativePicker = document.querySelector('.nativeDatePicker');
 var fallbackPicker = document.querySelector('.fallbackDatePicker');
 var fallbackLabel = document.querySelector('.fallbackLabel');
@@ -384,73 +376,72 @@ function populateYears() {
   var year = date.getFullYear();
 
   // On ajoute l'année courante et les 100 années à venir
-  // dans l'élément &lt;select&gt; pour l'année
-  for(var i = 0; i &lt;= 100; i++) {
+  // dans l'élément <select> pour l'année
+  for(var i = 0; i <= 100; i++) {
     var option = document.createElement('option');
     option.textContent = year-i;
     yearSelect.appendChild(option);
   }
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p>
-</div>
+> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente un mois et une année ou bien la chaîne vide.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>value</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui
+        représente un mois et une année ou bien la chaîne vide.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>
+        {{domxref("HTMLElement/change_event", "change")}} et
+        {{domxref("HTMLElement/input_event", "input")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}},
+        {{htmlattrxref("list", "input")}},
+        {{htmlattrxref("readonly", "input")}} et
+        {{htmlattrxref("step", "input")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td><code>value</code></td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}},
+        {{domxref("HTMLInputElement.stepDown", "stepDown()")}},
+        {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#month-state-(type=month)', '&lt;input type="month"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Specifications
+
+| Spécification                                                                                                                    | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'forms.html#month-state-(type=month)', '&lt;input type="month"&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-month")}}</p>
+{{Compat("html.elements.input.input-month")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément générique {{HTMLElement("input")}} et l'interface DOM qui permet de le manipuler : {{domxref("HTMLInputElement")}}</li>
- <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire">Un tutoriel à propos des sélecteurs de dates et d'heures</a></li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/time">&lt;input type="time"&gt;</a></code>, and <code><a href="/fr/docs/Web/HTML/Element/input/week">&lt;input type="week"&gt;</a></code></li>
-</ul>
+- L'élément générique {{HTMLElement("input")}} et l'interface DOM qui permet de le manipuler : {{domxref("HTMLInputElement")}}
+- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML)
+- [Un tutoriel à propos des sélecteurs de dates et d'heures](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire)
+- [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local), [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date), [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time), and [`<input type="week">`](/fr/docs/Web/HTML/Element/input/week)
diff --git a/files/fr/web/html/element/input/number/index.md b/files/fr/web/html/element/input/number/index.md
index 8e9cbf1e5b..b352c2265f 100644
--- a/files/fr/web/html/element/input/number/index.md
+++ b/files/fr/web/html/element/input/number/index.md
@@ -8,225 +8,209 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/number
 ---
-<div>{{HTMLRef}}</div>
-
-<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>number</strong></code> permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques. Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div>
-
-<div class="note">
-<p><strong>Note :</strong> Si un navigateur ne prend pas en charge le type <code>number</code>, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. <code><a href="/fr/docs/Web/HTML/Element/input/text">text</a></code>).</p>
-</div>
-
-<h2 id="Valeur">Valeur</h2>
-
-<p>Un nombre (cf. {{jsxref("Number")}}) qui représente la valeur saisie dans le contrôle. Il est possible d'indiquer une valeur par défaut en utilisant l'attribut {{htmlattrxref("value", "input")}} :</p>
-
-<pre class="brush: html">&lt;input id="number" type="number" value="42"&gt;</pre>
-
-<p>{{EmbedLiveSample('Valeur', 600, 40)}}</p>
-
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
-
-<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"number"</code> peuvent utiliser les attributs suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("max")}}</code></td>
-   <td>La valeur maximale qui peut être acceptée.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("min")}}</code></td>
-   <td>La valeur minimale qui peut être acceptée.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("placeholder")}}</code></td>
-   <td>Une valeur fournie comme exemple affiché lorsque le champ est vide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("readonly")}}</code></td>
-   <td>Un attribut booléen qui contrôle si le champ est en lecture seule.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("step")}}</code></td>
-   <td>Le pas à utiliser pour incrémenter la valeur à l'aide du contrôle fourni par l'agent utilisateur. Cet incrément est également utilisé pour la validation de la valeur.</td>
-  </tr>
- </tbody>
-</table>
+{{HTMLRef}}
+
+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`number`** permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques. Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt.
+
+{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}
+
+> **Note :** Si un navigateur ne prend pas en charge le type `number`, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. [`text`](/fr/docs/Web/HTML/Element/input/text)).
+
+## Valeur
+
+Un nombre (cf. {{jsxref("Number")}}) qui représente la valeur saisie dans le contrôle. Il est possible d'indiquer une valeur par défaut en utilisant l'attribut {{htmlattrxref("value", "input")}} :
+
+```html
+<input id="number" type="number" value="42">
+```
+
+{{EmbedLiveSample('Valeur', 600, 40)}}
 
-<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3>
+## Attributs supplémentaires
 
-<p>La valeur maximale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, l'élément <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne pourra être validé</a>. Si la valeur de l'attribut <code>max</code> n'est pas un nombre, l'élément n'aura pas de maximum.</p>
+En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"number"` peuvent utiliser les attributs suivants :
 
-<p>Cette valeur doit être supérieure ou égale à l'attribut <code>min</code>.</p>
+| Attribut                           | Description                                                                                                                                                            |
+| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("max")}}`             | La valeur maximale qui peut être acceptée.                                                                                                                             |
+| `{{anch("min")}}`             | La valeur minimale qui peut être acceptée.                                                                                                                             |
+| `{{anch("placeholder")}}` | Une valeur fournie comme exemple affiché lorsque le champ est vide.                                                                                                    |
+| `{{anch("readonly")}}`     | Un attribut booléen qui contrôle si le champ est en lecture seule.                                                                                                     |
+| `{{anch("step")}}`             | Le pas à utiliser pour incrémenter la valeur à l'aide du contrôle fourni par l'agent utilisateur. Cet incrément est également utilisé pour la validation de la valeur. |
 
-<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3>
+### {{htmlattrdef("max")}}
 
-<p>La valeur minimale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, l'élément <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne pourra être validé</a>. Si la valeur de l'attribut <code>min</code> n'est pas un nombre, l'élément n'aura pas de minimum.</p>
+La valeur maximale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, l'élément [ne pourra être validé](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `max` n'est pas un nombre, l'élément n'aura pas de maximum.
 
-<p>Cette valeur doit être inférieure ou égale à l'attribut <code>max</code>.</p>
+Cette valeur doit être supérieure ou égale à l'attribut `min`.
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+### {{htmlattrdef("min")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+La valeur minimale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, l'élément [ne pourra être validé](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `min` n'est pas un nombre, l'élément n'aura pas de minimum.
 
-<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3>
+Cette valeur doit être inférieure ou égale à l'attribut `max`.
 
-<p>L'attribut <code>step</code> est un nombre qui définit la granularité de la valeur ou le mot-clé <code>any</code>. Seule les valeurs qui sont des multiples de cet attribut depuis le seuil <code>{{anch("min")}}</code> sont valides.</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}
 
-<p>Lorsque la chaîne de caractères <code>any</code> est utilisée, cela indique qu'aucun incrément spécifique n'est défini et que toute valeur (comprise entre <code>{{anch("min")}}</code> et <code>{{anch("max")}}</code>) est valide.</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}
 
-<div class="note">
-<p><strong>Note :</strong> Lorsque les données saisies par l'utilisateur ne correspondent pas à l'incrément indiqué, l'agent utilisateur pourra arrondir à la valeur valide la plus proche (en choisissant les nombres les plus grands lorsque deux sont équidistants.</p>
-</div>
+### {{htmlattrdef("step")}}
 
-<p>Pour les champs <code>number</code>, l'incrément par défaut est 1 et ne permet donc que de saisir des entiers si la valeur de base est entière. Ainsi, si on a <code>min</code> qui vaut -10 et <code>value</code> qui vaut 1.5, si on a <code>step</code> qui vaut 1, seules les valeurs 1.5, 2.5, 3.5,... -0.5, -1.5, -2.5,... seront valides.</p>
+L'attribut `step` est un nombre qui définit la granularité de la valeur ou le mot-clé `any`. Seule les valeurs qui sont des multiples de cet attribut depuis le seuil `{{anch("min")}}` sont valides.
 
-<h2 id="Utiliser_les_contrôles_de_saisie_numérique">Utiliser les contrôles de saisie numérique</h2>
+Lorsque la chaîne de caractères `any` est utilisée, cela indique qu'aucun incrément spécifique n'est défini et que toute valeur (comprise entre `{{anch("min")}}` et `{{anch("max")}}`) est valide.
 
-<p>Les éléments <code>&lt;input type="number"&gt;</code> simplifient la saisie de valeurs numériques dans un formulaire. Lorsqu'on crée un tel contrôle, des mécanismes de validation automatiques sont appliqués afin de vérifier que le texte saisi est bien un nombre. Généralement un contrôle de saisie numérique incluera des boutons avec des curseurs pour augmenter/réduire la valeur.</p>
+> **Note :** Lorsque les données saisies par l'utilisateur ne correspondent pas à l'incrément indiqué, l'agent utilisateur pourra arrondir à la valeur valide la plus proche (en choisissant les nombres les plus grands lorsque deux sont équidistants.
 
-<div class="warning">
-<p><strong>Attention :</strong> On notera qu'un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir {{bug(1398528)}}). Les valeurs non-numériques seront considérées comme invalide (cf. {{anch("Validation")}} ci-après).</p>
-</div>
+Pour les champs `number`, l'incrément par défaut est 1 et ne permet donc que de saisir des entiers si la valeur de base est entière. Ainsi, si on a `min` qui vaut -10 et `value` qui vaut 1.5, si on a `step` qui vaut 1, seules les valeurs 1.5, 2.5, 3.5,... -0.5, -1.5, -2.5,... seront valides.
 
-<div class="note">
-<p><strong>Note :</strong> Il est important de rappeler qu'un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur.</p>
-</div>
+## Utiliser les contrôles de saisie numérique
 
-<p>De plus, les navigateurs mobiles peuvent adapter leur ergonomie en affichant un clavier adapté à la saisie de valeur numérique lorsque l'utilisateur appuie sur un tel contrôle. Voici le résultat qu'on obtient par exemple avec Firefox pour Android :</p>
+Les éléments `<input type="number">` simplifient la saisie de valeurs numériques dans un formulaire. Lorsqu'on crée un tel contrôle, des mécanismes de validation automatiques sont appliqués afin de vérifier que le texte saisi est bien un nombre. Généralement un contrôle de saisie numérique incluera des boutons avec des curseurs pour augmenter/réduire la valeur.
 
-<h3 id="Un_contrôle_simple">Un contrôle simple</h3>
+> **Attention :** On notera qu'un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir {{bug(1398528)}}). Les valeurs non-numériques seront considérées comme invalide (cf. {{anch("Validation")}} ci-après).
 
-<p>Dans sa forme la plus simple, on peut implémenter un contrôle de saisie numérique avec le fragment HTML suivant :</p>
+> **Note :** Il est important de rappeler qu'un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur.
 
-<pre class="brush: html">&lt;label for="ticketNum"&gt;Nombre de tickets à acheter :&lt;/label&gt;
-&lt;input id="ticketNum" type="number" name="ticketNum" value="0"&gt;</pre>
+De plus, les navigateurs mobiles peuvent adapter leur ergonomie en affichant un clavier adapté à la saisie de valeur numérique lorsque l'utilisateur appuie sur un tel contrôle. Voici le résultat qu'on obtient par exemple avec Firefox pour Android :
 
-<p>{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}</p>
+### Un contrôle simple
 
-<p>Un contrôle de saisie numérique considère que la valeur est valide si elle est vide ou quand un nombre est saisi. Dans les autres cas, la valeur est considérée invalide. Si l'attribut {{htmlattrxref("required", "input")}} est utilisé, la valeur vide n'est plus considérée valide.</p>
+Dans sa forme la plus simple, on peut implémenter un contrôle de saisie numérique avec le fragment HTML suivant :
 
-<div class="note">
-<p><strong>Note :</strong> N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">comme un nombre à virgule flottante</a> (autrement dit, un nombre qui n'est pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}).</p>
-</div>
+```html
+<label for="ticketNum">Nombre de tickets à acheter :</label>
+<input id="ticketNum" type="number" name="ticketNum" value="0">
+```
 
-<h3 id="Indicateurs_de_saisie_-_placeholders">Indicateurs de saisie - <em>placeholders</em></h3>
+{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}
 
-<p>Il est parfois utile de fournir une indication quant à la valeur qui devrait être saisie. C'est notamment le cas lorsque la disposition de la page ne permet pas d'avoir d'étiquettes suffisamment descriptives pour chaque {{HTMLElement("input")}}. Dans ces cas, on peut utiliser l'attribut <code>placeholder</code> afin de fournir une indication et qui sera le texte affiché dans le contrôle avant toute saisie ou quand la valeur est vide.</p>
+Un contrôle de saisie numérique considère que la valeur est valide si elle est vide ou quand un nombre est saisi. Dans les autres cas, la valeur est considérée invalide. Si l'attribut {{htmlattrxref("required", "input")}} est utilisé, la valeur vide n'est plus considérée valide.
 
-<p>Dans l'exemples qui suit, on utilise un élément <code>&lt;input</code><code>&gt;</code> de type <code>"number"</code> avec le texte indicatif <code>"Multiple de 10"</code>. Vous pouvez noter la façon dont le texte disparaît/réapparaît à selon la présence ou l'absence de valeur dans le champ.</p>
+> **Note :** N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté [comme un nombre à virgule flottante](https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number) (autrement dit, un nombre qui n'est pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}).
 
-<pre class="brush: html">&lt;input type="number" placeholder="Multiple de 10"&gt;</pre>
+### Indicateurs de saisie - _placeholders_
 
-<p>{{ EmbedLiveSample('Indicateurs_de_saisie_-_placeholders', 600, 40) }}</p>
+Il est parfois utile de fournir une indication quant à la valeur qui devrait être saisie. C'est notamment le cas lorsque la disposition de la page ne permet pas d'avoir d'étiquettes suffisamment descriptives pour chaque {{HTMLElement("input")}}. Dans ces cas, on peut utiliser l'attribut `placeholder` afin de fournir une indication et qui sera le texte affiché dans le contrôle avant toute saisie ou quand la valeur est vide.
 
-<h3 id="Paramétrer_la_taille_de_l’incrément">Paramétrer la taille de l’incrément</h3>
+Dans l'exemples qui suit, on utilise un élément ` <input``> ` de type `"number"` avec le texte indicatif `"Multiple de 10"`. Vous pouvez noter la façon dont le texte disparaît/réapparaît à selon la présence ou l'absence de valeur dans le champ.
 
-<p>Par défaut, les curseurs fournis pour incrémenter/décrémenter la valeur utilisent un pas de 1. Ce comportement par défaut peut être changé en utilisant l'attribut {{htmlattrxref("step", "input")}} dont la valeur représente le pas d'incrémentation. Dans l'exemple qui suit et parce que le texte informatif indique "Multiple de 10", on utilise un pas de 10 grâce à l'attribut <code>step</code> :</p>
+```html
+<input type="number" placeholder="Multiple de 10">
+```
 
-<pre class="brush: html">&lt;input type="number" placeholder="Multiple de 10" step="10"&gt;</pre>
+{{ EmbedLiveSample('Indicateurs_de_saisie_-_placeholders', 600, 40) }}
 
-<p>{{EmbedLiveSample("Paramétrer_la_taille_de_l’incrément", 600, 40)}}</p>
+### Paramétrer la taille de l’incrément
 
-<p>Dans cet exemple, on peut voir que les curseurs permettent d'augmenter ou de réduire la valeur de 10 (et non de 1). Il est toujours possible de saisir manuellement un nombre qui n'est pas un multiple de 10 mais la valeur sera alors considérée invalide.</p>
+Par défaut, les curseurs fournis pour incrémenter/décrémenter la valeur utilisent un pas de 1. Ce comportement par défaut peut être changé en utilisant l'attribut {{htmlattrxref("step", "input")}} dont la valeur représente le pas d'incrémentation. Dans l'exemple qui suit et parce que le texte informatif indique "Multiple de 10", on utilise un pas de 10 grâce à l'attribut `step` :
 
-<h3 id="Indiquer_un_minimum_et_un_maximum">Indiquer un minimum et un maximum</h3>
+```html
+<input type="number" placeholder="Multiple de 10" step="10">
+```
 
-<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} peuvent être employés afin d'indiquer les bornes de l'intervalle dans lequel doit se situer la valeur. Par exemple, avec le fragment HTML suivant, on indique que le minimum vaut 0 et que le maximum vaut 100 :</p>
+{{EmbedLiveSample("Paramétrer_la_taille_de_l’incrément", 600, 40)}}
 
-<pre class="brush: html">&lt;input type="number" placeholder="Multiple de 10" step="10" min="0" max="100"&gt;</pre>
+Dans cet exemple, on peut voir que les curseurs permettent d'augmenter ou de réduire la valeur de 10 (et non de 1). Il est toujours possible de saisir manuellement un nombre qui n'est pas un multiple de 10 mais la valeur sera alors considérée invalide.
 
-<p>{{EmbedLiveSample('Indiquer_un_minimum_et_un_maximum', 600, 40)}}</p>
+### Indiquer un minimum et un maximum
 
-<p>Dans cet exemple, les curseurs ne permettent pas de dépasser 100 ou de saisir une valeur inférieure à 0. Il est toujours possible de saisir manuellement un nombre en dehors de ces bornes mais la valeur sera alors considérée invalide.</p>
+Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} peuvent être employés afin d'indiquer les bornes de l'intervalle dans lequel doit se situer la valeur. Par exemple, avec le fragment HTML suivant, on indique que le minimum vaut 0 et que le maximum vaut 100 :
 
-<h3 id="Autoriser_les_valeurs_décimales">Autoriser les valeurs décimales</h3>
+```html
+<input type="number" placeholder="Multiple de 10" step="10" min="0" max="100">
+```
 
-<p>Par défaut, l'incrément d'un tel contrôle vaut 1 et si on saisit la valeur <code>1.0</code>, elle sera considérée invalide. Si on souhaite pouvoir saisir une valeur qui contient une partie décimale, on pourra utiliser l'attribut <code>step</code> (par exemple, on pourra utiliser <code>step="0.01"</code> pour autoriser des nombres avec deux chiffres après la virgules) :</p>
+{{EmbedLiveSample('Indiquer_un_minimum_et_un_maximum', 600, 40)}}
 
-<pre class="brush: html">&lt;input type="number" placeholder="1.0" step="0.01" min="0" max="10"&gt;</pre>
+Dans cet exemple, les curseurs ne permettent pas de dépasser 100 ou de saisir une valeur inférieure à 0. Il est toujours possible de saisir manuellement un nombre en dehors de ces bornes mais la valeur sera alors considérée invalide.
 
-<p>{{EmbedLiveSample("Autoriser_les_valeurs_décimales", 600, 40)}}</p>
+### Autoriser les valeurs décimales
 
-<p>Dans cet exemple, on peut saisir des valeurs comprises entre 0 et 10 et qui ont au plus deux chiffres après la virgule, "9.52" sera considérée comme valide mais pas "9.521".</p>
+Par défaut, l'incrément d'un tel contrôle vaut 1 et si on saisit la valeur `1.0`, elle sera considérée invalide. Si on souhaite pouvoir saisir une valeur qui contient une partie décimale, on pourra utiliser l'attribut `step` (par exemple, on pourra utiliser `step="0.01"` pour autoriser des nombres avec deux chiffres après la virgules) :
 
-<h3 id="Paramétrer_la_taille_du_contrôle">Paramétrer la taille du contrôle</h3>
+```html
+<input type="number" placeholder="1.0" step="0.01" min="0" max="10">
+```
 
-<p>Les éléments {{HTMLElement("input")}} de type <code>"number"</code> ne prennent pas en charge l'attribut {{htmlattrxref("size", "input")}} et il est donc nécessaire d'utiliser CSS afin de modifier la taille des contrôles.</p>
+{{EmbedLiveSample("Autoriser_les_valeurs_décimales", 600, 40)}}
 
-<p>Par exemple, si on souhaite réduire la largeur du contrôle car il ne permet que de saisir un nombre à trois chiffres, on ajoute un identifiant sur l'élément et on réduit le texte indicatif afin qu'il ne soit pas tronqué :</p>
+Dans cet exemple, on peut saisir des valeurs comprises entre 0 et 10 et qui ont au plus deux chiffres après la virgule, "9.52" sera considérée comme valide mais pas "9.521".
 
-<pre class="brush: html">&lt;input type="number" placeholder="x10" step="10" min="0" max="100" id="number"&gt;</pre>
+### Paramétrer la taille du contrôle
 
-<p>On ajoute ensuite une déclaration CSS dans la feuille de style pour l'élément avec un identifiant <code>"number"</code> :</p>
+Les éléments {{HTMLElement("input")}} de type `"number"` ne prennent pas en charge l'attribut {{htmlattrxref("size", "input")}} et il est donc nécessaire d'utiliser CSS afin de modifier la taille des contrôles.
 
-<pre class="brush: css">#number {
+Par exemple, si on souhaite réduire la largeur du contrôle car il ne permet que de saisir un nombre à trois chiffres, on ajoute un identifiant sur l'élément et on réduit le texte indicatif afin qu'il ne soit pas tronqué :
+
+```html
+<input type="number" placeholder="x10" step="10" min="0" max="100" id="number">
+```
+
+On ajoute ensuite une déclaration CSS dans la feuille de style pour l'élément avec un identifiant `"number"` :
+
+```css
+#number {
   width: 3em;
-}</pre>
+}
+```
 
-<p>Le résultat ressemblera à :</p>
+Le résultat ressemblera à :
 
-<p>{{EmbedLiveSample('Paramétrer_la_taille_du_contrôle', 600, 40)}}</p>
+{{EmbedLiveSample('Paramétrer_la_taille_du_contrôle', 600, 40)}}
 
-<h3 id="Ajouter_des_valeurs_suggérées">Ajouter des valeurs suggérées</h3>
+### Ajouter des valeurs suggérées
 
-<p>Il est possible de fournir une liste d'options par défaut parmi lesquelles l'utilisateur pourra choisir. Pour cela, on renseignera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant (attribut <code>id</code>) d'un élément {{HTMLElement("datalist")}} contenant autant d'éléments {{HTMLElement("option")}} que de valeurs suggéréees. La valeur de l'attribut <code>value</code> de chaque élément <code>&lt;option&gt;</code> sera utilisée comme suggestion pour la saisie dans le contrôle.</p>
+Il est possible de fournir une liste d'options par défaut parmi lesquelles l'utilisateur pourra choisir. Pour cela, on renseignera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant (attribut `id`) d'un élément {{HTMLElement("datalist")}} contenant autant d'éléments {{HTMLElement("option")}} que de valeurs suggéréees. La valeur de l'attribut `value` de chaque élément `<option>` sera utilisée comme suggestion pour la saisie dans le contrôle.
 
-<pre class="brush: html">&lt;input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"&gt;
-&lt;span class="validity"&gt;&lt;/span&gt;
+```html
+<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers">
+<span class="validity"></span>
 
-&lt;datalist id="defaultNumbers"&gt;
-  &lt;option value="10045678"&gt;
-  &lt;option value="103421"&gt;
-  &lt;option value="11111111"&gt;
-  &lt;option value="12345678"&gt;
-  &lt;option value="12999922"&gt;
-&lt;/datalist&gt;</pre>
+<datalist id="defaultNumbers">
+  <option value="10045678">
+  <option value="103421">
+  <option value="11111111">
+  <option value="12345678">
+  <option value="12999922">
+</datalist>
+```
 
-<p>{{EmbedLiveSample("Ajouter_des_valeurs_suggérées", 600, 40)}}</p>
+{{EmbedLiveSample("Ajouter_des_valeurs_suggérées", 600, 40)}}
 
-<div class="note">
-<p><strong>Note :</strong> L'attribut {{htmlattrxref("list", "input")}} pour les éléments <code>&lt;input&gt;</code> de type <code>"number"</code> n'est pas pris en charge pour tous les navigateurs (cela fonctionne pour Chrome et Opera mais pas pour Firefox par exemple).</p>
-</div>
+> **Note :** L'attribut {{htmlattrxref("list", "input")}} pour les éléments `<input>` de type `"number"` n'est pas pris en charge pour tous les navigateurs (cela fonctionne pour Chrome et Opera mais pas pour Firefox par exemple).
 
-<h2 id="Validation">Validation</h2>
+## Validation
 
-<p>Plusieurs mécanismes de validation sont mis en place par le navigateur pour les contrôles de saisie numérique :</p>
+Plusieurs mécanismes de validation sont mis en place par le navigateur pour les contrôles de saisie numérique :
 
-<ul>
- <li>Toute valeur qui n'est pas un nombre est considérée comme invalide (la valeur vide est uniquement considérée comme valide si l'attribut <code>required</code> est absent).</li>
- <li>Toute valeur qui n'est pas un multiple de {{htmlattrxref("step", "input")}} est considérée comme invalide.</li>
- <li>Toute valeur qui est inférieure à {{htmlattrxref("min", "input")}} ou supérieure à {{htmlattrxref("max", "input")}} est considérée comme invalide.</li>
-</ul>
+- Toute valeur qui n'est pas un nombre est considérée comme invalide (la valeur vide est uniquement considérée comme valide si l'attribut `required` est absent).
+- Toute valeur qui n'est pas un multiple de {{htmlattrxref("step", "input")}} est considérée comme invalide.
+- Toute valeur qui est inférieure à {{htmlattrxref("min", "input")}} ou supérieure à {{htmlattrxref("max", "input")}} est considérée comme invalide.
 
-<p>L'exemple suivant illustre l'ensemble de ces fonctionnalités et quelques règles CSS ont été ajoutées afin d'afficher des icônes pour indiquer si la valeur saisie est valide ou invalide :</p>
+L'exemple suivant illustre l'ensemble de ces fonctionnalités et quelques règles CSS ont été ajoutées afin d'afficher des icônes pour indiquer si la valeur saisie est valide ou invalide :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="balloons"&gt;Quantité de ballons à commander (par 10) :&lt;/label&gt;
-    &lt;input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;input type="submit"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <label for="balloons">Quantité de ballons à commander (par 10) :</label>
+    <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+    <input type="submit">
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample("Validation", 600, 80)}}</p>
+{{EmbedLiveSample("Validation", 600, 80)}}
 
-<p>Vous pouvez essayer d'envoyer des données invalides (pas de valeur, une valeur inférieure à 0 ou supérieure à 100 ou une valeur qui n'est pas un multiple de 10) afin de voir les messages d'erreur fournis par le navigateur.</p>
+Vous pouvez essayer d'envoyer des données invalides (pas de valeur, une valeur inférieure à 0 ou supérieure à 100 ou une valeur qui n'est pas un multiple de 10) afin de voir les messages d'erreur fournis par le navigateur.
 
-<p>Voici les règles CSS appliquées :</p>
+Voici les règles CSS appliquées :
 
-<pre class="brush: css">div {
+```css
+div {
   margin-bottom: 10px;
 }
 
@@ -238,57 +222,59 @@ input:invalid+span:after {
 input:valid+span:after {
   content: '✓';
   padding-left: 5px;
-}</pre>
+}
+```
 
-<p>Ici, on a utilisé les pseudo-classes {{cssxref(":invalid")}} et {{cssxref(":valid")}} afin d'afficher une icône selon le cas, à côté de l'élément {{htmlelement("span")}} ajdacent. On utilise un élément <code>&lt;span&gt;</code> séparé pour plus de flexibilité : certains navigateurs n'affichent pas le contenu généré par les pseudo-classes pour certains types de contrôle (cf. <a href="/fr/docs/Web/HTML/Element/input/date#Validation"><code>&lt;input type="date"&gt;</code></a>).</p>
+Ici, on a utilisé les pseudo-classes {{cssxref(":invalid")}} et {{cssxref(":valid")}} afin d'afficher une icône selon le cas, à côté de l'élément {{htmlelement("span")}} ajdacent. On utilise un élément `<span>` séparé pour plus de flexibilité : certains navigateurs n'affichent pas le contenu généré par les pseudo-classes pour certains types de contrôle (cf. [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date#Validation)).
 
-<div class="warning">
-<p><strong>Attention :</strong> la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur).</p>
-</div>
+> **Attention :** la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur).
 
-<h3 id="Utilisation_d'un_motif_de_validation">Utilisation d'un motif de validation</h3>
+### Utilisation d'un motif de validation
 
-<p>Les éléments <code>&lt;input type="number"&gt;</code> ne prennent pas en charge l'attribut {{htmlattrxref("pattern", "input")}} qui permet de restreindre les valeurs selon une expression rationnelle. En effet, les contrôles de saisie numérique sont destinés à contenir des nombres plutôt que des chaînes de caractères et les autres attributs permettent de paramétrer les valeurs recevables (cf. ci-avant).</p>
+Les éléments `<input type="number">` ne prennent pas en charge l'attribut {{htmlattrxref("pattern", "input")}} qui permet de restreindre les valeurs selon une expression rationnelle. En effet, les contrôles de saisie numérique sont destinés à contenir des nombres plutôt que des chaînes de caractères et les autres attributs permettent de paramétrer les valeurs recevables (cf. ci-avant).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple suivant, on crée un formulaire qui permet de saisir la taille d'un personne, par défaut exprimée en mètres et pour laquelle un bouton permet de la saisir en pieds (<em>feet</em>/<em>inches</em>).</p>
+Dans l'exemple suivant, on crée un formulaire qui permet de saisir la taille d'un personne, par défaut exprimée en mètres et pour laquelle un bouton permet de la saisir en pieds (_feet_/_inches_).
 
-<p>{{EmbedLiveSample("Exemples", 600, 100)}}</p>
+{{EmbedLiveSample("Exemples", 600, 100)}}
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;form&gt;
-    &lt;div class="metersInputGroup"&gt;
-        &lt;label for="meters"&gt;Saisir votre taille — en mètres :&lt;/label&gt;
-        &lt;input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required&gt;
-        &lt;span class="validity"&gt;&lt;/span&gt;
-    &lt;/div&gt;
-        &lt;span&gt;Saisir votre taille — &lt;/span&gt;
-        &lt;label for="feet"&gt;feet :&lt;/label&gt;
-        &lt;input id="feet" type="number" name="feet" min="0" step="1"&gt;
-        &lt;span class="validity"&gt;&lt;/span&gt;
-        &lt;label for="inches"&gt;inches :&lt;/label&gt;
-        &lt;input id="inches" type="number" name="inches" min="0" max="11" step="1"&gt;
-        &lt;span class="validity"&gt;&lt;/span&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-      &lt;input type="button" class="meters" value="Saisir la taille en feet/inches"&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-        &lt;input type="submit" value="Envoyer"&gt;
-    &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+    <div class="metersInputGroup">
+        <label for="meters">Saisir votre taille — en mètres :</label>
+        <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required>
+        <span class="validity"></span>
+    </div>
+        <span>Saisir votre taille — </span>
+        <label for="feet">feet :</label>
+        <input id="feet" type="number" name="feet" min="0" step="1">
+        <span class="validity"></span>
+        <label for="inches">inches :</label>
+        <input id="inches" type="number" name="inches" min="0" max="11" step="1">
+        <span class="validity"></span>
+    </div>
+    <div>
+      <input type="button" class="meters" value="Saisir la taille en feet/inches">
+    </div>
+    <div>
+        <input type="submit" value="Envoyer">
+    </div>
+</form>
+```
 
-<p>Ici on utilise l'attribut <code>step</code> avec la valeur <code>0.01</code> afin d'accepter une taille en centimètres. On fournit également un texte indicatif via <code>placeholder</code>.</p>
+Ici on utilise l'attribut `step` avec la valeur `0.01` afin d'accepter une taille en centimètres. On fournit également un texte indicatif via `placeholder`.
 
-<p>Par défaut on masque la saisie en pieds avec <code>class="hidden"</code>.</p>
+Par défaut on masque la saisie en pieds avec `class="hidden"`.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<p>La feuille CSS ressemble de près à celle vue précédemment :</p>
+La feuille CSS ressemble de près à celle vue précédemment :
 
-<pre class="brush: css">div {
+```css
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -311,13 +297,15 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}</pre>
+}
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<p>Enfin, voici le code JavaScript utilisé :</p>
+Enfin, voici le code JavaScript utilisé :
 
-<pre class="brush: js">var metersInputGroup = document.querySelector('.metersInputGroup');
+```js
+var metersInputGroup = document.querySelector('.metersInputGroup');
 var feetInputGroup = document.querySelector('.feetInputGroup');
 var metersInput = document.querySelector('#meters');
 var feetInput = document.querySelector('#feet');
@@ -351,73 +339,65 @@ switchBtn.addEventListener('click', function() {
     feetInput.value = '';
     inchesInput.value = '';
   }
-});</pre>
+});
+```
 
-<p>Après avoir déclaré quelques variables, on ajoute un gestionnaire d'évènements au bouton afin de gérer le changement d'unités. Lors de ce changement, on modifiera la classe du bouton et l'étiquette associée et on mettr à jour les valeurs affichées lorsque l'utilisateur appuie sur le bouton. On notera qu'il n'y a pas de mécanisme de conversion entre les mètres et les pieds (ce qui serait vraisemblablement implémenté dans une application réelle).</p>
+Après avoir déclaré quelques variables, on ajoute un gestionnaire d'évènements au bouton afin de gérer le changement d'unités. Lors de ce changement, on modifiera la classe du bouton et l'étiquette associée et on mettr à jour les valeurs affichées lorsque l'utilisateur appuie sur le bouton. On notera qu'il n'y a pas de mécanisme de conversion entre les mètres et les pieds (ce qui serait vraisemblablement implémenté dans une application réelle).
 
-<div class="note">
-<p><strong>Note :</strong> Lorsqu'on clique sur le bouton, on retire l'attribut <code>required</code> du champ de saisie masqué et on vide l'attribut <code>value</code> afin de pouvoir envoyer le formulaire si un des deux champs n'est pas renseigné.</p>
-</div>
+> **Note :** Lorsqu'on clique sur le bouton, on retire l'attribut `required` du champ de saisie masqué et on vide l'attribut `value` afin de pouvoir envoyer le formulaire si un des deux champs n'est pas renseigné.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Un nombre ou une valeur vide.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charges</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>Un nombre ou une valeur vide.</td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>
+        {{domxref("HTMLElement/change_event", "change")}} et
+        {{domxref("HTMLElement/input_event", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charges</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}},
+        {{htmlattrxref("list", "input")}},
+        {{htmlattrxref("placeholder", "input")}},
+        {{htmlattrxref("readonly", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}},
+        {{domxref("HTMLInputElement.stepUp", "stepUp()")}},
+        {{domxref("HTMLInputElement.stepDown", "stepDown()")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#number-state-(type=number)', '&lt;input type="number"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '&lt;input type="number"&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                        | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#number-state-(type=number)', '&lt;input type="number"&gt;')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+| {{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '&lt;input type="number"&gt;')}}     | {{Spec2('HTML5.1')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-number")}}</p>
+{{Compat("html.elements.input.input-number")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li>
- <li>{{HTMLElement("input")}}</li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code></li>
-</ul>
+- [Guide sur les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires)
+- {{HTMLElement("input")}}
+- [`<input type="tel">`](/fr/docs/Web/HTML/Element/input/tel)
diff --git a/files/fr/web/html/element/input/password/index.md b/files/fr/web/html/element/input/password/index.md
index 7585571836..3099a4465e 100644
--- a/files/fr/web/html/element/input/password/index.md
+++ b/files/fr/web/html/element/input/password/index.md
@@ -9,273 +9,263 @@ tags:
   - Web
 translation_of: Web/HTML/Element/input/password
 ---
-<div>{{HTMLRef}}</div>
-
-<p>Les éléments {{HTMLElement("input")}} de type <strong><code>"password"</code></strong> permettent à utilisateur de saisir un mot de passe sans que celui-ci ne soit lisible à l'écran. Un tel élément se présente comme un contrôle de saisie de texte sur une ligne et dans lequel chaque caractère est remplacé par un symbole (un astérisque ("*") ou un point ("•")) afin que le texte saisi ne puisse être lu. Le caractère utilisé pour obfusquer dépend de l'agent utilisateur (du navigateur) et du système d'exploitation utilisé.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}}</div>
-
-<p>La façon dont le texte saisi est traité dépend du navigateur utilisé. Sur les appareils mobiles, par exemple, le caractère tapé est souvent laissé affiché un court instant afin que l'utilisateur puisse contrôler que c'est bien le bon caractère. Ainsi, même si le clavier est petit et viruel, on peut éviter de faire trop d'erreurs.</p>
-
-<div class="note">
-<p><strong>Note :</strong> les différents formulaires qui permettent d'envoyer des données sensibles (tels que des mots de passe) doivent être servis sur HTTPS. Firefox, Chrome et les autres navigateurs implémentent désormais différents mécanismes afin d'avertir l'utilisateur lorsqu'il saisit un mot de passe sur une connexion HTTP (cf. l'article <a href="/fr/docs/Web/Security/Insecure_passwords">mots de passe non sécurisés</a> pour Firefox).</p>
-</div>
-
-<h2 id="Valeur">Valeur</h2>
-
-<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est le texte qui est en cours de saisie dans le contrôle. Si l'utilisateur n'a pas encore saisi d'information, la valeur est une chaîne vide. Si l'attribut booléen {{htmlattrxref("required")}} est utilisé, le mot de passe doit contenir une valeur non vide afin que le formulaire puisse être envoyé.</p>
-
-<p>Si l'attribut {{htmlattrxref("pattern", "input")}} est indiqué, le contenu du contrôle doit respecter l'expression rationnelle indiquée par l'attribut. Pour plus d'informations, voir la section {{anch("Validation")}} ci-après.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Il n'est pas possible d'utiliser les caractères de fin de ligne (<em>Line Feed</em>) (code U+000A) et de retour chariot (<em>Carriage Return</em>) (code U+000D) dans la valeur d'un champ <code>"password"</code>. Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.</p>
-</div>
-
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
-
-<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mots de passe prennent en charge les attributs suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("maxlength")}}</code></td>
-   <td>Le nombre de caractères maximal qui peut être écrit dans ce champ.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("minlength")}}</code></td>
-   <td>Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("pattern")}}</code></td>
-   <td>Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("placeholder")}}</code></td>
-   <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("readonly")}}</code></td>
-   <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("size")}}</code></td>
-   <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td>
-  </tr>
- </tbody>
-</table>
+{{HTMLRef}}
+
+Les éléments {{HTMLElement("input")}} de type **`"password"`** permettent à utilisateur de saisir un mot de passe sans que celui-ci ne soit lisible à l'écran. Un tel élément se présente comme un contrôle de saisie de texte sur une ligne et dans lequel chaque caractère est remplacé par un symbole (un astérisque ("\*") ou un point ("•")) afin que le texte saisi ne puisse être lu. Le caractère utilisé pour obfusquer dépend de l'agent utilisateur (du navigateur) et du système d'exploitation utilisé.
+
+{{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}}
+
+La façon dont le texte saisi est traité dépend du navigateur utilisé. Sur les appareils mobiles, par exemple, le caractère tapé est souvent laissé affiché un court instant afin que l'utilisateur puisse contrôler que c'est bien le bon caractère. Ainsi, même si le clavier est petit et viruel, on peut éviter de faire trop d'erreurs.
+
+> **Note :** les différents formulaires qui permettent d'envoyer des données sensibles (tels que des mots de passe) doivent être servis sur HTTPS. Firefox, Chrome et les autres navigateurs implémentent désormais différents mécanismes afin d'avertir l'utilisateur lorsqu'il saisit un mot de passe sur une connexion HTTP (cf. l'article [mots de passe non sécurisés](/fr/docs/Web/Security/Insecure_passwords) pour Firefox).
+
+## Valeur
+
+La valeur de l'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est le texte qui est en cours de saisie dans le contrôle. Si l'utilisateur n'a pas encore saisi d'information, la valeur est une chaîne vide. Si l'attribut booléen {{htmlattrxref("required")}} est utilisé, le mot de passe doit contenir une valeur non vide afin que le formulaire puisse être envoyé.
 
-<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3>
+Si l'attribut {{htmlattrxref("pattern", "input")}} est indiqué, le contenu du contrôle doit respecter l'expression rationnelle indiquée par l'attribut. Pour plus d'informations, voir la section {{anch("Validation")}} ci-après.
 
-<p>Le nombre maximum de caractères (exprimé en nombre d'unité de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p>
+> **Note :** Il n'est pas possible d'utiliser les caractères de fin de ligne (_Line Feed_) (code U+000A) et de retour chariot (_Carriage Return_) (code U+000D) dans la valeur d'un champ `"password"`. Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.
 
-<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte dépasse <code>maxlength</code> en nombre d'unité de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+## Attributs supplémentaires
 
-<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3>
+En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mots de passe prennent en charge les attributs suivants :
 
-<p>Le nombre minimal de caractères (exprimé en nombre d'unité de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p>
+| Attribut                           | Description                                                                                               |
+| ---------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `{{anch("maxlength")}}`     | Le nombre de caractères maximal qui peut être écrit dans ce champ.                                        |
+| `{{anch("minlength")}}`     | Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide. |
+| `{{anch("pattern")}}`         | Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.                  |
+| `{{anch("placeholder")}}` | Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.                                 |
+| `{{anch("readonly")}}`     | Un attribut booléen qui indique si le contenu du champ est en lecture seule.                              |
+| `{{anch("size")}}`             | Un nombre qui indique le nombre de caractères affichés par le champ.                                      |
 
-<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte est inférieure à <code>minlength</code> en nombre d'unité de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+### {{htmlattrdef("maxlength")}}
 
-<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3>
+Le nombre maximum de caractères (exprimé en nombre d'unité de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`.
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte dépasse `maxlength` en nombre d'unité de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.
 
-<p>L'utilisation d'un motif pour les mots de passe est fortement recommandée. Elle permet de s'assurer que les mots de passe saisis respectent des critères de complexité suffisants pour être robustes. Voir la section {{anch("Validation")}} ci-après pour plus de détails et d'exemples.</p>
+### {{htmlattrdef("minlength")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+Le nombre minimal de caractères (exprimé en nombre d'unité de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à `maxlength`.
 
-<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3>
+Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte est inférieure à `minlength` en nombre d'unité de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.
 
-<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. Toutefois, la valeur de l'attribut <code>value</code> peut toujours être modifiée via du code JavaScript qui définirait la propriété {{domxref("HTMLInputElement.value")}}.</p>
+### {{htmlattrdef("pattern")}}
 
-<div class="note">
-<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura pas d'effet si l'attribut <code>readonly</code> est également présent.</p>
-</div>
+{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+L'utilisation d'un motif pour les mots de passe est fortement recommandée. Elle permet de s'assurer que les mots de passe saisis respectent des critères de complexité suffisants pour être robustes. Voir la section {{anch("Validation")}} ci-après pour plus de détails et d'exemples.
 
-<h2 id="Utiliser_les_contrôles_de_saisie_de_mot_de_passe">Utiliser les contrôles de saisie de mot de passe</h2>
+{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}
 
-<p>Les champs destinés à la saisie des mots de passe fonctionnent comme les champs texte mais masquent le texte saisi pour que celui-ci ne puisse pas être lu sur l'écran.</p>
+### {{htmlattrdef("readonly")}}
 
-<h3 id="Un_contrôle_basique">Un contrôle basique</h3>
+Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. Toutefois, la valeur de l'attribut `value` peut toujours être modifiée via du code JavaScript qui définirait la propriété {{domxref("HTMLInputElement.value")}}.
 
-<p>Voici un exemple simple illustrant un contrôle de saisie d'un mot de passe qui utilise un élément {{HTMLElement("label")}} afin d'indiquer le rôle du champ.</p>
+> **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent.
 
-<pre class="brush: html">&lt;label for="userPassword"&gt;Mot de passe :&lt;/label&gt;
-&lt;input id="userPassword" type="password"&gt;</pre>
+{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}
 
-<p>{{EmbedLiveSample("Un_contrôle_basique", 600, 40)}}</p>
+## Utiliser les contrôles de saisie de mot de passe
 
-<h3 id="Paramétrer_l'autocomplétion">Paramétrer l'autocomplétion</h3>
+Les champs destinés à la saisie des mots de passe fonctionnent comme les champs texte mais masquent le texte saisi pour que celui-ci ne puisse pas être lu sur l'écran.
 
-<p>Afin de permettre au gestionnaire de mots de passe de saisir automatiquement le mot de passe, on pourra utiliser l'attribut {{htmlattrxref("autocomplete", "input")}}. Pour les mots de passe, celui-ci aura l'une des valeurs suivantes :</p>
+### Un contrôle basique
 
-<dl>
- <dt><code>on</code></dt>
- <dd>Cette valeur permet au navigateur ou à un gestionnaire de mot de passe de remplir automatiquement le champ. Cette valeur n'est pas aussi informatique que <code>"current-password"</code> or <code>"new-password"</code>.</dd>
- <dt><code>off</code></dt>
- <dd>Cette valeur n'autorise pas le navigateur ou le gestionnaire de mot de passe à remplir le champ automatiquement.</dd>
- <dt><code>current-password</code></dt>
- <dd>Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut utiliser le mot de passe actuel pour le site. Cette valeur est plus précise que la valeur <code>"on"</code> car elle indique qu'il faut utiliser le mot de passe courant plutôt qu'un nouveau mot de passe.</dd>
- <dt><code>new-password</code></dt>
- <dd>Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut générer un nouveau mot de passe et utiliser ce dernier pour remplir le champ. La génération automatique du mot de passe peut alors utiliser les autres attributs de l'élément. Cette valeur peut également être indiquée pour que le navigateur indique cette information d'un façon ou d'une autre.</dd>
-</dl>
+Voici un exemple simple illustrant un contrôle de saisie d'un mot de passe qui utilise un élément {{HTMLElement("label")}} afin d'indiquer le rôle du champ.
 
-<pre class="brush: html">&lt;label for="userPassword"&gt;Mot de passe :&lt;/label&gt;
-&lt;input id="userPassword" type="password" autocomplete="current-password"&gt;</pre>
+```html
+<label for="userPassword">Mot de passe :</label>
+<input id="userPassword" type="password">
+```
 
-<p>{{EmbedLiveSample("Paramétrer_l'autocomplétion", 600, 40)}}</p>
+{{EmbedLiveSample("Un_contrôle_basique", 600, 40)}}
 
-<h3 id="Rendre_le_champ_obligatoire">Rendre le champ obligatoire</h3>
+### Paramétrer l'autocomplétion
 
-<p>Pour indiquer à l'utilisateur que le mot de passe est obligatoire, on pourra utiliser l'attribut {{htmlattrxref("required", "input")}}.</p>
+Afin de permettre au gestionnaire de mots de passe de saisir automatiquement le mot de passe, on pourra utiliser l'attribut {{htmlattrxref("autocomplete", "input")}}. Pour les mots de passe, celui-ci aura l'une des valeurs suivantes :
 
-<pre class="brush: html">&lt;label for="userPassword"&gt;Mot de passe :&lt;/label&gt;
-&lt;input id="userPassword" type="password" required&gt;</pre>
+- `on`
+  - : Cette valeur permet au navigateur ou à un gestionnaire de mot de passe de remplir automatiquement le champ. Cette valeur n'est pas aussi informatique que `"current-password"` or `"new-password"`.
+- `off`
+  - : Cette valeur n'autorise pas le navigateur ou le gestionnaire de mot de passe à remplir le champ automatiquement.
+- `current-password`
+  - : Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut utiliser le mot de passe actuel pour le site. Cette valeur est plus précise que la valeur `"on"` car elle indique qu'il faut utiliser le mot de passe courant plutôt qu'un nouveau mot de passe.
+- `new-password`
+  - : Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut générer un nouveau mot de passe et utiliser ce dernier pour remplir le champ. La génération automatique du mot de passe peut alors utiliser les autres attributs de l'élément. Cette valeur peut également être indiquée pour que le navigateur indique cette information d'un façon ou d'une autre.
 
-<p>{{EmbedLiveSample("Rendre_le_champ_obligatoire", 600, 40)}}</p>
+```html
+<label for="userPassword">Mot de passe :</label>
+<input id="userPassword" type="password" autocomplete="current-password">
+```
 
-<h3 id="Définir_un_mode_de_saisie">Définir un mode de saisie</h3>
+{{EmbedLiveSample("Paramétrer_l'autocomplétion", 600, 40)}}
 
-<p>Si votre application utilise un autre mode de saisie que le mode par défaut, l'attribut {{htmlattrxref("inputmode", "input")}} peut être employé pour indiquer le mode à utiliser. Le cas le plus fréquent est celui où on utilise une valeur numérique pour un mot de passe (par exemple pour un code PIN). Si ce code ne doit être utilisé qu'une seule fois, on pourra paramétrer l'attribut {{htmlattrxref("autocomplete", "input")}} avec la valeur <code>off</code>. Les appareils mobiles pourront tirer parti de la valeur de cet attribut et afficher un autre clavier pour faciliter la saisie.</p>
+### Rendre le champ obligatoire
 
-<pre class="brush: html">&lt;label for="pin"&gt;PIN :&lt;/label&gt;
-&lt;input id="pin" type="password" inputmode="numeric"&gt;</pre>
+Pour indiquer à l'utilisateur que le mot de passe est obligatoire, on pourra utiliser l'attribut {{htmlattrxref("required", "input")}}.
 
-<p>{{EmbedLiveSample("Définir_un_mode_de_saisie", 600, 40)}}</p>
+```html
+<label for="userPassword">Mot de passe :</label>
+<input id="userPassword" type="password" required>
+```
 
-<h3 id="Indiquer_des_critères_de_longueur">Indiquer des critères de longueur</h3>
+{{EmbedLiveSample("Rendre_le_champ_obligatoire", 600, 40)}}
 
-<p>Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}} peuvent être utilisés afin d'indiquer les tailles minimale et maximale du mot de passe qui doit être saisi. Dans l'exemple qui suit, on repart de l'exemple précédent et on indique que le code PIN doit contenir au moins 4 caractères et au plus 8 caractères. L'attribut {{htmlattrxref("size", "input")}} est utilisé afin que le contrôle permette bien d'afficher 8 caractères.</p>
+### Définir un mode de saisie
 
-<pre class="brush: html">&lt;label for="pin"&gt;PIN :&lt;/label&gt;
-&lt;input id="pin" type="password" inputmode="numeric" minlength="4"
-       maxlength="8" size="8"&gt;</pre>
+Si votre application utilise un autre mode de saisie que le mode par défaut, l'attribut {{htmlattrxref("inputmode", "input")}} peut être employé pour indiquer le mode à utiliser. Le cas le plus fréquent est celui où on utilise une valeur numérique pour un mot de passe (par exemple pour un code PIN). Si ce code ne doit être utilisé qu'une seule fois, on pourra paramétrer l'attribut {{htmlattrxref("autocomplete", "input")}} avec la valeur `off`. Les appareils mobiles pourront tirer parti de la valeur de cet attribut et afficher un autre clavier pour faciliter la saisie.
 
-<p>{{EmbedLiveSample("Indiquer_des_critères_de_longueur", 600, 40)}}</p>
+```html
+<label for="pin">PIN :</label>
+<input id="pin" type="password" inputmode="numeric">
+```
 
-<h3 id="Sélectionner_le_texte_saisi">Sélectionner le texte saisi</h3>
+{{EmbedLiveSample("Définir_un_mode_de_saisie", 600, 40)}}
 
-<p>Il est possible d'utiliser la méthode {{domxref("HTMLInputElement.select", "select()")}} pour sélectionner le texte saisi dans le contrôle.</p>
+### Indiquer des critères de longueur
 
-<h4 id="HTML">HTML</h4>
+Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}} peuvent être utilisés afin d'indiquer les tailles minimale et maximale du mot de passe qui doit être saisi. Dans l'exemple qui suit, on repart de l'exemple précédent et on indique que le code PIN doit contenir au moins 4 caractères et au plus 8 caractères. L'attribut {{htmlattrxref("size", "input")}} est utilisé afin que le contrôle permette bien d'afficher 8 caractères.
 
-<pre class="brush: html">&lt;label for="userPassword"&gt;Mot de passe :&lt;/label&gt;
-&lt;input id="userPassword" type="password" size="12"&gt;
-&lt;button id="selectAll"&gt;Sélectionner tout&lt;/button&gt;
-</pre>
+```html
+<label for="pin">PIN :</label>
+<input id="pin" type="password" inputmode="numeric" minlength="4"
+       maxlength="8" size="8">
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+{{EmbedLiveSample("Indiquer_des_critères_de_longueur", 600, 40)}}
 
-<pre class="brush: js">document.getElementById("selectAll").onclick = function(event) {
+### Sélectionner le texte saisi
+
+Il est possible d'utiliser la méthode {{domxref("HTMLInputElement.select", "select()")}} pour sélectionner le texte saisi dans le contrôle.
+
+#### HTML
+
+```html
+<label for="userPassword">Mot de passe :</label>
+<input id="userPassword" type="password" size="12">
+<button id="selectAll">Sélectionner tout</button>
+```
+
+#### JavaScript
+
+```js
+document.getElementById("selectAll").onclick = function(event) {
   document.getElementById("userPassword").select();
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Sélectionner_le_texte_saisi", 600, 40)}}</p>
+{{EmbedLiveSample("Sélectionner_le_texte_saisi", 600, 40)}}
 
-<p>On peut également utiliser {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} et {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}} afin d'obtenir (ou de régler) l'intervalle de caractères sélectionnés. {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}} permet de connaître la direction dans laquelle la sélection a été effectuée.</p>
+On peut également utiliser {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} et {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}} afin d'obtenir (ou de régler) l'intervalle de caractères sélectionnés. {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}} permet de connaître la direction dans laquelle la sélection a été effectuée.
 
-<h2 id="Validation">Validation</h2>
+## Validation
 
-<p>Si votre application possède des contraintes sur les caractères utilisables ou sur la structure du mot de passe, il est possible d'utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin que le navigateur vérifie que la valeur saisie respecte une expression rationnelle tenant compte de ces contraintes.</p>
+Si votre application possède des contraintes sur les caractères utilisables ou sur la structure du mot de passe, il est possible d'utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin que le navigateur vérifie que la valeur saisie respecte une expression rationnelle tenant compte de ces contraintes.
 
-<p>Dans cet exemple, il n'est possible de saisir qu'une valeur qui contient entre 4 et 8 caractères qui sont des caractères hexadécimaux.</p>
+Dans cet exemple, il n'est possible de saisir qu'une valeur qui contient entre 4 et 8 caractères qui sont des caractères hexadécimaux.
 
-<pre class="brush: html">&lt;label for="hexId"&gt;Identifiant Hexa :&lt;/label&gt;
-&lt;input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}"
+```html
+<label for="hexId">Identifiant Hexa :</label>
+<input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}"
        title="Veuillez saisir un identifiant avec 4 à 8 chiffres hexadécimaux."
-       autocomplete="nouveau-mot-de-passe"&gt;</pre>
+       autocomplete="nouveau-mot-de-passe">
+```
 
-<p>{{EmbedLiveSample("Validation", 600, 40)}}</p>
+{{EmbedLiveSample("Validation", 600, 40)}}
 
-<h2 id="Désactiver_le_champ">Désactiver le champ</h2>
+## Désactiver le champ
 
-<p>L'attribut booléen {{htmlattrdef("disabled")}} indique que le champ ne peut pas être utilisé de façon interactive. Les données des champs désactivés ne seront pas envoyées avec le formulaire.</p>
+L'attribut booléen {{htmlattrdef("disabled")}} indique que le champ ne peut pas être utilisé de façon interactive. Les données des champs désactivés ne seront pas envoyées avec le formulaire.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Saisir_un_numéro_de_sécurité_sociale_américain_comme_mot_de_passe">Saisir un numéro de sécurité sociale américain comme mot de passe</h3>
+### Saisir un numéro de sécurité sociale américain comme mot de passe
 
-<p>Dans l'exemple qui suit, on construit un formulaire avec un mot de passe qui doit respecter le format d'un <a href="https://en.wikipedia.org/wiki/Social_Security_number#Structure">numéro de sécurité sociale américain</a>. Ces nombres ont la forme "123-45-6789" et il existe différentes règles permettant de restreindre les valeurs pour chacun des groupes.</p>
+Dans l'exemple qui suit, on construit un formulaire avec un mot de passe qui doit respecter le format d'un [numéro de sécurité sociale américain](https://en.wikipedia.org/wiki/Social_Security_number#Structure). Ces nombres ont la forme "123-45-6789" et il existe différentes règles permettant de restreindre les valeurs pour chacun des groupes.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;label for="ssn"&gt;SSN :&lt;/label&gt;
-&lt;input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12"
+```html
+<label for="ssn">SSN :</label>
+<input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12"
     pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}"
-    required autocomplete="off"&gt;
-&lt;br&gt;
-&lt;label for="ssn"&gt;Valeur :&lt;/label&gt;
-&lt;span id="current"&gt;&lt;/span&gt;</pre>
+    required autocomplete="off">
+<br>
+<label for="ssn">Valeur :</label>
+<span id="current"></span>
+```
 
-<p>On n'utilise l'attribut {{htmlattrxref("pattern", "input")}} afin d'imposer certaines contraintes de saisie afin que les chaînes aient le bon format. Cette expression rationnelle ne garantit pas un numéro valide mais elle permet de s'assurer que la valeur saisie <em>peut</em> être un numéro de sécurité sociale valide. De plus, elle permet d'avoir un séparateur variable entre les trois groupes (un espace, un tiret ou rien).</p>
+On n'utilise l'attribut {{htmlattrxref("pattern", "input")}} afin d'imposer certaines contraintes de saisie afin que les chaînes aient le bon format. Cette expression rationnelle ne garantit pas un numéro valide mais elle permet de s'assurer que la valeur saisie _peut_ être un numéro de sécurité sociale valide. De plus, elle permet d'avoir un séparateur variable entre les trois groupes (un espace, un tiret ou rien).
 
-<p>L'attribut {{htmlattrxref("inputmode", "input")}} vaut <code>number</code>, ce qui incite les appareils mobiles à utiliser un clavier virtuel uniquement numérique pour la saisie d'un tel champ. Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}} valent respectivement 9 et 12 et l'attribut {{htmlattrxref("required", "input")}} indique que cette valeur est nécessaire pour envoyer le formulaire. Enfin, {{htmlattrxref("autocomplete", "input")}} vaut <code>off</code>, ce qui évite que les gestionnaires de mots de passe ou que les fonctionnalités de restoration de session remplissent automatiquement cette valeur.</p>
+L'attribut {{htmlattrxref("inputmode", "input")}} vaut `number`, ce qui incite les appareils mobiles à utiliser un clavier virtuel uniquement numérique pour la saisie d'un tel champ. Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}} valent respectivement 9 et 12 et l'attribut {{htmlattrxref("required", "input")}} indique que cette valeur est nécessaire pour envoyer le formulaire. Enfin, {{htmlattrxref("autocomplete", "input")}} vaut `off`, ce qui évite que les gestionnaires de mots de passe ou que les fonctionnalités de restoration de session remplissent automatiquement cette valeur.
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Saisir_un_numéro_de_sécurité_sociale_américain_comme_mot_de_passe", 600, 60)}}</p>
+{{EmbedLiveSample("Saisir_un_numéro_de_sécurité_sociale_américain_comme_mot_de_passe", 600, 60)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères qui représente un mot de passe (la chaîne peut éventuellement être vide).</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("inputmode", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code> et <code>value</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}} et  {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères qui représente un mot de passe (la chaîne peut
+        éventuellement être vide).
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>
+        {{domxref("HTMLElement/change_event", "change")}} et
+        {{domxref("HTMLElement/input_event", "input")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}},
+        {{htmlattrxref("inputmode", "input")}},
+        {{htmlattrxref("maxlength", "input")}},
+        {{htmlattrxref("minlength", "input")}},
+        {{htmlattrxref("pattern", "input")}},
+        {{htmlattrxref("placeholder", "input")}},
+        {{htmlattrxref("readonly", "input")}},
+        {{htmlattrxref("required", "input")}} et
+        {{htmlattrxref("size", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td>
+        <code>selectionStart</code>, <code>selectionEnd</code>,
+        <code>selectionDirection</code> et <code>value</code>
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}},
+        {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}
+        et 
+        {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '&lt;input type="password"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sec-forms.html#password-state-typepassword', '&lt;input type="password"&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                                | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#password-state-(type=password)', '&lt;input type="password"&gt;')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+| {{SpecName('HTML5.1', 'sec-forms.html#password-state-typepassword', '&lt;input type="password"&gt;')}}     | {{Spec2('HTML5.1')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-password")}}</p>
+{{Compat("html.elements.input.input-password")}}
diff --git a/files/fr/web/html/element/input/radio/index.md b/files/fr/web/html/element/input/radio/index.md
index 8b8fd78f46..c344792efe 100644
--- a/files/fr/web/html/element/input/radio/index.md
+++ b/files/fr/web/html/element/input/radio/index.md
@@ -8,98 +8,98 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/radio
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Les éléments <code>&lt;input&gt;</code> dont l'attribut <code>type</code> vaut <strong><code>radio</code></strong> sont généralement utilisés pour construire des groupes d'options parmi lesquelles on ne peut choisir qu'une valeur. Les « boutons radio » sont représentés par des cercles remplis lorsqu'ils sont sélectionnés.</p>
+Les éléments `<input>` dont l'attribut `type` vaut **`radio`** sont généralement utilisés pour construire des groupes d'options parmi lesquelles on ne peut choisir qu'une valeur. Les « boutons radio » sont représentés par des cercles remplis lorsqu'ils sont sélectionnés.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}
 
-<p>On les appelle boutons radios par analogie avec les boutons qui étaient utilisés sur les anciens postes de radios.</p>
+On les appelle boutons radios par analogie avec les boutons qui étaient utilisés sur les anciens postes de radios.
 
-<div class="note">
-<p><strong>Note :</strong> <a href="/fr/docs/Web/HTML/Element/input/checkbox">Les cases à cocher (<em>checkboxes</em>)</a> ressemblent aux boutons radios. Toutefois, il existe une différence fondamentale : les boutons radio ne permettent de sélectionner qu'une seule option au sein d'un groupe alors que les cases à cocher permettent d'en sélectionner plusieurs.</p>
-</div>
+> **Note :** [Les cases à cocher (_checkboxes_)](/fr/docs/Web/HTML/Element/input/checkbox) ressemblent aux boutons radios. Toutefois, il existe une différence fondamentale : les boutons radio ne permettent de sélectionner qu'une seule option au sein d'un groupe alors que les cases à cocher permettent d'en sélectionner plusieurs.
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>L'attribut <code>value</code> est une chaîne de caractères (un objet {{domxref("DOMString")}} au sens du DOM) qui contient la valeur du bouton radio. Cette valeur n'est pas montrée à l'utilisateur par le navigateur ou tout autre agent utilisateur, elle permet d'identifier l'option sélectionnée.</p>
+L'attribut `value` est une chaîne de caractères (un objet {{domxref("DOMString")}} au sens du DOM) qui contient la valeur du bouton radio. Cette valeur n'est pas montrée à l'utilisateur par le navigateur ou tout autre agent utilisateur, elle permet d'identifier l'option sélectionnée.
 
-<h3 id="Définir_un_groupe_de_boutons_radio">Définir un groupe de boutons radio</h3>
+### Définir un groupe de boutons radio
 
-<p>Pour définir un groupe de boutons radio, on leur donne le même nom via l'attribut {{htmlattrxref("name", "input")}}. Une fois qu'on a formé un groupe de boutons radio, on ne pourra sélectionner qu'une seule des options de ce groupes (cliquer sur une option désélectionnera automatiquement l'option précédemment choisie dans ce groupe).</p>
+Pour définir un groupe de boutons radio, on leur donne le même nom via l'attribut {{htmlattrxref("name", "input")}}. Une fois qu'on a formé un groupe de boutons radio, on ne pourra sélectionner qu'une seule des options de ce groupes (cliquer sur une option désélectionnera automatiquement l'option précédemment choisie dans ce groupe).
 
-<p>Il est possible d'avoir autant de groupes que nécessaire, il suffit que chaque groupe ait un nom (l'attribut <code>name</code>) unique.</p>
+Il est possible d'avoir autant de groupes que nécessaire, il suffit que chaque groupe ait un nom (l'attribut `name`) unique.
 
-<p>Ainsi, si on souhaite utiliser un formulaire afin de demander à l'utilisateur sa méthode de contact préférée, on pourra créer trois boutons radio avec l'attribut <code>name</code> qui vaut <code>contact</code> et pour lesquels l'attribut {{htmlattrxref("value", "input")}} varie : <code>email</code> pour le premier, <code>telephone</code> pour le deuxième et <code>courrier</code> pour le dernier. Cette valeur et le nom du groupe ne sont pas affichés (ce sera le rôle de l'élément {{HTMLElement("label")}} de fournir un intitulé).</p>
+Ainsi, si on souhaite utiliser un formulaire afin de demander à l'utilisateur sa méthode de contact préférée, on pourra créer trois boutons radio avec l'attribut `name` qui vaut `contact` et pour lesquels l'attribut {{htmlattrxref("value", "input")}} varie : `email` pour le premier, `telephone` pour le deuxième et `courrier` pour le dernier. Cette valeur et le nom du groupe ne sont pas affichés (ce sera le rôle de l'élément {{HTMLElement("label")}} de fournir un intitulé).
 
-<p>Voici le fragment de code HTML correspondant à cet exemple :</p>
+Voici le fragment de code HTML correspondant à cet exemple :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;p&gt;Veuillez choisir la meilleure méthode pour vous contacter :&lt;/p&gt;
-  &lt;div&gt;
-    &lt;input type="radio" id="contactChoice1"
-     name="contact" value="email"&gt;
-    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+```html
+<form>
+  <p>Veuillez choisir la meilleure méthode pour vous contacter :</p>
+  <div>
+    <input type="radio" id="contactChoice1"
+     name="contact" value="email">
+    <label for="contactChoice1">Email</label>
 
-    &lt;input type="radio" id="contactChoice2"
-     name="contact" value="telephone"&gt;
-    &lt;label for="contactChoice2"&gt;Téléphone&lt;/label&gt;
+    <input type="radio" id="contactChoice2"
+     name="contact" value="telephone">
+    <label for="contactChoice2">Téléphone</label>
 
-    &lt;input type="radio" id="contactChoice3"
-     name="contact" value="courrier"&gt;
-    &lt;label for="contactChoice3"&gt;Courrier&lt;/label&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button type="submit"&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+    <input type="radio" id="contactChoice3"
+     name="contact" value="courrier">
+    <label for="contactChoice3">Courrier</label>
+  </div>
+  <div>
+    <button type="submit">Envoyer</button>
+  </div>
+</form>
+```
 
-<p>On voit ici trois boutons radio dont l'attribut <code>name</code> vaut <code>contact</code> et dont chacun possède une valeur unique pour l'attribut <code>value</code>. Ils possèdent également un identifiant unique ({{domxref("Element.id", "id")}}) qui est utilisé pour rattacher le libellé fourni par l'élément {{HTMLElement("label")}} via l'attribut {{htmlattrxref("for", "label")}}.</p>
+On voit ici trois boutons radio dont l'attribut `name` vaut `contact` et dont chacun possède une valeur unique pour l'attribut `value`. Ils possèdent également un identifiant unique ({{domxref("Element.id", "id")}}) qui est utilisé pour rattacher le libellé fourni par l'élément {{HTMLElement("label")}} via l'attribut {{htmlattrxref("for", "label")}}.
 
-<p>Voici le résultat obtenu :</p>
+Voici le résultat obtenu :
 
-<p>{{EmbedLiveSample('Définir_un_groupe_de_boutons_radio', 600, 130)}}</p>
+{{EmbedLiveSample('Définir_un_groupe_de_boutons_radio', 600, 130)}}
 
-<h3 id="La_représentation_des_données_d’un_groupe_de_boutons_radio">La représentation des données d’un groupe de boutons radio</h3>
+### La représentation des données d’un groupe de boutons radio
 
-<p>Lorsqu'on envoie le formulaire précédent avec une option sélectionnée, les données du formulaire contiendront une valeur sous la forme <code>"contact=<em>valeur</em>"</code>. Ainsi, si l'utilisateur clique sur le bouton radio « Téléphone » et envoie le formulaire, les données du formulaire contiendront <code>"contact=telephone"</code>.</p>
+Lorsqu'on envoie le formulaire précédent avec une option sélectionnée, les données du formulaire contiendront une valeur sous la forme `"contact=valeur"`. Ainsi, si l'utilisateur clique sur le bouton radio « Téléphone » et envoie le formulaire, les données du formulaire contiendront `"contact=telephone"`.
 
-<p>Si l'attribut <code>value</code> n'est pas fourni dans le document HTML, la valeur par défaut utilisée sera <code>on</code> pour l'ensemble du groupe. Si c'était le cas avec notre exemple précédent et que l'utilisateur avait cliqué sur l'option « Téléphone » et envoyé le formulaire, les données envoyées auraient contenu <code>"contact=on"</code> ce qui ne s'avère pas très utile. Aussi, mieux vaut ne pas oublier les attributs <code>value</code> !</p>
+Si l'attribut `value` n'est pas fourni dans le document HTML, la valeur par défaut utilisée sera `on` pour l'ensemble du groupe. Si c'était le cas avec notre exemple précédent et que l'utilisateur avait cliqué sur l'option « Téléphone » et envoyé le formulaire, les données envoyées auraient contenu `"contact=on"` ce qui ne s'avère pas très utile. Aussi, mieux vaut ne pas oublier les attributs `value` !
 
-<div class="note">
-<p><strong>Note :</strong> Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir.</p>
-</div>
+> **Note :** Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir.
 
-<p>Généralement, on souhaite qu'au moins une option soit sélectionné parmi les boutons d'un groupe et on inclue donc souvent un attribut <code>checked</code> sur l'un des boutons afin d'avoir une option sélectionnée par défaut.</p>
+Généralement, on souhaite qu'au moins une option soit sélectionné parmi les boutons d'un groupe et on inclue donc souvent un attribut `checked` sur l'un des boutons afin d'avoir une option sélectionnée par défaut.
 
-<p>Ajoutant un peu de code à notre exemple pour étudier les données générées par ce formulaire. On modifie le code HTML afin d'ajouter un bloc {{HTMLElement("pre")}} qui contiendra les données produites par le formulaire :</p>
+Ajoutant un peu de code à notre exemple pour étudier les données générées par ce formulaire. On modifie le code HTML afin d'ajouter un bloc {{HTMLElement("pre")}} qui contiendra les données produites par le formulaire :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;p&gt;Veuillez choisir la meilleure méthode pour vous contacter :&lt;/p&gt;
-  &lt;div&gt;
-    &lt;input type="radio" id="contactChoice1"
-     name="contact" value="email"&gt;
-    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+```html
+<form>
+  <p>Veuillez choisir la meilleure méthode pour vous contacter :</p>
+  <div>
+    <input type="radio" id="contactChoice1"
+     name="contact" value="email">
+    <label for="contactChoice1">Email</label>
 
-    &lt;input type="radio" id="contactChoice2"
-     name="contact" value="telephone"&gt;
-    &lt;label for="contactChoice2"&gt;Téléphone&lt;/label&gt;
+    <input type="radio" id="contactChoice2"
+     name="contact" value="telephone">
+    <label for="contactChoice2">Téléphone</label>
 
-    &lt;input type="radio" id="contactChoice3"
-     name="contact" value="courrier"&gt;
-    &lt;label for="contactChoice3"&gt;Courrier&lt;/label&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button type="submit"&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;
-&lt;pre id="log"&gt;
-&lt;/pre&gt;
+    <input type="radio" id="contactChoice3"
+     name="contact" value="courrier">
+    <label for="contactChoice3">Courrier</label>
+  </div>
+  <div>
+    <button type="submit">Envoyer</button>
+  </div>
+</form>
+<pre id="log">
 </pre>
+```
 
-<p>Ensuite, on ajoute du code <a href="/fr/docs/Web/JavaScript">JavaScript</a> pour rattacher un gestionnaire d'évènement sur l'évènement {{event("submit")}} qui est déclenché lorsque l'utilisateur clique sur le bouton « Envoyer » :</p>
+Ensuite, on ajoute du code [JavaScript](/fr/docs/Web/JavaScript) pour rattacher un gestionnaire d'évènement sur l'évènement {{event("submit")}} qui est déclenché lorsque l'utilisateur clique sur le bouton « Envoyer » :
 
-<pre class="brush: js">var form = document.querySelector("form");
+```js
+var form = document.querySelector("form");
 var log = document.querySelector("#log");
 
 form.addEventListener("submit", function(event) {
@@ -110,122 +110,112 @@ form.addEventListener("submit", function(event) {
   };
   log.innerText = output;
   event.preventDefault();
-}, false);</pre>
-
-<p>Vous pouvez manipuler cet exemple et voir qu'il n'y a jamais plus 'un résultat pour le groupe <code>"contact"</code>.</p>
-
-<p>{{EmbedLiveSample("La_représentation_des_données_d’un_groupe_de_boutons_radio", 600, 130)}}</p>
-
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
-
-<p>En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les boutons radio peuvent utiliser les attributs suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Definition</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("checked")}}</code></td>
-   <td>Un attribut booléen qui indique si le bouton radio est l'élément sélectionné du groupe.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("value")}}</code></td>
-   <td>Une chaîne à utiliser comme valeur pour le bouton radio lors de l'envoi du formulaire si ce bouton est choisi.</td>
-  </tr>
- </tbody>
-</table>
+}, false);
+```
+
+Vous pouvez manipuler cet exemple et voir qu'il n'y a jamais plus 'un résultat pour le groupe `"contact"`.
+
+{{EmbedLiveSample("La_représentation_des_données_d’un_groupe_de_boutons_radio", 600, 130)}}
+
+## Attributs supplémentaires
+
+En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les boutons radio peuvent utiliser les attributs suivants :
 
-<h3 id="htmlattrdef(checked)">{{htmlattrdef("checked")}}</h3>
+| Attribut                   | Definition                                                                                                     |
+| -------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `{{anch("checked")}}` | Un attribut booléen qui indique si le bouton radio est l'élément sélectionné du groupe.                        |
+| `{{anch("value")}}` | Une chaîne à utiliser comme valeur pour le bouton radio lors de l'envoi du formulaire si ce bouton est choisi. |
 
-<p>Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe.</p>
+### {{htmlattrdef("checked")}}
 
-<p>À la différence des autres navigateurs, Firefox conservera <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">l'état coché dynamique</a> d'un bouton radio au fur et à mesure des chargements de la page. On pourra utiliser l'attribut {{htmlattrxref("autocomplete","input")}} afin de contrôler cette fonctionnalité.</p>
+Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe.
 
-<h3 id="htmlattrdef(value)">{{htmlattrdef("value")}}</h3>
+À la différence des autres navigateurs, Firefox conservera [l'état coché dynamique](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) d'un bouton radio au fur et à mesure des chargements de la page. On pourra utiliser l'attribut {{htmlattrxref("autocomplete","input")}} afin de contrôler cette fonctionnalité.
 
-<p>L'attribut <code>value</code> est partagé par l'ensemble des types d'élément {{HTMLElement("input")}}. Dans le cas d'un bouton radio, il a un rôle spécifique et permet d'associer un texte qui sera envoyé avec le formulaire pour représenter la valeur sélectionnée. Si la valeur de <code>value</code> n'est pas définie, ce sera la chaîne de caractères <code>"on"</code> qui sera envoyée.</p>
+### {{htmlattrdef("value")}}
 
-<h2 id="Utiliser_les_boutons_radio">Utiliser les boutons radio</h2>
+L'attribut `value` est partagé par l'ensemble des types d'élément {{HTMLElement("input")}}. Dans le cas d'un bouton radio, il a un rôle spécifique et permet d'associer un texte qui sera envoyé avec le formulaire pour représenter la valeur sélectionnée. Si la valeur de `value` n'est pas définie, ce sera la chaîne de caractères `"on"` qui sera envoyée.
 
-<p>Nous avons déjà vu certaines techniques ci-avant. Voyons désormais d'autres fonctionnalités fréquemment utilisées avec ces boutons.</p>
+## Utiliser les boutons radio
 
-<h3 id="Sélectionner_un_bouton_radio_par_défaut">Sélectionner un bouton radio par défaut</h3>
+Nous avons déjà vu certaines techniques ci-avant. Voyons désormais d'autres fonctionnalités fréquemment utilisées avec ces boutons.
 
-<p>Pour qu'un bouton radio soit sélectionné par défaut, on ajoutera l'attribut booléen <code>checked</code>. Voici ce que ça donne pour l'exemple précédent, légèrement modifié :</p>
+### Sélectionner un bouton radio par défaut
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;p&gt;Veuillez choisir la meilleure méthode pour vous contacter :&lt;/p&gt;
-  &lt;div&gt;
-    &lt;input type="radio" id="contactChoice1"
-     name="contact" value="email" checked&gt;
-    &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+Pour qu'un bouton radio soit sélectionné par défaut, on ajoutera l'attribut booléen `checked`. Voici ce que ça donne pour l'exemple précédent, légèrement modifié :
 
-    &lt;input type="radio" id="contactChoice2"
-     name="contact" value="telephone"&gt;
-    &lt;label for="contactChoice2"&gt;Téléphone&lt;/label&gt;
+```html
+<form>
+  <p>Veuillez choisir la meilleure méthode pour vous contacter :</p>
+  <div>
+    <input type="radio" id="contactChoice1"
+     name="contact" value="email" checked>
+    <label for="contactChoice1">Email</label>
 
-    &lt;input type="radio" id="contactChoice3"
-     name="contact" value="courrier"&gt;
-    &lt;label for="contactChoice3"&gt;Courrier&lt;/label&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button type="submit"&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+    <input type="radio" id="contactChoice2"
+     name="contact" value="telephone">
+    <label for="contactChoice2">Téléphone</label>
 
-<p>{{EmbedLiveSample('Sélectionner_un_bouton_radio_par_défaut', 600, 130)}}</p>
+    <input type="radio" id="contactChoice3"
+     name="contact" value="courrier">
+    <label for="contactChoice3">Courrier</label>
+  </div>
+  <div>
+    <button type="submit">Envoyer</button>
+  </div>
+</form>
+```
 
-<p>Ici, c'est le premier bouton radio qui sera sélectionné par défaut.</p>
+{{EmbedLiveSample('Sélectionner_un_bouton_radio_par_défaut', 600, 130)}}
 
-<div class="note">
-<p><strong>Note :</strong> Si l'attribut <code>checked</code> est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné.</p>
-</div>
+Ici, c'est le premier bouton radio qui sera sélectionné par défaut.
 
-<h3 id="Fournir_une_plus_grande_zone_de_sélection">Fournir une plus grande zone de sélection</h3>
+> **Note :** Si l'attribut `checked` est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné.
 
-<p>Dans les exemples précédents, vous avez peut-être constaté qu'en cliquant sur l'élément {{htmlelement("label")}} associé au bouton radio, cela sélectionnait la valeur de ce bouton. C'est une fonctionnalité HTML très pratique qui facilite la sélection des options, notamment sur les écrans de petites tailles comme ceux des smartphones.</p>
+### Fournir une plus grande zone de sélection
 
-<p>Au-delà des raisons relatives à l'accessibilité, il s'agit d'un autre argument en faveur de la bonne utilisation des éléments <code>&lt;label&gt;</code> dans les formulaires.</p>
+Dans les exemples précédents, vous avez peut-être constaté qu'en cliquant sur l'élément {{htmlelement("label")}} associé au bouton radio, cela sélectionnait la valeur de ce bouton. C'est une fonctionnalité HTML très pratique qui facilite la sélection des options, notamment sur les écrans de petites tailles comme ceux des smartphones.
 
-<h2 id="Validation">Validation</h2>
+Au-delà des raisons relatives à l'accessibilité, il s'agit d'un autre argument en faveur de la bonne utilisation des éléments `<label>` dans les formulaires.
 
-<p>Il n'existe pas de contrainte de validation particulière pour les boutons radio.</p>
+## Validation
 
-<h2 id="Mettre_en_forme_les_boutons_radio">Mettre en forme les boutons radio</h2>
+Il n'existe pas de contrainte de validation particulière pour les boutons radio.
 
-<p>L'exemple qui suit est une version légèrement plus détaillée de l'exemple précédent qui contient une mise en forme et une meilleure sémantique grâce aux éléments HTML utilisés :</p>
+## Mettre en forme les boutons radio
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Veuillez choisir la meilleure méthode pour vous contacter :&lt;/legend&gt;
-    &lt;div&gt;
-      &lt;input type="radio" id="contactChoice1"
-       name="contact" value="email" checked&gt;
-      &lt;label for="contactChoice1"&gt;Email&lt;/label&gt;
+L'exemple qui suit est une version légèrement plus détaillée de l'exemple précédent qui contient une mise en forme et une meilleure sémantique grâce aux éléments HTML utilisés :
 
-      &lt;input type="radio" id="contactChoice2"
-       name="contact" value="telephone"&gt;
-      &lt;label for="contactChoice2"&gt;Téléphone&lt;/label&gt;
+```html
+<form>
+  <fieldset>
+    <legend>Veuillez choisir la meilleure méthode pour vous contacter :</legend>
+    <div>
+      <input type="radio" id="contactChoice1"
+       name="contact" value="email" checked>
+      <label for="contactChoice1">Email</label>
 
-      &lt;input type="radio" id="contactChoice3"
-       name="contact" value="courrier"&gt;
-      &lt;label for="contactChoice3"&gt;Courrier&lt;/label&gt;
-    &lt;/div&gt;
-    &lt;div&gt;
-      &lt;button type="submit"&gt;Envoyer&lt;/button&gt;
-    &lt;/div&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;</pre>
+      <input type="radio" id="contactChoice2"
+       name="contact" value="telephone">
+      <label for="contactChoice2">Téléphone</label>
 
-<p>On voit ici peu de modifications mais notamment l'ajout d'éléments {{htmlelement("fieldset")}} et {{htmlelement("legend")}} qui permettent de grouper les options (à la fois pour la mise en forme et pour la sémantique du document).</p>
+      <input type="radio" id="contactChoice3"
+       name="contact" value="courrier">
+      <label for="contactChoice3">Courrier</label>
+    </div>
+    <div>
+      <button type="submit">Envoyer</button>
+    </div>
+  </fieldset>
+</form>
+```
 
-<p>La feuille de style CSS utilisée est la suivante :</p>
+On voit ici peu de modifications mais notamment l'ajout d'éléments {{htmlelement("fieldset")}} et {{htmlelement("legend")}} qui permettent de grouper les options (à la fois pour la mise en forme et pour la sémantique du document).
 
-<pre class="brush: css">html {
+La feuille de style CSS utilisée est la suivante :
+
+```css
+html {
   font-family: sans-serif;
 }
 
@@ -280,74 +270,62 @@ button:active {
   background-color: white;
   color: black;
   outline: 1px solid black;
-}</pre>
+}
+```
 
-<p>La propriété utilisée la plus notable est {{cssxref("-moz-appearance")}} (utilisée avec certains préfixes navigateur). Par défaut, les boutons radios (ainsi que les cases à cocher) sont mis en forme avec l'apparence native liée au système d'exploitation sous-jacente. Avec <code>appearance: none</code>, on peut passer outre cette mise en forme native et créer ses propres styles pour ces boutons. Ici, nous avons utilisé {{cssxref("border")}} et {{cssxref("border-radius")}} avec {{cssxref("transition")}} afin de créer une animation lors de la sélection. On utilise également la pseudo-classe {{cssxref(":checked")}} pour définir l'apparence du bouton radio lorsqu'il est sélectionné.</p>
+La propriété utilisée la plus notable est {{cssxref("-moz-appearance")}} (utilisée avec certains préfixes navigateur). Par défaut, les boutons radios (ainsi que les cases à cocher) sont mis en forme avec l'apparence native liée au système d'exploitation sous-jacente. Avec `appearance: none`, on peut passer outre cette mise en forme native et créer ses propres styles pour ces boutons. Ici, nous avons utilisé {{cssxref("border")}} et {{cssxref("border-radius")}} avec {{cssxref("transition")}} afin de créer une animation lors de la sélection. On utilise également la pseudo-classe {{cssxref(":checked")}} pour définir l'apparence du bouton radio lorsqu'il est sélectionné.
 
-<p>Cette méthode n'est pas exempte d'inconvénient : <code>appearance</code> fonctionne correctement pour une mise en forme simple mais peut se comporter de façons différentes selon les navigateurs et elle ne fonctionne pas du tout avec Internet Explorer. Attention donc à tester votre site dans les différents navigateurs.</p>
+Cette méthode n'est pas exempte d'inconvénient : `appearance` fonctionne correctement pour une mise en forme simple mais peut se comporter de façons différentes selon les navigateurs et elle ne fonctionne pas du tout avec Internet Explorer. Attention donc à tester votre site dans les différents navigateurs.
 
-<p>{{EmbedLiveSample('Mettre_en_forme_les_boutons_radio', 600, 120)}}</p>
+{{EmbedLiveSample('Mettre_en_forme_les_boutons_radio', 600, 120)}}
 
-<p>De plus, la légende et le bouton d'envoi ont été mis en forme pour avoir un contraste marqué. Ce n'est pas peut-être pas la mise en forme idéale pour toutes les applications web mais cela illustre certaines des possibilités.</p>
+De plus, la légende et le bouton d'envoi ont été mis en forme pour avoir un contraste marqué. Ce n'est pas peut-être pas la mise en forme idéale pour toutes les applications web mais cela illustre certaines des possibilités.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères {{domxref("DOMString")}} qui représente la valeur du bouton radio.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{event("change")}} et {{event("input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("checked", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>checked</code> et <code>value</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères {{domxref("DOMString")}} qui représente
+        la valeur du bouton radio.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>{{event("change")}} et {{event("input")}}</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>{{htmlattrxref("checked", "input")}}</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td><code>checked</code> et <code>value</code></td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Spécification</th>
-   <th>État</th>
-   <th>Commentaires</th>
-  </tr>
-  <tr>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                            | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+|                                                                                                                                          |                                  |              |
+| {{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '&lt;input type="radio"&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-radio")}}</p>
+{{Compat("html.elements.input.input-radio")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} du DOM qui est implémentée par cet élément</li>
- <li>L'interface {{domxref("RadioNodeList")}} qui décrit une liste de boutons radio</li>
-</ul>
+- L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} du DOM qui est implémentée par cet élément
+- L'interface {{domxref("RadioNodeList")}} qui décrit une liste de boutons radio
diff --git a/files/fr/web/html/element/input/range/index.md b/files/fr/web/html/element/input/range/index.md
index 04f159c62d..8c12a7a150 100644
--- a/files/fr/web/html/element/input/range/index.md
+++ b/files/fr/web/html/element/input/range/index.md
@@ -8,364 +8,373 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/range
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>range</strong></code> permettent à l'utilisateur d'indiquer une valeur numérique comprise entre deux bornes. La valeur précise n'est pas considérée comme importante. Ces éléments sont généralement représenté avec un curseur sur une ligne ou comme un bouton de potentiel. Ce genre de <em>widget</em> n'étant pas précis, ce type ne devrait pas être utilisé lorsque la valeur exacte fournie par l'utilisateur est importante.</p>
+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`range`** permettent à l'utilisateur d'indiquer une valeur numérique comprise entre deux bornes. La valeur précise n'est pas considérée comme importante. Ces éléments sont généralement représenté avec un curseur sur une ligne ou comme un bouton de potentiel. Ce genre de _widget_ n'étant pas précis, ce type ne devrait pas être utilisé lorsque la valeur exacte fournie par l'utilisateur est importante.
 
-<p>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</p>
+{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}
 
-<p>Si le navigateur de l'utilisateur ne prend pas en charge le type <code>range</code>, il utilisera le type <code><a href="/fr/docs/Web/HTML/Element/input/text">text</a></code> à la place.</p>
+Si le navigateur de l'utilisateur ne prend pas en charge le type `range`, il utilisera le type [`text`](/fr/docs/Web/HTML/Element/input/text) à la place.
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (<code>""</code>). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut <code>min</code>).  Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut :</p>
+L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (`""`). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut `min`).  Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut :
 
-<pre class="brush: js">defaultValue = (rangeElem.max &lt; rangeElem.min) ? rangeElem.min
-               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre>
+```js
+defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min
+               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;
+```
 
-<p>Si on essaie d'obtenir une valeur inférieure au minimum, alors la valeur sera ramenée au minimum (de même si on essaye de dépasser le maximum).</p>
+Si on essaie d'obtenir une valeur inférieure au minimum, alors la valeur sera ramenée au minimum (de même si on essaye de dépasser le maximum).
 
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+## Attributs supplémentaires
 
-<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les intervalles peuvent utiliser les attributs suivants :</p>
+En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les intervalles peuvent utiliser les attributs suivants :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("max")}}</code></td>
-   <td>La valeur maximale autorisée.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("min")}}</code></td>
-   <td>La valeur minimale autorisée.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("step")}}</code></td>
-   <td>Le pas utilisé pour incrémenter la valeur du champ. Cette valeur est utilisée pour l'interface utilisateur du contrôle et pour la validation de la valeur.</td>
-  </tr>
- </tbody>
-</table>
+| Attribut               | Description                                                                                                                                                |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("max")}}` | La valeur maximale autorisée.                                                                                                                              |
+| `{{anch("min")}}` | La valeur minimale autorisée.                                                                                                                              |
+| `{{anch("step")}}` | Le pas utilisé pour incrémenter la valeur du champ. Cette valeur est utilisée pour l'interface utilisateur du contrôle et pour la validation de la valeur. |
 
-<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3>
+### {{htmlattrdef("max")}}
 
-<p>La plus grande valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas un nombre, aucun maximum ne sera fixé pour la valeur du contrôle.</p>
+La plus grande valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas un nombre, aucun maximum ne sera fixé pour la valeur du contrôle.
 
-<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p>
+Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut `min`.
 
-<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3>
+### {{htmlattrdef("min")}}
 
-<p>La plus petite valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas un nombre, aucun minimum ne sera fixé pour la valeur du contrôle.</p>
+La plus petite valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas un nombre, aucun minimum ne sera fixé pour la valeur du contrôle.
 
-<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p>
+Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut `max`.
 
-<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3>
+### {{htmlattrdef("step")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}
 
-<p>Par défaut, l'incrément utilisé pour les champs de type <code>number</code> vaut 1 et on ne peut alors saisir que des entiers à momins que la valeur de base ne soit pas entière. Ainsi, si on définit <code>min</code> avec -10 et <code>value</code> avec 1.5, un attribut <code>step</code> qui vaut 1 permettra de saisir les valeurs positives 1.5, 2.5, 3.5, etc. et les valeurs négatives -0.5, -1.5, -2.5, etc.</p>
+Par défaut, l'incrément utilisé pour les champs de type `number` vaut 1 et on ne peut alors saisir que des entiers à momins que la valeur de base ne soit pas entière. Ainsi, si on définit `min` avec -10 et `value` avec 1.5, un attribut `step` qui vaut 1 permettra de saisir les valeurs positives 1.5, 2.5, 3.5, etc. et les valeurs négatives -0.5, -1.5, -2.5, etc.
 
-<h2 id="Utiliser_les_intervalles">Utiliser les intervalles</h2>
+## Utiliser les intervalles
 
-<p>Bien que le type <code>"number"</code> permette à l'utilisateur de saisir un nombre avec certaines contraintes optionnelles (par exemple pour que la valeur soit comprise entre un minimum et un maximum), ce type nécessite de saisir une valeur spécifique. Le type <code>"range"</code> permet de saisir une valeur lorsque l'exactitude de celle-ci importe peu.</p>
+Bien que le type `"number"` permette à l'utilisateur de saisir un nombre avec certaines contraintes optionnelles (par exemple pour que la valeur soit comprise entre un minimum et un maximum), ce type nécessite de saisir une valeur spécifique. Le type `"range"` permet de saisir une valeur lorsque l'exactitude de celle-ci importe peu.
 
-<p>Voici quelques scénarios où un intervalle de saisie est plus pertinent :</p>
+Voici quelques scénarios où un intervalle de saisie est plus pertinent :
 
-<ul>
- <li>Les contrôles relatis à l'audio pour le volume, la balance ou les filtres.</li>
- <li>Les contrôles relatifs à la configuration des couleurs (canaux, transparence, luminosité, etc.)</li>
- <li>Les contrôles relatifs à la configuration de jeux vidéos (difficulté, distance de visibilité, taille du monde généré, etc.)</li>
- <li>La longueur du mot de passe pour les mots de passe générés par un gestionnaire de mots de passe.</li>
-</ul>
+- Les contrôles relatis à l'audio pour le volume, la balance ou les filtres.
+- Les contrôles relatifs à la configuration des couleurs (canaux, transparence, luminosité, etc.)
+- Les contrôles relatifs à la configuration de jeux vidéos (difficulté, distance de visibilité, taille du monde généré, etc.)
+- La longueur du mot de passe pour les mots de passe générés par un gestionnaire de mots de passe.
 
-<p>De façon générale, si un utilisateur est plutôt intéressé dans un pourcentage représentant la distance entre la borne minimale et la borne maximale, un intervalle de saisie sera plus pertinent (par exemple, pour le volume, on pensera plutôt « augmenter le volume jusqu'à la moitié du maximum » que « mettre le volume à 0.5 »).</p>
+De façon générale, si un utilisateur est plutôt intéressé dans un pourcentage représentant la distance entre la borne minimale et la borne maximale, un intervalle de saisie sera plus pertinent (par exemple, pour le volume, on pensera plutôt « augmenter le volume jusqu'à la moitié du maximum » que « mettre le volume à 0.5 »).
 
-<h3 id="Indiquer_le_minimum_et_le_maximum">Indiquer le minimum et le maximum</h3>
+### Indiquer le minimum et le maximum
 
-<p>Par défaut, le minimum vaut 0 et le maximum vaut 100. Si ces bornes ne conviennent pass, on peut facilement les changer via les attributs {{htmlattrxref("min", "input")}} et/ou {{htmlattrxref("max", "input")}}. Ces attributs acceptent des nombres décimaux.</p>
+Par défaut, le minimum vaut 0 et le maximum vaut 100. Si ces bornes ne conviennent pass, on peut facilement les changer via les attributs {{htmlattrxref("min", "input")}} et/ou {{htmlattrxref("max", "input")}}. Ces attributs acceptent des nombres décimaux.
 
-<p>Par exemple, afin de demander à un utilisateur de choisir une valeur approximative dans l'intervalle [-10 , 10], on pourra utiliser :</p>
+Par exemple, afin de demander à un utilisateur de choisir une valeur approximative dans l'intervalle \[-10 , 10], on pourra utiliser :
 
-<pre class="brush: html">&lt;input type="range" min="-10" max="10"&gt;</pre>
+```html
+<input type="range" min="-10" max="10">
+```
 
-<p>{{EmbedLiveSample("Indiquer_le_minimum_et_le_maximum", 600, 40)}}</p>
+{{EmbedLiveSample("Indiquer_le_minimum_et_le_maximum", 600, 40)}}
 
-<h3 id="Définir_la_granularité">Définir la granularité</h3>
+### Définir la granularité
 
-<p>Par défaut, la granularité vaut 1, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut {{htmlattrxref("step")}} qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre 5 et 10 et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut <code>step</code> avec la valeur 0.01 :</p>
+Par défaut, la granularité vaut 1, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut {{htmlattrxref("step")}} qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre 5 et 10 et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut `step` avec la valeur 0.01 :
 
-<h4 id="Exemple_1">Exemple 1</h4>
-<pre class="brush: html">&lt;input type="range" min="5" max="10" step="0.01"&gt;</pre>
+#### Exemple 1
 
-<p>{{EmbedLiveSample("Exemple_1", 600, 40)}}</p>
+```html
+<input type="range" min="5" max="10" step="0.01">
+```
 
-<h4 id="Exemple_2">Exemple 2</h4>
+{{EmbedLiveSample("Exemple_1", 600, 40)}}
 
-<p>Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur <code>any</code> pour l'attribut <code>step</code> :</p>
+#### Exemple 2
 
-<pre class="brush: html">&lt;input type="range" min="0" max="3.14" step="any"&gt;</pre>
+Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur `any` pour l'attribut `step` :
 
-<p>{{EmbedLiveSample("Exemple_2", 600, 40)}}</p>
+```html
+<input type="range" min="0" max="3.14" step="any">
+```
 
-<p>Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans aucune restriction quant à la partie décimale.</p>
-</div>
+{{EmbedLiveSample("Exemple_2", 600, 40)}}
+
+Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans aucune restriction quant à la partie décimale.
 
-<h3 id="Ajouter_des_marques_et_des_étiquettes">Ajouter des marques et des étiquettes</h3>
+### Ajouter des marques et des étiquettes
 
-<p>La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut  {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle.</p>
+La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut  {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle.
 
-<h4 id="Aperçus">Aperçus</h4>
+#### Aperçus
 
-<p>La plupart des navigateurs prennent partiellement en charge ces fonctionnalités. Voici donc quelques aperçus du résultat qui peut être obtenu sur macOS avec un navigateur qui prend en charge chacune des fonctionnalités.</p>
+La plupart des navigateurs prennent partiellement en charge ces fonctionnalités. Voici donc quelques aperçus du résultat qui peut être obtenu sur macOS avec un navigateur qui prend en charge chacune des fonctionnalités.
 
-<h5 id="Un_contrôle_sans_marque">Un contrôle sans marque</h5>
+##### Un contrôle sans marque
 
-<p>Voici ce qu'on option lorsque le navigateur ne prend pas en charge cette fonctionnalité ou que l'attribut {{htmlattrxref("list", "input")}} est absent.</p>
+Voici ce qu'on option lorsque le navigateur ne prend pas en charge cette fonctionnalité ou que l'attribut {{htmlattrxref("list", "input")}} est absent.
 
 <table class="fullwidth standard-table">
- <tbody>
-  <tr>
-   <th>HTML</th>
-   <th>Aperçu</th>
-  </tr>
-  <tr>
-   <td>
-    <pre class="brush: html">
-&lt;input type="range"&gt;</pre>
-   </td>
-   <td><img alt="Capture d'écran d'un contrôle curseur sur macOS" src="macslider-plain.png"></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>HTML</th>
+      <th>Aperçu</th>
+    </tr>
+    <tr>
+      <td><pre class="brush: html">&#x3C;input type="range"></pre></td>
+      <td>
+        <img
+          alt="Capture d&#x27;écran d&#x27;un contrôle curseur sur macOS"
+          src="macslider-plain.png"
+        />
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h5 id="Un_contrôle_avec_des_marques">Un contrôle avec des marques</h5>
+##### Un contrôle avec des marques
 
-<p>Dans l'exemple qui suit, le contrôle utilise un attribut <code>list</code> qui indique l'identifiant d'un élément {{HTMLElement("datalist")}} qui définit un ensemble de marques à appliquer sur le contrôle. Il y en a ici 11 : une marque pour 0% puis une marque tous les 10%. Chaque point pour lequel on souhaite afficher une marque est représenté par un élément {{HTMLElement("option")}} dont la valeur de l'attribut {{htmlattrxref("value", "option")}} correspond à l'emplacement de la marque.</p>
+Dans l'exemple qui suit, le contrôle utilise un attribut `list` qui indique l'identifiant d'un élément {{HTMLElement("datalist")}} qui définit un ensemble de marques à appliquer sur le contrôle. Il y en a ici 11 : une marque pour 0% puis une marque tous les 10%. Chaque point pour lequel on souhaite afficher une marque est représenté par un élément {{HTMLElement("option")}} dont la valeur de l'attribut {{htmlattrxref("value", "option")}} correspond à l'emplacement de la marque.
 
 <table class="fullwidth standard-table">
- <tbody>
-  <tr>
-   <th>HTML</th>
-   <th>Aperçu</th>
-  </tr>
-  <tr>
-   <td>
-    <pre class="brush: html">
-&lt;input type="range" list="tickmarks"&gt;
-
-&lt;datalist id="tickmarks"&gt;
-  &lt;option value="0"&gt;
-  &lt;option value="10"&gt;
-  &lt;option value="20"&gt;
-  &lt;option value="30"&gt;
-  &lt;option value="40"&gt;
-  &lt;option value="50"&gt;
-  &lt;option value="60"&gt;
-  &lt;option value="70"&gt;
-  &lt;option value="80"&gt;
-  &lt;option value="90"&gt;
-  &lt;option value="100"&gt;
-&lt;/datalist&gt;
-</pre>
-   </td>
-   <td><img alt="Capture d'écran un contrôle curseur sur macOS" src="macslider-ticks.png"></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>HTML</th>
+      <th>Aperçu</th>
+    </tr>
+    <tr>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="range" list="tickmarks">
+
+&#x3C;datalist id="tickmarks">
+&#x3C;option value="0">
+&#x3C;option value="10">
+&#x3C;option value="20">
+&#x3C;option value="30">
+&#x3C;option value="40">
+&#x3C;option value="50">
+&#x3C;option value="60">
+&#x3C;option value="70">
+&#x3C;option value="80">
+&#x3C;option value="90">
+&#x3C;option value="100">
+&#x3C;/datalist>
+
+</pre
+        >
+      </td>
+      <td>
+        <img
+          alt="Capture d&#x27;écran un contrôle curseur sur macOS"
+          src="macslider-ticks.png"
+        />
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h5 id="Un_contrôle_avec_des_marques_et_des_étiquettes">Un contrôle avec des marques et des étiquettes</h5>
+##### Un contrôle avec des marques et des étiquettes
 
-<p>Il est possible d'ajouter des étiquettes grâce à l'attribut {{htmlattrxref("label", "option")}} des éléments {{HTMLElement("option")}} correspondants aux marques.</p>
+Il est possible d'ajouter des étiquettes grâce à l'attribut {{htmlattrxref("label", "option")}} des éléments {{HTMLElement("option")}} correspondants aux marques.
 
 <table class="fullwidth standard-table">
- <tbody>
-  <tr>
-   <th>HTML</th>
-   <th>Aperçu</th>
-  </tr>
-  <tr>
-   <td>
-    <pre class="brush: html">
-&lt;input type="range" list="tickmarks"&gt;
-
-&lt;datalist id="tickmarks"&gt;
-  &lt;option value="0" label="0%"&gt;
-  &lt;option value="10"&gt;
-  &lt;option value="20"&gt;
-  &lt;option value="30"&gt;
-  &lt;option value="40"&gt;
-  &lt;option value="50" label="50%"&gt;
-  &lt;option value="60"&gt;
-  &lt;option value="70"&gt;
-  &lt;option value="80"&gt;
-  &lt;option value="90"&gt;
-  &lt;option value="100" label="100%"&gt;
-&lt;/datalist&gt;
-</pre>
-   </td>
-   <td><img alt="Capture d'écran un contrôle curseur sur macOS" src="macslider-labels.png"></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>HTML</th>
+      <th>Aperçu</th>
+    </tr>
+    <tr>
+      <td>
+        <pre class="brush: html">
+&#x3C;input type="range" list="tickmarks">
+
+&#x3C;datalist id="tickmarks">
+&#x3C;option value="0" label="0%">
+&#x3C;option value="10">
+&#x3C;option value="20">
+&#x3C;option value="30">
+&#x3C;option value="40">
+&#x3C;option value="50" label="50%">
+&#x3C;option value="60">
+&#x3C;option value="70">
+&#x3C;option value="80">
+&#x3C;option value="90">
+&#x3C;option value="100" label="100%">
+&#x3C;/datalist>
+
+</pre
+        >
+      </td>
+      <td>
+        <img
+          alt="Capture d&#x27;écran un contrôle curseur sur macOS"
+          src="macslider-labels.png"
+        />
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-<p><strong>Note :</strong> Actuellement, aucun navigateur ne prend en charge l'ensemble de ces fonctionnalités. Firefox n'affiche aucune marque ni étiquette et Chrome affiche uniquement les marques mais pas les étiquettes. La version 66 (66.0.3359.181) de Chrome prendre en charge les étiquettes mais par défaut l'élément {{HTMLElement("datalist")}} est mis en forme avec CSS et {{cssxref("display")}}<code>: none;</code> , ce qui le masque. Il faut donc rajouter des règles de mises en forme spécifiques.</p>
-</div>
+> **Note :** Actuellement, aucun navigateur ne prend en charge l'ensemble de ces fonctionnalités. Firefox n'affiche aucune marque ni étiquette et Chrome affiche uniquement les marques mais pas les étiquettes. La version 66 (66.0.3359.181) de Chrome prendre en charge les étiquettes mais par défaut l'élément {{HTMLElement("datalist")}} est mis en forme avec CSS et {{cssxref("display")}}`: none;` , ce qui le masque. Il faut donc rajouter des règles de mises en forme spécifiques.
 
-<h3 id="Modifier_l'orientation_du_curseur">Modifier l'orientation du curseur</h3>
+### Modifier l'orientation du curseur
 
-<p>Par exemple :</p>
+Par exemple :
 
-<h4 id="horizontal">Horizontal</h4>
+#### Horizontal
 
-<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+```html
+<input type="range" id="volume" min="0" max="11" value="7" step="1">
+```
 
-<p>{{EmbedLiveSample("horizontal", 200, 200, "orientation_sample1.png")}}</p>
+{{EmbedLiveSample("horizontal", 200, 200, "orientation_sample1.png")}}
 
-<p>Le contrôle est ici horizontal, pour le rendre vertical, on pourra utiliser un peu de CSS afin de le rendre plus haut que large :</p>
+Le contrôle est ici horizontal, pour le rendre vertical, on pourra utiliser un peu de CSS afin de le rendre plus haut que large :
 
-<h4 id="vertical">Vertical</h4>
+#### Vertical
 
-<h5 id="CSS">CSS</h5>
+##### CSS
 
-<pre class="brush: css">#volume {
+```css
+#volume {
   height: 150px;
   width: 50px;
-}</pre>
-
-<h5 id="HTML">HTML</h5>
+}
+```
 
-<pre class="brush: html">&lt;input type="range" id="volume" min="0" max="11" value="7" step="1"&gt;</pre>
+##### HTML
 
-<h5 id="Result">Résultat</h5>
+```html
+<input type="range" id="volume" min="0" max="11" value="7" step="1">
+```
 
-<p>{{EmbedLiveSample("vertical", 200, 200, "orientation_sample2.png")}}</p>
+##### Résultat
 
-<p><strong>Currently, no major browsers support creating vertical range inputs using CSS this way, even though it's the way the specification recommends they do it.</strong></p>
+{{EmbedLiveSample("vertical", 200, 200, "orientation_sample2.png")}}
 
+**Currently, no major browsers support creating vertical range inputs using CSS this way, even though it's the way the specification recommends they do it.**
 
-<p>La spécification HTML recommande de dessiner les contrôles verticalement lorsque la hauteur de celui-ci est supérieure à la largeur. Malheureusement, aucun navigateur ne prend actuellement en charge cette fonctionnalité directement. On peut toutefois dessiner un contrôle vertical en appliquant une rotation sur un contrôle horizontal avec du code CSS et notamment {{cssxref("transform")}} pour tourner l'élément.</p>
+La spécification HTML recommande de dessiner les contrôles verticalement lorsque la hauteur de celui-ci est supérieure à la largeur. Malheureusement, aucun navigateur ne prend actuellement en charge cette fonctionnalité directement. On peut toutefois dessiner un contrôle vertical en appliquant une rotation sur un contrôle horizontal avec du code CSS et notamment {{cssxref("transform")}} pour tourner l'élément.
 
-<h4 id="Autre_exemple">Autre exemple</h4>
+#### Autre exemple
 
-<h5 id="HTML_2">HTML</h5>
+##### HTML
 
-<p>Il est nécessaire de placer l'élément {{HTMLElement("input")}} dans un élément {{HTMLElement("div")}} afin de corriger la disposition une fois la transformation appliquée :</p>
+Il est nécessaire de placer l'élément {{HTMLElement("input")}} dans un élément {{HTMLElement("div")}} afin de corriger la disposition une fois la transformation appliquée :
 
-<pre class="brush: html">&lt;div class="slider-wrapper"&gt;
-  &lt;input type="range" min="0" max="11" value="7" step="1"&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="slider-wrapper">
+  <input type="range" min="0" max="11" value="7" step="1">
+</div>
+```
 
-<h5 id="CSS_2">CSS</h5>
+##### CSS
 
-<p>Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément <code>div</code> qui indique le mode d'affichage et la taille qu'on souhaite avoir pour que la page soit correctement organisée..</p>
+Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément `div` qui indique le mode d'affichage et la taille qu'on souhaite avoir pour que la page soit correctement organisée..
 
-<pre class="brush: css">.slider-wrapper {
+```css
+.slider-wrapper {
   display: inline-block;
   width: 20px;
   height: 150px;
   padding: 0;
 }
-</pre>
-Ensuite, on applique une transformation sur l'élément <code>&lt;input&gt;</code> au sein de l'espace réservé par le <code>&lt;div&gt;</code> :
+```
+
+Ensuite, on applique une transformation sur l'élément `<input>` au sein de l'espace réservé par le `<div>` :
 
-<pre class="brush: css">.slider-wrapper input {
+```css
+.slider-wrapper input {
   width: 150px;
   height: 20px;
   margin: 0;
   transform-origin: 75px 75px;
   transform: rotate(-90deg);
-}</pre>
+}
+```
 
-<p>Le contrôle mesure alors 150 pixels de long et 20 pixels de haut. Les marges sont nulles et {{cssxref("transform-origin")}} est décalé vers le milieu du contrôle. Le contrôle mesurant 150 pixels de large, décaler le centre de rotation permet d'avoir la zone de destination centrée avec 75 pixels de chaque côté.</p>
+Le contrôle mesure alors 150 pixels de long et 20 pixels de haut. Les marges sont nulles et {{cssxref("transform-origin")}} est décalé vers le milieu du contrôle. Le contrôle mesurant 150 pixels de large, décaler le centre de rotation permet d'avoir la zone de destination centrée avec 75 pixels de chaque côté.
 
-<h5 id="Résultat">Résultat</h5>
+##### Résultat
 
-<p>{{EmbedLiveSample("Autre_exemple", 200, 200, "orientation_sample3.png")}}</p>
+{{EmbedLiveSample("Autre_exemple", 200, 200, "orientation_sample3.png")}}
 
-<h2 id="Validation">Validation</h2>
+## Validation
 
-<p>Il n'existe pas de motif de validation. Cependant, voici les formes de validation automatiques qui sont appliquées :</p>
+Il n'existe pas de motif de validation. Cependant, voici les formes de validation automatiques qui sont appliquées :
 
-<ul>
- <li>Si la valeur de l'attribut {{htmlattrxref("value", "input")}} est quelque chose qui ne peut pas être converti en nombre décimal, la validation échoue.</li>
- <li>La valeur ne doit pas être inférieure à {{htmlattrxref("min", "input")}}. La valeur minimale par défaut est 0.</li>
- <li>La valeur ne doit pas être supérieure à {{htmlattrxref("max", "input")}}. La valeur maximale par défaut est 0.</li>
- <li>La valeur doit être un multiple de {{htmlattrxref("step", "input")}}. La valeur par défaut est 1.</li>
-</ul>
+- Si la valeur de l'attribut {{htmlattrxref("value", "input")}} est quelque chose qui ne peut pas être converti en nombre décimal, la validation échoue.
+- La valeur ne doit pas être inférieure à {{htmlattrxref("min", "input")}}. La valeur minimale par défaut est 0.
+- La valeur ne doit pas être supérieure à {{htmlattrxref("max", "input")}}. La valeur maximale par défaut est 0.
+- La valeur doit être un multiple de {{htmlattrxref("step", "input")}}. La valeur par défaut est 1.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Pour compléter les exemples précédents, on pourra consulter l'article suivant :</p>
+Pour compléter les exemples précédents, on pourra consulter l'article suivant :
 
-<ul>
- <li><a href="/fr/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Contrôler plusieurs paramètres grâce à <code>ConstantSourceNode</code> (en anglais)</a></li>
-</ul>
+- [Contrôler plusieurs paramètres grâce à `ConstantSourceNode` (en anglais)](/fr/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode)
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui contient la représentation textuelle de la valeur numérique sélectionnée. On utilisera la méthode {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} afin d'obtenir la valeur sous forme numérique (type {{jsxref("Number")}}).</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{event("change")}} et {{event("input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}} et {{htmlattrxref("step", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>list</code>, <code>value</code> et <code>valueAsNumber</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} et {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui contient
+        la représentation textuelle de la valeur numérique sélectionnée. On
+        utilisera la méthode
+        {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}}
+        afin d'obtenir la valeur sous forme numérique (type
+        {{jsxref("Number")}}).
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>{{event("change")}} et {{event("input")}}</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}},
+        {{htmlattrxref("list", "input")}},
+        {{htmlattrxref("max", "input")}},
+        {{htmlattrxref("min", "input")}} et
+        {{htmlattrxref("step", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td>
+        <code>list</code>, <code>value</code> et <code>valueAsNumber</code>
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.stepDown", "stepDown()")}}
+        et {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '&lt;input type="range"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '&lt;input type="range"&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                    | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '&lt;input type="range"&gt;')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+| {{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '&lt;input type="range"&gt;')}}     | {{Spec2('HTML5.1')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-range")}}</p>
+{{Compat("html.elements.input.input-range")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li>
- <li>{{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}}</li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code></li>
-</ul>
+- [Les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires)
+- {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}}
+- [`<input type="number">`](/fr/docs/Web/HTML/Element/input/number)
diff --git a/files/fr/web/html/element/input/reset/index.md b/files/fr/web/html/element/input/reset/index.md
index 3b8ac2bf95..c05051aea7 100644
--- a/files/fr/web/html/element/input/reset/index.md
+++ b/files/fr/web/html/element/input/reset/index.md
@@ -8,157 +8,166 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/reset
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Les éléments {{HTMLElement("input")}} de type <strong><code>"reset"</code></strong> sont affichés sous la forme de boutons permettant de réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs initiales.</p>
+Les éléments {{HTMLElement("input")}} de type **`"reset"`** sont affichés sous la forme de boutons permettant de réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs initiales.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}
 
-<div class="note">
-<p><strong>Note :</strong> Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement.</p>
-</div>
+> **Note :** Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement.
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>La valeur de l'attribut <code>value</code> d'un élément <code>&lt;input type="reset"&gt;</code> contient une chaîne de caractères ({{domxref("DOMString")}}) utilisée comme texte sur le bouton.</p>
+La valeur de l'attribut `value` d'un élément `<input type="reset">` contient une chaîne de caractères ({{domxref("DOMString")}}) utilisée comme texte sur le bouton.
 
-<h3 id="Exemple_1">Exemple 1</h3>
-<pre class="brush: html">&lt;input type="reset" value="Réinitialiser le formulaire"&gt;</pre>
+### Exemple 1
 
-<p>{{EmbedLiveSample("Exemple_1", 650, 30)}}</p>
+```html
+<input type="reset" value="Réinitialiser le formulaire">
+```
 
-<p>Si aucune valeur n'est indiquée, le bouton aura le texte par défaut « Réinitialiser » :</p>
+{{EmbedLiveSample("Exemple_1", 650, 30)}}
 
-<h3 id="Exemple_2">Exemple 2</h3>
+Si aucune valeur n'est indiquée, le bouton aura le texte par défaut « Réinitialiser » :
 
-<pre class="brush: html">&lt;input type="reset"&gt;</pre>
+### Exemple 2
 
-<p>{{EmbedLiveSample("Exemple_2", 650, 30)}}</p>
+```html
+<input type="reset">
+```
 
-<h2 id="Utiliser_les_boutons_de_réinitialisation">Utiliser les boutons de réinitialisation</h2>
+{{EmbedLiveSample("Exemple_2", 650, 30)}}
 
-<p>Les boutons <code>&lt;input type="reset"&gt;</code> sont utilisés pour réinitialiser les formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement grâce à JavaScript, il est préférable d'utiliser un élément {{htmlelement("button")}} (voire un élément <code><a href="/fr/docs/Web/HTML/Element/input/button">&lt;input type="button"&gt;</a></code>).</p>
+## Utiliser les boutons de réinitialisation
 
-<h3 id="Un_bouton_simple">Un bouton simple</h3>
+Les boutons `<input type="reset">` sont utilisés pour réinitialiser les formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement grâce à JavaScript, il est préférable d'utiliser un élément {{htmlelement("button")}} (voire un élément [`<input type="button">`](/fr/docs/Web/HTML/Element/input/button)).
 
-<p>Commençons par créer un bouton de réinitialisation simple :</p>
+### Un bouton simple
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="example"&gt;Voici un champ&lt;/label&gt;
-    &lt;input id="example" type="text"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;input type="reset" value="Réinitialiser le formulaire"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;
-</pre>
+Commençons par créer un bouton de réinitialisation simple :
 
-<p>Voici le résultat obtenu :</p>
+```html
+<form>
+  <div>
+    <label for="example">Voici un champ</label>
+    <input id="example" type="text">
+  </div>
+  <div>
+    <input type="reset" value="Réinitialiser le formulaire">
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}</p>
+Voici le résultat obtenu :
 
-<p>Pour essayer, saisissez un peu de texte dans le champ puis appuyez sur le bouton de réinitialisation.</p>
+{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}
 
-<h3 id="Ajouter_un_raccourci_au_bouton">Ajouter un raccourci au bouton</h3>
+Pour essayer, saisissez un peu de texte dans le champ puis appuyez sur le bouton de réinitialisation.
 
-<p>Les raccourcis claviers permettent de déclencher un bouton grâce à une touche ou à une combinaison de touches sur le clavier. Pour ajouter un raccourci clavier à un bouton de réinitialisation, il suffit d'utiliser l'attribut {{htmlattrxref("accesskey")}}.</p>
+### Ajouter un raccourci au bouton
 
-<p>Dans cet exemple, on utilise la touche <kbd>r</kbd> (il faudra donc appuyer sur <kbd>r</kbd> et d'autres touches propres au navigateur et au système d'exploitation, se référer à {{htmlattrxref("accesskey")}} pour le détails).</p>
+Les raccourcis claviers permettent de déclencher un bouton grâce à une touche ou à une combinaison de touches sur le clavier. Pour ajouter un raccourci clavier à un bouton de réinitialisation, il suffit d'utiliser l'attribut {{htmlattrxref("accesskey")}}.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="example"&gt;Saisir un peu de texte&lt;/label&gt;
-    &lt;input id="example" type="text"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;input type="reset" value="Réinitialiser le formulaire"
-     accesskey="r"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+Dans cet exemple, on utilise la touche <kbd>r</kbd> (il faudra donc appuyer sur <kbd>r</kbd> et d'autres touches propres au navigateur et au système d'exploitation, se référer à {{htmlattrxref("accesskey")}} pour le détails).
 
-<p>{{EmbedLiveSample("Ajouter_un_raccourci_au_bouton", 650, 100)}}</p>
+```html
+<form>
+  <div>
+    <label for="example">Saisir un peu de texte</label>
+    <input id="example" type="text">
+  </div>
+  <div>
+    <input type="reset" value="Réinitialiser le formulaire"
+     accesskey="r">
+  </div>
+</form>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec le <em>design</em> du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site.</p>
-</div>
+{{EmbedLiveSample("Ajouter_un_raccourci_au_bouton", 650, 100)}}
 
-<h3 id="DésactiverActiver_un_bouton">Désactiver/Activer un bouton</h3>
+> **Note :** Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec le _design_ du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site.
 
-<p>Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attribut {{htmlattrxref("disabled")}} sur l'élément :</p>
+### Désactiver/Activer un bouton
 
-<pre class="brush: html">&lt;input type="reset" value="Désactivé" disabled&gt;</pre>
+Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attribut {{htmlattrxref("disabled")}} sur l'élément :
 
-<p>On peut activer/désactiver le bouton lors de la navigation sur la page avec JavaScript en modifiant la valeur de l'attribut <code>disabled</code> pour la passer de <code>true</code> à <code>false</code> et <em>vice versa</em> (par exemple avec une instruction telle que <code>btn.disabled = true</code>).</p>
+```html
+<input type="reset" value="Désactivé" disabled>
+```
 
-<div class="note">
-<p><strong>Note :</strong> Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page <code><a href="/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton">&lt;input type="button"&gt;</a></code>.</p>
-</div>
+On peut activer/désactiver le bouton lors de la navigation sur la page avec JavaScript en modifiant la valeur de l'attribut `disabled` pour la passer de `true` à `false` et _vice versa_ (par exemple avec une instruction telle que `btn.disabled = true`).
 
-<div class="note">
-<p><strong>Note :</strong> À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p>
-</div>
+> **Note :** Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page [`<input type="button">`](/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton).
 
-<h2 id="Validation">Validation</h2>
+> **Note :** À la différence des autres navigateurs, [Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing). L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.
 
-<p>Aucune fonctionnalité de vérification native côté client n'est implémentée pour les boutons de réinitialisation.</p>
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Validation
 
+Aucune fonctionnalité de vérification native côté client n'est implémentée pour les boutons de réinitialisation.
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères qui est utilisée comme intitulé pour le bouton.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{event("click")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("type", "input")}} et  {{htmlattrxref("value", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>value</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>Aucune</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères qui est utilisée comme intitulé pour le bouton.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>{{event("click")}}</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("type", "input")}} et 
+        {{htmlattrxref("value", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td><code>value</code></td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>Aucune</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td>Spécification</td>
-   <td>État</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#reset-button-state-(type=reset)', '&lt;input type="reset"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#reset-button-state-(type=reset)', '&lt;input type="reset"&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td>Spécification</td>
+      <td>État</td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('HTML WHATWG', 'forms.html#reset-button-state-(type=reset)', '&lt;input type="reset"&gt;')}}
+      </td>
+      <td>{{Spec2('HTML WHATWG')}}</td>
+    </tr>
+    <tr>
+      <td>
+        {{SpecName('HTML5 W3C', 'forms.html#reset-button-state-(type=reset)', '&lt;input type="reset"&gt;')}}
+      </td>
+      <td>{{Spec2('HTML5 W3C')}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-reset")}}</p>
+{{Compat("html.elements.input.input-reset")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}}.</li>
- <li>L'élément {{HTMLElement("button")}}</li>
- <li><a href="/fr/docs/Learn/HTML/Forms_and_buttons">Apprendre les formulaires et les boutons</a></li>
- <li><a href="/fr/docs/Web/Accessibility/ARIA/forms">L'accessibilité et les formulaires</a></li>
- <li><a href="/fr/docs/Learn/HTML/Forms">Les formulaires HTML</a></li>
-</ul>
+- L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}}.
+- L'élément {{HTMLElement("button")}}
+- [Apprendre les formulaires et les boutons](/fr/docs/Learn/HTML/Forms_and_buttons)
+- [L'accessibilité et les formulaires](/fr/docs/Web/Accessibility/ARIA/forms)
+- [Les formulaires HTML](/fr/docs/Learn/HTML/Forms)
diff --git a/files/fr/web/html/element/input/search/index.md b/files/fr/web/html/element/input/search/index.md
index ea54004693..a7bfd39ab4 100644
--- a/files/fr/web/html/element/input/search/index.md
+++ b/files/fr/web/html/element/input/search/index.md
@@ -7,253 +7,206 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/search
 ---
-<div>{{HTMLRef}}</div>
-
-<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>search</strong></code> permettent à un utilisateur de saisir des termes de recherche.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div>
-
-<h2 id="Valeur">Valeur</h2>
-
-<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du champ de recherche. En JavaScript, on peut récupérer cette information grâce à la propriété {{domxref("HTMLInputElement.value")}}.</p>
-
-<pre class="brush: js">maRecherche.value;
-</pre>
-
-<p>Si aucune contrainte de validation n'est imposée (cf. {{anch("Validation")}} pour plus de détails), la valeur peut être un texte ou une chaîne de caractères vide.</p>
-
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
-
-<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de recherche prennent en charge les attributs suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("maxlength")}}</code></td>
-   <td>Le nombre de caractères maximal qui peut être écrit dans ce champ.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("minlength")}}</code></td>
-   <td>Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("pattern")}}</code></td>
-   <td>Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("placeholder")}}</code></td>
-   <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("readonly")}}</code></td>
-   <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("size")}}</code></td>
-   <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("spellcheck")}}</code></td>
-   <td>Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée.</td>
-  </tr>
- </tbody>
-</table>
+{{HTMLRef}}
 
-<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3>
+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`search`** permettent à un utilisateur de saisir des termes de recherche.
 
-<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p>
+{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}
 
-<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte dépasse <code>maxlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+## Valeur
 
-<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3>
+La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du champ de recherche. En JavaScript, on peut récupérer cette information grâce à la propriété {{domxref("HTMLInputElement.value")}}.
 
-<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p>
+```js
+maRecherche.value;
+```
 
-<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte est inférieure à <code>minlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+Si aucune contrainte de validation n'est imposée (cf. {{anch("Validation")}} pour plus de détails), la valeur peut être un texte ou une chaîne de caractères vide.
 
-<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3>
+## Attributs supplémentaires
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de recherche prennent en charge les attributs suivants :
 
-<p>Voir <a href="#format">la section sur l'utilisation de cet attribut ci-après</a> pour plus d'exemples.</p>
+| Attribut                           | Description                                                                                                                                            |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `{{anch("maxlength")}}`     | Le nombre de caractères maximal qui peut être écrit dans ce champ.                                                                                     |
+| `{{anch("minlength")}}`     | Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.                                              |
+| `{{anch("pattern")}}`         | Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.                                                               |
+| `{{anch("placeholder")}}` | Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.                                                                              |
+| `{{anch("readonly")}}`     | Un attribut booléen qui indique si le contenu du champ est en lecture seule.                                                                           |
+| `{{anch("size")}}`             | Un nombre qui indique le nombre de caractères affichés par le champ.                                                                                   |
+| `{{anch("spellcheck")}}`     | Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée. |
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+### {{htmlattrdef("maxlength")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`.
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte dépasse `maxlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.
 
-<h3 id="htmlattrdef(spellcheck)">{{htmlattrdef("spellcheck")}}</h3>
+### {{htmlattrdef("minlength")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck-include")}}</p>
+Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à `maxlength`.
 
-<h2 id="Attributs_non-standard">Attributs non-standard</h2>
+Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte est inférieure à `minlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.
 
-<p>Les attributs non-standard suivants sont disponibles pour les champs de recherche. Toutefois, vu leur caractère spécifique, mieux vaut ne pas les utiliser.</p>
+### {{htmlattrdef("pattern")}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("autocorrect")}}</code></td>
-   <td>Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. <strong>Uniquement pris en charge par Safari.</strong></td>
-  </tr>
-  <tr>
-   <td><code>{{anch("incremental")}}</code></td>
-   <td>Cet attribut indique si des évènements {{event("search")}} doivent être envoyés afin de mettre à jour les résultats de la recherche tandis que l'utilisateur continue d'éditer la valeur du champ. <strong>Uniquement WebKit et Blink (Safari, Chrome, Opera, etc.).</strong></td>
-  </tr>
-  <tr>
-   <td><code>{{anch("mozactionhint")}}</code></td>
-   <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. <strong>Uniquement pris en charge par Firefox pour Android.</strong></td>
-  </tr>
-  <tr>
-   <td><code>{{anch("results")}}</code></td>
-   <td>Le nombre maximum d'éléments qui devraient être affichés comme recherches précédentes dans la liste déroulante du champ. <strong>Uniquement pris en charge par Safari.</strong></td>
-  </tr>
- </tbody>
-</table>
+{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}
+
+Voir [la section sur l'utilisation de cet attribut ci-après](#format) pour plus d'exemples.
+
+{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}
+
+{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}
+
+{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}
+
+### {{htmlattrdef("spellcheck")}}
+
+{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck-include")}}
+
+## Attributs non-standard
+
+Les attributs non-standard suivants sont disponibles pour les champs de recherche. Toutefois, vu leur caractère spécifique, mieux vaut ne pas les utiliser.
 
-<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+| Attribut                           | Description                                                                                                                                                                                                                                                                                                                                       |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("autocorrect")}}` | Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. **Uniquement pris en charge par Safari.**                                                                                                                                                                                                 |
+| `{{anch("incremental")}}` | Cet attribut indique si des évènements {{event("search")}} doivent être envoyés afin de mettre à jour les résultats de la recherche tandis que l'utilisateur continue d'éditer la valeur du champ. **Uniquement WebKit et Blink (Safari, Chrome, Opera, etc.).**                                                                             |
+| `{{anch("mozactionhint")}}` | Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. **Uniquement pris en charge par Firefox pour Android.** |
+| `{{anch("results")}}`         | Le nombre maximum d'éléments qui devraient être affichés comme recherches précédentes dans la liste déroulante du champ. **Uniquement pris en charge par Safari.**                                                                                                                                                                                |
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+### {{htmlattrdef("autocorrect")}} {{non-standard_inline}}
 
-<h3 id="htmlattrdef(incremental)_non-standard_inline">{{htmlattrdef("incremental")}} {{non-standard_inline}}</h3>
+{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}
 
-<p>Un attribut booléen spécifique à WebKit et Blink qui indique à l'agent utilisateur de traiter la recherche en continu. Lorsque cet attribut est présent et lorsque l'utilisateur édite la valeur du champ, l'agent utilisateur envoie des évènements {{event("search")}} sur l'objet {{domxref("HTMLInputElement")}} qui représente le champ de recherche. Ainsi, on peut gérer, avec du code, la mise à jour continue des résultats de recherche.</p>
+### {{htmlattrdef("incremental")}} {{non-standard_inline}}
 
-<p>Si l'attribut <code>incremental</code> n'est pas indiqué, l'évènement {{event("search")}} est uniquement envoyé lorsque l'tuilisateur déclenche la recherche (en appuyant sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> à l'édition du champ).</p>
+Un attribut booléen spécifique à WebKit et Blink qui indique à l'agent utilisateur de traiter la recherche en continu. Lorsque cet attribut est présent et lorsque l'utilisateur édite la valeur du champ, l'agent utilisateur envoie des évènements {{event("search")}} sur l'objet {{domxref("HTMLInputElement")}} qui représente le champ de recherche. Ainsi, on peut gérer, avec du code, la mise à jour continue des résultats de recherche.
 
-<p>La fréquence maximale à laquelle l'évènement <code>search</code> est envoyé est définie par chaque implémentation.</p>
+Si l'attribut `incremental` n'est pas indiqué, l'évènement {{event("search")}} est uniquement envoyé lorsque l'tuilisateur déclenche la recherche (en appuyant sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> à l'édition du champ).
 
-<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+La fréquence maximale à laquelle l'évènement `search` est envoyé est définie par chaque implémentation.
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
 
-<h3 id="htmlattrdef(results)_non-standard_inline">{{htmlattrdef("results")}} {{non-standard_inline}}</h3>
+{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}
 
-<p>L'attribut <code>results</code>, spécifique à Safari, est une valeur numérique qui permet de surcharger la valeur maximale du nombre de recherches précédentes affichées dans la liste déroulante des suggestions.</p>
+### {{htmlattrdef("results")}} {{non-standard_inline}}
 
-<p>Cette valeur doit être un nombre positif. Si cet attribut n'est pas fourni, ou que sa valeur est invalide, ce sera le maximum fourni par le navigateur qui sera utilisé.</p>
+L'attribut `results`, spécifique à Safari, est une valeur numérique qui permet de surcharger la valeur maximale du nombre de recherches précédentes affichées dans la liste déroulante des suggestions.
 
-<h2 id="Utiliser_un_champ_de_recherche">Utiliser un champ de recherche</h2>
+Cette valeur doit être un nombre positif. Si cet attribut n'est pas fourni, ou que sa valeur est invalide, ce sera le maximum fourni par le navigateur qui sera utilisé.
 
-<p>Les éléments <code>&lt;input&gt;</code> de type <code>search</code> sont semblables aux éléments <code>&lt;input&gt;</code> de type <code>text</code> mais sont spécifiquement destinés à la gestion des termes d'une recherche.</p>
+## Utiliser un champ de recherche
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+Les éléments `<input>` de type `search` sont semblables aux éléments `<input>` de type `text` mais sont spécifiquement destinés à la gestion des termes d'une recherche.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;input type="search" id="maRecherche" name="q"&gt;
-    &lt;button&gt;Rechercher&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+### Exemple simple
 
-<p>Cet exemple produira le résultat suivant :</p>
+```html
+<form>
+  <div>
+    <input type="search" id="maRecherche" name="q">
+    <button>Rechercher</button>
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample("Exemple_simple", 600, 40)}}</p>
+Cet exemple produira le résultat suivant :
 
-<p><code>q</code> est la valeur standard utilisé pour l'attribut <code>name</code> des champs de recherche. Lorsque le formulaire est envoyée, les données envoyées au serveur auront la forme <code>q=termederecherche</code>. Il est nécessaire de fournir un nom (c'est-à-dire un attribut <code>name</code>) à un champ, sinon aucune information ne sera envoyée lors de l'envoi du formulaire.</p>
+{{EmbedLiveSample("Exemple_simple", 600, 40)}}
 
-<div class="note">
-<p><strong>Note :</strong> Il est toujours nécessaire de fournir une valeur pour l'attribut {{htmlattrxref("name","input")}} car sinon aucune valeur ne sera envoyée.</p>
-</div>
+`q` est la valeur standard utilisé pour l'attribut `name` des champs de recherche. Lorsque le formulaire est envoyée, les données envoyées au serveur auront la forme `q=termederecherche`. Il est nécessaire de fournir un nom (c'est-à-dire un attribut `name`) à un champ, sinon aucune information ne sera envoyée lors de l'envoi du formulaire.
 
-<h3 id="Différences_entre_les_champs_de_recherche_et_les_champs_texte">Différences entre les champs de recherche et les champs texte</h3>
+> **Note :** Il est toujours nécessaire de fournir une valeur pour l'attribut {{htmlattrxref("name","input")}} car sinon aucune valeur ne sera envoyée.
 
-<p>La différence principale est la façon dont les navigateurs gèrent cet élément. Premièrement, certains navigateurs affiche une icône de croix dans la zone de saisie qui peut être utilisée pour retirer le terme de la recherche. Voici par exemple un aperçu de la fonctionnalité sous Chrome:</p>
+### Différences entre les champs de recherche et les champs texte
 
-<p><img alt="" src="chrome-cross-icon.png"></p>
+La différence principale est la façon dont les navigateurs gèrent cet élément. Premièrement, certains navigateurs affiche une icône de croix dans la zone de saisie qui peut être utilisée pour retirer le terme de la recherche. Voici par exemple un aperçu de la fonctionnalité sous Chrome:
 
-<p>De plus, les navigateurs modernes proposent souvent une auto-complétion basée sur les termes de recherche déjà utilisés sur le site. Ainsi, quand on réutilise le champ, différentes suggestions peuvent être affichées et utilisées. Voici l'aperçu de cette fonctionnalité sous Firefox :</p>
+![](chrome-cross-icon.png)
 
-<p><img alt="" src="firefox-auto-complete.png"></p>
+De plus, les navigateurs modernes proposent souvent une auto-complétion basée sur les termes de recherche déjà utilisés sur le site. Ainsi, quand on réutilise le champ, différentes suggestions peuvent être affichées et utilisées. Voici l'aperçu de cette fonctionnalité sous Firefox :
 
-<h3 id="Ajouter_un_texte_indicatif">Ajouter un texte indicatif</h3>
+![](firefox-auto-complete.png)
 
-<p>Il est possible de fournir un texte indicatif dans le champ de recherche afin de fournir une indication quant aux recherches qu'il est possible de faire. Pour cela, on ajoutera un texte avec l'attribut {{htmlattrxref("placeholder","")}}. Par exemple :</p>
+### Ajouter un texte indicatif
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;input type="search" id="maRecherche" name="q"
-     placeholder="Rechercher sur le site…"&gt;
-    &lt;button&gt;Rechercher&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+Il est possible de fournir un texte indicatif dans le champ de recherche afin de fournir une indication quant aux recherches qu'il est possible de faire. Pour cela, on ajoutera un texte avec l'attribut {{htmlattrxref("placeholder","")}}. Par exemple :
 
-<p>Voici le résultat obtenu avec ce fragment HTML :</p>
+```html
+<form>
+  <div>
+    <input type="search" id="maRecherche" name="q"
+     placeholder="Rechercher sur le site…">
+    <button>Rechercher</button>
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample("Ajouter_un_texte_indicatif", 600, 40)}}</p>
+Voici le résultat obtenu avec ce fragment HTML :
 
-<h3 id="Les_champs_de_recherche_et_l’accessibilité">Les champs de recherche et l’accessibilité</h3>
+{{EmbedLiveSample("Ajouter_un_texte_indicatif", 600, 40)}}
 
-<p>Un des problèmes posé par les formulaires de recherche est leur accessibilité. En effet, dans la plupart des situations, il n'est pas nécessaire de fournir une étiquette indiquant le rôle de la recherche car le placement du champ rend son rôle clair (<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">voici un exemple</a>).</p>
+### Les champs de recherche et l’accessibilité
 
-<p>En revanche, pour les personnes qui utilisent des technologies assistives, cela peut être source de confusion. Une façon de résoudre ce problème sans modifier l'organisation visuelle est d'utiliser les fonctionnalités <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> :</p>
+Un des problèmes posé par les formulaires de recherche est leur accessibilité. En effet, dans la plupart des situations, il n'est pas nécessaire de fournir une étiquette indiquant le rôle de la recherche car le placement du champ rend son rôle clair ([voici un exemple](https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/)).
 
-<ul>
- <li>Utiliser un attribut <code>role</code> avec la valeur <code>search</code> sur l'élément <code>&lt;form&gt;</code> permettra aux lecteurs d'écran d'indiquer le formulaire comme étant un formulaire de recherche.</li>
- <li>Si cela n'est pas suffisant, il est possible d'utiliser l'attribut <code>aria-label</code> sur l'élément <code>&lt;input&gt;</code>. Cet attribut peut contenir un texte descriptif qui sera lu à voix haute par un lecteur d'écran. Il s'agit d'un équivalent non-visuel de <code>&lt;label&gt;</code>.</li>
-</ul>
+En revanche, pour les personnes qui utilisent des technologies assistives, cela peut être source de confusion. Une façon de résoudre ce problème sans modifier l'organisation visuelle est d'utiliser les fonctionnalités [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) :
 
-<p>Prenons un exemple :</p>
+- Utiliser un attribut `role` avec la valeur `search` sur l'élément `<form>` permettra aux lecteurs d'écran d'indiquer le formulaire comme étant un formulaire de recherche.
+- Si cela n'est pas suffisant, il est possible d'utiliser l'attribut `aria-label` sur l'élément `<input>`. Cet attribut peut contenir un texte descriptif qui sera lu à voix haute par un lecteur d'écran. Il s'agit d'un équivalent non-visuel de `<label>`.
 
-<pre class="brush: html">&lt;form role="search"&gt;
-  &lt;div&gt;
-    &lt;input type="search" id="maRecherche" name="q"
+Prenons un exemple :
+
+```html
+<form role="search">
+  <div>
+    <input type="search" id="maRecherche" name="q"
      placeholder="Rechercher sur le site…"
-     aria-label="Rechercher parmi le contenu du site"&gt;
-    &lt;button&gt;Rechercher&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+     aria-label="Rechercher parmi le contenu du site">
+    <button>Rechercher</button>
+  </div>
+</form>
+```
 
-<p>Voici le résultat obtenu grâce à ce fragment de HTML :</p>
+Voici le résultat obtenu grâce à ce fragment de HTML :
 
-<p>{{EmbedLiveSample("Les_champs_de_recherche_et_l’accessibilité", 600, 40)}}</p>
+{{EmbedLiveSample("Les_champs_de_recherche_et_l’accessibilité", 600, 40)}}
 
-<p>Il n'y a aucune différence visuelle avec l'exemple précédent mais avec cette deuxième version, les personnes qui utilisent un lecteur d'écran disposeront de plus d'informations.</p>
+Il n'y a aucune différence visuelle avec l'exemple précédent mais avec cette deuxième version, les personnes qui utilisent un lecteur d'écran disposeront de plus d'informations.
 
-<div class="note">
-<p><strong>Note :</strong> Voir <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">Signposts/Landmarks</a> pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité.</p>
-</div>
+> **Note :** Voir [Signposts/Landmarks](/fr/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks) pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité.
 
-<h3 id="Paramétrer_la_taille_physique">Paramétrer la taille physique</h3>
+### Paramétrer la taille physique
 
-<p>Il est possible de contrôler la taille physique du champ de saisie grâce à l'attribut {{htmlattrxref("size", "input")}}. Cet attribut permet d'indiquer le nombre de caractères qui peuvent être affichés simultanément à l'intérieur du champ. Ainsi, dans l'exemple qui suit, la zone de recherche peut contenir 20 caractères :</p>
+Il est possible de contrôler la taille physique du champ de saisie grâce à l'attribut {{htmlattrxref("size", "input")}}. Cet attribut permet d'indiquer le nombre de caractères qui peuvent être affichés simultanément à l'intérieur du champ. Ainsi, dans l'exemple qui suit, la zone de recherche peut contenir 20 caractères :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;input type="search" id="maRecherche" name="q"
-    placeholder="Rechercher sur le site…" size="30"&gt;
-    &lt;button&gt;Rechercher&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <input type="search" id="maRecherche" name="q"
+    placeholder="Rechercher sur le site…" size="30">
+    <button>Rechercher</button>
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample('Paramétrer_la_taille_physique', 600, 40)}}</p>
+{{EmbedLiveSample('Paramétrer_la_taille_physique', 600, 40)}}
 
-<h2 id="Validation">Validation</h2>
+## Validation
 
-<p>Les éléments <code>&lt;input&gt;</code> de type <code>search</code> possèdent les mêmes fonctionnalités de validation que les éléments <code>&lt;input type="text"&gt;</code>. Il existe peu de raison de contraindre les termes d'une recherche mais voici quelques cas.</p>
+Les éléments `<input>` de type `search` possèdent les mêmes fonctionnalités de validation que les éléments `<input type="text">`. Il existe peu de raison de contraindre les termes d'une recherche mais voici quelques cas.
 
-<div class="note">
-<p><strong>Note :</strong> Attention, la validation des données d'un formulaire de recherche HTML par le client ne doit pas remplacer la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles.</p>
-</div>
+> **Note :** Attention, la validation des données d'un formulaire de recherche HTML par le client ne doit pas remplacer la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles.
 
-<h3 id="Une_note_sur_la_mise_en_forme">Une note sur la mise en forme</h3>
+### Une note sur la mise en forme
 
-<p>Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} permettent de mettre en forme les éléments d'un formulaire en fonction de la validité de leur contenu. Dans cette section, nous utiliserons la feuille de style suivante afin de placer une coche à côté des champs valides et une croix à côté des champs invalides.</p>
+Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} permettent de mettre en forme les éléments d'un formulaire en fonction de la validité de leur contenu. Dans cette section, nous utiliserons la feuille de style suivante afin de placer une coche à côté des champs valides et une croix à côté des champs invalides.
 
-<pre class="brush: css">input:invalid ~ span:after {
+```css
+input:invalid ~ span:after {
   content: '✖';
   padding-left: 5px;
   position: absolute;
@@ -263,24 +216,28 @@ input:valid ~ span:after {
   content: '✓';
   padding-left: 5px;
   position: absolute
-}</pre>
+}
+```
 
-<p>Vous pouvez ici voir qu'on utilise un élément {{htmlelement("span")}} placé après l'élément du formulaire, c'est cet élément <code>&lt;span&gt;</code> qui contiendra les icônes. Cet élément est nécessaire car, sur certains navigateurs, les pseudo-classes dans les éléments de saisie sont mal gérées.</p>
+Vous pouvez ici voir qu'on utilise un élément {{htmlelement("span")}} placé après l'élément du formulaire, c'est cet élément `<span>` qui contiendra les icônes. Cet élément est nécessaire car, sur certains navigateurs, les pseudo-classes dans les éléments de saisie sont mal gérées.
 
-<h3 id="Rendre_le_champ_obligatoire">Rendre le champ obligatoire</h3>
+### Rendre le champ obligatoire
 
-<p>Il est possible d'utiliser l'attribut {{htmlattrxref("required","input")}} afin d'indiquer que la valeur doit obligatoirement être saisie avant d'envoyer le formulaire :</p>
+Il est possible d'utiliser l'attribut {{htmlattrxref("required","input")}} afin d'indiquer que la valeur doit obligatoirement être saisie avant d'envoyer le formulaire :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;input type="search" id="maRecherche" name="q"
-    placeholder="Recherche sur le site…" required&gt;
-    &lt;button&gt;Rechercher&lt;/button&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <input type="search" id="maRecherche" name="q"
+    placeholder="Recherche sur le site…" required>
+    <button>Rechercher</button>
+    <span class="validity"></span>
+  </div>
+</form>
+```
 
-<pre class="brush: css hidden">input {
+```css hidden
+input {
   margin-right: 10px;
 }
 
@@ -294,36 +251,40 @@ input:valid ~ span:after {
   content: '✓';
   padding-left: 5px;
   position: absolute;
-}</pre>
+}
+```
 
-<p>Voici le résultat obtenu :</p>
+Voici le résultat obtenu :
 
-<p>{{EmbedLiveSample('Rendre_le_champ_obligatoire', 600, 40)}}</p>
+{{EmbedLiveSample('Rendre_le_champ_obligatoire', 600, 40)}}
 
-<p>De plus, si on essaie d'envoyer le formulaire sans aucun terme de recherche, le navigateur affichera un message. Voici par exemple, le résultat dans Firefox :</p>
+De plus, si on essaie d'envoyer le formulaire sans aucun terme de recherche, le navigateur affichera un message. Voici par exemple, le résultat dans Firefox :
 
-<p><img alt="Champ de formulaire avec un message attaché indiquant 'veuillez remplir ce formulaire'" src="firefox-required-message.png"></p>
+![Champ de formulaire avec un message attaché indiquant 'veuillez remplir ce formulaire'](firefox-required-message.png)
 
-<p>Différents messages peuvent être affichés selon le type d'erreur liée à la saisie.</p>
+Différents messages peuvent être affichés selon le type d'erreur liée à la saisie.
 
-<h3 id="Contraindre_la_taille_de_la_valeur_saisie">Contraindre la taille de la valeur saisie</h3>
+### Contraindre la taille de la valeur saisie
 
-<p>Il est possible d'indiquer une taille minimale pour la longueur des termes de la recherche via l'attribut {{htmlattrxref("minlength", "input")}}. De même, on peut fixer la longueur maximale du texte qui peut être saisi pour la recherche grâce à l'attribut {{htmlattrxref("maxlength", "input")}}. Ces deux attributs sont exprimés en nombres de caractères.</p>
+Il est possible d'indiquer une taille minimale pour la longueur des termes de la recherche via l'attribut {{htmlattrxref("minlength", "input")}}. De même, on peut fixer la longueur maximale du texte qui peut être saisi pour la recherche grâce à l'attribut {{htmlattrxref("maxlength", "input")}}. Ces deux attributs sont exprimés en nombres de caractères.
 
-<p>Dans l'exemple qui suit, la valeur saisie dans le champ de recherche doit mesurer entre 4 et 8 caractères.</p>
+Dans l'exemple qui suit, la valeur saisie dans le champ de recherche doit mesurer entre 4 et 8 caractères.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="mySearch"&gt;Rechercher un utilisateur&lt;/label&gt;
-    &lt;input type="search" id="mySearch" name="q"
+```html
+<form>
+  <div>
+    <label for="mySearch">Rechercher un utilisateur</label>
+    <input type="search" id="mySearch" name="q"
     placeholder="ID de 4 à 8 char." required
-    size="30" minlength="4" maxlength="8"&gt;
-    &lt;button&gt;Rechercher&lt;/button&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
-
-<pre class="brush: css hidden">input {
+    size="30" minlength="4" maxlength="8">
+    <button>Rechercher</button>
+    <span class="validity"></span>
+  </div>
+</form>
+```
+
+```css hidden
+input {
   margin-right: 10px;
 }
 
@@ -337,32 +298,36 @@ input:valid ~ span:after {
   content: '✓';
   padding-left: 5px;
   position: absolute;
-}</pre>
+}
+```
 
-<p>Voici le résultat obtenu avec ce fragment de code HTML :</p>
+Voici le résultat obtenu avec ce fragment de code HTML :
 
-<p>{{EmbedLiveSample('Contraindre_la_taille_de_la_valeur_saisie', 600, 40)}}</p>
+{{EmbedLiveSample('Contraindre_la_taille_de_la_valeur_saisie', 600, 40)}}
 
-<p>Si vous essayez de soumettre une valeur qui est plus petite que 4 caractères, vous aurez un message d'erreur (qui peut varier selon le navigateur utilisé). De plus, le navigateur ne permettra pas de saisir un texte plus long que 8 caractères.</p>
+Si vous essayez de soumettre une valeur qui est plus petite que 4 caractères, vous aurez un message d'erreur (qui peut varier selon le navigateur utilisé). De plus, le navigateur ne permettra pas de saisir un texte plus long que 8 caractères.
 
-<h3 id="Indiquer_un_motif">Indiquer un motif</h3>
+### Indiquer un motif
 
-<p>L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que doit respecter la valeur saisie pour être considérée valide (cf. <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire#Contraintes_de_validation_sur_les_éléments_&lt;input>">Valider une valeur avec une expression rationnelle</a> pour une introduction).</p>
+L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que doit respecter la valeur saisie pour être considérée valide (cf. [Valider une valeur avec une expression rationnelle](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire#Contraintes_de_validation_sur_les_éléments_<input>) pour une introduction).
 
-<p>Prenons un exemple. Imaginons qu'on veuille rechercher un produit grâce à son identifiant et que les identifiants commencent par deux lettres, suivies de 4 chiffres. Dans l'exemple qui suit, le formulaire n'accepte qu'une valeur dont la taille est comprise entre 4 et 8 caractères et qui commence par deux lettres puis termine par 4 chiffres.</p>
+Prenons un exemple. Imaginons qu'on veuille rechercher un produit grâce à son identifiant et que les identifiants commencent par deux lettres, suivies de 4 chiffres. Dans l'exemple qui suit, le formulaire n'accepte qu'une valeur dont la taille est comprise entre 4 et 8 caractères et qui commence par deux lettres puis termine par 4 chiffres.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="mySearch"&gt;Rechercher un produit par son code :&lt;/label&gt;
-    &lt;input type="search" id="mySearch" name="q"
+```html
+<form>
+  <div>
+    <label for="mySearch">Rechercher un produit par son code :</label>
+    <input type="search" id="mySearch" name="q"
     placeholder="2 lettres puis 4 chiffres" required
-    size="30" pattern="[A-z]{2}[0-9]{4}"&gt;
-    &lt;button&gt;Rechercher&lt;/button&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
-
-<pre class="brush: css hidden">input {
+    size="30" pattern="[A-z]{2}[0-9]{4}">
+    <button>Rechercher</button>
+    <span class="validity"></span>
+  </div>
+</form>
+```
+
+```css hidden
+input {
   margin-right: 10px;
 }
 
@@ -376,75 +341,72 @@ input:valid ~ span:after {
   content: '✓';
   padding-left: 5px;
   position: absolute;
-}</pre>
+}
+```
 
-<p>Voici le résultat obtenu avec ce fragment HTML :</p>
+Voici le résultat obtenu avec ce fragment HTML :
 
-<p>{{EmbedLiveSample('Indiquer_un_motif', 600, 40)}}</p>
+{{EmbedLiveSample('Indiquer_un_motif', 600, 40)}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Vous pouvez consulter un exemple de formulaire de recherche dans notre exemple <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">voir la démonstration <em>live</em></a>).</p>
+Vous pouvez consulter un exemple de formulaire de recherche dans notre exemple [website-aria-roles](https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles) ([voir la démonstration _live_](http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/)).
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur contenue dans le champ de recherche.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>value</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui
+        représente la valeur contenue dans le champ de recherche.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>
+        {{domxref("HTMLElement/change_event", "change")}} et
+        {{domxref("HTMLElement/input_event", "input")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}},
+        {{htmlattrxref("list", "input")}},
+        {{htmlattrxref("maxlength", "input")}},
+        {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td><code>value</code></td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}},
+        {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}},
+        {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="search"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="search"&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="search"&gt;')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+| {{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="search"&gt;')}}         | {{Spec2('HTML5.1')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-search")}}</p>
+{{Compat("html.elements.input.input-search")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li>
- <li>{{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} DOM qu'il implémente</li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code></li>
-</ul>
+- [Les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires)
+- {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} DOM qu'il implémente
+- [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text)
diff --git a/files/fr/web/html/element/input/submit/index.md b/files/fr/web/html/element/input/submit/index.md
index 0dea8aeac7..01d495d09b 100644
--- a/files/fr/web/html/element/input/submit/index.md
+++ b/files/fr/web/html/element/input/submit/index.md
@@ -9,263 +9,224 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/submit
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"submit"</code></strong> sont affichés comme des boutons permettant d'envoyer les données d'un formulaire. Cliquer sur un tel bouton déclenchera l'envoi des données du formulaire vers le serveur.</p>
+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"submit"`** sont affichés comme des boutons permettant d'envoyer les données d'un formulaire. Cliquer sur un tel bouton déclenchera l'envoi des données du formulaire vers le serveur.
 
-<h2 id="Exemple_simple">Exemple simple</h2>
+## Exemple simple
 
-<pre class="brush: html">&lt;input type="submit" value="Envoyer le formulaire"&gt;</pre>
+```html
+<input type="submit" value="Envoyer le formulaire">
+```
 
-<p>{{EmbedLiveSample("Exemple_simple", 650, 30)}}</p>
+{{EmbedLiveSample("Exemple_simple", 650, 30)}}
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} d'un élément <code>&lt;input type="submit"&gt;</code> contient une chaîne de caractères ({{domxref("DOMString")}}) qui est utilisée comme étiquette pour le bouton.</p>
+La valeur de l'attribut {{htmlattrxref("value", "input")}} d'un élément `<input type="submit">` contient une chaîne de caractères ({{domxref("DOMString")}}) qui est utilisée comme étiquette pour le bouton.
 
-<p>Si on n'indique aucune valeur, ce sera un texte par défaut (dépendant du navigateur) qui sera utilisé ainsi que du système d'éxploitation:</p>
+Si on n'indique aucune valeur, ce sera un texte par défaut (dépendant du navigateur) qui sera utilisé ainsi que du système d'éxploitation:
 
-<h3 id="Exemple_avec_valeur_par_défaut">Exemple avec valeur par défaut</h3>
+### Exemple avec valeur par défaut
 
-<pre class="brush: html">&lt;input type="submit"&gt;</pre>
+```html
+<input type="submit">
+```
 
-<p>{{EmbedLiveSample("Exemple_avec_valeur_par_défaut", 650, 30)}}</p>
+{{EmbedLiveSample("Exemple_avec_valeur_par_défaut", 650, 30)}}
 
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+## Attributs supplémentaires
 
-<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons <code>"submit"</code> permettent d'utiliser les attributs suivants :</p>
+En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons `"submit"` permettent d'utiliser les attributs suivants :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("formaction")}}</code></td>
-   <td>L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("formenctype")}}</code></td>
-   <td>Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("formmethod")}}</code></td>
-   <td>La méthode HTTP ({{HTTPMethod("get")}} ou {{HTTPMethod("post")}}) à utiliser pour envoyer le formulaire.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("formnovalidate")}}</code></td>
-   <td>Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">aux contraintes de validation</a> avant l'envoi des données au serveur.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("formtarget")}}</code></td>
-   <td>Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire.</td>
-  </tr>
- </tbody>
-</table>
+| Attribut                               | Description                                                                                                                                                                                                               |
+| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("formaction")}}`         | L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini.                                                  |
+| `{{anch("formenctype")}}`     | Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire.                                                                                                                        |
+| `{{anch("formmethod")}}`         | La méthode HTTP ({{HTTPMethod("get")}} ou {{HTTPMethod("post")}}) à utiliser pour envoyer le formulaire.                                                                                                     |
+| `{{anch("formnovalidate")}}` | Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis [aux contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) avant l'envoi des données au serveur. |
+| `{{anch("formtarget")}}`         | Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire.                                                                                                                    |
 
-<h3 id="htmlattrdef(formaction)">{{htmlattrdef("formaction")}}</h3>
+### {{htmlattrdef("formaction")}}
 
-<p>Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ <code>&lt;input&gt;</code>.</p>
+Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ `<input>`.
 
-<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+Cet attribut est également disponible pour les éléments [`<input type="image">`](/fr/docs/Web/HTML/Element/input/image) et {{HTMLElement("button")}}.
 
-<h3 id="htmlattrdef(formenctype)">{{htmlattrdef("formenctype")}}</h3>
+### {{htmlattrdef("formenctype")}}
 
-<p>Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées :</p>
+Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées :
 
-<dl>
- <dt><code>application/x-www-form-urlencoded</code></dt>
- <dd>Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. <strong>Cette valeur est la valeur par défaut.</strong></dd>
- <dt><code>multipart/form-data</code></dt>
- <dd>Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'<em>uploader</em>des fichiers. Cet encodage <em>doit</em> être utilisé s'il y a des éléments  {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} <code>"file"</code> (<code><a href="/fr/docs/Web/HTML/Element/input/file">&lt;input type="file"&gt;</a></code>).</dd>
- <dt><code>text/plain</code></dt>
- <dd>Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées.</dd>
-</dl>
+- `application/x-www-form-urlencoded`
+  - : Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. **Cette valeur est la valeur par défaut.**
+- `multipart/form-data`
+  - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments  {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)).
+- `text/plain`
+  - : Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées.
 
-<p>Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.</p>
+Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.
 
-<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+Cet attribut est également disponible pour les éléments [`<input type="image">`](/fr/docs/Web/HTML/Element/input/image) et {{HTMLElement("button")}}.
 
-<h3 id="htmlattrdef(formmethod)">{{htmlattrdef("formmethod")}}</h3>
+### {{htmlattrdef("formmethod")}}
 
-<p>Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont :</p>
+Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont :
 
-<dl>
- <dt><code>get</code></dt>
- <dd>Une URL est construite en commençant avec l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec <code>formenctype</code> ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. <strong>C'est la valeur par défaut.</strong></dd>
- <dt><code>post</code></dt>
- <dd>Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour <code>get</code>) et les pièces jointes sous forme de fichiers.</dd>
- <dt><code>dialog</code></dt>
- <dd>Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise.</dd>
-</dl>
+- `get`
+  - : Une URL est construite en commençant avec l'URL fournie par l'attribut `formaction` ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec `formenctype` ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. **C'est la valeur par défaut.**
+- `post`
+  - : Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut `formaction` ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour `get`) et les pièces jointes sous forme de fichiers.
+- `dialog`
+  - : Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise.
 
-<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+Cet attribut est également disponible pour les éléments [`<input type="image">`](/fr/docs/Web/HTML/Element/input/image) et {{HTMLElement("button")}}.
 
-<h3 id="htmlattrdef(formnovalidate)">{{htmlattrdef("formnovalidate")}}</h3>
+### {{htmlattrdef("formnovalidate")}}
 
-<p>Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent.</p>
+Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent.
 
-<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+Cet attribut est également disponible pour les éléments [`<input type="image">`](/fr/docs/Web/HTML/Element/input/image) et {{HTMLElement("button")}}.
 
-<h3 id="htmlattrdef(formtarget)">{{htmlattrdef("formtarget")}}</h3>
+### {{htmlattrdef("formtarget")}}
 
-<p>Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom <strong>d'un contexte de navigation</strong> (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent.</p>
+Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom **d'un contexte de navigation** (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent.
 
-<p>En complément des noms des onglets, fenêtres, <em>iframes</em>, quelques mots-clés spéciaux peuvent être utilisés :</p>
+En complément des noms des onglets, fenêtres, _iframes_, quelques mots-clés spéciaux peuvent être utilisés :
 
-<dl>
- <dt><code>_self</code></dt>
- <dd>La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. <strong>Cette valeur est la valeur par défaut.</strong></dd>
- <dt><code>_blank</code></dt>
- <dd>La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur.</dd>
- <dt><code>_parent</code></dt>
- <dd>La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de <code>"_self"</code>.</dd>
- <dt><code>_top</code></dt>
- <dd>La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de <code>"_self"</code>.</dd>
-</dl>
+- `_self`
+  - : La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. **Cette valeur est la valeur par défaut.**
+- `_blank`
+  - : La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur.
+- `_parent`
+  - : La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de `"_self"`.
+- `_top`
+  - : La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de `"_self"`.
 
-<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>
+Cet attribut est également disponible pour les éléments [`<input type="image">`](/fr/docs/Web/HTML/Element/input/image) et {{HTMLElement("button")}}.
 
-<h2 id="Utiliser_les_boutons_d'envoi">Utiliser les boutons d'envoi</h2>
+## Utiliser les boutons d'envoi
 
-<p>Les boutons <code>&lt;input type="submit"&gt;</code> sont utilisés afin d'envoyer des formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement avec JavaScript, il sera préférable d'utiliser un élément {{HTMLElement("button")}} ou un élément <code><a href="/fr/docs/Web/HTML/Element/input/button">&lt;input type="button"&gt;</a></code>.</p>
+Les boutons `<input type="submit">` sont utilisés afin d'envoyer des formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement avec JavaScript, il sera préférable d'utiliser un élément {{HTMLElement("button")}} ou un élément [`<input type="button">`](/fr/docs/Web/HTML/Element/input/button).
 
-<p>Attention, si un seul élément bouton est inséré dans un formulaire (par exemple <code>&lt;button&gt;Mon bouton&lt;/button&gt;</code>), le navigateur considèrera que ce bouton doit servir comme bouton d'envoi. Il est donc nécessaire de déclarer explicitement un bouton d'envoi (<code>&lt;input type="submit"&gt;</code>) en plus d'autres boutons que vous souhaiteriez ajouter.</p>
+Attention, si un seul élément bouton est inséré dans un formulaire (par exemple `<button>Mon bouton</button>`), le navigateur considèrera que ce bouton doit servir comme bouton d'envoi. Il est donc nécessaire de déclarer explicitement un bouton d'envoi (`<input type="submit">`) en plus d'autres boutons que vous souhaiteriez ajouter.
 
-<h3 id="Un_bouton_pour_envoyer_simple">Un bouton pour envoyer simple</h3>
+### Un bouton pour envoyer simple
 
-<p>Commençons par un exemple simple :</p>
+Commençons par un exemple simple :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="example"&gt;Veuillez saisir un texte&lt;/label&gt;
-    &lt;input id="example" type="text" name="text"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;input type="submit" value="Envoyer"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;
-</pre>
+```html
+<form>
+  <div>
+    <label for="example">Veuillez saisir un texte</label>
+    <input id="example" type="text" name="text">
+  </div>
+  <div>
+    <input type="submit" value="Envoyer">
+  </div>
+</form>
+```
 
-<p>Voici le résultat obtenu :</p>
+Voici le résultat obtenu :
 
-<p>{{EmbedLiveSample("Un_bouton_pour_envoyer_simple", 650, 100)}}</p>
+{{EmbedLiveSample("Un_bouton_pour_envoyer_simple", 650, 100)}}
 
-<p>Pour tester, vous pouvez saisir un texte dans le champ puis cliquer sur le bouton.</p>
+Pour tester, vous pouvez saisir un texte dans le champ puis cliquer sur le bouton.
 
-<p>Lorsque le formulaire est envoyé, les paires formées par les noms et les valeurs seront envoyées au serveur. Dans le cas précédent, la donnée envoyée aura la forme <code>text=monTexte</code> (la deuxième partie varie selon le texte saisi). La destination et la méthode utilisées pour l'envoi des données dépend des attributs utilisés sur l'élément <code>&lt;form&gt;</code> (ainsi que d'autres détails). Pour plus d'informations, vous pouvez lire <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoyer les données d'un formulaire</a>.</p>
+Lorsque le formulaire est envoyé, les paires formées par les noms et les valeurs seront envoyées au serveur. Dans le cas précédent, la donnée envoyée aura la forme `text=monTexte` (la deuxième partie varie selon le texte saisi). La destination et la méthode utilisées pour l'envoi des données dépend des attributs utilisés sur l'élément `<form>` (ainsi que d'autres détails). Pour plus d'informations, vous pouvez lire [Envoyer les données d'un formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires).
 
-<h3 id="Ajouter_un_raccourci_clavier">Ajouter un raccourci clavier</h3>
+### Ajouter un raccourci clavier
 
-<p>Les raccourcis claviers permettent à l'utilisateur d'utiliser une touche du clavier ou une combinaison de touches afin de déclencher l'action d'un bouton. Pour ajouter un raccourci à un bouton d'envoi, on peut utiliser l'attribut universel {{htmlattrxref("accesskey")}}.</p>
+Les raccourcis claviers permettent à l'utilisateur d'utiliser une touche du clavier ou une combinaison de touches afin de déclencher l'action d'un bouton. Pour ajouter un raccourci à un bouton d'envoi, on peut utiliser l'attribut universel {{htmlattrxref("accesskey")}}.
 
-<p>Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. {{htmlattrxref("accesskey")}} pour la liste de ces touches).</p>
+Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. {{htmlattrxref("accesskey")}} pour la liste de ces touches).
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="example"&gt;Veuillez saisir du texte&lt;/label&gt;
-    &lt;input id="example" type="text" name="text"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;input type="submit" value="Envoyer"
-     accesskey="s"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <label for="example">Veuillez saisir du texte</label>
+    <input id="example" type="text" name="text">
+  </div>
+  <div>
+    <input type="submit" value="Envoyer"
+     accesskey="s">
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample("Ajouter_un_raccourci_clavier", 650, 100)}}</p>
+{{EmbedLiveSample("Ajouter_un_raccourci_clavier", 650, 100)}}
 
-<div class="note">
-<p><strong>Note :</strong> Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.</p>
-</div>
+> **Note :** Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.
 
-<h3 id="Activer_et_désactiver_un_bouton_d'envoi">Activer et désactiver un bouton d'envoi</h3>
+### Activer et désactiver un bouton d'envoi
 
-<p>Si on souhaite désactiver un bouton, il sufft d'utiliser l'attribut booléen universel {{htmlattrxref("disabled")}} :</p>
+Si on souhaite désactiver un bouton, il sufft d'utiliser l'attribut booléen universel {{htmlattrxref("disabled")}} :
 
-<pre class="brush: html">&lt;input type="submit" value="Disabled" disabled&gt;</pre>
+```html
+<input type="submit" value="Disabled" disabled>
+```
 
-<p>Pour activer / désactiver le bouton dynamiquement, on pourra manipuler l'attribut DOM <code>disabled</code> avec la valeur <code>true</code> ou <code>false</code> en JavaScript (avec une instruction similaire à <code>btn.disabled = true</code>).</p>
+Pour activer / désactiver le bouton dynamiquement, on pourra manipuler l'attribut DOM `disabled` avec la valeur `true` ou `false` en JavaScript (avec une instruction similaire à `btn.disabled = true`).
 
-<div class="note">
-<p><strong>Note :</strong> Voir la page <code><a href="/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton">&lt;input type="button"&gt;</a></code> pour plus d'exemples concernant l'activation/désactivation des boutons liés à un formulaire.</p>
-</div>
+> **Note :** Voir la page [`<input type="button">`](/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton) pour plus d'exemples concernant l'activation/désactivation des boutons liés à un formulaire.
 
-<div class="note">
-<p><strong>Note :</strong> À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p>
-</div>
+> **Note :** À la différence des autres navigateurs, [Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing). L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.
 
-<h2 id="Validation">Validation</h2>
+## Validation
 
-<p>Il n'existe pas de mécanisme de validation natif côté client pour les boutons d'envoi de formulaires.</p>
+Il n'existe pas de mécanisme de validation natif côté client pour les boutons d'envoi de formulaires.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Voir les exemples ci-avant.</p>
+Voir les exemples ci-avant.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) utilisée comme étiquette (texte) pour le bouton.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{event("click")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>value</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>Aucune.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) utilisée
+        comme étiquette (texte) pour le bouton.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>{{event("click")}}</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("type", "input")}}, and
+        {{htmlattrxref("value", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td><code>value</code></td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>Aucune.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#submit-button-state-(type=submit)', '&lt;input type="submit"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#submit-button-state-(type=submit)', '&lt;input type="submit"&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                                | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'forms.html#submit-button-state-(type=submit)', '&lt;input type="submit"&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'forms.html#submit-button-state-(type=submit)', '&lt;input type="submit"&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-submit")}}</p>
+{{Compat("html.elements.input.input-submit")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente</li>
- <li>L'élément {{HTMLElement("button")}}.</li>
- <li><a href="/fr/docs/Learn/HTML/Forms_and_buttons">Apprendre les formulaires et les boutons</a></li>
- <li><a href="/fr/docs/Web/Accessibility/ARIA/forms">L'accessibilité et les formulaires</a></li>
- <li><a href="/fr/docs/Learn/HTML/Forms">Les formulaires HTML</a></li>
-</ul>
+- L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente
+- L'élément {{HTMLElement("button")}}.
+- [Apprendre les formulaires et les boutons](/fr/docs/Learn/HTML/Forms_and_buttons)
+- [L'accessibilité et les formulaires](/fr/docs/Web/Accessibility/ARIA/forms)
+- [Les formulaires HTML](/fr/docs/Learn/HTML/Forms)
diff --git a/files/fr/web/html/element/input/tel/index.md b/files/fr/web/html/element/input/tel/index.md
index 14356c7762..5b503a511e 100644
--- a/files/fr/web/html/element/input/tel/index.md
+++ b/files/fr/web/html/element/input/tel/index.md
@@ -9,248 +9,201 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/tel
 ---
-<div>{{HTMLRef}}</div>
-
-<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"tel"</strong></code> permettent à un utilisateur de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour <code><a href="/fr/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code> et <code><a href="/fr/docs/Web/HTML/Element/input/url">&lt;input type="url"&gt;</a></code> , la valeur saisie n'est pas automatiquement validée selon un format donné car les formats des numéros de téléphone varient à travers le monde.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}</div>
-
-<div class="note">
-<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type <code>"tel"</code> utiliseront à la place un contrôle de type <code><a href="/fr/docs/Web/HTML/Element/input/text">"text"</a></code>.</p>
-</div>
-
-<h2 id="Valeur">Valeur</h2>
-
-<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui peut prendre l'une de ces deux valeurs :</p>
-
-<ol>
- <li>Une chaîne vide ("") qui indique que l'utilisateur n'a saisi aucune valeur ou que celle-ci a été supprimée.</li>
- <li>Une chaîne de caractères représentant un numéro de téléphone.</li>
-</ol>
-
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
-
-<p>In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("maxlength")}}</code></td>
-   <td>Le nombre de caractères maximal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("minlength")}}</code></td>
-   <td>Le nombre de caractères minimal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("pattern")}}</code></td>
-   <td>Une expression rationnelle à laquelle doit correspondre le numéro de téléphone saisi pour être valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("placeholder")}}</code></td>
-   <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("readonly")}}</code></td>
-   <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("size")}}</code></td>
-   <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td>
-  </tr>
- </tbody>
-</table>
+{{HTMLRef}}
 
-<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>
+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"tel"`** permettent à un utilisateur de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour [`<input type="email">`](/fr/docs/Web/HTML/Element/input/email) et [`<input type="url">`](/fr/docs/Web/HTML/Element/input/url) , la valeur saisie n'est pas automatiquement validée selon un format donné car les formats des numéros de téléphone varient à travers le monde.
 
-<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p>
+{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}
 
-<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du numéro de téléphone dépasse <code>maxlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+> **Note :** Les navigateurs qui ne prennent pas en charge le type `"tel"` utiliseront à la place un contrôle de type [`"text"`](/fr/docs/Web/HTML/Element/input/text).
 
-<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>
+## Valeur
 
-<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p>
+Une chaîne de caractères ({{domxref("DOMString")}}) qui peut prendre l'une de ces deux valeurs :
 
-<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du numéro de téléphone est inférieure à <code>minlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+1.  Une chaîne vide ("") qui indique que l'utilisateur n'a saisi aucune valeur ou que celle-ci a été supprimée.
+2.  Une chaîne de caractères représentant un numéro de téléphone.
 
-<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>
+## Attributs supplémentaires
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes:
 
-<p>Voir <a href="#format">la section format</a> ci-après pour plus détails et d'exemples.</p>
+| Attribut                           | Description                                                                                                                                  |
+| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("maxlength")}}`     | Le nombre de caractères maximal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ.                                        |
+| `{{anch("minlength")}}`     | Le nombre de caractères minimal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ pour qu'il soit considéré comme valide. |
+| `{{anch("pattern")}}`         | Une expression rationnelle à laquelle doit correspondre le numéro de téléphone saisi pour être valide.                                       |
+| `{{anch("placeholder")}}` | Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.                                                                    |
+| `{{anch("readonly")}}`     | Un attribut booléen qui indique si le contenu du champ est en lecture seule.                                                                 |
+| `{{anch("size")}}`             | Un nombre qui indique le nombre de caractères affichés par le champ.                                                                         |
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+### {{htmlattrdef("maxlength")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`.
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du numéro de téléphone dépasse `maxlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.
 
-<h2 id="Attributs_non-standard">Attributs non-standard</h2>
+### {{htmlattrdef("minlength")}}
 
-<p>Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés.</p>
+Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à `maxlength`.
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribute</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("autocorrect")}}</code></td>
-   <td>Indique si la correction automatique doit être appliquée à ce champ texte. <strong>Uniquement pris en charge par Safari.</strong></td>
-  </tr>
-  <tr>
-   <td><code>{{anch("mozactionhint")}}</code></td>
-   <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. <strong>Uniquement pris en charge par Firefox pour Android.</strong></td>
-  </tr>
- </tbody>
-</table>
+Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du numéro de téléphone est inférieure à `minlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.
 
-<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+### {{htmlattrdef("pattern")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}
 
-<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+Voir [la section format](#format) ci-après pour plus détails et d'exemples.
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}
 
-<h2 id="Utiliser_&lt;input_typetel>">Utiliser <code>&lt;input type="tel"&gt;</code></h2>
+{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}
 
-<p>Les numéros de téléphone peuvent jouer un rôle important dans certains formulaires web. Un site de commerce en ligne, par exemple, peut vouloir enregistrer le numéro de téléphone d'un utilisateur pour le contacter lors de la livraison. Toutefois, un des problèmes relatifs aux numéros de téléphone est la variété de formats qui existent à travers le monde. Il est donc difficile (voire impossible) de valider les valeurs automatiquement.</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}
 
-<div class="note">
-<p><strong>Note :</strong> Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. {{anch("Validation")}} ci-après).</p>
-</div>
+## Attributs non-standard
 
-<h3 id="Claviers_adaptés">Claviers adaptés</h3>
+Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés.
 
-<p>L'un des avantages des contrôles de type <code>tel</code> est qu'ils permettent aux navigateurs mobiles de proposer un clavier adapté à la saisie de numéros de téléphone.</p>
+| Attribute                          | Description                                                                                                                                                                                                                                                                                                                                       |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("autocorrect")}}` | Indique si la correction automatique doit être appliquée à ce champ texte. **Uniquement pris en charge par Safari.**                                                                                                                                                                                                                              |
+| `{{anch("mozactionhint")}}` | Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. **Uniquement pris en charge par Firefox pour Android.** |
 
-<table class="standard-table">
-  <caption>Exemples de claviers adaptés sur appareils mobiles.</caption>
-  <thead>
-   <tr>
-    <th scope="col">Firefox pour Android</th>
-    <th scope="col">WebKit iOS (Safari/Chrome/Firefox)</th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><img alt="Capture d'écran pour Firefox pour Android" src="fx-android-tel.png"></td>
-    <td><img alt="Capture d'écran pour Firefox pour iOS" src="iphone-tel-keyboard-50pct.png"></td>
-   </tr>
-  </tbody>
-</table>
+### {{htmlattrdef("autocorrect")}} {{non-standard_inline}}
+
+{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}
+
+### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
+
+{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}
+
+## Utiliser `<input type="tel">`
+
+Les numéros de téléphone peuvent jouer un rôle important dans certains formulaires web. Un site de commerce en ligne, par exemple, peut vouloir enregistrer le numéro de téléphone d'un utilisateur pour le contacter lors de la livraison. Toutefois, un des problèmes relatifs aux numéros de téléphone est la variété de formats qui existent à travers le monde. Il est donc difficile (voire impossible) de valider les valeurs automatiquement.
+
+> **Note :** Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. {{anch("Validation")}} ci-après).
+
+### Claviers adaptés
 
-<h3 id="Un_contrôle_simple">Un contrôle simple</h3>
+L'un des avantages des contrôles de type `tel` est qu'ils permettent aux navigateurs mobiles de proposer un clavier adapté à la saisie de numéros de téléphone.
 
-<p>Dans sa forme la plus simple, on peut implémenter un tel contrôle avec ce fragment HTML :</p>
+| Firefox pour Android                                             | WebKit iOS (Safari/Chrome/Firefox)                                      |
+| ---------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| ![Capture d'écran pour Firefox pour Android](fx-android-tel.png) | ![Capture d'écran pour Firefox pour iOS](iphone-tel-keyboard-50pct.png) |
 
-<pre class="brush: html">&lt;input id="telNo" name="telNo" type="tel"&gt;</pre>
+### Un contrôle simple
 
-<p>{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}</p>
+Dans sa forme la plus simple, on peut implémenter un tel contrôle avec ce fragment HTML :
 
-<p>Rien de bien surprenant ici. Lorsque les données seront envoyées au serveur, elles auront la forme <code>telNo=0123456789</code>.</p>
+```html
+<input id="telNo" name="telNo" type="tel">
+```
 
-<h3 id="Textes_indicatifs_-_placeholders">Textes indicatifs - <em>placeholders</em></h3>
+{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}
 
-<p>Il est parfois utile de fournir une indication quant au format attendu. Or, il est possible que la disposition de la page ne permette pas de fournir des étiquettes détaillées. C'est pourquoi on peut utiliser des textes indicatifs via l'attribut <code>placeholder</code>. Ces valeurs seront affichées dans le champ et disparaîtront dès que l'utilisateur saisira quelque chose (et réapparaîtront si la valeur redevient vide). Un tel texte indicatif doit servir de suggestion quant au format souhaité.</p>
+Rien de bien surprenant ici. Lorsque les données seront envoyées au serveur, elles auront la forme `telNo=0123456789`.
 
-<p>Dans l'exemple suivant, on a un contrôle <code>"tel"</code> avec un attribut <code>placeholder</code> qui vaut <code>"01 23 45 67 89"</code>. Vous pouvez manipuler le résultat obtenu pour voir comment ce texte est affiché selon qu'une valeur saisie ou que le champ est vide :</p>
+### Textes indicatifs - _placeholders_
 
-<pre class="brush: html">&lt;input id="telNo" name="telNo" type="tel"
-       placeholder="01 23 45 67 89"&gt;</pre>
+Il est parfois utile de fournir une indication quant au format attendu. Or, il est possible que la disposition de la page ne permette pas de fournir des étiquettes détaillées. C'est pourquoi on peut utiliser des textes indicatifs via l'attribut `placeholder`. Ces valeurs seront affichées dans le champ et disparaîtront dès que l'utilisateur saisira quelque chose (et réapparaîtront si la valeur redevient vide). Un tel texte indicatif doit servir de suggestion quant au format souhaité.
 
-<p>{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}</p>
+Dans l'exemple suivant, on a un contrôle `"tel"` avec un attribut `placeholder` qui vaut `"01 23 45 67 89"`. Vous pouvez manipuler le résultat obtenu pour voir comment ce texte est affiché selon qu'une valeur saisie ou que le champ est vide :
 
-<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3>
+```html
+<input id="telNo" name="telNo" type="tel"
+       placeholder="01 23 45 67 89">
+```
 
-<p>On peut contrôler la taille physique allouée au contrôle ainsi que les longueurs minimale et maximale autorisées pour le texte saisi dans le contrôle.</p>
+{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}
 
-<h4 id="La_taille_physique">La taille physique</h4>
+### Contrôler la taille du champ
 
-<p>La taille physique de la boîte de saisie peut être contrôlée avec l'attribut {{htmlattrxref("size", "input")}}. La valeur de cet attribut indique le nombre de caractères que la boîte peut afficher simultanément. Si, par exemple, on souhaite que le contrôle mesure 20 caractères de large, on pourra utiliser le code suivant :</p>
+On peut contrôler la taille physique allouée au contrôle ainsi que les longueurs minimale et maximale autorisées pour le texte saisi dans le contrôle.
 
-<pre class="brush: html">&lt;input id="telNo" name="telNo" type="tel"
-       size="20"&gt;</pre>
+#### La taille physique
 
-<p>{{EmbedLiveSample('La_taille_physique', 600, 40)}}</p>
+La taille physique de la boîte de saisie peut être contrôlée avec l'attribut {{htmlattrxref("size", "input")}}. La valeur de cet attribut indique le nombre de caractères que la boîte peut afficher simultanément. Si, par exemple, on souhaite que le contrôle mesure 20 caractères de large, on pourra utiliser le code suivant :
 
-<h4 id="La_longueur_de_la_valeur">La longueur de la valeur</h4>
+```html
+<input id="telNo" name="telNo" type="tel"
+       size="20">
+```
 
-<p>L'attribut <code>size</code> ne contraint pas la taille de la valeur qui peut être saisie dans le contrôle. Si on souhaite avoir une longueur minimale (en nombre de caractères), on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, si on souhaite qu'un numéro de téléphone valide mesure au maximum X caractères, on pourra employer l'attribut {{htmlattrxref("maxlength", "input")}}.</p>
+{{EmbedLiveSample('La_taille_physique', 600, 40)}}
 
-<p>Dans l'exemple qui suit, on crée un contrôle qui mesure 20 caractères de large et dont le contenu doit être plus long que 9 caractères et plus court que 14 caractères.</p>
+#### La longueur de la valeur
 
-<pre class="brush: html">&lt;input id="telNo" name="telNo" type="tel"
-       size="20" minlength="9" maxlength="14"&gt;</pre>
+L'attribut `size` ne contraint pas la taille de la valeur qui peut être saisie dans le contrôle. Si on souhaite avoir une longueur minimale (en nombre de caractères), on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, si on souhaite qu'un numéro de téléphone valide mesure au maximum X caractères, on pourra employer l'attribut {{htmlattrxref("maxlength", "input")}}.
 
-<p>{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}</p>
+Dans l'exemple qui suit, on crée un contrôle qui mesure 20 caractères de large et dont le contenu doit être plus long que 9 caractères et plus court que 14 caractères.
 
-<div class="note">
-<p><strong>Note :</strong> Ces deux attributs jouent un rôle lors de la {{anch("validation", "Validation")}}. Dans l'exemple précédent, la valeur sera considérée comme invalide si elle contient moins de 9 caractères ou plus de 14. La plupart des navigateurs ne permettront pas de saisir une valeur plus longue que la taille maximale.</p>
-</div>
+```html
+<input id="telNo" name="telNo" type="tel"
+       size="20" minlength="9" maxlength="14">
+```
 
-<h3 id="Fournir_une_valeur_par_défaut">Fournir une valeur par défaut</h3>
+{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}
 
-<p>Il est possible de fournir une valeur par défaut en renseignant au préalable l'attribut {{htmlattrxref("value", "input")}} :</p>
+> **Note :** Ces deux attributs jouent un rôle lors de la {{anch("validation", "Validation")}}. Dans l'exemple précédent, la valeur sera considérée comme invalide si elle contient moins de 9 caractères ou plus de 14. La plupart des navigateurs ne permettront pas de saisir une valeur plus longue que la taille maximale.
 
-<pre class="brush: html">&lt;input id="telNo" name="telNo" type="tel"
-       value="01 23 45 67 89"&gt;</pre>
+### Fournir une valeur par défaut
 
-<p>{{EmbedLiveSample("Fournir_une_valeur_par_défaut", 600, 40)}}</p>
+Il est possible de fournir une valeur par défaut en renseignant au préalable l'attribut {{htmlattrxref("value", "input")}} :
 
-<h4 id="Afficher_des_suggestions">Afficher des suggestions</h4>
+```html
+<input id="telNo" name="telNo" type="tel"
+       value="01 23 45 67 89">
+```
 
-<p>Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément  {{HTMLElement("datalist")}} qui contient autant d'éléments  {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut <code>value</code> de chaque élément <code>&lt;option&gt;</code> qui sera utilisée comme suggestion.</p>
+{{EmbedLiveSample("Fournir_une_valeur_par_défaut", 600, 40)}}
 
-<pre class="brush: html">&lt;input id="telNo" name="telNo" type="tel" list="defaultTels"&gt;
+#### Afficher des suggestions
 
-&lt;datalist id="defaultTels"&gt;
-  &lt;option value="01 23 45 67 89"&gt;
-  &lt;option value="02 45 67 89 01"&gt;
-  &lt;option value="03 45 67 89 12"&gt;
-  &lt;option value="04 56 87 98 32"&gt;
-&lt;/datalist&gt;</pre>
+Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément  {{HTMLElement("datalist")}} qui contient autant d'éléments  {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut `value` de chaque élément `<option>` qui sera utilisée comme suggestion.
 
-<p>{{EmbedLiveSample("Afficher_des_suggestions", 600, 40)}}</p>
+```html
+<input id="telNo" name="telNo" type="tel" list="defaultTels">
 
-<p>Avec l'élément {{HTMLElement("datalist")}} contenant ces différentes valeurs  {{HTMLElement("option")}}, le navigateur affichera une liste déroulante (ou un autre élément d'interface utilisateur) afin que l'utilisateur puisse éventuellement choisir parmi les suggestions. Lorsque l'utilisateur saisit dans le contrôle, la liste des suggestions est restreinte à celles qui correspondent encore.</p>
+<datalist id="defaultTels">
+  <option value="01 23 45 67 89">
+  <option value="02 45 67 89 01">
+  <option value="03 45 67 89 12">
+  <option value="04 56 87 98 32">
+</datalist>
+```
 
-<h2 id="Validation">Validation</h2>
+{{EmbedLiveSample("Afficher_des_suggestions", 600, 40)}}
 
-<p>Comme évoqué ci-avant, il est difficile de fournir une solution qui convienne pour l'ensemble des formats utilisés et qui permette de valider correctement les numéros de téléphone.</p>
+Avec l'élément {{HTMLElement("datalist")}} contenant ces différentes valeurs  {{HTMLElement("option")}}, le navigateur affichera une liste déroulante (ou un autre élément d'interface utilisateur) afin que l'utilisateur puisse éventuellement choisir parmi les suggestions. Lorsque l'utilisateur saisit dans le contrôle, la liste des suggestions est restreinte à celles qui correspondent encore.
 
-<div class="warning">
-  <p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p>
-</div>
+## Validation
 
-<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3>
+Comme évoqué ci-avant, il est difficile de fournir une solution qui convienne pour l'ensemble des formats utilisés et qui permette de valider correctement les numéros de téléphone.
 
-<p>Il est possible de rendre la saisie obligatoire avant de pouvoir envoyer le formulaire. Pour cela, on utilisera l'attribut {{htmlattrxref("required", "input")}} :</p>
+> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="telNo"&gt;Veuillez saisir un numéro de téléphone (obligatoire) : &lt;/label&gt;
-    &lt;input id="telNo" name="telNo" type="tel" required&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+### Rendre la valeur obligatoire
 
-<p>On utilisera la feuille de style suivante pour indiquer les éléments valides ou invalides du formulaire :</p>
+Il est possible de rendre la saisie obligatoire avant de pouvoir envoyer le formulaire. Pour cela, on utilisera l'attribut {{htmlattrxref("required", "input")}} :
 
-<pre class="brush: css">div {
+```html
+<form>
+  <div>
+    <label for="telNo">Veuillez saisir un numéro de téléphone (obligatoire) : </label>
+    <input id="telNo" name="telNo" type="tel" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+```
+
+On utilisera la feuille de style suivante pour indiquer les éléments valides ou invalides du formulaire :
+
+```css
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -274,31 +227,35 @@ input:valid+span:after {
   content: '✓';
   padding-left: 5px;
   color: #009000;
-}</pre>
+}
+```
 
-<p>Voici le résultat obtenu :</p>
+Voici le résultat obtenu :
 
-<p>{{EmbedLiveSample("Rendre_la_valeur_obligatoire", 700, 70)}}</p>
+{{EmbedLiveSample("Rendre_la_valeur_obligatoire", 700, 70)}}
 
-<h3 id="Utiliser_un_format_particulier">Utiliser un format particulier</h3>
+### Utiliser un format particulier
 
-<p>Si on souhaite restreindre le format de la valeur qui peut être saisie, on peut utiliser l'attribut {{htmlattrxref("pattern","input")}} dont la valeur est une expression rationnelle que la valeur doit respecter pour être valide.</p>
+Si on souhaite restreindre le format de la valeur qui peut être saisie, on peut utiliser l'attribut {{htmlattrxref("pattern","input")}} dont la valeur est une expression rationnelle que la valeur doit respecter pour être valide.
 
-<p>Dans cet exemple, on utilisera la même feuille de style que précédemment mais le code HTML sera celui-ci :</p>
+Dans cet exemple, on utilisera la même feuille de style que précédemment mais le code HTML sera celui-ci :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="telNo"&gt;Veuillez saisir un numéro de téléphone (obligatoire) : &lt;/label&gt;
-    &lt;input id="telNo" name="telNo" type="tel" required
-           pattern="[0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}"&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <label for="telNo">Veuillez saisir un numéro de téléphone (obligatoire) : </label>
+    <input id="telNo" name="telNo" type="tel" required
+           pattern="[0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}">
+    <span class="validity"></span>
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+```
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -322,60 +279,64 @@ input:valid+span:after {
   content: '✓';
   padding-left: 5px;
   color: #009000;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 70)}}</p>
+{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 70)}}
 
-<p>Vous pouvez ici voir que la valeur est considérée comme invalide si elle ne suit pas le format xx xx xx xx xx. Ce format peut peut-être être utile pour certaines régions mais attention, dans une application réelle, il faudra s'adapter à des cas plus complexes selon la locale de l'utilisateur.</p>
+Vous pouvez ici voir que la valeur est considérée comme invalide si elle ne suit pas le format xx xx xx xx xx. Ce format peut peut-être être utile pour certaines régions mais attention, dans une application réelle, il faudra s'adapter à des cas plus complexes selon la locale de l'utilisateur.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on présente une interface simple avec un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir le pays dans lequel il se trouve puis un ensemble d'éléments <code>&lt;input type="tel"&gt;</code> permettant de saisir ses différents numéros de téléphone.</p>
+Dans cet exemple, on présente une interface simple avec un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir le pays dans lequel il se trouve puis un ensemble d'éléments `<input type="tel">` permettant de saisir ses différents numéros de téléphone.
 
-<p>Chaque boîte de saisie possède un attribut {{htmlattrxref("placeholder","input")}} qui indique le format pressenti. On utilise également l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer le nombre de caractères ainsi qu'un attribut <code>aria-label</code> qui pourra être lu par un lecteur d'écran ete qui décrit quoi saisir dans le contrôle.</p>
+Chaque boîte de saisie possède un attribut {{htmlattrxref("placeholder","input")}} qui indique le format pressenti. On utilise également l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer le nombre de caractères ainsi qu'un attribut `aria-label` qui pourra être lu par un lecteur d'écran ete qui décrit quoi saisir dans le contrôle.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="country"&gt;Veuillez choisir votre pays :&lt;/label&gt;
-    &lt;select id="country" name="country"&gt;
-      &lt;option&gt;Royaume-Uni&lt;/option&gt;
-      &lt;option selected&gt;États-Unis&lt;/option&gt;
-      &lt;option&gt;Allemagne&lt;/option&gt;
-    &lt;/select&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;p&gt;Veuillez saisir vos numéros de téléphone : &lt;/p&gt;
-    &lt;span class="areaDiv"&gt;
-      &lt;input id="areaNo" name="areaNo" type="tel" required
+```html
+<form>
+  <div>
+    <label for="country">Veuillez choisir votre pays :</label>
+    <select id="country" name="country">
+      <option>Royaume-Uni</option>
+      <option selected>États-Unis</option>
+      <option>Allemagne</option>
+    </select>
+  </div>
+  <div>
+    <p>Veuillez saisir vos numéros de téléphone : </p>
+    <span class="areaDiv">
+      <input id="areaNo" name="areaNo" type="tel" required
              placeholder="Code régional" pattern="[0-9]{3}"
-             aria-label="Code régional"&gt;
-      &lt;span class="validity"&gt;&lt;/span&gt;
-    &lt;/span&gt;
-    &lt;span class="number1Div"&gt;
-      &lt;input id="number1" name="number1" type="tel" required
+             aria-label="Code régional">
+      <span class="validity"></span>
+    </span>
+    <span class="number1Div">
+      <input id="number1" name="number1" type="tel" required
              placeholder="Premier fragment" pattern="[0-9]{3}"
-             aria-label="Premier fragment du numéro"&gt;
-      &lt;span class="validity"&gt;&lt;/span&gt;
-    &lt;/span&gt;
-    &lt;span class="number2Div"&gt;
-      &lt;input id="number2" name="number2" type="tel" required
+             aria-label="Premier fragment du numéro">
+      <span class="validity"></span>
+    </span>
+    <span class="number2Div">
+      <input id="number2" name="number2" type="tel" required
              placeholder="Second fragment" pattern="[0-9]{4}"
-             aria-label="Second fragment du numéro"&gt;
-      &lt;span class="validity"&gt;&lt;/span&gt;
-    &lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
-
-<p>Le code JavaScript associé est relativement simple, il contient un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onchange", "onchange")}} qui est déclenché lorsque la valeur du <code>&lt;select&gt;</code> est modifiée. Il met alors à jour les attributs <code>pattern</code>, <code>placeholder</code>, <code>aria-label</code> du contrôle pour adapter le format attendu au pays choisi.</p>
-
-<pre class="brush: js">var selectElem = document.querySelector("select");
+             aria-label="Second fragment du numéro">
+      <span class="validity"></span>
+    </span>
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+```
+
+Le code JavaScript associé est relativement simple, il contient un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onchange", "onchange")}} qui est déclenché lorsque la valeur du `<select>` est modifiée. Il met alors à jour les attributs `pattern`, `placeholder`, `aria-label` du contrôle pour adapter le format attendu au pays choisi.
+
+```js
+var selectElem = document.querySelector("select");
 var inputElems = document.querySelectorAll("input");
 
 selectElem.onchange = function() {
-  for(var i = 0; i &lt; inputElems.length; i++) {
+  for(var i = 0; i < inputElems.length; i++) {
     inputElems[i].value = "";
   }
 
@@ -415,17 +376,19 @@ selectElem.onchange = function() {
     inputElems[2].pattern = "[0-9]{4}";
     inputElems[2].setAttribute("aria-label","Seconde partie du numéro");
   }
-}</pre>
+}
+```
 
-<p>Voici le résultat obtenu :</p>
+Voici le résultat obtenu :
 
-<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p>
+{{EmbedLiveSample('Exemples', 600, 140)}}
 
-<p>Attention, cet exemple n'est qu'une illustration du problème associé à la gestion internationale des numéros de téléphone. Il serait prétentieux d'affirmer qu'étendre ce mécanisme à chaque pays suffirait à garantir la bonne saisie d'un numéro de téléphone.</p>
+Attention, cet exemple n'est qu'une illustration du problème associé à la gestion internationale des numéros de téléphone. Il serait prétentieux d'affirmer qu'étendre ce mécanisme à chaque pays suffirait à garantir la bonne saisie d'un numéro de téléphone.
 
-<p>Bien entendu, si cette complexité est trop importante, on peut également faire le choix de contrôler la valeur côté serveur avant de faire un retour à l'utilisateur.</p>
+Bien entendu, si cette complexité est trop importante, on peut également faire le choix de contrôler la valeur côté serveur avant de faire un retour à l'utilisateur.
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
 margin-bottom: 10px;
 position: relative;
 }
@@ -447,73 +410,75 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}</pre>
+}
+```
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente un numéro de téléphone ou qui est vide.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("size", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>list,selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code> et <code>value</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui
+        représente un numéro de téléphone ou qui est vide.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>
+        {{domxref("HTMLElement/change_event", "change")}} et
+        {{domxref("HTMLElement/input_event", "input")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}},
+        {{htmlattrxref("list", "input")}},
+        {{htmlattrxref("maxlength", "input")}},
+        {{htmlattrxref("minlength", "input")}},
+        {{htmlattrxref("pattern", "input")}},
+        {{htmlattrxref("placeholder", "input")}},
+        {{htmlattrxref("readonly", "input")}} et
+        {{htmlattrxref("size", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td>
+        <code>list,selectionStart</code>, <code>selectionEnd</code>,
+        <code>selectionDirection</code> et <code>value</code>
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}},
+        {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}},
+        {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#tel-state-(type=tel)', '&lt;input type="tel"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sec-forms.html#tel-state-typetel', '&lt;input type="tel"&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#tel-state-(type=tel)', '&lt;input type="tel"&gt;')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+| {{SpecName('HTML5.1', 'sec-forms.html#tel-state-typetel', '&lt;input type="tel"&gt;')}}     | {{Spec2('HTML5.1')}}     | Définition initiale. |
+
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("html.elements.input.input-tel")}}
 
-<p>{{Compat("html.elements.input.input-tel")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- [Le guide sur les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires)
+- {{HTMLElement("input")}}
+- [Les formulaires et l'accessibilité](/fr/docs/Accessibilité/ARIA/formulaires)
+- {{HTMLElement("input")}}
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Le guide sur les formulaires HTML</a></li>
- <li>{{HTMLElement("input")}}</li>
- <li><a href="/fr/docs/Accessibilité/ARIA/formulaires">Les formulaires et l'accessibilité</a></li>
- <li>{{HTMLElement("input")}}
-  <ul>
-   <li><code><a href="/fr/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code></li>
-   <li><code><a href="/fr/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code></li>
-  </ul>
- </li>
-</ul>
+  - [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text)
+  - [`<input type="email">`](/fr/docs/Web/HTML/Element/input/email)
diff --git a/files/fr/web/html/element/input/text/index.md b/files/fr/web/html/element/input/text/index.md
index 8e33c53029..1b616957e4 100644
--- a/files/fr/web/html/element/input/text/index.md
+++ b/files/fr/web/html/element/input/text/index.md
@@ -8,247 +8,198 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/text
 ---
-<div>{{HTMLRef}}</div>
-
-<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"text"</strong></code> permettent de créer des champs de saisie avec du texte sur une seule ligne.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-standard")}}</div>
-
-<h2 id="Valeur">Valeur</h2>
-
-<p>L'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) qui correspond à la valeur contenue dans le champ texte. En JavaScript, cette valeur peut être récupérée avec la propriété JavaScript {{domxref("HTMLInputElement.value","value")}}.</p>
-
-<pre class="brush: js">monTextInput.value;
-</pre>
-
-<p>Si aucune contrainte de validation n'est ajoutée (cf. {{anch("Validation")}} pour plus d'informations), la valeur peut être n'importe quelle chaîne de caractères voire la chaîne vide ("").</p>
-
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
-
-<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs textuels prennent en charge les attributs suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("maxlength")}}</code></td>
-   <td>Le nombre de caractères maximal qui peut être écrit dans ce champ.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("minlength")}}</code></td>
-   <td>Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("pattern")}}</code></td>
-   <td>Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("placeholder")}}</code></td>
-   <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("readonly")}}</code></td>
-   <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("size")}}</code></td>
-   <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("spellcheck")}}</code></td>
-   <td>Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée.</td>
-  </tr>
- </tbody>
-</table>
+{{HTMLRef}}
 
-<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3>
+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"text"`** permettent de créer des champs de saisie avec du texte sur une seule ligne.
 
-<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p>
+{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-standard")}}
 
-<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte dépasse <code>maxlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+## Valeur
 
-<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3>
+L'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) qui correspond à la valeur contenue dans le champ texte. En JavaScript, cette valeur peut être récupérée avec la propriété JavaScript {{domxref("HTMLInputElement.value","value")}}.
 
-<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p>
+```js
+monTextInput.value;
+```
 
-<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte est inférieure à <code>minlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>
+Si aucune contrainte de validation n'est ajoutée (cf. {{anch("Validation")}} pour plus d'informations), la valeur peut être n'importe quelle chaîne de caractères voire la chaîne vide ("").
 
-<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3>
+## Attributs supplémentaires
 
-<p>L'attribut <code>pattern</code> est une expression rationnelle que doit respecter la valeur ({{htmlattrxref("value")}}) du champ afin d'être <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">valide</a>. Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par {{jsxref("RegExp")}} et telle que documentée dans <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">ce guide</a>). Le marqueur <code>'u'</code> est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif.</p>
+En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs textuels prennent en charge les attributs suivants :
 
-<p>Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré.</p>
+| Attribut                           | Description                                                                                                                                            |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `{{anch("maxlength")}}`     | Le nombre de caractères maximal qui peut être écrit dans ce champ.                                                                                     |
+| `{{anch("minlength")}}`     | Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.                                              |
+| `{{anch("pattern")}}`         | Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.                                                               |
+| `{{anch("placeholder")}}` | Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.                                                                              |
+| `{{anch("readonly")}}`     | Un attribut booléen qui indique si le contenu du champ est en lecture seule.                                                                           |
+| `{{anch("size")}}`             | Un nombre qui indique le nombre de caractères affichés par le champ.                                                                                   |
+| `{{anch("spellcheck")}}`     | Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée. |
 
-<div class="note">
-<p><strong>Note :</strong> L'attribut {{htmlattrxref("title", "input")}} pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ.</p>
-</div>
+### {{htmlattrdef("maxlength")}}
 
-<p>Voir <a href="#format">la section sur l'utilisation de cet attribut ci-après</a> pour plus d'exemples.</p>
+Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`.
 
-<h3 id="htmlattrdef(placeholder)">{{htmlattrdef("placeholder")}}</h3>
+Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte dépasse `maxlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.
 
-<p>L'attribut <code>placeholder</code> est une chaîne de caractères fournissant une courte indication à l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le texte ne doit pas contenir de saut à la ligne.</p>
+### {{htmlattrdef("minlength")}}
 
-<p>Si le contenu du contrôle respecte une directionnalité donnée ({{Glossary("LTR")}} ou {{Glossary("RTL")}}) et que le texte indicatif doit être présenté dans l'autre sens, il est possible  d'utiliser l'algorithme de formatage bidirectionnel Unicode (cf. {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}).</p>
+Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à `maxlength`.
 
-<div class="note">
-<p><strong>Note :</strong> On évitera, tant que faire se peut, d'utiliser l'attribut <code>placeholder</code> car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir  {{SectionOnPage("/fr/docs/Web/HTML/Element/input", "Libellés et textes indicatifs")}} pour plus d'informations.</p>
-</div>
+Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte est inférieure à `minlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.
 
-<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3>
+### {{htmlattrdef("pattern")}}
 
-<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. Toutefois, la valeur de l'attribut <code>value</code> peut toujours être modifiée via du code JavaScript qui définirait la propriété {{domxref("HTMLInputElement.value")}}.</p>
+L'attribut `pattern` est une expression rationnelle que doit respecter la valeur ({{htmlattrxref("value")}}) du champ afin d'être [valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par {{jsxref("RegExp")}} et telle que documentée dans [ce guide](/fr/docs/Web/JavaScript/Guide/Expressions_régulières)). Le marqueur `'u'` est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif.
 
-<div class="note">
-<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura pas d'effet si l'attribut <code>readonly</code> est également présent.</p>
-</div>
+Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré.
 
-<h3 id="htmlattrdef(size)">{{htmlattrdef("size")}}</h3>
+> **Note :** L'attribut {{htmlattrxref("title", "input")}} pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ.
 
-<p>L'attribut <code>size</code> est un nombre positif qui indique le nombre de caractères affichés à l'écran et qui définit donc la largeur du champ. La valeur par défaut de cet attribut est 20. Étant donné que la largeur des caractères peut varier cet attribut ne permet de définir une largeur exacte mais approximative.</p>
+Voir [la section sur l'utilisation de cet attribut ci-après](#format) pour plus d'exemples.
 
-<p>Cet attribut ne définit pas la limite du nombre de caractères saisissables dans le champ mais uniquement, et approximativement, le nombre de caractères qui peuvent être affichés à l'écran simultanément. Pour fixer une taille maximale sur la valeur du champ, on utilisera plutôt l'attribut <code>{{anch("maxlength")}}</code>.</p>
+### {{htmlattrdef("placeholder")}}
 
-<h3 id="htmlattrdef(spellcheck)">{{htmlattrdef("spellcheck")}}</h3>
+L'attribut `placeholder` est une chaîne de caractères fournissant une courte indication à l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le texte ne doit pas contenir de saut à la ligne.
 
-<p><code>spellcheck</code> est un attribut universel qui est utilisé afin d'indiquer si la vérification orthographique doit être utilisée pour un élément. Il peut être utilisé pour n'importe quel contenu éditable mais possède certaines spécificités pour les éléments {{HTMLElement("input")}}. Les valeurs autorisées pour cet attribut sont :</p>
+Si le contenu du contrôle respecte une directionnalité donnée ({{Glossary("LTR")}} ou {{Glossary("RTL")}}) et que le texte indicatif doit être présenté dans l'autre sens, il est possible  d'utiliser l'algorithme de formatage bidirectionnel Unicode (cf. {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}).
 
-<dl>
- <dt><code>false</code></dt>
- <dd>La vérification orthographique est désactivée pour cet élément.</dd>
- <dt><code>true</code></dt>
- <dd>La vérification orthographique est activée pour cet élément.</dd>
- <dt><code>""</code> (chaîne de caractères vide) ou aucune valeur</dt>
- <dd>La configuration par défaut de l'élément par rapport à la vérification orthographique sera respectée. Cette configuration par défaut peut provenir de la valeur de <code>spellcheck</code> pour les éléments parents ou d'autres facteurs.</dd>
-</dl>
+> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder` car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir  {{SectionOnPage("/fr/docs/Web/HTML/Element/input", "Libellés et textes indicatifs")}} pour plus d'informations.
 
-<p>Un champ de saisie peut avoir la vérification orthographique activée s'il ne possède pas l'attribut {{anch("readonly")}} et qu'il n'est pas désactivé.</p>
+### {{htmlattrdef("readonly")}}
 
-<p>La valeur renvoyée par l'attribut <code>spellcheck</code> peut ne pas refléter l'état réel de la vérification ortographique si certaines préférences de l'agent utilisateur surchargent le paramétrage par défaut.</p>
+Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. Toutefois, la valeur de l'attribut `value` peut toujours être modifiée via du code JavaScript qui définirait la propriété {{domxref("HTMLInputElement.value")}}.
 
-<h2 id="Attributs_non-standard">Attributs non-standard</h2>
+> **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent.
 
-<p>Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés.</p>
+### {{htmlattrdef("size")}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("autocorrect")}}</code></td>
-   <td>Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. <strong>Uniquement pris en charge par Safari.</strong></td>
-  </tr>
-  <tr>
-   <td><code>{{anch("mozactionhint")}}</code></td>
-   <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. <strong>Uniquement pris en charge par Firefox pour Android.</strong></td>
-  </tr>
- </tbody>
-</table>
+L'attribut `size` est un nombre positif qui indique le nombre de caractères affichés à l'écran et qui définit donc la largeur du champ. La valeur par défaut de cet attribut est 20. Étant donné que la largeur des caractères peut varier cet attribut ne permet de définir une largeur exacte mais approximative.
+
+Cet attribut ne définit pas la limite du nombre de caractères saisissables dans le champ mais uniquement, et approximativement, le nombre de caractères qui peuvent être affichés à l'écran simultanément. Pour fixer une taille maximale sur la valeur du champ, on utilisera plutôt l'attribut `{{anch("maxlength")}}`.
+
+### {{htmlattrdef("spellcheck")}}
+
+`spellcheck` est un attribut universel qui est utilisé afin d'indiquer si la vérification orthographique doit être utilisée pour un élément. Il peut être utilisé pour n'importe quel contenu éditable mais possède certaines spécificités pour les éléments {{HTMLElement("input")}}. Les valeurs autorisées pour cet attribut sont :
+
+- `false`
+  - : La vérification orthographique est désactivée pour cet élément.
+- `true`
+  - : La vérification orthographique est activée pour cet élément.
+- `""` (chaîne de caractères vide) ou aucune valeur
+  - : La configuration par défaut de l'élément par rapport à la vérification orthographique sera respectée. Cette configuration par défaut peut provenir de la valeur de `spellcheck` pour les éléments parents ou d'autres facteurs.
+
+Un champ de saisie peut avoir la vérification orthographique activée s'il ne possède pas l'attribut {{anch("readonly")}} et qu'il n'est pas désactivé.
 
-<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+La valeur renvoyée par l'attribut `spellcheck` peut ne pas refléter l'état réel de la vérification ortographique si certaines préférences de l'agent utilisateur surchargent le paramétrage par défaut.
 
-<p>Un attribut spécifique à Safari, sous la forme d'une chaîne de caractères, qui indique si la correction automatique doit être appliquée lors de l'édition du champ. Les valeurs autorisées pour cet attribut sont :</p>
+## Attributs non-standard
 
-<dl>
- <dt><code>on</code></dt>
- <dd>La correction automatique et les remplacements de texte sont appliqués.</dd>
- <dt><code>off</code></dt>
- <dd>Toute correction automatique et tout remplacement de texte est désactivé.</dd>
-</dl>
+Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés.
 
-<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+| Attribut                           | Description                                                                                                                                                                                                                                                                                                                                       |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("autocorrect")}}` | Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. **Uniquement pris en charge par Safari.**                                                                                                                                                                                                 |
+| `{{anch("mozactionhint")}}` | Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. **Uniquement pris en charge par Firefox pour Android.** |
 
-<p>Un attribut spécifique à Mozilla (et plus particulièrement Firefox pour Android) qui fournit une indication quant au type d'action effectuée lorsque l'utilisateur appuie sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition. Cette information pourra être utilisée afin de choisir le libellé à afficher sur la touche <kbd>Entrée</kbd> du clavier virtuel.</p>
+### {{htmlattrdef("autocorrect")}} {{non-standard_inline}}
 
-<div class="note">
-<p><strong>Note :</strong> Cet attribut <a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">a été standardisé</a> sous l'attribut universel {{htmlattrxref("enterkeyhint")}} mais ce dernier n'est pas encore largement implémenté. Pour connaître le statut du changement d'implémentation pour Firefox, voir {{bug(1490661)}}.</p>
-</div>
+Un attribut spécifique à Safari, sous la forme d'une chaîne de caractères, qui indique si la correction automatique doit être appliquée lors de l'édition du champ. Les valeurs autorisées pour cet attribut sont :
 
-<p>Les valeurs autorisées pour cet attribut sont : <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code> et <code>send</code>. Le navigateur décide alors, selon la valeur, quel libellé utiliser pour la touche Entrée.</p>
+- `on`
+  - : La correction automatique et les remplacements de texte sont appliqués.
+- `off`
+  - : Toute correction automatique et tout remplacement de texte est désactivé.
 
-<h2 id="Utiliser_&lt;input_typetext>">Utiliser <code>&lt;input type="text"&gt;</code></h2>
+### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
 
-<p>Les éléments <code>&lt;input&gt;</code> de type <code>text</code> sont utilisés pour créer des champs texte sur une seule ligne. Ils doivent être utilisés lorsqu'on souhaite saisir du texte sur une ligne et qu'il n'existe pas de meilleur contrôle disponible pour la valeur (ainsi, s'il s'agit d'une <a href="/fr/docs/Web/HTML/Element/input/datetime-local">date</a>, <a href="/fr/docs/Web/HTML/Element/input/url">d'une URL</a>, <a href="/fr/docs/Web/HTML/Element/input/email">d'une adresse électronique</a> ou <a href="/fr/docs/Web/HTML/Element/input/search">d'une recherch</a>, on pourra par exemple utiliser des éléments plus pertinents).</p>
+Un attribut spécifique à Mozilla (et plus particulièrement Firefox pour Android) qui fournit une indication quant au type d'action effectuée lorsque l'utilisateur appuie sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition. Cette information pourra être utilisée afin de choisir le libellé à afficher sur la touche <kbd>Entrée</kbd> du clavier virtuel.
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+> **Note :** Cet attribut [a été standardisé](https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute) sous l'attribut universel {{htmlattrxref("enterkeyhint")}} mais ce dernier n'est pas encore largement implémenté. Pour connaître le statut du changement d'implémentation pour Firefox, voir {{bug(1490661)}}.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="uname"&gt;Veuillez choisir un nom d'utilisateur :&lt;/label&gt;
-    &lt;input type="text" id="uname" name="name"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+Les valeurs autorisées pour cet attribut sont : `go`, `done`, `next`, `search` et `send`. Le navigateur décide alors, selon la valeur, quel libellé utiliser pour la touche Entrée.
 
-<p>Voici ce qui sera obtenu :</p>
+## Utiliser `<input type="text">`
 
-<p>{{EmbedLiveSample("Exemple_simple", 600, 50)}}</p>
+Les éléments `<input>` de type `text` sont utilisés pour créer des champs texte sur une seule ligne. Ils doivent être utilisés lorsqu'on souhaite saisir du texte sur une ligne et qu'il n'existe pas de meilleur contrôle disponible pour la valeur (ainsi, s'il s'agit d'une [date](/fr/docs/Web/HTML/Element/input/datetime-local), [d'une URL](/fr/docs/Web/HTML/Element/input/url), [d'une adresse électronique](/fr/docs/Web/HTML/Element/input/email) ou [d'une recherch](/fr/docs/Web/HTML/Element/input/search), on pourra par exemple utiliser des éléments plus pertinents).
 
-<p>Lorsque le formulaire est envoyé, la paire nom/valeur est envoyée au serveur sous la forme <code>uname=Chris</code> (si "Chris" était le texte qui avait été saisi avant d'envoyer le formulaire). Il faut veiller à bien avoir un attribut <code>name</code> pour l'élément <code>&lt;input&gt;</code> car sinon, rien ne sera envoyé.</p>
+### Exemple simple
 
-<h3 id="Utiliser_des_textes_indicatifs_-_placeholders">Utiliser des textes indicatifs <em>- placeholders</em></h3>
+```html
+<form>
+  <div>
+    <label for="uname">Veuillez choisir un nom d'utilisateur :</label>
+    <input type="text" id="uname" name="name">
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+```
 
-<p>Il est possible de fournir un texte indicatif qui sera affiché dans le champ lorsqu'aucune valeur n'a été saisi. Pour cela, on utilise l'attribut {{htmlattrxref("placeholder","input")}}. Par exemple :</p>
+Voici ce qui sera obtenu :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="uname"&gt;Veuillez choisir un nom d'utilisateur :&lt;/label&gt;
-    &lt;input type="text" id="uname" name="name"
-           placeholder="Un seul mot, en minuscules"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+{{EmbedLiveSample("Exemple_simple", 600, 50)}}
 
-<p>Voici le résultat qui sera obtenu :</p>
+Lorsque le formulaire est envoyé, la paire nom/valeur est envoyée au serveur sous la forme `uname=Chris` (si "Chris" était le texte qui avait été saisi avant d'envoyer le formulaire). Il faut veiller à bien avoir un attribut `name` pour l'élément `<input>` car sinon, rien ne sera envoyé.
 
-<p>{{EmbedLiveSample("Utiliser_des_textes_indicatifs_-_placeholders", 600, 50)}}</p>
+### Utiliser des textes indicatifs _- placeholders_
 
-<p>Le texte indicatif est généralement affiché dans une couleur plus claire que le texte qui sera saisi par l'utilisateur.</p>
+Il est possible de fournir un texte indicatif qui sera affiché dans le champ lorsqu'aucune valeur n'a été saisi. Pour cela, on utilise l'attribut {{htmlattrxref("placeholder","input")}}. Par exemple :
 
-<h3 id="Contrôler_la_taille_physique_du_champ">Contrôler la taille physique du champ</h3>
+```html
+<form>
+  <div>
+    <label for="uname">Veuillez choisir un nom d'utilisateur :</label>
+    <input type="text" id="uname" name="name"
+           placeholder="Un seul mot, en minuscules">
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+```
 
-<p>La taille physique du champ de saisie peut être adaptée grâce à l'attribut {{htmlattrxref("size", "input")}}. Sa valeur correspond au nombre de caractères qui seront affichés simultanément. Voici par exemple, un fragment de code HTML où la contrôle de saisie affichera au plus 30 caractères en même temps (on pourra saisir un texte plus long mais toutes les lettres ne seront pas affichées) :</p>
+Voici le résultat qui sera obtenu :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="uname"&gt;Veuillez choisir un nom d'utilisateur : &lt;/label&gt;
-    &lt;input type="text" id="uname" name="name"
+{{EmbedLiveSample("Utiliser_des_textes_indicatifs_-_placeholders", 600, 50)}}
+
+Le texte indicatif est généralement affiché dans une couleur plus claire que le texte qui sera saisi par l'utilisateur.
+
+### Contrôler la taille physique du champ
+
+La taille physique du champ de saisie peut être adaptée grâce à l'attribut {{htmlattrxref("size", "input")}}. Sa valeur correspond au nombre de caractères qui seront affichés simultanément. Voici par exemple, un fragment de code HTML où la contrôle de saisie affichera au plus 30 caractères en même temps (on pourra saisir un texte plus long mais toutes les lettres ne seront pas affichées) :
+
+```html
+<form>
+  <div>
+    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
+    <input type="text" id="uname" name="name"
            placeholder="Un seul mot, en minuscules"
-           size="30"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+           size="30">
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample("Contrôler_la_taille_physique_du_champ", 600, 50)}}</p>
+{{EmbedLiveSample("Contrôler_la_taille_physique_du_champ", 600, 50)}}
 
-<h2 id="Validation">Validation</h2>
+## Validation
 
-<p>Les éléments <code>&lt;input&gt;</code> de type <code>text</code> ne possède pas de mécanisme de validation automatique. En revanche, il est possible d'ajouter certaines contraintes qui seront vérifiées côté client et que nous allons voir ici.</p>
+Les éléments `<input>` de type `text` ne possède pas de mécanisme de validation automatique. En revanche, il est possible d'ajouter certaines contraintes qui seront vérifiées côté client et que nous allons voir ici.
 
-<div class="warning">
-<p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p>
-</div>
+> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
 
-<h3 id="Un_aparté_sur_la_mise_en_forme">Un aparté sur la mise en forme</h3>
+### Un aparté sur la mise en forme
 
-<p>Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont utiles pour mettre en forme les éléments qui ne respectent pas les contraintes de validation. Dans la suite de cette section, nous utiliserons cette feuille de style afin d'afficher une coche ou une croix après les valeurs valides ou invalides.</p>
+Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont utiles pour mettre en forme les éléments qui ne respectent pas les contraintes de validation. Dans la suite de cette section, nous utiliserons cette feuille de style afin d'afficher une coche ou une croix après les valeurs valides ou invalides.
 
-<pre class="brush: css">div {
+```css
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -266,84 +217,94 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}</pre>
+}
+```
 
-<p>Comme le montrent les sélecteurs utilisés, cette technique s'appuie sur la présence d'un élément {{htmlelement("span")}} placé après le formulaire et qui joue le rôle de réceptacle pour les icônes. Cette méthode de contournement est nécessaire car certains navigateurs n'affichent pas les icônes placées directement sur les éléments de formulaire.</p>
+Comme le montrent les sélecteurs utilisés, cette technique s'appuie sur la présence d'un élément {{htmlelement("span")}} placé après le formulaire et qui joue le rôle de réceptacle pour les icônes. Cette méthode de contournement est nécessaire car certains navigateurs n'affichent pas les icônes placées directement sur les éléments de formulaire.
 
-<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3>
+### Rendre la valeur obligatoire
 
-<p>On peut utiliser l'attribut {{htmlattrxref("required","input")}} afin d'indiquer que la valeur doit être remplie avant de pouvoir envoyer le formulaire :</p>
+On peut utiliser l'attribut {{htmlattrxref("required","input")}} afin d'indiquer que la valeur doit être remplie avant de pouvoir envoyer le formulaire :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="uname"&gt;Veuillez choisir un nom d'utilisateur : &lt;/label&gt;
-    &lt;input type="text" id="uname" name="name" required&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
+    <input type="text" id="uname" name="name" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+```
 
-<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
+```css hidden
+div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }
+```
 
-<p>Ce qui produira ce résultat :</p>
+Ce qui produira ce résultat :
 
-<p>{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 70)}}</p>
+{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 70)}}
 
-<p>Si vous tentez d'envoyer le formulaire sans avoir saisi de valeur dans le champ texte, le navigateur affichera un message d'erreur.</p>
+Si vous tentez d'envoyer le formulaire sans avoir saisi de valeur dans le champ texte, le navigateur affichera un message d'erreur.
 
-<h3 id="Contraindre_la_longueur_du_texte_saisi">Contraindre la longueur du texte saisi</h3>
+### Contraindre la longueur du texte saisi
 
-<p>Il est possible d'indiquer la longueur minimale du texte grâce à l'attribut {{htmlattrxref("minlength", "input")}}. De même, on peut utiliser l'attribut {{htmlattrxref("maxlength", "input")}} pour indiquer le nombre maximal de caractères attendus.</p>
+Il est possible d'indiquer la longueur minimale du texte grâce à l'attribut {{htmlattrxref("minlength", "input")}}. De même, on peut utiliser l'attribut {{htmlattrxref("maxlength", "input")}} pour indiquer le nombre maximal de caractères attendus.
 
-<p>Dans l'exemple suivant, pour que le texte soit valide, il faut qu'il soit plus long que 4 caractères et moins long que 8 caractères.</p>
+Dans l'exemple suivant, pour que le texte soit valide, il faut qu'il soit plus long que 4 caractères et moins long que 8 caractères.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="uname"&gt;Choisir un nom d'utilisateur : &lt;/label&gt;
-    &lt;input type="text" id="uname" name="name" required size="45"
+```html
+<form>
+  <div>
+    <label for="uname">Choisir un nom d'utilisateur : </label>
+    <input type="text" id="uname" name="name" required size="45"
            placeholder="Le nom d'utilisateur doit mesurer entre 4 et 8 caractères"
-           minlength="4" maxlength="8"&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
-
-<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre>
-
-<p>Voici le résultat qui est alors obtenu :</p>
-
-<p>{{EmbedLiveSample('Contraindre_la_longueur_du_texte_saisi', 600, 70)}}</p>
-
-<p>Si vous essayez d'envoyer le formulaire avec un nom d'utilisateur plus court (que 4 caractères), le navigateur affichera un message d'erreur. De plus le navigateur empêchera de saisir une valeur plus longue que 8 caractères.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Si on indique <code>minlength</code> mais pas <code>required</code>, la valeur saisie est considérée comme valide car l'utilisateur peut ne pas saisir de valeur.</p>
-</div>
-
-<h3 id="Contraindre_un_format_spécifique_-_expression_rationnelle">Contraindre un format spécifique - expression rationnelle</h3>
-
-<p>L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que devra respecter la valeur saisie afin d'être valide (cf. <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Valider un champ par rapport à une expression rationnelle</a> pour une introduction).</p>
-
-<p>Dans l'exemple qui suit, on restreint le format du texte afin que ce soit un texte en minuscules (pour lequel seules les lettres de "a" à "z" sont autorisées) et qui mesure entre 4 et 8 caractères.</p>
-
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="uname"&gt;Veuillez choisir un nom d'utilisateur : &lt;/label&gt;
-    &lt;input type="text" id="uname" name="name" required size="45"
-           pattern="[a-z]{4,8}"&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-    &lt;p&gt;Un nom d'utilisateur doit être en minuscules sur 4 à 8 caractères.&lt;/p&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
-
-<pre class="brush: css">div {
+           minlength="4" maxlength="8">
+    <span class="validity"></span>
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+```
+
+```css hidden
+div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }
+```
+
+Voici le résultat qui est alors obtenu :
+
+{{EmbedLiveSample('Contraindre_la_longueur_du_texte_saisi', 600, 70)}}
+
+Si vous essayez d'envoyer le formulaire avec un nom d'utilisateur plus court (que 4 caractères), le navigateur affichera un message d'erreur. De plus le navigateur empêchera de saisir une valeur plus longue que 8 caractères.
+
+> **Note :** Si on indique `minlength` mais pas `required`, la valeur saisie est considérée comme valide car l'utilisateur peut ne pas saisir de valeur.
+
+### Contraindre un format spécifique - expression rationnelle
+
+L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que devra respecter la valeur saisie afin d'être valide (cf. [Valider un champ par rapport à une expression rationnelle](/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression) pour une introduction).
+
+Dans l'exemple qui suit, on restreint le format du texte afin que ce soit un texte en minuscules (pour lequel seules les lettres de "a" à "z" sont autorisées) et qui mesure entre 4 et 8 caractères.
+
+```html
+<form>
+  <div>
+    <label for="uname">Veuillez choisir un nom d'utilisateur : </label>
+    <input type="text" id="uname" name="name" required size="45"
+           pattern="[a-z]{4,8}">
+    <span class="validity"></span>
+    <p>Un nom d'utilisateur doit être en minuscules sur 4 à 8 caractères.</p>
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+```
+
+```css
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -367,76 +328,71 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}</pre>
+}
+```
 
-<p>Voici le résultat qui sera obtenu :</p>
+Voici le résultat qui sera obtenu :
 
-<p>{{EmbedLiveSample("Contraindre_un_format_spécifique_-_expression_rationnelle", 600, 110)}}</p>
+{{EmbedLiveSample("Contraindre_un_format_spécifique_-_expression_rationnelle", 600, 110)}}
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>En plus des exemples précédents, vous pouvez consulter les articles <a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Un premier formulaire en HTML</a> et <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment organiser un formulaire HTML</a>.</p>
+En plus des exemples précédents, vous pouvez consulter les articles [Un premier formulaire en HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) et [Comment organiser un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML).
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur contenue dans le champ texte.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{event("change")}} et {{event("input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("size", "input")}}.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>value</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui
+        représente la valeur contenue dans le champ texte.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>{{event("change")}} et {{event("input")}}</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}},
+        {{htmlattrxref("list", "input")}},
+        {{htmlattrxref("maxlength", "input")}},
+        {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("readonly", "input")}},
+        {{htmlattrxref("size", "input")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td><code>value</code></td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}},
+        {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}},
+        {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="text"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="text"&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                                                        | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '&lt;input type="text"&gt;')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+| {{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '&lt;input type="text"&gt;')}}         | {{Spec2('HTML5.1')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-text")}}</p>
+{{Compat("html.elements.input.input-text")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li>
- <li>{{HTMLElement("input")}} ainsi que l'interface DOM {{domxref("HTMLInputElement")}} qui est implémentée par cet élément.</li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/search">&lt;input type="search"&gt;</a></code></li>
- <li>{{HTMLElement("textarea")}} : un élément qui permet de saisir du texte sur plusieurs lignes</li>
-</ul>
+- [Les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires)
+- {{HTMLElement("input")}} ainsi que l'interface DOM {{domxref("HTMLInputElement")}} qui est implémentée par cet élément.
+- [`<input type="search">`](/fr/docs/Web/HTML/Element/input/search)
+- {{HTMLElement("textarea")}} : un élément qui permet de saisir du texte sur plusieurs lignes
diff --git a/files/fr/web/html/element/input/time/index.md b/files/fr/web/html/element/input/time/index.md
index ad51788acf..21c42173cd 100644
--- a/files/fr/web/html/element/input/time/index.md
+++ b/files/fr/web/html/element/input/time/index.md
@@ -8,197 +8,190 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/time
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <strong><code>time</code></strong> permettent de créer des contrôles où l'utilisateur peut saisir une heure (avec des minutes et éventuellement des secondes).</p>
+Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`time`** permettent de créer des contrôles où l'utilisateur peut saisir une heure (avec des minutes et éventuellement des secondes).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}
 
-<p>L'interface utilisateur affichée pour le contrôle peut varier d'un navigateur à l'autre. À l'heure où nous écrivons ces lignes, seul Safari ne prend pas en charge ce type de contrôle. Pour ce dernier, l'élément sera transformé en simple <code><a href="/fr/docs/Web/HTML/Element/Input/text">&lt;input type="text"&gt;</a></code>.</p>
+L'interface utilisateur affichée pour le contrôle peut varier d'un navigateur à l'autre. À l'heure où nous écrivons ces lignes, seul Safari ne prend pas en charge ce type de contrôle. Pour ce dernier, l'élément sera transformé en simple [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text).
 
-<h2 id="Apparence">Apparence</h2>
+## Apparence
 
-<h3 id="ChromeOpera">Chrome/Opera</h3>
+### Chrome/Opera
 
-<p>Pour Chrome/Opera, le contrôle <code>time</code> possède deux cases permettant de saisir les heures d'une part et les minutes d'autre part (sur 12 ou 24 heures selon la locale de l'ordinateur), deux flèches pour augmenter ou réduire la valeur et une croix permettant de supprimer la valeur.</p>
+Pour Chrome/Opera, le contrôle `time` possède deux cases permettant de saisir les heures d'une part et les minutes d'autre part (sur 12 ou 24 heures selon la locale de l'ordinateur), deux flèches pour augmenter ou réduire la valeur et une croix permettant de supprimer la valeur.
 
-<p><img alt="Contrôle Chrome pour une heure sur 12 heures" src="chrome_time.png">12 heures</p>
+![Contrôle Chrome pour une heure sur 12 heures](chrome_time.png)12 heures
 
-<p><img alt="Contrôle Chrome pour une heure sur 24 heures" src="chrome-time.png">24 heures</p>
+![Contrôle Chrome pour une heure sur 24 heures](chrome-time.png)24 heures
 
-<h3 id="Firefox">Firefox</h3>
+### Firefox
 
-<p>Pour Firefox, l'aspect du contrôle est similaire mais il ne possède pas les flèches d'incrément. L'horloge peut également s'utiliser sur un format 12 heures ou 24 heures (selon la locale du système). Un bouton rond avec une croix permet de réinitialiser la valeur du contrôle.</p>
+Pour Firefox, l'aspect du contrôle est similaire mais il ne possède pas les flèches d'incrément. L'horloge peut également s'utiliser sur un format 12 heures ou 24 heures (selon la locale du système). Un bouton rond avec une croix permet de réinitialiser la valeur du contrôle.
 
-<p><img alt="Contrôle Firefox pour une heure sur 12 heures" src="firefox-time.png">12 heures</p>
+![Contrôle Firefox pour une heure sur 12 heures](firefox-time.png)12 heures
 
-<p><img alt="Contrôle Firefox pour une heure sur 24 heures" src="firefox-time-24.png">24 heures</p>
+![Contrôle Firefox pour une heure sur 24 heures](firefox-time-24.png)24 heures
 
-<h3 id="Edge">Edge</h3>
+### Edge
 
-<p>Pour Edge, le contrôle affiché est un plus élaboré : il affiche un sélecteur avec deux bandes déroulantes pour choisir l'heure et les minutes (sur 12 ou 24 heures selon la locale) :</p>
+Pour Edge, le contrôle affiché est un plus élaboré : il affiche un sélecteur avec deux bandes déroulantes pour choisir l'heure et les minutes (sur 12 ou 24 heures selon la locale) :
 
-<p><img alt="Contrôle Edge pour la saisie sur 12 heures" src="edge_time.png">12 heures</p>
+![Contrôle Edge pour la saisie sur 12 heures](edge_time.png)12 heures
 
-<p><img alt="Contrôle Edge pour la saisie sur 24 heures" src="edge-time.png">24 heures</p>
+![Contrôle Edge pour la saisie sur 24 heures](edge-time.png)24 heures
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de l'heure saisie dans le contrôle. Il est possible de définir une valeur par défaut en indiquant une heure dans l'attribut {{htmlattrxref("value", "input")}} :</p>
+Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de l'heure saisie dans le contrôle. Il est possible de définir une valeur par défaut en indiquant une heure dans l'attribut {{htmlattrxref("value", "input")}} :
 
-<pre class="brush: html">&lt;label for="appt-time"&gt;Veuillez choisir une heure de rendez-vous :&lt;/label&gt;
-&lt;input id="appt-time" type="time" name="appt-time" value="13:30"&gt;</pre>
+```html
+<label for="appt-time">Veuillez choisir une heure de rendez-vous :</label>
+<input id="appt-time" type="time" name="appt-time" value="13:30">
+```
 
-<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p>
+{{EmbedLiveSample('Valeur', 600, 60)}}
 
-<p>Il est également possible d'obtenir et de fixer l'heure en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p>
+Il est également possible d'obtenir et de fixer l'heure en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :
 
-<pre class="brush: js">var timeControl = document.querySelector('input[type="time"]');
-timeControl.value = '15:30';</pre>
+```js
+var timeControl = document.querySelector('input[type="time"]');
+timeControl.value = '15:30';
+```
 
-<h3 id="Représentation_de_la_valeur">Représentation de la valeur</h3>
+### Représentation de la valeur
 
-<p>Attention, le format d'affichage peut être différent de la valeur exacte contenue dans l'attribut <code>value</code>. Le format d'affichage sera choisi en fonction de la locale du système d'exploitation de l'utilisateur alors que la valeur de <code>value</code> suivra toujours le format <code>hh:mm</code> (où <code>hh</code> représente les deux chiffres de l'heure sur 24 heures et où <code>mm</code> représente les deux chiffres pour les minutes). Ainsi, <code>13:30</code>, pourra être affiché sous la forme <code>1.30 PM</code> dans le contrôle mais la valeur envoyée avec le formulaire sera toujours <code>appt-time=13%3A30</code>. Pour en savoir plus, vous pouvez vous référer à <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">l'article sur les formats utilisés pour les représentations des dates et heures</a>.</p>
+Attention, le format d'affichage peut être différent de la valeur exacte contenue dans l'attribut `value`. Le format d'affichage sera choisi en fonction de la locale du système d'exploitation de l'utilisateur alors que la valeur de `value` suivra toujours le format `hh:mm` (où `hh` représente les deux chiffres de l'heure sur 24 heures et où `mm` représente les deux chiffres pour les minutes). Ainsi, `13:30`, pourra être affiché sous la forme `1.30 PM` dans le contrôle mais la valeur envoyée avec le formulaire sera toujours `appt-time=13%3A30`. Pour en savoir plus, vous pouvez vous référer à [l'article sur les formats utilisés pour les représentations des dates et heures](/fr/docs/Web/HTML/Formats_date_heure_HTML).
 
-<p>Prenons un autre exemple qui permet de voir simultanément la valeur dans le contrôle et celle stockée dans l'attribut :</p>
+Prenons un autre exemple qui permet de voir simultanément la valeur dans le contrôle et celle stockée dans l'attribut :
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="startTime"&gt;Début : &lt;/label&gt;
-  &lt;input type="time" id="startTime"&gt;
-  &lt;p&gt;
-    Valeur stockée dans &lt;code&gt;&amp;lt;input time&amp;gt;&lt;/code&gt; :&lt;code&gt;
-            "&lt;span id="value"&gt;n/a&lt;/span&gt;"&lt;/code&gt;.
-  &lt;/p&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <label for="startTime">Début : </label>
+  <input type="time" id="startTime">
+  <p>
+    Valeur stockée dans <code>&lt;input time&gt;</code> :<code>
+            "<span id="value">n/a</span>"</code>.
+  </p>
+</form>
+```
 
-<h4 id="JavaScript">JavaScript</h4>
+#### JavaScript
 
-<p>On utilise quelques lignes de JavaScript afin de récupérer la valeur stockée et on l'insère dans l'élément <code>&lt;span&gt;</code> du fragment HTML précédent en surveillant l'évènement {{domxref("HTMLElement/input_event", "input")}} :</p>
+On utilise quelques lignes de JavaScript afin de récupérer la valeur stockée et on l'insère dans l'élément `<span>` du fragment HTML précédent en surveillant l'évènement {{domxref("HTMLElement/input_event", "input")}} :
 
-<pre class="brush: js">var startTime = document.getElementById("startTime");
+```js
+var startTime = document.getElementById("startTime");
 var valueSpan = document.getElementById("value");
 
 startTime.addEventListener("input", function() {
   valueSpan.innerText = startTime.value;
-}, false);</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("Représentation_de_la_valeur", 600, 80)}}</p>
-
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
-
-<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"time"</code> gèrent les attributs suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("max")}}</code></td>
-   <td>L'heure la plus tardive qui est accepté, au format <code>"hh:mm"</code>.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("min")}}</code></td>
-   <td>L'heure la plus tôt qui est acceptée au format <code>"hh:mm"</code>.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("readonly")}}</code></td>
-   <td>Un attribut booléen qui, lorsqu'il est présent, indique que le contenu du champ ne peut pas être édité par l'utilisateur.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("step")}}</code></td>
-   <td>Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation.</td>
-  </tr>
- </tbody>
-</table>
+}, false);
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Représentation_de_la_valeur", 600, 80)}}
+
+## Attributs supplémentaires
+
+En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"time"` gèrent les attributs suivants :
+
+| Attribut                       | Description                                                                                                                                        |
+| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("max")}}`         | L'heure la plus tardive qui est accepté, au format `"hh:mm"`.                                                                                      |
+| `{{anch("min")}}`         | L'heure la plus tôt qui est acceptée au format `"hh:mm"`.                                                                                          |
+| `{{anch("readonly")}}` | Un attribut booléen qui, lorsqu'il est présent, indique que le contenu du champ ne peut pas être édité par l'utilisateur.                          |
+| `{{anch("step")}}`         | Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation. |
 
-<div class="note">
-  <p><strong>Note :</strong> À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine <strong>périodique</strong>. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique <code>min</code> avec la valeur <code>"14:00"</code> et <code>max</code> avec la valeur <code>"2:00"</code>, cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant.</p>
-</div>
+> **Note :** À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine **périodique**. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique `min` avec la valeur `"14:00"` et `max` avec la valeur `"2:00"`, cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant.
 
-<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3>
+### {{htmlattrdef("max")}}
 
-<p>Une chaîne de caractères, au format <code>"hh:mm"</code>, qui indique l'heure la plus tardive qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun maximum n'est défini.</p>
+Une chaîne de caractères, au format `"hh:mm"`, qui indique l'heure la plus tardive qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun maximum n'est défini.
 
-<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3>
+### {{htmlattrdef("min")}}
 
-<p>Une chaîne de caractères, au format <code>"hh:mm"</code>, qui indique l'heure la plus tôt qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun minimum n'est défini.</p>
+Une chaîne de caractères, au format `"hh:mm"`, qui indique l'heure la plus tôt qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun minimum n'est défini.
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}
 
-<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3>
+### {{htmlattrdef("step")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}
 
-<p>Pour les champs de type <code>time</code>, la valeur de l'attribut <code>step</code> est exprimée en secondes (avec un facteur de multiplication de 1000). Par défaut, la valeur de l'incrément est 60, ce qui correspond à 1 minute.</p>
+Pour les champs de type `time`, la valeur de l'attribut `step` est exprimée en secondes (avec un facteur de multiplication de 1000). Par défaut, la valeur de l'incrément est 60, ce qui correspond à 1 minute.
 
-<p><em>À l'heure où ces lignes sont écrites, la signification de la valeur <code>"any"</code> pour l'attribut <code>step</code> pour les champs <code>time</code> n'est pas certaine. Cette information sera mise à jour dès que possible.</em></p>
+_À l'heure où ces lignes sont écrites, la signification de la valeur `"any"` pour l'attribut `step` pour les champs `time` n'est pas certaine. Cette information sera mise à jour dès que possible._
 
-<h2 id="Utiliser_&lt;input_typetime>">Utiliser <code>&lt;input type="time"&gt;</code></h2>
+## Utiliser `<input type="time">`
 
-<p>Ces champs de saisie peuvent sembler pratiques : ils fournissent simplement une interface utilisateur pour sélectionner ds heures et normalisent les données dans un format (indépendant de la locale de l'utilisateur) avant de l'envoyer au serveur. Toutefois, quelques écueils peuvent apparaître en raison de la prise en charge hétérogène des différents navigateurs.</p>
+Ces champs de saisie peuvent sembler pratiques : ils fournissent simplement une interface utilisateur pour sélectionner ds heures et normalisent les données dans un format (indépendant de la locale de l'utilisateur) avant de l'envoyer au serveur. Toutefois, quelques écueils peuvent apparaître en raison de la prise en charge hétérogène des différents navigateurs.
 
-<p>Dans la suite de cet article, nous verrons des cas d'utilisation simples puis complexes autour de <code>&lt;input type="time"&gt;</code> puis nous verrons comment gérer l'absence de prise en charge des navigateur avec un exemple plus développé.</p>
+Dans la suite de cet article, nous verrons des cas d'utilisation simples puis complexes autour de `<input type="time">` puis nous verrons comment gérer l'absence de prise en charge des navigateur avec un exemple plus développé.
 
-<h3 id="Utilisation_simple">Utilisation simple</h3>
+### Utilisation simple
 
-<p>Dans sa forme la plus simple, <code>&lt;input type="time"&gt;</code> n'est accompagné que d'un élément {{htmlelement("label")}} :</p>
+Dans sa forme la plus simple, `<input type="time">` n'est accompagné que d'un élément {{htmlelement("label")}} :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="appt-time"&gt;Veuillez choisir une heure de rendez-vous : &lt;/label&gt;
-  &lt;input id="appt-time" type="time" name="appt-time"&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <label for="appt-time">Veuillez choisir une heure de rendez-vous : </label>
+  <input id="appt-time" type="time" name="appt-time">
+</form>
+```
 
-<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p>
+{{EmbedLiveSample('Utilisation_simple', 600, 40)}}
 
-<h3 id="Ajuster_la_taille_du_contrôle">Ajuster la taille du contrôle</h3>
+### Ajuster la taille du contrôle
 
-<p><code>&lt;input type="time"&gt;</code> ne prend pas en charge d'attribut qui permette de le dimensionner (à la façon de {{htmlattrxref("size", "input")}}). Il faut donc utiliser <a href="/fr/docs/Web/CSS">CSS</a> si besoin.</p>
+`<input type="time">` ne prend pas en charge d'attribut qui permette de le dimensionner (à la façon de {{htmlattrxref("size", "input")}}). Il faut donc utiliser [CSS](/fr/docs/Web/CSS) si besoin.
 
-<h3 id="Utiliser_step">Utiliser <code>step</code></h3>
+### Utiliser `step`
 
-<p>L'attribut {{htmlattrxref("step", "input")}} peut être utilisé afin de faire varier l'incrément de temps lorsqu'on passe d'une valeur à la suivante ou à la précédente. Attention toutefois, cela n'est pas pris en charge ou homogène parmi les différents navigateurs.</p>
+L'attribut {{htmlattrxref("step", "input")}} peut être utilisé afin de faire varier l'incrément de temps lorsqu'on passe d'une valeur à la suivante ou à la précédente. Attention toutefois, cela n'est pas pris en charge ou homogène parmi les différents navigateurs.
 
-<p>La valeur de cet attribut est un entier exprimant le nombre de secondes à incrémenter. Si on choisit une valeur inférieure à 60 secondes (c'est-à-dire 1 minute), le contrôle <code>time</code> affichera alors une troisième section pour les secondes après les heures et les minutes:</p>
+La valeur de cet attribut est un entier exprimant le nombre de secondes à incrémenter. Si on choisit une valeur inférieure à 60 secondes (c'est-à-dire 1 minute), le contrôle `time` affichera alors une troisième section pour les secondes après les heures et les minutes:
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="appt-time"&gt;Veuillez choisir une heure de rendez-vous : &lt;/label&gt;
-  &lt;input id="appt-time" type="time" name="appt-time" step="2"&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <label for="appt-time">Veuillez choisir une heure de rendez-vous : </label>
+  <input id="appt-time" type="time" name="appt-time" step="2">
+</form>
+```
 
-<p>{{EmbedLiveSample("Utiliser_step", 600, 40)}}</p>
+{{EmbedLiveSample("Utiliser_step", 600, 40)}}
 
-<p>Cependant, cela ne semble avoir un effet prévisible que pour Chrome/Opera qui sont les deux navigateurs à posséder des flèches d'incrément. Avant l'exemple précédent, cliquer sur le flèche augmentera/réduira l'heure de deux secondes (si on souhaite manipuler des minutes, il faudra multiplier par 60 et de même pour les heures : un incrément de 120 correspondra à 2 minutes et un incrément de 7200 correspondra à 2 heures).</p>
+Cependant, cela ne semble avoir un effet prévisible que pour Chrome/Opera qui sont les deux navigateurs à posséder des flèches d'incrément. Avant l'exemple précédent, cliquer sur le flèche augmentera/réduira l'heure de deux secondes (si on souhaite manipuler des minutes, il faudra multiplier par 60 et de même pour les heures : un incrément de 120 correspondra à 2 minutes et un incrément de 7200 correspondra à 2 heures).
 
-<p>Cet attribut semble n'avoir aucun impact pour Firefox ou Edge voire empêche la validation de fonctionner (voir la prochaine section).</p>
+Cet attribut semble n'avoir aucun impact pour Firefox ou Edge voire empêche la validation de fonctionner (voir la prochaine section).
 
-<h2 id="Validation">Validation</h2>
+## Validation
 
-<p>Par défaut <code>&lt;input type="time"&gt;</code> ne valide pas les valeurs saisies. En effet, l'interface utilisateur ne permet de choisir une valeur exotique (par exemple 36:87).</p>
+Par défaut `<input type="time">` ne valide pas les valeurs saisies. En effet, l'interface utilisateur ne permet de choisir une valeur exotique (par exemple 36:87).
 
-<h3 id="Indiquer_une_heure_maximale_et_minimale">Indiquer une heure maximale et minimale</h3>
+### Indiquer une heure maximale et minimale
 
-<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de réduire la plage horaire valide pendant laquelle l'utilisateur peut sélectionner une heure. Dans l'exemple suivant, l'utilisateur peut saisir une heure minimum de <code>12:00</code> et une heure maximum de <code>18:00</code>:</p>
+Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de réduire la plage horaire valide pendant laquelle l'utilisateur peut sélectionner une heure. Dans l'exemple suivant, l'utilisateur peut saisir une heure minimum de `12:00` et une heure maximum de `18:00`:
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="appt-time"&gt;Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : &lt;/label&gt;
-  &lt;input id="appt-time" type="time" name="appt-time"
-         min="12:00" max="18:00"&gt;
-  &lt;span class="validity"&gt;&lt;/span&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <label for="appt-time">Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : </label>
+  <input id="appt-time" type="time" name="appt-time"
+         min="12:00" max="18:00">
+  <span class="validity"></span>
+</form>
+```
 
-<p>{{EmbedLiveSample('Indiquer_une_heure_maximale_et_minimale', 600, 40)}}</p>
+{{EmbedLiveSample('Indiquer_une_heure_maximale_et_minimale', 600, 40)}}
 
-<p>Voici la feuille de style CSS utilisée dans l'exemple précédent. On utilise les pseudos-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes qui indiquent cette validité ont été placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de placer du contenu généré dans le contrôle.</p>
+Voici la feuille de style CSS utilisée dans l'exemple précédent. On utilise les pseudos-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes qui indiquent cette validité ont été placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de placer du contenu généré dans le contrôle.
 
-<pre class="brush: css">div {
+```css
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -221,84 +214,85 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}</pre>
+}
+```
+
+Avec ce fragment de code HTML :
 
-<p>Avec ce fragment de code HTML :</p>
+- Seules les heures comprises entre 12:00 et 18:00 sont affichées comme étant valides (les heures avant et après seront invalides).
+- Selon le navigateur utilisé, il peut même être impossible de sélectionner une heure en dehors de la plage restreinte (avec Edge notamment).
 
-<ul>
- <li>Seules les heures comprises entre 12:00 et 18:00 sont affichées comme étant valides (les heures avant et après seront invalides).</li>
- <li>Selon le navigateur utilisé, il peut même être impossible de sélectionner une heure en dehors de la plage restreinte (avec Edge notamment).</li>
-</ul>
+### Rendre la saisie obligatoire
 
-<h3 id="Rendre_la_saisie_obligatoire">Rendre la saisie obligatoire</h3>
+On peut également utiliseer l'attribut {{htmlattrxref("required", "input")}} afin que la saisie du champ soit obligatoire. Lorsque c'est le cas, les navigateurs afficheront un message d'erreur si l'utilisateur tente d'envoyer le formulaire sans avoir saisi de valeur (ou si celle-ci est en dehors de la plage indiquée).
 
-<p>On peut également utiliseer l'attribut {{htmlattrxref("required", "input")}} afin que la saisie du champ soit obligatoire. Lorsque c'est le cas, les navigateurs afficheront un message d'erreur si l'utilisateur tente d'envoyer le formulaire sans avoir saisi de valeur (ou si celle-ci est en dehors de la plage indiquée).</p>
+Prenons l'exemple suivant qui restreint la plage horaire sélectionnable et qui rend le champ obligatoire :
 
-<p>Prenons l'exemple suivant qui restreint la plage horaire sélectionnable et qui rend le champ obligatoire :</p>
+```html
+<form>
+  <div>
+    <label for="appt-time">Veuillez choisir une heure de rendez-vous (horaires d'ouverture entre 12:00 et 18:00) : </label>
+    <input id="appt-time" type="time" name="appt-time"
+           min="12:00" max="18:00" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+      <input type="submit" value="Envoyer le formulaire">
+  </div>
+</form>
+```
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="appt-time"&gt;Veuillez choisir une heure de rendez-vous (horaires d'ouverture entre 12:00 et 18:00) : &lt;/label&gt;
-    &lt;input id="appt-time" type="time" name="appt-time"
-           min="12:00" max="18:00" required&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-      &lt;input type="submit" value="Envoyer le formulaire"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+Si vous essayez de soumettre le formulaire sans avoir saisi de valeur (ou avec une heure en dehors des heures d'ouverture indiquées), le navigateur affichera une erreur. Vous pouvez manipuler le résultat obtenu :
 
-<p>Si vous essayez de soumettre le formulaire sans avoir saisi de valeur (ou avec une heure en dehors des heures d'ouverture indiquées), le navigateur affichera une erreur. Vous pouvez manipuler le résultat obtenu :</p>
+{{EmbedLiveSample('Rendre_la_saisie_obligatoire', 600, 120)}}
 
-<p>{{EmbedLiveSample('Rendre_la_saisie_obligatoire', 600, 120)}}</p>
-<div class="warning">
-<p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p>
-</div>
+> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
 
-<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2>
+## Gérer la prise en charge des navigateurs
 
-<p>Comme mentionné avant, un problème peut être l'hétérogénéité de la prise en charge des navigateurs : Safari ne prend pas en charge cette fonctionnalité sur les ordinateurs de bureau et les anciennes versions d'Internet Explorer n'implémentent pas cet élément.</p>
+Comme mentionné avant, un problème peut être l'hétérogénéité de la prise en charge des navigateurs : Safari ne prend pas en charge cette fonctionnalité sur les ordinateurs de bureau et les anciennes versions d'Internet Explorer n'implémentent pas cet élément.
 
-<p>Pour les plateformes mobiles (Android et iOS par exemple), les systèmes d'exploitation fournissent des interfaces particulièrement adaptées aux environnements tactiles. Voici par exemple le sélecteur d'heure pour Chrome sur Android :</p>
+Pour les plateformes mobiles (Android et iOS par exemple), les systèmes d'exploitation fournissent des interfaces particulièrement adaptées aux environnements tactiles. Voici par exemple le sélecteur d'heure pour Chrome sur Android :
 
-<p><img alt="" src="chrome-android-time.png"></p>
+![](chrome-android-time.png)
 
-<p>Lorsqu'un navigateur ne prend pas en charge ce type d'élément, il utilise un champ texte (<code>&lt;input type="text"&gt;</code>) à la place. Mais cela crée des problèmes, tant au niveau de l'interface utilisateur que de la cohérence des données et du format.</p>
+Lorsqu'un navigateur ne prend pas en charge ce type d'élément, il utilise un champ texte (`<input type="text">`) à la place. Mais cela crée des problèmes, tant au niveau de l'interface utilisateur que de la cohérence des données et du format.
 
-<p>C'est ce problème de format qui est le plus important. Comme nous l'avons expliqués plus haut, un champ<code>time</code> permet d'obtenir un valeur normalisée, respectant le format <code>hh:mm</code>. Avec un champ texte, le navigateur ne reconnaît pas de format particulier pour l'heure et les utilisateurs peuvent employer différentes formes pour décrire l'heure voulue :</p>
+C'est ce problème de format qui est le plus important. Comme nous l'avons expliqués plus haut, un champ`time` permet d'obtenir un valeur normalisée, respectant le format `hh:mm`. Avec un champ texte, le navigateur ne reconnaît pas de format particulier pour l'heure et les utilisateurs peuvent employer différentes formes pour décrire l'heure voulue :
 
-<ul>
- <li><code>3.00 pm</code></li>
- <li><code>3:00pm</code></li>
- <li><code>15:00</code></li>
- <li><code>3h de l'après-midi</code></li>
- <li>etc.</li>
-</ul>
+- `3.00 pm`
+- `3:00pm`
+- `15:00`
+- `3h de l'après-midi`
+- etc.
 
-<p>Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur le champ <code>time</code>. Bien quqe le champ <code>time</code> n'utilise pas cet attribut, le champ texte pourra l'utiliser. Vous pouvez par exemple tester ce fragment de code dans un navigateur qui ne prend pas en charge <code>&lt;input type="time"&gt;</code> :</p>
+Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur le champ `time`. Bien quqe le champ `time` n'utilise pas cet attribut, le champ texte pourra l'utiliser. Vous pouvez par exemple tester ce fragment de code dans un navigateur qui ne prend pas en charge `<input type="time">` :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="appt-time"&gt;Veuillez choisir une heure de rendez-vous (heures d'ouverture entre 12:00 et 18:00) : &lt;/label&gt;
-    &lt;input id="appt-time" type="time" name="appt-time"
+```html
+<form>
+  <div>
+    <label for="appt-time">Veuillez choisir une heure de rendez-vous (heures d'ouverture entre 12:00 et 18:00) : </label>
+    <input id="appt-time" type="time" name="appt-time"
            min="12:00" max="18:00" required
-           pattern="[0-9]{2}:[0-9]{2}"&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-      &lt;input type="submit" value="Envoyer"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+           pattern="[0-9]{2}:[0-9]{2}">
+    <span class="validity"></span>
+  </div>
+  <div>
+      <input type="submit" value="Envoyer">
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p>
+{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}
 
-<p>Si on essaie d'envoyer une valeur qui ne respecte pas le bon format, le navigateur affichera un message d'erreur et mettra en évidence le champ si celui-ci ne suit pas la forme <code>nn:nn</code> avec <code>n</code> un nombre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des heures invalides mais qui respectent ce format.</p>
+Si on essaie d'envoyer une valeur qui ne respecte pas le bon format, le navigateur affichera un message d'erreur et mettra en évidence le champ si celui-ci ne suit pas la forme `nn:nn` avec `n` un nombre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des heures invalides mais qui respectent ce format.
 
-<p>De plus, comment communiquer à l'utilisateur le format dans lequel saisir l'heure ?</p>
+De plus, comment communiquer à l'utilisateur le format dans lequel saisir l'heure ?
 
-<p>Il reste donc un problème.</p>
+Il reste donc un problème.
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -321,45 +315,49 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}</pre>
-
-<p>Actuellement, la meilleure façon de gérer ce type de saisie pour les différents navigateurs consiste à utiliser deux contrôles (le premier pour la saisie des heures et le second pour la saisie des minutes) avec deux éléments {{htmlelement("select")}} (cf. ci-après) ou d'utiliser certaines bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> ou encore <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<p>Dans l'exemple qui suit, on crée deux ensembles d'éléments : un sélecteur natif avec <code>&lt;input type="time"&gt;</code> et un ensemble de deux éléments {{htmlelement("select")}} qui permettent de choisir des heures et des minutes dans les navigateurs qui ne prennent pas en charge le contrôle natif.</p>
-
-<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p>
-
-<p>Voici le fragment HTML utilisé :</p>
-
-<pre class="brush: html">&lt;form&gt;
-  &lt;div class="nativeTimePicker"&gt;
-    &lt;label for="appt-time"&gt;Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : &lt;/label&gt;
-      &lt;input id="appt-time" type="time" name="appt-time"
-             min="12:00" max="18:00" required&gt;
-      &lt;span class="validity"&gt;&lt;/span&gt;
-    &lt;/div&gt;
-  &lt;p class="fallbackLabel"&gt;Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : &lt;/p&gt;
-  &lt;div class="fallbackTimePicker"&gt;
-    &lt;div&gt;
-      &lt;span&gt;
-        &lt;label for="hour"&gt;Heures :&lt;/label&gt;
-        &lt;select id="hour" name="hour"&gt;
-        &lt;/select&gt;
-      &lt;/span&gt;
-      &lt;span&gt;
-        &lt;label for="minute"&gt;Minutes :&lt;/label&gt;
-        &lt;select id="minute" name="minute"&gt;
-        &lt;/select&gt;
-      &lt;/span&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
-
-<p>Les valeurs pour les heures et les minutes seront générées dynamiquement en JavaScript.</p>
-
-<pre class="brush: css hidden">div {
+}
+```
+
+Actuellement, la meilleure façon de gérer ce type de saisie pour les différents navigateurs consiste à utiliser deux contrôles (le premier pour la saisie des heures et le second pour la saisie des minutes) avec deux éléments {{htmlelement("select")}} (cf. ci-après) ou d'utiliser certaines bibliothèques JavaScript telles que [jQuery date picker](https://jqueryui.com/datepicker/) ou encore [jQuery timepicker plugin](http://timepicker.co/).
+
+## Exemples
+
+Dans l'exemple qui suit, on crée deux ensembles d'éléments : un sélecteur natif avec `<input type="time">` et un ensemble de deux éléments {{htmlelement("select")}} qui permettent de choisir des heures et des minutes dans les navigateurs qui ne prennent pas en charge le contrôle natif.
+
+{{EmbedLiveSample('Exemples', 600, 140)}}
+
+Voici le fragment HTML utilisé :
+
+```html
+<form>
+  <div class="nativeTimePicker">
+    <label for="appt-time">Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : </label>
+      <input id="appt-time" type="time" name="appt-time"
+             min="12:00" max="18:00" required>
+      <span class="validity"></span>
+    </div>
+  <p class="fallbackLabel">Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : </p>
+  <div class="fallbackTimePicker">
+    <div>
+      <span>
+        <label for="hour">Heures :</label>
+        <select id="hour" name="hour">
+        </select>
+      </span>
+      <span>
+        <label for="minute">Minutes :</label>
+        <select id="minute" name="minute">
+        </select>
+      </span>
+    </div>
+  </div>
+</form>
+```
+
+Les valeurs pour les heures et les minutes seront générées dynamiquement en JavaScript.
+
+```css hidden
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -382,11 +380,13 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}</pre>
+}
+```
 
-<p>La partie la plus intéressante du code est celle qui permet de détecter si le contrôle natif est pris en charge. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on modifie son attribut <code>type</code> afin qu'il vaille <code>time</code>, immédiatement après, on vérifie la valeur du type. Si le navigateur ne prend pas en charge l'élément, il renverra <code>text</code> car l'élément a été transformé en <code>&lt;input type="text"&gt;</code>, dans ce cas, on masque le sélecteur natif et on affiche l'interface alternative avec les deux éléments {{htmlelement("select")}}.</p>
+La partie la plus intéressante du code est celle qui permet de détecter si le contrôle natif est pris en charge. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on modifie son attribut `type` afin qu'il vaille `time`, immédiatement après, on vérifie la valeur du type. Si le navigateur ne prend pas en charge l'élément, il renverra `text` car l'élément a été transformé en `<input type="text">`, dans ce cas, on masque le sélecteur natif et on affiche l'interface alternative avec les deux éléments {{htmlelement("select")}}.
 
-<pre class="brush: js">// On définit quelques variables
+```js
+// On définit quelques variables
 var nativePicker = document.querySelector('.nativeTimePicker');
 var fallbackPicker = document.querySelector('.fallbackTimePicker');
 var fallbackLabel = document.querySelector('.fallbackLabel');
@@ -418,9 +418,9 @@ if(test.type === 'text') {
 
 function populateHours() {
   // On ajoute les heures dans
-  // l'élément &lt;select&gt; avec les 6
+  // l'élément <select> avec les 6
   // heures ouvertes
-  for(var i = 12; i &lt;= 18; i++) {
+  for(var i = 12; i <= 18; i++) {
     var option = document.createElement('option');
     option.textContent = i;
     hourSelect.appendChild(option);
@@ -429,9 +429,9 @@ function populateHours() {
 
 function populateMinutes() {
   // On génère 60 options pour 60 minutes
-  for(var i = 0; i &lt;= 59; i++) {
+  for(var i = 0; i <= 59; i++) {
     var option = document.createElement('option');
-    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    option.textContent = (i < 10) ? ("0" + i) : i;
     minuteSelect.appendChild(option);
   }
 }
@@ -446,63 +446,68 @@ function populateMinutes() {
  }
 
  hourSelect.onchange = setMinutesToZero;
- minuteSelect.onchange = setMinutesToZero;</pre>
+ minuteSelect.onchange = setMinutesToZero;
+```
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente un heure (avec des minutes) ou bien une chaîne de caractères vide.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>list</code>.</td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui
+        représente un heure (avec des minutes) ou bien une chaîne de caractères
+        vide.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>
+        {{domxref("HTMLElement/change_event", "change")}} et
+        {{domxref("HTMLElement/input_event", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}},
+        {{htmlattrxref("list", "input")}},
+        {{htmlattrxref("readonly", "input")}} et
+        {{htmlattrxref("step", "input")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td>
+        <code>value</code>, <code>valueAsDate</code>,
+        <code>valueAsNumber</code>, <code>list</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}},
+        {{domxref("HTMLInputElement.stepDown", "stepDown()")}},
+        {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#time-state-(type=time)', '&lt;input type="time"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'forms.html#time-state-(type=time)', '&lt;input type="time"&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-time")}}</p>
+{{Compat("html.elements.input.input-time")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM {{domxref("HTMLInputElement")}} qui peut être utilisée pour manipuler l'élément</li>
- <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire">Un tutoriel pour les sélecteurs de date et d'heure</a></li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/week">&lt;input type="week"&gt;</a></code>, and <code><a href="/fr/docs/Web/HTML/Element/input/month">&lt;input type="month"&gt;</a></code></li>
-</ul>
+- L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM {{domxref("HTMLInputElement")}} qui peut être utilisée pour manipuler l'élément
+- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML)
+- [Un tutoriel pour les sélecteurs de date et d'heure](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire)
+- [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local), [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date), [`<input type="week">`](/fr/docs/Web/HTML/Element/input/week), and [`<input type="month">`](/fr/docs/Web/HTML/Element/input/month)
diff --git a/files/fr/web/html/element/input/url/index.md b/files/fr/web/html/element/input/url/index.md
index 56d928e2ab..e9f7950ab4 100644
--- a/files/fr/web/html/element/input/url/index.md
+++ b/files/fr/web/html/element/input/url/index.md
@@ -8,252 +8,213 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/url
 ---
-<div>{{HTMLRef}}</div>
-
-<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"url"</strong></code> sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}</div>
-
-<p>La valeur saisie est automatiquement validée par le navigateur qui vérifie qu'elle est vide ou formatée correctement avant que le formulaire puisse être envoyé. Les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées auomatiquement selon le cas de figure.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type<code>"url"</code> utiliseront à la place un élément {{HTMLElement("input/text", "text")}}.</p>
-</div>
-
-<h2 id="Valeur">Valeur</h2>
-
-<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est automatiquement vérifiée afin de s'assurer que sa syntaxe est bien celle d'une URL. De façon plus précise, seuls deux formats sont autorisés :</p>
-
-<ol>
- <li>Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a pas saisi de valeur ou que la valeur a été retirée.</li>
- <li>Une seule URL bien formée. Cela ne signifie pas nécessairement que l'adresse existe mais qu'elle est formatée correctement. Autrement dit, la chaîne de caractères respecte la forme <code>"schema://restedelurl"</code>.</li>
-</ol>
-
-<p>Voir {{anch("Validation")}} pour plus de détails sur le format des URL et leur validation.</p>
-
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
-
-<p>En complément des attributs qui fonctionnent pour tous les types d'éléments {{HTMLElement("input")}}, les champs de saisie d'URL prennent en charge les attributs suivants :</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("maxlength")}}</code></td>
-   <td>La longueur maximale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("minlength")}}</code></td>
-   <td>La longueur minimale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("pattern")}}</code></td>
-   <td>Une expression rationnelle que doit respecter la valeur afin d'être considérée comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("placeholder")}}</code></td>
-   <td>Une valeur d'exemple à afficher lorsqu'aucune valeur n'est saisie dans le champ.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("readonly")}}</code></td>
-   <td>Un attribut booléen qui indique si le champ est en lecture seule et ne peut être édité par l'utilisateur.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("size")}}</code></td>
-   <td>Le nombre de caractères qui doivent être visibles à l'écran.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("spellcheck")}}</code></td>
-   <td>Une chaîne de caractères qui contrôle si la vérification orthographique doit être activée.</td>
-  </tr>
- </tbody>
-</table>
+{{HTMLRef}}
 
-<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3>
+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"url"`** sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL.
 
-<p>Le nombre maximal de caractères (en nombre de points de code UTF-16) qui peuvent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur maximale. La valeur de cet attribut doit être supérieure ou égale à celle de l'attribut <code>minlength</code>.</p>
+{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}
 
-<p>La valeur <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne respectera pas la validation</a> si la longueur du texte saisi est supérieure à cet attribut.</p>
+La valeur saisie est automatiquement validée par le navigateur qui vérifie qu'elle est vide ou formatée correctement avant que le formulaire puisse être envoyé. Les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées auomatiquement selon le cas de figure.
 
-<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3>
+> **Note :** Les navigateurs qui ne prennent pas en charge le type`"url"` utiliseront à la place un élément {{HTMLElement("input/text", "text")}}.
 
-<p>Le nombre minimal de caractères (en nombre de points de code UTF-16) qui doivent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur minimale. La valeur de cet attribut doit être inférieure ou égale à celle de l'attribut <code>maxlength</code>.</p>
+## Valeur
 
-<p>La valeur <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne respectera pas la validation</a> si la longueur du texte saisi est inférieure à cet attribut.</p>
+La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est automatiquement vérifiée afin de s'assurer que sa syntaxe est bien celle d'une URL. De façon plus précise, seuls deux formats sont autorisés :
 
-<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3>
+1.  Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a pas saisi de valeur ou que la valeur a été retirée.
+2.  Une seule URL bien formée. Cela ne signifie pas nécessairement que l'adresse existe mais qu'elle est formatée correctement. Autrement dit, la chaîne de caractères respecte la forme `"schema://restedelurl"`.
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>
+Voir {{anch("Validation")}} pour plus de détails sur le format des URL et leur validation.
 
-<p>Voir <a href="#format">la section ci-après sur le format</a> pour plus de détails et d'exemples.</p>
+## Attributs supplémentaires
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>
+En complément des attributs qui fonctionnent pour tous les types d'éléments {{HTMLElement("input")}}, les champs de saisie d'URL prennent en charge les attributs suivants :
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+| Attribut                           | Description                                                                                                        |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `{{anch("maxlength")}}`     | La longueur maximale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide. |
+| `{{anch("minlength")}}`     | La longueur minimale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide. |
+| `{{anch("pattern")}}`         | Une expression rationnelle que doit respecter la valeur afin d'être considérée comme valide.                       |
+| `{{anch("placeholder")}}` | Une valeur d'exemple à afficher lorsqu'aucune valeur n'est saisie dans le champ.                                   |
+| `{{anch("readonly")}}`     | Un attribut booléen qui indique si le champ est en lecture seule et ne peut être édité par l'utilisateur.          |
+| `{{anch("size")}}`             | Le nombre de caractères qui doivent être visibles à l'écran.                                                       |
+| `{{anch("spellcheck")}}`     | Une chaîne de caractères qui contrôle si la vérification orthographique doit être activée.                         |
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>
+### {{htmlattrdef("maxlength")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}</p>
+Le nombre maximal de caractères (en nombre de points de code UTF-16) qui peuvent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur maximale. La valeur de cet attribut doit être supérieure ou égale à celle de l'attribut `minlength`.
 
-<h2 id="Attributs_non-standard">Attributs non-standard</h2>
+La valeur [ne respectera pas la validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte saisi est supérieure à cet attribut.
 
-<p>Il est possible (mais déconseillé) d'utiliser ces attributs non-standard sur les champs de saisie d'URL.</p>
+### {{htmlattrdef("minlength")}}
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("autocorrect")}}</code></td>
-   <td>Autorise ou non la correction automatique lors de l'édition de ce champ. <strong>Uniquement pris en charge par Safari.</strong></td>
-  </tr>
-  <tr>
-   <td><code>{{anch("mozactionhint")}}</code></td>
-   <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. Cet attribut est destiné à fournir un libellé équivoque pour la touche du clavier virtuel présenté à l'utilisateur.<strong> Uniquement pris en charge par Firefox pour Android.</strong></td>
-  </tr>
- </tbody>
-</table>
+Le nombre minimal de caractères (en nombre de points de code UTF-16) qui doivent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur minimale. La valeur de cet attribut doit être inférieure ou égale à celle de l'attribut `maxlength`.
+
+La valeur [ne respectera pas la validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte saisi est inférieure à cet attribut.
+
+### {{htmlattrdef("pattern")}}
+
+{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}
+
+Voir [la section ci-après sur le format](#format) pour plus de détails et d'exemples.
+
+{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}
+
+{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}
 
-<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>
+{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}
 
-<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>
+## Attributs non-standard
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>
+Il est possible (mais déconseillé) d'utiliser ces attributs non-standard sur les champs de saisie d'URL.
 
-<h2 id="Utiliser_des_champs_de_saisie_d'URL">Utiliser des champs de saisie d'URL</h2>
+| Attribut                           | Description                                                                                                                                                                                                                                                                                                                                                          |
+| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("autocorrect")}}` | Autorise ou non la correction automatique lors de l'édition de ce champ. **Uniquement pris en charge par Safari.**                                                                                                                                                                                                                                                   |
+| `{{anch("mozactionhint")}}` | Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. Cet attribut est destiné à fournir un libellé équivoque pour la touche du clavier virtuel présenté à l'utilisateur. **Uniquement pris en charge par Firefox pour Android.** |
 
-<p>Lorsqu'on crée un champ avec un attribut <code>type</code> qui vaut <code>"url"</code>, on obtient une validation automatique qui vérifie que le format de la valeur respecte bien celui d'une URL. Cela permet par exemple d'éviter des cas où des utilisateurs laissent une coquille dans la saisie d'une adresse d'un site web.</p>
+### {{htmlattrdef("autocorrect")}} {{non-standard_inline}}
 
-<p>Toutefois, ce mécanisme ne vérifie pas que l'URL saisie existe bien ou correspond à l'utilisateur. Seule une vérification de format est effectuée.</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p>
-</div>
+### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
 
-<h3 id="Un_simple_champ">Un simple champ</h3>
+{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}
 
-<p>Actuellement, l'ensemble des navigateurs implémentent ce type de champ comme un champ texte qui dispose de fonctionnalités de validation basiques. Dans sa forme la plus simple, un champ de saisie d'URL ressemblera à :</p>
+## Utiliser des champs de saisie d'URL
 
-<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"&gt;</pre>
+Lorsqu'on crée un champ avec un attribut `type` qui vaut `"url"`, on obtient une validation automatique qui vérifie que le format de la valeur respecte bien celui d'une URL. Cela permet par exemple d'éviter des cas où des utilisateurs laissent une coquille dans la saisie d'une adresse d'un site web.
 
-<p>{{EmbedLiveSample('Un_simple_champ', 600, 40)}}</p>
+Toutefois, ce mécanisme ne vérifie pas que l'URL saisie existe bien ou correspond à l'utilisateur. Seule une vérification de format est effectuée.
 
-<p>La valeur du champ est considérée valide lorsqu'elle est vide ou qu'il s'agit d'une URL correctement formatée, autrement elle est invalide. Si on ajoute l'attribut {{htmlattrxref("required", "input")}}, la valeur vide n'est plus valide, il est nécessaire de saisir une valeur.</p>
+> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
 
-<p>Ainsi, si l'utilisateur saisit l'URL <code>http://www.example.com</code>, voici ce qui sera envoyé vers le serveur : <code>monURL=http%3A%2F%2Fwww.example.com</code> (on notera la façon dont certains caractères sont échappés).</p>
+### Un simple champ
 
-<h3 id="Textes_indicatifs_-_placeholders">Textes indicatifs <em>- placeholders</em></h3>
+Actuellement, l'ensemble des navigateurs implémentent ce type de champ comme un champ texte qui dispose de fonctionnalités de validation basiques. Dans sa forme la plus simple, un champ de saisie d'URL ressemblera à :
 
-<p>Il est parfois utile de fournir une indication sur le type de donnée attendu. Sur les pages pour lesquelles la place est restreinte, on ne peut pas se servir de l'étiqutte du champ. On peut alors utiliser un texte indicatif qui apparaît lorsque la valeur du champ est vide et qui est retiré dès que l'utilisateur saisit quelqu chose. Pour cela, on utilise l'attribut <code>placeholder</code>.</p>
+```html
+<input id="monURL" name="monURL" type="url">
+```
 
-<p>Dans l'exemple qui suit, le contrôle contient le texte indicatif <code>"http://www.example.com"</code>. Dans le résultat, vous pouvez voir comment ce texte disparaît/réapparaît lorsqu'on saisit une valeur dans le contrôle.</p>
+{{EmbedLiveSample('Un_simple_champ', 600, 40)}}
 
-<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
-       placeholder="http://www.example.com"&gt;</pre>
+La valeur du champ est considérée valide lorsqu'elle est vide ou qu'il s'agit d'une URL correctement formatée, autrement elle est invalide. Si on ajoute l'attribut {{htmlattrxref("required", "input")}}, la valeur vide n'est plus valide, il est nécessaire de saisir une valeur.
 
-<p>{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}</p>
+Ainsi, si l'utilisateur saisit l'URL `http://www.example.com`, voici ce qui sera envoyé vers le serveur : `monURL=http%3A%2F%2Fwww.example.com` (on notera la façon dont certains caractères sont échappés).
 
-<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3>
+### Textes indicatifs _- placeholders_
 
-<p>Il est possible de contrôler la taille physique de la boîte utilisée pour le contrôle. On peut également contraindre la taille de la valeur saisie dans le champ (entre X et Y caractères par exemple).</p>
+Il est parfois utile de fournir une indication sur le type de donnée attendu. Sur les pages pour lesquelles la place est restreinte, on ne peut pas se servir de l'étiqutte du champ. On peut alors utiliser un texte indicatif qui apparaît lorsque la valeur du champ est vide et qui est retiré dès que l'utilisateur saisit quelqu chose. Pour cela, on utilise l'attribut `placeholder`.
 
-<h4 id="La_taille_physique">La taille physique</h4>
+Dans l'exemple qui suit, le contrôle contient le texte indicatif `"http://www.example.com"`. Dans le résultat, vous pouvez voir comment ce texte disparaît/réapparaît lorsqu'on saisit une valeur dans le contrôle.
 
-<p>C'est l'attribut {{htmlattrxref("size", "input")}} qui permet de contrôler la taille de la boîte utilisée. La valeur de cet attribut correspond au nombre de caractères qui seront affichés en même temps dans la boîte. Dans l'exemple suivant, on souhaite que la boîte de saisie mesure 30 caractères de large :</p>
+```html
+<input id="monURL" name="monURL" type="url"
+       placeholder="http://www.example.com">
+```
 
-<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
-       size="30"&gt;</pre>
+{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}
 
-<p>{{EmbedLiveSample('La_taille_physique', 600, 40)}}</p>
+### Contrôler la taille du champ
 
-<h4 id="La_longueur_de_la_valeur">La longueur de la valeur</h4>
+Il est possible de contrôler la taille physique de la boîte utilisée pour le contrôle. On peut également contraindre la taille de la valeur saisie dans le champ (entre X et Y caractères par exemple).
 
-<p>L'attribut <code>size</code> ne limite pas la valeur qui peut être saisie mais uniquement l'affichage de celle-ci. Pour indiquer une longueur (exprimée en nombre de caractères) minimale d'URL à saisir, on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, l'attribut {{htmlattrxref("maxlength", "input")}} indique la longueur maximale d'une URL qui peut être saisie dans le contrôle.</p>
+#### La taille physique
 
-<p>Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 30 caractères de large et on souhaite que l'URL soit plus longue que 10 caractères et moins longue que 80.</p>
+C'est l'attribut {{htmlattrxref("size", "input")}} qui permet de contrôler la taille de la boîte utilisée. La valeur de cet attribut correspond au nombre de caractères qui seront affichés en même temps dans la boîte. Dans l'exemple suivant, on souhaite que la boîte de saisie mesure 30 caractères de large :
 
-<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
-       size="30" minlength="10" maxlength="80"&gt;
-</pre>
+```html
+<input id="monURL" name="monURL" type="url"
+       size="30">
+```
 
-<p>{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}</p>
+{{EmbedLiveSample('La_taille_physique', 600, 40)}}
 
-<div class="note">
-<p><strong>Note :</strong> Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle seera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec <code>maxlength</code>.</p>
-</div>
+#### La longueur de la valeur
 
-<h3 id="Fournir_des_valeurs_par_défaut">Fournir des valeurs par défaut</h3>
+L'attribut `size` ne limite pas la valeur qui peut être saisie mais uniquement l'affichage de celle-ci. Pour indiquer une longueur (exprimée en nombre de caractères) minimale d'URL à saisir, on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, l'attribut {{htmlattrxref("maxlength", "input")}} indique la longueur maximale d'une URL qui peut être saisie dans le contrôle.
 
-<p>On peut fournir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :</p>
+Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 30 caractères de large et on souhaite que l'URL soit plus longue que 10 caractères et moins longue que 80.
 
-<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
-       value="http://www.example.com"&gt;</pre>
+```html
+<input id="monURL" name="monURL" type="url"
+       size="30" minlength="10" maxlength="80">
+```
 
-<p>{{EmbedLiveSample("Fournir_des_valeurs_par_défaut", 600, 40)}}</p>
+{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}
 
-<h4 id="Fournir_des_suggestions">Fournir des suggestions</h4>
+> **Note :** Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle seera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec `maxlength`.
 
-<p>On peut également fournir une liste d'options parmi lesquelles l'utilisateur peut choisir via l'attribut {{htmlattrxref("list", "input")}}. Cette liste ne limite pas l'utilisateur à ces choix mais permet de choisir certaines URL fréquemment utilisées plus facilement. Cette liste peut également être utilisée par l'attribut {{htmlattrxref("autocomplete", "input")}}. La valeur de l'attribut <code>list</code> est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. La valeur de l'attribut <code>value</code> de chacun de ces éléments <code>&lt;option&gt;</code> correspondra à la valeur qui sera suggérée dans le champ de saisie.</p>
+### Fournir des valeurs par défaut
 
-<pre class="brush: html">&lt;input id="monURL" name="monURL" type="url"
-       list="defaultURLs"&gt;
+On peut fournir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :
 
-&lt;datalist id="defaultURLs"&gt;
-  &lt;option value="http://www.example.com"&gt;
-  &lt;option value="https://www.example.com"&gt;
-  &lt;option value="http://www.example.org"&gt;
-  &lt;option value="https://www.example.org"&gt;
-&lt;/datalist&gt;</pre>
+```html
+<input id="monURL" name="monURL" type="url"
+       value="http://www.example.com">
+```
 
-<p>{{EmbedLiveSample("Fournir_des_suggestions", 600, 40)}}</p>
+{{EmbedLiveSample("Fournir_des_valeurs_par_défaut", 600, 40)}}
 
-<p>Avec cet élément {{HTMLElement("datalist")}} et les éléments {{HTMLElement("option")}} associés, le navigateur affichera les valeurs proposées sous la forme d'une liste déroulante (voire sous un autre format). Au fur et à mesure que l'utilisateur saisit dans le champ, la liste se réduit pour ne contenir que les valeurs correspondantes (et ce jusqu'à ce que l'utilisateur saisisse une autre valeur ou sélectionne une valeur parmi la liste).</p>
+#### Fournir des suggestions
 
-<h2 id="Validation">Validation</h2>
+On peut également fournir une liste d'options parmi lesquelles l'utilisateur peut choisir via l'attribut {{htmlattrxref("list", "input")}}. Cette liste ne limite pas l'utilisateur à ces choix mais permet de choisir certaines URL fréquemment utilisées plus facilement. Cette liste peut également être utilisée par l'attribut {{htmlattrxref("autocomplete", "input")}}. La valeur de l'attribut `list` est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. La valeur de l'attribut `value` de chacun de ces éléments `<option>` correspondra à la valeur qui sera suggérée dans le champ de saisie.
 
-<p>Il existe deux niveaux de validation pour les contrôles de type <code>"url"</code>. Tout d'abord, le contrôle natif, toujours présent qui s'asssure que la valeur correspond à une URL bien formée. Ensuite, on peut ajouter des options supplémentaires pour personnaliser le format de l'URL attendue.</p>
+```html
+<input id="monURL" name="monURL" type="url"
+       list="defaultURLs">
 
-<div class="warning">
-<p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p>
-</div>
+<datalist id="defaultURLs">
+  <option value="http://www.example.com">
+  <option value="https://www.example.com">
+  <option value="http://www.example.org">
+  <option value="https://www.example.org">
+</datalist>
+```
 
-<h3 id="Validation_simple">Validation simple</h3>
+{{EmbedLiveSample("Fournir_des_suggestions", 600, 40)}}
 
-<p>Les navigateurs qui prennent en charge le type <code>"url"</code> fournissent automatiquement un mécanisme de validation pour s'assurer que la valeur saisie correspond à une URL bien formée.</p>
+Avec cet élément {{HTMLElement("datalist")}} et les éléments {{HTMLElement("option")}} associés, le navigateur affichera les valeurs proposées sous la forme d'une liste déroulante (voire sous un autre format). Au fur et à mesure que l'utilisateur saisit dans le champ, la liste se réduit pour ne contenir que les valeurs correspondantes (et ce jusqu'à ce que l'utilisateur saisisse une autre valeur ou sélectionne une valeur parmi la liste).
 
-<h3 id="Rendre_le_champ_URL_obligatoire">Rendre le champ URL obligatoire</h3>
+## Validation
 
-<p>Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut {{htmlattrxref("required", "input")}} :</p>
+Il existe deux niveaux de validation pour les contrôles de type `"url"`. Tout d'abord, le contrôle natif, toujours présent qui s'asssure que la valeur correspond à une URL bien formée. Ensuite, on peut ajouter des options supplémentaires pour personnaliser le format de l'URL attendue.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;input id="monURL" name="monURL" type="url" required&gt;
-  &lt;button&gt;Envoyer&lt;/button&gt;
-&lt;/form&gt;</pre>
+> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.
 
-<p>{{EmbedLiveSample("Rendre_le_champ_URL_obligatoire", 600, 40)}}</p>
+### Validation simple
 
-<p>Vous pouvez essayer d'envoyer le formulaire précédent sans valeur saisie et voir le résultat obtenu.</p>
+Les navigateurs qui prennent en charge le type `"url"` fournissent automatiquement un mécanisme de validation pour s'assurer que la valeur saisie correspond à une URL bien formée.
 
-<h3 id="Utiliser_un_format_particulier">Utiliser un format particulier</h3>
+### Rendre le champ URL obligatoire
 
-<p>S'il faut restreindre l'URL plus fortement, on peut utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression rationnelle</a> que la valeur saisie doit respecter afin d'être valide.</p>
+Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut {{htmlattrxref("required", "input")}} :
 
-<p>Prenons comme exemple la construction d'un formulaire de support pour les employés de MaBoîte Inc. Ce formulaire permet d'indiquer à un service une des pages du site interne qui pose problème. Dans l'exemple simplifié, l'utilisateur indique l'URL de la page problématique ainsi qu'un message descriptif. Ici, on souhaite que l'URL saisit ne soit valide que si elle correspond au domaine <code>maboite</code>.</p>
+```html
+<form>
+  <input id="monURL" name="monURL" type="url" required>
+  <button>Envoyer</button>
+</form>
+```
 
-<p>Les contrôles de type <code>"url"</code> utilisant la validation native pour vérifier que c'est une URL bien formée et une validation spécifique via l'attribut {{htmlattrxref("pattern", "input")}}, on peut implémenter cette contrainte facilement :</p>
+{{EmbedLiveSample("Rendre_le_champ_URL_obligatoire", 600, 40)}}
 
-<pre class="brush: css hidden">div {
+Vous pouvez essayer d'envoyer le formulaire précédent sans valeur saisie et voir le résultat obtenu.
+
+### Utiliser un format particulier
+
+S'il faut restreindre l'URL plus fortement, on peut utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer une [expression rationnelle](/fr/docs/Web/JavaScript/Guide/Expressions_régulières) que la valeur saisie doit respecter afin d'être valide.
+
+Prenons comme exemple la construction d'un formulaire de support pour les employés de MaBoîte Inc. Ce formulaire permet d'indiquer à un service une des pages du site interne qui pose problème. Dans l'exemple simplifié, l'utilisateur indique l'URL de la page problématique ainsi qu'un message descriptif. Ici, on souhaite que l'URL saisit ne soit valide que si elle correspond au domaine `maboite`.
+
+Les contrôles de type `"url"` utilisant la validation native pour vérifier que c'est une URL bien formée et une validation spécifique via l'attribut {{htmlattrxref("pattern", "input")}}, on peut implémenter cette contrainte facilement :
+
+```css hidden
+div {
   margin-bottom: 10px;
   position: relative;
   }
@@ -276,113 +237,108 @@ translation_of: Web/HTML/Element/input/url
     content: '✓';
     padding-left: 5px;
   }
-</pre>
+```
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="myURL"&gt;Veuillez saisir l'adresse de la page problématique:&lt;/label&gt;
-    &lt;input id="myURL" name="myURL" type="url"
+```html
+<form>
+  <div>
+    <label for="myURL">Veuillez saisir l'adresse de la page problématique:</label>
+    <input id="myURL" name="myURL" type="url"
            required pattern=".*\.maboite\..*"
-           title="L'URL doit être sur le domaine maboite."&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="myComment"&gt;Quel est le problème ?&lt;/label&gt;
-    &lt;input id="myComment" name="myComment" type="text"
-           required&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Envoyer&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;
-</pre>
+           title="L'URL doit être sur le domaine maboite.">
+    <span class="validity"></span>
+  </div>
+  <div>
+    <label for="myComment">Quel est le problème ?</label>
+    <input id="myComment" name="myComment" type="text"
+           required>
+    <span class="validity"></span>
+  </div>
+  <div>
+    <button>Envoyer</button>
+  </div>
+</form>
+```
 
-<p>{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 150)}}</p>
+{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 150)}}
 
-<p>Si on étudie le contrôle, on peut voir qu'on commence par utiliser l'attribut {{htmlattrxref("required", "input")}} afin de rendre le champ obligatoire.</p>
+Si on étudie le contrôle, on peut voir qu'on commence par utiliser l'attribut {{htmlattrxref("required", "input")}} afin de rendre le champ obligatoire.
 
-<p>Ensuite, on utilise l'attribut <code>pattern</code> avec l'expression rationnelle <code>".*\.maboite\..*"</code>. Cet expression rationnelle indique que la chaîne de caractères saisie doit contenir des caractères quelconques suivis d'un point, suivi de "maboite", suivi d'un point, suivi de n'importe quels caractères.</p>
+Ensuite, on utilise l'attribut `pattern` avec l'expression rationnelle `".*\.maboite\..*"`. Cet expression rationnelle indique que la chaîne de caractères saisie doit contenir des caractères quelconques suivis d'un point, suivi de "maboite", suivi d'un point, suivi de n'importe quels caractères.
 
-<p>Cette expression rationnelle est loin d'être parfaite mais suffit pour les besoins de cet exemple.</p>
+Cette expression rationnelle est loin d'être parfaite mais suffit pour les besoins de cet exemple.
 
-<p>Il est conseillé d'utiliser l'attribut {{htmlattrxref("title")}} quand on utilise l'attribut <code>pattern</code>. Dans ce cas, l'attribut <code>title</code> doit alors décrire l'expression rationnelle (et l'explication de la contrainte) plutôt que le rôle du champ. En effet, la valeur contenue dans <code>title</code> pourrait alors être affichée ou vocalisée comme message d'erreur. Un navigateur pourra ainsi affiche un message : "Le texte saisi ne respecte pas la format souhaité." suivi du texte contenu dans <code>title</code>. Si la valeur de <code>title</code> est simplement "URL", le message complet obtenu serait "Le texte saisi ne respecte pas la format souhaité. URL" (ce qui n'est pas très parlant).</p>
+Il est conseillé d'utiliser l'attribut {{htmlattrxref("title")}} quand on utilise l'attribut `pattern`. Dans ce cas, l'attribut `title` doit alors décrire l'expression rationnelle (et l'explication de la contrainte) plutôt que le rôle du champ. En effet, la valeur contenue dans `title` pourrait alors être affichée ou vocalisée comme message d'erreur. Un navigateur pourra ainsi affiche un message : "Le texte saisi ne respecte pas la format souhaité." suivi du texte contenu dans `title`. Si la valeur de `title` est simplement "URL", le message complet obtenu serait "Le texte saisi ne respecte pas la format souhaité. URL" (ce qui n'est pas très parlant).
 
-<p>C'est pourquoi nous avons écrit "L'URL doit être sur le domaine maboite" qui est plus détaillé.</p>
+C'est pourquoi nous avons écrit "L'URL doit être sur le domaine maboite" qui est plus détaillé.
 
-<div class="note">
-<p><strong>Note :</strong> Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème.</p>
-</div>
+> **Note :** Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>En plus des exemples précédents, vous pouvez consulter <a href="https://github.com/mdn/learning-area/blob/master/html/forms/url-example/index.html">l'exemple de validation de format sur GitHub</a> (et voir <a href="https://mdn.github.io/learning-area/html/forms/url-example/">le résultat <em>live</em></a>).</p>
+En plus des exemples précédents, vous pouvez consulter [l'exemple de validation de format sur GitHub](https://github.com/mdn/learning-area/blob/master/html/forms/url-example/index.html) (et voir [le résultat _live_](https://mdn.github.io/learning-area/html/forms/url-example/)).
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente une URL ou une chaîne de caractères vide.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{event("change")}} et {{event("input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}}</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>list</code>, <code>value</code>, <code>selectionEnd</code>, <code>selectionDirection</code></td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui
+        représente une URL ou une chaîne de caractères vide.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>{{event("change")}} et {{event("input")}}</td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}},
+        {{htmlattrxref("list", "input")}},
+        {{htmlattrxref("maxlength", "input")}},
+        {{htmlattrxref("minlength", "input")}},
+        {{htmlattrxref("pattern", "input")}},
+        {{htmlattrxref("placeholder", "input")}},
+        {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}}
+        et {{htmlattrxref("size", "input")}}
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td>
+        <code>list</code>, <code>value</code>, <code>selectionEnd</code>,
+        <code>selectionDirection</code>
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}},
+        {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}},
+        {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#url-state-(type=url)', '&lt;input type="url"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sec-forms.html#url-state-typeurl', '&lt;input type="url"&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("URL", "#urls", "URL syntax")}}</td>
-   <td>{{Spec2("URL")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#url-state-(type=url)', '&lt;input type="url"&gt;')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
+| {{SpecName('HTML5.1', 'sec-forms.html#url-state-typeurl', '&lt;input type="url"&gt;')}}     | {{Spec2('HTML5.1')}}     | Définition initiale. |
+| {{SpecName("URL", "#urls", "URL syntax")}}                                                                 | {{Spec2("URL")}}             |                      |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-url")}}</p>
+{{Compat("html.elements.input.input-url")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li>
- <li>{{HTMLElement("input")}}</li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/tel">&lt;input type="tel"&gt;</a></code></li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code></li>
-</ul>
+- [Guide sur les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires)
+- {{HTMLElement("input")}}
+- [`<input type="tel">`](/fr/docs/Web/HTML/Element/input/tel)
+- [`<input type="email">`](/fr/docs/Web/HTML/Element/input/email)
diff --git a/files/fr/web/html/element/input/week/index.md b/files/fr/web/html/element/input/week/index.md
index b010c0cf18..d5c2616a00 100644
--- a/files/fr/web/html/element/input/week/index.md
+++ b/files/fr/web/html/element/input/week/index.md
@@ -9,138 +9,127 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/input/week
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <code><strong>week</strong></code> permettent de créer des champs de saisie où l'on peut saisir une année et le numéro de la semaine pendant cette année (allant de 1 à 52 ou 53, suivant la norme <a href="https://fr.wikipedia.org/wiki/ISO_8601#Num%C3%A9ro_de_semaine">ISO 8601</a>).</p>
+Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`week`** permettent de créer des champs de saisie où l'on peut saisir une année et le numéro de la semaine pendant cette année (allant de 1 à 52 ou 53, suivant la norme [ISO 8601](https://fr.wikipedia.org/wiki/ISO_8601#Num%C3%A9ro_de_semaine)).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}}
 
-<p>L'interface utilisateur offerte par un tel contrôle varie en fonction des navigateurs. Au moment où nous écrivons ces lignes, seuls Chrome/Opera et Edge prennent en charge cette fonctionnalité. Pour les navigateurs qui ne l'implémentent pas, l'élément est interprété comme un élément <code><a href="/fr/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code>.</p>
+L'interface utilisateur offerte par un tel contrôle varie en fonction des navigateurs. Au moment où nous écrivons ces lignes, seuls Chrome/Opera et Edge prennent en charge cette fonctionnalité. Pour les navigateurs qui ne l'implémentent pas, l'élément est interprété comme un élément [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text).
 
-<p>Sous Chrome/Opera, le contrôle <code>week</code> fournit des emplacements pour les deux valeurs. Un calendrier est affiché afin de sélectionner plus faiclement la semaine et l'année. Un bouton avec une croix permet de supprimer la valeur saisie dans le contrôle.</p>
+Sous Chrome/Opera, le contrôle `week` fournit des emplacements pour les deux valeurs. Un calendrier est affiché afin de sélectionner plus faiclement la semaine et l'année. Un bouton avec une croix permet de supprimer la valeur saisie dans le contrôle.
 
-<p><img alt="" src="week-control-chrome.png"></p>
+![](week-control-chrome.png)
 
-<p>Pour Edge, le contrôle associé à <code>month</code> est plus élaboré et se compose de deux listes qu'on peut faire défiler séparement pour la semaine d'une part et l'année d'autre part.</p>
+Pour Edge, le contrôle associé à `month` est plus élaboré et se compose de deux listes qu'on peut faire défiler séparement pour la semaine d'une part et l'année d'autre part.
 
-<p><img alt="" src="week-control-edge.png"></p>
+![](week-control-edge.png)
 
-<h2 id="Valeur">Valeur</h2>
+## Valeur
 
-<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la semaine et de l'année saisies dans le champ. Le format précis de représentation d'une semaine donnée est décrit dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_semaines">l'article sur les formats des dates et heures en HTML</a>.</p>
+Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la semaine et de l'année saisies dans le champ. Le format précis de représentation d'une semaine donnée est décrit dans [l'article sur les formats des dates et heures en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_semaines).
 
-<p>Il est possible de définir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} de la façon suivante :</p>
+Il est possible de définir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} de la façon suivante :
 
-<pre class="brush: html">&lt;label for="week"&gt;À quelle semaine souhaiteriez-vous démarrer ?&lt;/label&gt;
-&lt;input id="week" type="week" name="week" value="2017-W01"&gt;</pre>
+```html
+<label for="week">À quelle semaine souhaiteriez-vous démarrer ?</label>
+<input id="week" type="week" name="week" value="2017-W01">
+```
 
-<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p>
+{{EmbedLiveSample('Valeur', 600, 60)}}
 
-<p>On notera que le format affiché peut être différent de la valeur réellement utilisée pour l'attribut <code>value</code>. Cette dernière respecte toujours le format <code>yyyy-Www</code> (soit les quatre chiffres de l'année, suivi d'un tiret, suivi d'un W majuscule suivi des deux chiffres pour la semaine). Dans l'exemple précédent par exemple, l'interface utilisateur pourra afficher <code>Semaine 01 de l'année 2017</code> mais la valeur envoyée via le formulaire aura toujours la structure <code>week=2017-W01</code>.</p>
+On notera que le format affiché peut être différent de la valeur réellement utilisée pour l'attribut `value`. Cette dernière respecte toujours le format `yyyy-Www` (soit les quatre chiffres de l'année, suivi d'un tiret, suivi d'un W majuscule suivi des deux chiffres pour la semaine). Dans l'exemple précédent par exemple, l'interface utilisateur pourra afficher `Semaine 01 de l'année 2017` mais la valeur envoyée via le formulaire aura toujours la structure `week=2017-W01`.
 
-<p>Il est également possible d'accéder à la valeur ou de la définir en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p>
+Il est également possible d'accéder à la valeur ou de la définir en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :
 
-<pre class="brush: js">var weekControl = document.querySelector('input[type="week"]');
-weekControl.value = '2017-W45';</pre>
+```js
+var weekControl = document.querySelector('input[type="week"]');
+weekControl.value = '2017-W45';
+```
 
-<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>
+## Attributs supplémentaires
 
-<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs de semaine gèrent les attributs suivants :</p>
+En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs de semaine gèrent les attributs suivants :
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Attribut</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>{{anch("max")}}</code></td>
-   <td>La semaine (avec l'année) la plus tardive qui est considérée comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("min")}}</code></td>
-   <td>La semaine (avec l'année) la plus tôt qui est considérée comme valide.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("readonly")}}</code></td>
-   <td>Un booléen qui indique si l'utilisateur peut modifier la valeur du champ.</td>
-  </tr>
-  <tr>
-   <td><code>{{anch("step")}}</code></td>
-   <td>Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur.</td>
-  </tr>
- </tbody>
-</table>
+| Attribut                       | Description                                                                                                                                             |
+| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{anch("max")}}`         | La semaine (avec l'année) la plus tardive qui est considérée comme valide.                                                                              |
+| `{{anch("min")}}`         | La semaine (avec l'année) la plus tôt qui est considérée comme valide.                                                                                  |
+| `{{anch("readonly")}}` | Un booléen qui indique si l'utilisateur peut modifier la valeur du champ.                                                                               |
+| `{{anch("step")}}`         | Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur. |
 
-<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3>
+### {{htmlattrdef("max")}}
 
-<p>La semaine la plus tardive, indiquée avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-Www"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle.</p>
+La semaine la plus tardive, indiquée avec l'année, sous la forme d'une chaîne de caractères au format `"yyyy-Www"`. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle.
 
-<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p>
+Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut `min`.
 
-<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3>
+### {{htmlattrdef("min")}}
 
-<p>La semaine la plus tôt, indiquée avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-Www"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle.</p>
+La semaine la plus tôt, indiquée avec l'année, sous la forme d'une chaîne de caractères au format `"yyyy-Www"`. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle.
 
-<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p>
+Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut `max`.
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}
 
-<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3>
+### {{htmlattrdef("step")}}
 
-<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p>
+{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}
 
-<p>Pour les champs de type <code>week</code>, la valeur de l'attribut <code>step</code> est indiquée en nombre de semaine et le facteur de multiplication est 604 800 000 (qui correspond au nombre de millisecondes dans une semaine). Par défaut, la valeur de <code>step</code> est 1. La base à partir de laquelle incrémenter par défaut est -259 200 000 qui correspond à la première semaine de 1970 (<code>"1970-W01"</code>).</p>
+Pour les champs de type `week`, la valeur de l'attribut `step` est indiquée en nombre de semaine et le facteur de multiplication est 604 800 000 (qui correspond au nombre de millisecondes dans une semaine). Par défaut, la valeur de `step` est 1. La base à partir de laquelle incrémenter par défaut est -259 200 000 qui correspond à la première semaine de 1970 (`"1970-W01"`).
 
-<p><em>À l'heure où ces lignes sont écrites, la signification de la valeur <code>"any"</code> pour l'attribut <code>step</code> pour les champs <code>week</code> n'est pas certaine. Cette information sera mise à jour dès que possible.</em></p>
+_À l'heure où ces lignes sont écrites, la signification de la valeur `"any"` pour l'attribut `step` pour les champs `week` n'est pas certaine. Cette information sera mise à jour dès que possible._
 
-<h2 id="Utiliser_les_contrôles_de_type_week">Utiliser les contrôles de type <code>week</code></h2>
+## Utiliser les contrôles de type `week`
 
-<p>Ces contrôles peuvent être pratiques selon certains aspects : ils permettent de sélectionner une semaine de façon simple, les données envoyées au serveur sont normalisées quelle que soit la langue ou le navigateur de l'utilisateur. Toutefois, en raison de la prise en charge des navigateurs actuellement limitée, <code>&lt;input type="week"&gt;</code> pose quelques défis.</p>
+Ces contrôles peuvent être pratiques selon certains aspects : ils permettent de sélectionner une semaine de façon simple, les données envoyées au serveur sont normalisées quelle que soit la langue ou le navigateur de l'utilisateur. Toutefois, en raison de la prise en charge des navigateurs actuellement limitée, `<input type="week">` pose quelques défis.
 
-<p>Nous verrons par la suite quelques cas d'utilisation simples puis complexes avant de voir comment gérer l'hétérogénéité des différents navigateurs (cf. {{anch("Gérer la prise en charge des navigateurs")}}).</p>
+Nous verrons par la suite quelques cas d'utilisation simples puis complexes avant de voir comment gérer l'hétérogénéité des différents navigateurs (cf. {{anch("Gérer la prise en charge des navigateurs")}}).
 
-<h3 id="Utilisation_simple">Utilisation simple</h3>
+### Utilisation simple
 
-<p>La forme la plus simple de <code>&lt;input type="week"&gt;</code> se compose d'un élément <code>&lt;input&gt;</code> et d'un élément {{htmlelement("label")}} :</p>
+La forme la plus simple de `<input type="week">` se compose d'un élément `<input>` et d'un élément {{htmlelement("label")}} :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="week"&gt;À quelle semaine souhaiteriez-vous commencer ?&lt;/label&gt;
-  &lt;input id="week" type="week" name="week"&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label>
+  <input id="week" type="week" name="week">
+</form>
+```
 
-<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p>
+{{EmbedLiveSample('Utilisation_simple', 600, 40)}}
 
-<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3>
+### Contrôler la taille du champ
 
-<p><code>&lt;input type="week"&gt;</code> ne prend pas en charge des attributs de dimensionnement (tel que {{htmlattrxref("size", "input")}}). Il sera nécessaire d'utiliser <a href="/fr/docs/Web/CSS">CSS</a> si on a besoin de modifier la taille du contrôle.</p>
+`<input type="week">` ne prend pas en charge des attributs de dimensionnement (tel que {{htmlattrxref("size", "input")}}). Il sera nécessaire d'utiliser [CSS](/fr/docs/Web/CSS) si on a besoin de modifier la taille du contrôle.
 
-<h3 id="Utiliser_l'attribut_step">Utiliser l'attribut <code>step</code></h3>
+### Utiliser l'attribut `step`
 
-<p>En théorie, l'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être employé pour définir l'incrément minimal entre chaque semaine sélectionnable. Toutefois, il ne semble avoir encore aucun effet pour les navigateurs qui prennent en charge ce contrôle.</p>
+En théorie, l'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être employé pour définir l'incrément minimal entre chaque semaine sélectionnable. Toutefois, il ne semble avoir encore aucun effet pour les navigateurs qui prennent en charge ce contrôle.
 
-<h2 id="Validation">Validation</h2>
+## Validation
 
-<p>Par défaut, <code>&lt;input type="week"&gt;</code> n'applique aucune validation aux valeurs saisies. Les interfaces utilisateurs affichées ne permettent pas de saisir autre chose qu'un couple semaine / année. Toutefois, il est toujours possible de ne sélectionner aucune valeur, on peut également vouloir restreindre la plage de semaines qui peuvent être sélectionnées.</p>
+Par défaut, `<input type="week">` n'applique aucune validation aux valeurs saisies. Les interfaces utilisateurs affichées ne permettent pas de saisir autre chose qu'un couple semaine / année. Toutefois, il est toujours possible de ne sélectionner aucune valeur, on peut également vouloir restreindre la plage de semaines qui peuvent être sélectionnées.
 
-<h3 id="Paramétrer_des_semaines_minimum_et_maximum">Paramétrer des semaines minimum et maximum</h3>
+### Paramétrer des semaines minimum et maximum
 
-<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} peuvent être utilisés afin de restreindre les semaines qui peuvent être sélectionnées par l'utilisateur. Dans l'exemple qui suit, on indique une valeur minimale correspondant à la première semaine de 2017 et une valeur maximale correspondant à la dernière semaine de 2017 :</p>
+Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} peuvent être utilisés afin de restreindre les semaines qui peuvent être sélectionnées par l'utilisateur. Dans l'exemple qui suit, on indique une valeur minimale correspondant à la première semaine de 2017 et une valeur maximale correspondant à la dernière semaine de 2017 :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="week"&gt;À quelle semaine souhaiteriez-vous commencer ?&lt;/label&gt;
-  &lt;input id="week" type="week" name="week"
-         min="2017-W01" max="2017-W52"&gt;
-  &lt;span class="validity"&gt;&lt;/span&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label>
+  <input id="week" type="week" name="week"
+         min="2017-W01" max="2017-W52">
+  <span class="validity"></span>
+</form>
+```
 
-<p>{{EmbedLiveSample('Paramétrer_des_semaines_minimum_et_maximum', 600, 40)}}</p>
+{{EmbedLiveSample('Paramétrer_des_semaines_minimum_et_maximum', 600, 40)}}
 
-<p>Voici la feuille de style utilisée dans l'exemple précédent. Vous pourrez noter qu'on utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes associées sont placées dans un élément {{htmlelement("span")}} situé à côté du champ et non sur le champ même car, pour Chrome, le contenu généré dynamiquement avec les pseudo-éléments serait placé dans le contrôle du formulaire et ne pourrait être mis en forme efficacement.</p>
+Voici la feuille de style utilisée dans l'exemple précédent. Vous pourrez noter qu'on utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes associées sont placées dans un élément {{htmlelement("span")}} situé à côté du champ et non sur le champ même car, pour Chrome, le contenu généré dynamiquement avec les pseudo-éléments serait placé dans le contrôle du formulaire et ne pourrait être mis en forme efficacement.
 
-<pre class="brush: css">div {
+```css
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -163,98 +152,100 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}</pre>
+}
+```
 
-<p>Pour les navigateurs qui prennent en charge ce contrôle et ces fonctionnalités, on ne pourra sélectionner que les semaines de l'année 2017.</p>
+Pour les navigateurs qui prennent en charge ce contrôle et ces fonctionnalités, on ne pourra sélectionner que les semaines de l'année 2017.
 
-<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3>
+### Rendre la valeur obligatoire
 
-<p>On peut aussi utiliser l'attribut {{htmlattrxref("required", "input")}} afin que la saisie de la valeur soit obligatoire. Pour les navigateurs qui prennent en charge cette fonctionnalité, une erreur sera affichée lorsqu'on tentera d'envoyer un formulaire avec un champ vide pour une semaine.</p>
+On peut aussi utiliser l'attribut {{htmlattrxref("required", "input")}} afin que la saisie de la valeur soit obligatoire. Pour les navigateurs qui prennent en charge cette fonctionnalité, une erreur sera affichée lorsqu'on tentera d'envoyer un formulaire avec un champ vide pour une semaine.
 
-<p>Prenons un autre exemple (où la période a été restreinte comme précédemment) et où le champ est obligatoire :</p>
+Prenons un autre exemple (où la période a été restreinte comme précédemment) et où le champ est obligatoire :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="week"&gt;À quelle semaine souhaiteriez-vous commencer ?&lt;/label&gt;
-    &lt;input id="week" type="week" name="week"
-         min="2017-W01" max="2017-W52" required&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-      &lt;input type="submit" value="Envoyer le formulaire"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label>
+    <input id="week" type="week" name="week"
+         min="2017-W01" max="2017-W52" required>
+    <span class="validity"></span>
+  </div>
+  <div>
+      <input type="submit" value="Envoyer le formulaire">
+  </div>
+</form>
+```
 
-<p>Si vous essayez de soumettre le formulaire sans aucune valeur, le navigateur affichera une erreur. Vous pouvez tester avec l'exemple qui suit :</p>
+Si vous essayez de soumettre le formulaire sans aucune valeur, le navigateur affichera une erreur. Vous pouvez tester avec l'exemple qui suit :
 
-<p>{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 120)}}</p>
+{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 120)}}
 
-<p>Voici une capture d'écran du résultat obtenu si votre navigateur ne prend pas en charge cette fonctionnalité :</p>
+Voici une capture d'écran du résultat obtenu si votre navigateur ne prend pas en charge cette fonctionnalité :
 
-<p><img alt="" src="week-validation-chrome.png"></p>
+![](week-validation-chrome.png)
 
-<div class="warning">
-<p><strong>Attention :</strong> la validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques.</p>
-</div>
+> **Attention :** la validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques.
 
-<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2>
+## Gérer la prise en charge des navigateurs
 
-<p>Comme évoqué plus haut, le principal problème associé à ce type de contrôle est l'absence de prise en charge par Safari, Firefox (hors mobile) et les anciennes versions d'Internet Explorer (pré-Edge).</p>
+Comme évoqué plus haut, le principal problème associé à ce type de contrôle est l'absence de prise en charge par Safari, Firefox (hors mobile) et les anciennes versions d'Internet Explorer (pré-Edge).
 
-<p>Les plateformes mobiles comme Android et iOS fournissent un contrôle natif à l'ergonomie tactile adaptée. Voici par exemple le sélecteur <code>week</code> sur Chrome pour Android :</p>
+Les plateformes mobiles comme Android et iOS fournissent un contrôle natif à l'ergonomie tactile adaptée. Voici par exemple le sélecteur `week` sur Chrome pour Android :
 
-<p><img alt="" src="week-chrome-android.png"></p>
+![](week-chrome-android.png)
 
-<p>Les navigateurs qui ne prennent pas en charge ce type de contrôle l'interprètent comme un champ texte mais cela crée des problèmes de cohérence tant au niveau de l'ergonomie qu'au niveau de la représentation des données.</p>
+Les navigateurs qui ne prennent pas en charge ce type de contrôle l'interprètent comme un champ texte mais cela crée des problèmes de cohérence tant au niveau de l'ergonomie qu'au niveau de la représentation des données.
 
-<p>C'est ce deuxième aspect qui peut poser le plus de problème. Comme nous l'avons mentionné avant, un contrôle <code>week</code> verra sa valeur normalisée pour respecter le format <code>yyyy-Www</code>. En revanche, pour un champ texte non reconnu par le navigateur, les utilisateurs pourraient saisir des semaines selon une variété de formats :</p>
+C'est ce deuxième aspect qui peut poser le plus de problème. Comme nous l'avons mentionné avant, un contrôle `week` verra sa valeur normalisée pour respecter le format `yyyy-Www`. En revanche, pour un champ texte non reconnu par le navigateur, les utilisateurs pourraient saisir des semaines selon une variété de formats :
 
-<ul>
- <li><code>Première semaine de 2017</code></li>
- <li><code>Du 2 au 8 janvier 2017</code></li>
- <li><code>2017-W01</code></li>
- <li>etc.</li>
-</ul>
+- `Première semaine de 2017`
+- `Du 2 au 8 janvier 2017`
+- `2017-W01`
+- etc.
 
-<p>Si on souhaite gérer cette saisie de façon compatible entre les différents navigateurs, on utilisera alors deux contrôles distincts (représentés par des éléments {{htmlelement("select")}}) qui représenteront respectivement le numéro de la semaine et l'année.</p>
+Si on souhaite gérer cette saisie de façon compatible entre les différents navigateurs, on utilisera alors deux contrôles distincts (représentés par des éléments {{htmlelement("select")}}) qui représenteront respectivement le numéro de la semaine et l'année.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans l'exemple qui suit, on construit deux ensembles d'éléments pour sélectionner une semaine : un sélecteur natif avec <code>&lt;input type="week"&gt;</code> et un second composé de deux éléments {{htmlelement("select")}} qui permettent de choisir la semaine et l'année sur les navigateurs qui ne prennent pas en charge le contrôle natif.</p>
+Dans l'exemple qui suit, on construit deux ensembles d'éléments pour sélectionner une semaine : un sélecteur natif avec `<input type="week">` et un second composé de deux éléments {{htmlelement("select")}} qui permettent de choisir la semaine et l'année sur les navigateurs qui ne prennent pas en charge le contrôle natif.
 
-<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p>
+{{EmbedLiveSample('Exemples', 600, 140)}}
 
-<p>Voici le code HTML utilisé :</p>
+Voici le code HTML utilisé :
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div class="nativeWeekPicker"&gt;
-    &lt;label for="week"&gt;À quelle semaine souhaiteriez-vous commencer ?&lt;/label&gt;
-    &lt;input id="week" type="week" name="week"
-           min="2017-W01" max="2018-W52" required&gt;
-    &lt;span class="validity"&gt;&lt;/span&gt;
-  &lt;/div&gt;
-  &lt;p class="fallbackLabel"&gt;À quelle semaine souhaiteriez-vous commencer ?&lt;/p&gt;
-  &lt;div class="fallbackWeekPicker"&gt;
-    &lt;div&gt;
-      &lt;span&gt;
-        &lt;label for="week"&gt;Semaine :&lt;/label&gt;
-        &lt;select id="fallbackWeek" name="week"&gt;
-        &lt;/select&gt;
-      &lt;/span&gt;
-      &lt;span&gt;
-        &lt;label for="year"&gt;Année :&lt;/label&gt;
-        &lt;select id="year" name="year"&gt;
-          &lt;option value="2017" selected&gt;2017&lt;/option&gt;
-          &lt;option value="2018"&gt;2018&lt;/option&gt;
-        &lt;/select&gt;
-      &lt;/span&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div class="nativeWeekPicker">
+    <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label>
+    <input id="week" type="week" name="week"
+           min="2017-W01" max="2018-W52" required>
+    <span class="validity"></span>
+  </div>
+  <p class="fallbackLabel">À quelle semaine souhaiteriez-vous commencer ?</p>
+  <div class="fallbackWeekPicker">
+    <div>
+      <span>
+        <label for="week">Semaine :</label>
+        <select id="fallbackWeek" name="week">
+        </select>
+      </span>
+      <span>
+        <label for="year">Année :</label>
+        <select id="year" name="year">
+          <option value="2017" selected>2017</option>
+          <option value="2018">2018</option>
+        </select>
+      </span>
+    </div>
+  </div>
+</form>
+```
 
-<p>On génère les valeurs des semaines dynamiquement.</p>
+On génère les valeurs des semaines dynamiquement.
 
-<pre class="brush: css hidden">div {
+```css hidden
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -277,11 +268,13 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}</pre>
+}
+```
 
-<p>Dans le fragment de code JavaScript qui suit, on montre comment détecter si la fonctionnalité est prise en charge ou non. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on règle son <code>type</code> sur <code>week</code> puis on vérifie immédiatement la valeur de son type. Les navigateurs qui ne prennent pas en charge la fonctionnalité renverront <code>text</code>. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif composé des deux éléments {{htmlelement("select")}}.</p>
+Dans le fragment de code JavaScript qui suit, on montre comment détecter si la fonctionnalité est prise en charge ou non. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on règle son `type` sur `week` puis on vérifie immédiatement la valeur de son type. Les navigateurs qui ne prennent pas en charge la fonctionnalité renverront `text`. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif composé des deux éléments {{htmlelement("select")}}.
 
-<pre class="brush: js">// On définit certaines variables
+```js
+// On définit certaines variables
 var nativePicker = document.querySelector('.nativeWeekPicker');
 var fallbackPicker = document.querySelector('.fallbackWeekPicker');
 var fallbackLabel = document.querySelector('.fallbackLabel');
@@ -312,72 +305,74 @@ if(test.type === 'text') {
 
 function populateWeeks() {
   // On ajoute 52 semaines grâce à une boucle
-  for(var i = 1; i &lt;= 52; i++) {
+  for(var i = 1; i <= 52; i++) {
     var option = document.createElement('option');
-    option.textContent = (i &lt; 10) ? ("0" + i) : i;
+    option.textContent = (i < 10) ? ("0" + i) : i;
     weekSelect.appendChild(option);
   }
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p>
-</div>
+> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <td><strong>{{anch("Valeur")}}</strong></td>
-   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente une semaine et une année ou la chaîne vide.</td>
-  </tr>
-  <tr>
-   <td><strong>Évènements</strong></td>
-   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs pris en charge</strong></td>
-   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td>
-  </tr>
-  <tr>
-   <td><strong>Attributs IDL</strong></td>
-   <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>list</code>.</td>
-  </tr>
-  <tr>
-   <td><strong>Méthodes</strong></td>
-   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td><strong>{{anch("Valeur")}}</strong></td>
+      <td>
+        Une chaîne de caractères ({{domxref("DOMString")}}) qui
+        représente une semaine et une année ou la chaîne vide.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Évènements</strong></td>
+      <td>
+        {{domxref("HTMLElement/change_event", "change")}} et
+        {{domxref("HTMLElement/input_event", "input")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs pris en charge</strong></td>
+      <td>
+        {{htmlattrxref("autocomplete", "input")}},
+        {{htmlattrxref("list", "input")}},
+        {{htmlattrxref("readonly", "input")}} et
+        {{htmlattrxref("step", "input")}}.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Attributs IDL</strong></td>
+      <td>
+        <code>value</code>, <code>valueAsDate</code>,
+        <code>valueAsNumber</code>, <code>list</code>.
+      </td>
+    </tr>
+    <tr>
+      <td><strong>Méthodes</strong></td>
+      <td>
+        {{domxref("HTMLInputElement.select", "select()")}},
+        {{domxref("HTMLInputElement.stepDown", "stepDown()")}},
+        {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#week-state-(type=week)', '&lt;input type="week"&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'forms.html#week-state-(type=week)', '&lt;input type="week"&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.input.input-week")}}</p>
+{{Compat("html.elements.input.input-week")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément générique {{HTMLElement("input")}}</li>
- <li>L'interface du DOM qui permet de le manipuler {{domxref("HTMLInputElement")}}</li>
- <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li>
- <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">&lt;input type="datetime-local"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/date">&lt;input type="date"&gt;</a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/time">&lt;input type="time"&gt;</a></code>, and <code><a href="/fr/docs/Web/HTML/Element/input/month">&lt;input type="month"&gt;</a></code></li>
-</ul>
+- L'élément générique {{HTMLElement("input")}}
+- L'interface du DOM qui permet de le manipuler {{domxref("HTMLInputElement")}}
+- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML)
+- [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local), [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date), [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time), and [`<input type="month">`](/fr/docs/Web/HTML/Element/input/month)
diff --git a/files/fr/web/html/element/ins/index.md b/files/fr/web/html/element/ins/index.md
index a0c81dc401..146372cb9a 100644
--- a/files/fr/web/html/element/ins/index.md
+++ b/files/fr/web/html/element/ins/index.md
@@ -8,134 +8,132 @@ tags:
   - Web
 translation_of: Web/HTML/Element/ins
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;ins&gt;</code></strong> représente un fragment de texte qui a été ajouté dans un document.</p>
+L'élément HTML **`<ins>`** représente un fragment de texte qui a été ajouté dans un document.
 
-<div class="blockIndicator note">
-<p><strong>Note :</strong> À l'inverse, on pourra utiliser l'élément {{HTMLElement("del")}} afin de représenter un fragment de texte supprimé.</p>
-</div>
+> **Note :** À l'inverse, on pourra utiliser l'élément {{HTMLElement("del")}} afin de représenter un fragment de texte supprimé.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/ins.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/ins.html", "tabbed-standard")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>On peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> pour cet élément.</p>
+On peut utiliser [les attributs universels](/fr/docs/Web/HTML/Attributs_universels) pour cet élément.
 
-<dl>
- <dt>{{htmlattrdef("cite")}}</dt>
- <dd>Cet attribut définit l'URI d'une ressource qui explique la modification (par exemple, un compte-rendu de réunion ou un lien vers un rapport).</dd>
- <dt>{{htmlattrdef("datetime")}}</dt>
- <dd>Cet attribut indique la date et l'heure de la modification. La valeur de cet attribut doit être <a href="https://www.w3.org/TR/2011/WD-html5-20110525/common-microsyntaxes.html#valid-date-string-with-optional-time">une date valide avec une chaîne de caractères optionnelle pour l'heure</a>. Si la valeur ne peut pas être analysée comme une date, l'indication temporelle sera absente de l'élément. Voir <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">l'article sur les formats</a> pour la représentation d'<a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates">une date seule</a> ou d'<a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales">une date avec une heure</a>.</dd>
-</dl>
+- {{htmlattrdef("cite")}}
+  - : Cet attribut définit l'URI d'une ressource qui explique la modification (par exemple, un compte-rendu de réunion ou un lien vers un rapport).
+- {{htmlattrdef("datetime")}}
+  - : Cet attribut indique la date et l'heure de la modification. La valeur de cet attribut doit être [une date valide avec une chaîne de caractères optionnelle pour l'heure](https://www.w3.org/TR/2011/WD-html5-20110525/common-microsyntaxes.html#valid-date-string-with-optional-time). Si la valeur ne peut pas être analysée comme une date, l'indication temporelle sera absente de l'élément. Voir [l'article sur les formats](/fr/docs/Web/HTML/Formats_date_heure_HTML) pour la représentation d'[une date seule](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates) ou d'[une date avec une heure](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Le texte &lt;ins&gt;Ce texte a été ajouté&lt;/ins&gt; original.&lt;/p&gt;</pre>
+```html
+<p>Le texte <ins>Ce texte a été ajouté</ins> original.</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+{{EmbedLiveSample("Exemples","100%","100%")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément <code>ins</code>. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.</p>
+Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément `ins`. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.
 
-<pre>ins::before,
-ins::after {
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
+    ins::before,
+    ins::after {
+      clip-path: inset(100%);
+      clip: rect(1px, 1px, 1px, 1px);
+      height: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
 
-ins::before {
-  content: " [Début de l'insertion]";
-}
+    ins::before {
+      content: " [Début de l'insertion]";
+    }
 
-ins::after {
-  content: " [Fin de l'insertion] ";
-}
-</pre>
+    ins::after {
+      content: " [Fin de l'insertion] ";
+    }
 
-<p>Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été inséré.</p>
+Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été inséré.
 
-<ul>
- <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/"><em>Short note on making your mark (more accessible) | The Paciello Group</em> (en anglais)</a></li>
- <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html"><em>Tweaking Text Level Styles | Adrian Roselli</em> (en anglais)</a></li>
-</ul>
+- [_Short note on making your mark (more accessible) | The Paciello Group_ (en anglais)](https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/)
+- [_Tweaking Text Level Styles | Adrian Roselli_ (en anglais)](http://adrianroselli.com/2017/12/tweaking-text-level-styles.html)
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">Contenu phrasé</a> ou <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod%C3%A8le_de_contenu_transparent">Contenu transparent</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balise</th>
-   <td>Aucune, la balise ouvrante et la balise fermante doivent être présentes.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLModElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9"
+          >Contenu phrasé</a
+        >
+        ou
+        <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod%C3%A8le_de_contenu_transparent"
+          >Contenu transparent</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balise</th>
+      <td>
+        Aucune, la balise ouvrante et la balise fermante doivent être présentes.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLModElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'edits.html#the-ins-element', '&lt;ins&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '&lt;ins&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.4', '&lt;ins&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'edits.html#the-ins-element', '&lt;ins&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '&lt;ins&gt;')}}     | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'struct/text.html#h-9.4', '&lt;ins&gt;')}}         | {{Spec2('HTML4.01')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.ins")}}</p>
+{{Compat("html.elements.ins")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("del")}} qui permet d'indiquer la suppression d'un fragment dans un document.</li>
-</ul>
+- {{HTMLElement("del")}} qui permet d'indiquer la suppression d'un fragment dans un document.
diff --git a/files/fr/web/html/element/kbd/index.md b/files/fr/web/html/element/kbd/index.md
index 8df53af401..b1579c8986 100644
--- a/files/fr/web/html/element/kbd/index.md
+++ b/files/fr/web/html/element/kbd/index.md
@@ -8,210 +8,221 @@ tags:
   - Web
 translation_of: Web/HTML/Element/kbd
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <code><strong>&lt;kbd&gt;</strong></code> représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le {{Glossary("user agent")}} rend par défaut le contenu d'un élément <code>&lt;kbd&gt;</code> en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.</p>
+L'élément HTML **`<kbd>`** représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le {{Glossary("user agent")}} rend par défaut le contenu d'un élément `<kbd>` en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML.
 
-<p><code>&lt;kbd&gt;</code> peut être imbriqué dans diverses combinaisons avec {{HTMLElement("samp")}} (Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels.</p>
+`<kbd>` peut être imbriqué dans diverses combinaisons avec {{HTMLElement("samp")}} (Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément ne contient que <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément ne contient que [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>D'autres éléments peuvent être utilisés en association avec <code>&lt;kbd&gt;</code> afin de représenter certains scénarios plus spécifiques :</p>
+D'autres éléments peuvent être utilisés en association avec `<kbd>` afin de représenter certains scénarios plus spécifiques :
 
-<ul>
- <li>Imbriquer un élément <code>&lt;kbd&gt;</code> dans un autre élément <code>&lt;kbd&gt;</code> représente une touche ou une unité de saisie au sein d'une saisie plus grande. Cf. {{anch("Représenter les frappes de touches dans une saisie")}} ci-après.</li>
- <li>Imbriquer un élément <code>&lt;kbd&gt;</code> dans un élément  {{HTMLElement("samp")}} permet d'indiquer que la saisie a été restituée (<em>echo</em>) à l'utilisateur. Cf. {{anch("Saisie restituée")}}, ci-après.</li>
- <li>Imbriquer un élément <code>&lt;samp&gt;</code> dans un élément <code>&lt;kbd&gt;</code> permet de représenter des saisies basées sur le texte présenté par le système (cela peut être le nom de menus, d'éléments de menu ou le nom de bouttons affichés à l'écran). Cf. {{anch("Représenter les options de saisies à l'écran")}} ci-après..</li>
-</ul>
+- Imbriquer un élément `<kbd>` dans un autre élément `<kbd>` représente une touche ou une unité de saisie au sein d'une saisie plus grande. Cf. {{anch("Représenter les frappes de touches dans une saisie")}} ci-après.
+- Imbriquer un élément `<kbd>` dans un élément  {{HTMLElement("samp")}} permet d'indiquer que la saisie a été restituée (_echo_) à l'utilisateur. Cf. {{anch("Saisie restituée")}}, ci-après.
+- Imbriquer un élément `<samp>` dans un élément `<kbd>` permet de représenter des saisies basées sur le texte présenté par le système (cela peut être le nom de menus, d'éléments de menu ou le nom de bouttons affichés à l'écran). Cf. {{anch("Représenter les options de saisies à l'écran")}} ci-après..
 
-<div class="note">
-<p><strong>Note :</strong> Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément <code>&lt;kbd&gt;</code>. À ce titre, on gardera à l'esprit que les préférences et feuilles de style de l'utilisateur peuvent surcharger la mise en forme du site.</p>
-</div>
+> **Note :** Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément `<kbd>`. À ce titre, on gardera à l'esprit que les préférences et feuilles de style de l'utilisateur peuvent surcharger la mise en forme du site.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<pre class="brush: html">&lt;p&gt;Utilisez la commande &lt;kbd&gt;help macommande&lt;/kbd&gt; afin de consulter
- la documentation pour la commande "macommande".&lt;/p&gt;
-</pre>
+```html
+<p>Utilisez la commande <kbd>help macommande</kbd> afin de consulter
+ la documentation pour la commande "macommande".</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Exemple_simple', 350, 80)}}</p>
+{{EmbedLiveSample('Exemple_simple', 350, 80)}}
 
-<h3 id="Représenter_les_frappes_de_touches_dans_une_saisie">Représenter les frappes de touches dans une saisie</h3>
+### Représenter les frappes de touches dans une saisie
 
-<p>Afin de décrire une saisie constituée de plusieurs touches, on imbriquera plusieurs élément <code>&lt;kbd&gt;</code> dans un élément <code>&lt;kbd&gt;</code> englobant qui représente la saisie dans son ensemble. Chaque frappe clavier qui le constitue sera représentée par son propre élément <code>&lt;kbd&gt;</code>.</p>
+Afin de décrire une saisie constituée de plusieurs touches, on imbriquera plusieurs élément `<kbd>` dans un élément `<kbd>` englobant qui représente la saisie dans son ensemble. Chaque frappe clavier qui le constitue sera représentée par son propre élément `<kbd>`.
 
-<h4 id="Sans_mise_en_forme">Sans mise en forme</h4>
+#### Sans mise en forme
 
-<p>Commençons par analyser le code HTML.</p>
+Commençons par analyser le code HTML.
 
-<h5 id="HTML">HTML</h5>
+##### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Vous pouvez également créer un nouveau document
   en utilisant le raccourci clavier
-  &lt;kbd&gt;&lt;kbd&gt;Ctrl&lt;/kbd&gt;+&lt;kbd&gt;N&lt;/kbd&gt;&lt;/kbd&gt;.
-&lt;/p&gt;</pre>
+  <kbd><kbd>Ctrl</kbd>+<kbd>N</kbd></kbd>.
+</p>
+```
 
-<p>On voit ici que l'ensemble de la combinaison de touches est contenue dans un élément <code>&lt;kbd&gt;</code> et que chaque touche possèe son propre élément.</p>
+On voit ici que l'ensemble de la combinaison de touches est contenue dans un élément `<kbd>` et que chaque touche possèe son propre élément.
 
-<h5 id="Résultat_2">Résultat</h5>
+##### Résultat
 
-<p>Sans mise en forme particulière, voici le résultat obtenu :</p>
+Sans mise en forme particulière, voici le résultat obtenu :
 
-<p>{{EmbedLiveSample("Sans_mise_en_forme", 650, 80)}}</p>
+{{EmbedLiveSample("Sans_mise_en_forme", 650, 80)}}
 
-<h4 id="Avec_style">Avec style</h4>
+#### Avec style
 
-<p>On peut alors ajouter un peu de CSS :</p>
+On peut alors ajouter un peu de CSS :
 
-<h5 id="CSS">CSS</h5>
+##### CSS
 
-<p>On ajoute un règle pour les les éléments <code>&lt;kbd&gt;</code> avec la classe  <code>"key"</code> afin de représenter les touches d'un clavier :</p>
+On ajoute un règle pour les les éléments `<kbd>` avec la classe  `"key"` afin de représenter les touches d'un clavier :
 
-<pre class="brush: css">kbd.key {
+```css
+kbd.key {
   border-radius: 3px;
   padding: 1px 2px 0;
   border: 1px solid black;
-}</pre>
+}
+```
 
-<h5 id="HTML_2">HTML</h5>
+##### HTML
 
-<p>On met à jour le code HTML afin d'utiliser cette classe :</p>
+On met à jour le code HTML afin d'utiliser cette classe :
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Vous pouvez également créer un nouveau document
   en utilisant le raccourci clavier
-  &lt;kbd&gt;&lt;kbd class="key"&gt;Ctrl&lt;/kbd&gt;+&lt;kbd class="key"&gt;N&lt;/kbd&gt;&lt;/kbd&gt;.
-&lt;/p&gt;</pre>
+  <kbd><kbd class="key">Ctrl</kbd>+<kbd class="key">N</kbd></kbd>.
+</p>
+```
 
+##### Résultat
 
+{{EmbedLiveSample("Avec_style", 650, 80)}}
 
-<h5 id="Résultat_3">Résultat</h5>
+### Saisie restituée
 
-<p>{{EmbedLiveSample("Avec_style", 650, 80)}}</p>
+En imbriquant un élément `<kbd>` dans un élément {{HTMLElement("samp")}}, on peut représenter une saisie qui est restituée à l'utilisateur (à la façon d'un écho).
 
-<h3 id="Saisie_restituée">Saisie restituée</h3>
+#### HTML
 
-<p>En imbriquant un élément <code>&lt;kbd&gt;</code> dans un élément {{HTMLElement("samp")}}, on peut représenter une saisie qui est restituée à l'utilisateur (à la façon d'un écho).</p>
-
-<h4 id="HTML_3">HTML</h4>
-
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   S'il se produit une erreur de syntaxe, cet outil affichera
   la commande initialement saisie pour que vous la revoyez :
-&lt;/p&gt;
-&lt;blockquote&gt;
-  &lt;samp&gt;&lt;kbd&gt;custom-git ad mon-nouveau-fichier.cpp&lt;/kbd&gt;&lt;/samp&gt;
-&lt;/blockquote&gt;</pre>
+</p>
+<blockquote>
+  <samp><kbd>custom-git ad mon-nouveau-fichier.cpp</kbd></samp>
+</blockquote>
+```
 
-<h4 id="Résultat_4">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Saisie_restituée", 650, 100)}}</p>
+{{EmbedLiveSample("Saisie_restituée", 650, 100)}}
 
-<h3 id="Representer_les_options_de_saisies_a_l_ecran">Représenter les options de saisies à l’écran</h3>
+### Représenter les options de saisies à l’écran
 
-<p>Imbriquer un élément <code>&lt;samp&gt;</code> dans un élément <code>&lt;kbd&gt;</code>  représente une saisie basée sur du texte affiché par le système (par exemple des noms de menu, d'éléments de menu, des noms de boutons affichés à l'écran, etc.).</p>
+Imbriquer un élément `<samp>` dans un élément `<kbd>`  représente une saisie basée sur du texte affiché par le système (par exemple des noms de menu, d'éléments de menu, des noms de boutons affichés à l'écran, etc.).
 
-<h4 id="HTML_4">HTML</h4>
+#### HTML
 
-<p>Ainsi, si on souhaite expliquer comment choisir l'option "Nouveau document" dans le menu "Fichier" avec un document HTML, on pourra écrire :</p>
+Ainsi, si on souhaite expliquer comment choisir l'option "Nouveau document" dans le menu "Fichier" avec un document HTML, on pourra écrire :
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Pour créer un nouveau fichier, sélectionner l'option
-  &lt;kbd&gt;&lt;kbd&gt;&lt;samp&gt;Fichier&lt;/samp&gt;&lt;/kbd&gt;⇒&lt;kbd&gt;&lt;samp&gt;Nouveau
-  document&lt;/samp&gt;&lt;/kbd&gt;&lt;/kbd&gt; dans le menu.
-&lt;/p&gt;
+  <kbd><kbd><samp>Fichier</samp></kbd>⇒<kbd><samp>Nouveau
+  document</samp></kbd></kbd> dans le menu.
+</p>
 
-&lt;p&gt;
+<p>
   N'oubliez pas de cliquer sur le bouton
-  &lt;kbd&gt;&lt;samp&gt;OK&lt;/samp&gt;&lt;/kbd&gt; afin de confirmer
+  <kbd><samp>OK</samp></kbd> afin de confirmer
   que vous avez saisi le nom du nouveau fichier.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<p>On voit ici différentes imbrications. La description de l'option du menu est incluse dans un élément <code>&lt;kbd&gt;</code> qui contient le menu et le nom de l'élément du menu dans des éléments <code>&lt;kbd&gt;</code> et <code>&lt;samp&gt;</code>, indiquant que la saisie se fera par l'intermédiaire de quelque chose présenté à l'écran.</p>
+On voit ici différentes imbrications. La description de l'option du menu est incluse dans un élément `<kbd>` qui contient le menu et le nom de l'élément du menu dans des éléments `<kbd>` et `<samp>`, indiquant que la saisie se fera par l'intermédiaire de quelque chose présenté à l'écran.
 
-<h4 id="Résultat_5">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Representer_les_options_de_saisies_a_l_ecran", 650, 120)}}</p>
+{{EmbedLiveSample("Representer_les_options_de_saisies_a_l_ecran", 650, 120)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}<br>
-    Jusqu'à Gecko 1.9.2 (Firefox 4), Firefox implémentait l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>
+        {{domxref("HTMLElement")}}<br />Jusqu'à Gecko 1.9.2 (Firefox
+        4), Firefox implémentait l'interface
+        {{domxref("HTMLSpanElement")}} pour cet élément.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '&lt;kbd&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Extension de l'élément afin d'inclure tout type de saisie de l'utilisateur (vocale, tactile, clavier).</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;kbd&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                    | État                             | Commentaires                                                                                           |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-kbd-element', '&lt;kbd&gt;')}}             | {{Spec2('HTML WHATWG')}} |                                                                                                        |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-kbd-element', '&lt;kbd&gt;')}} | {{Spec2('HTML5 W3C')}}     | Extension de l'élément afin d'inclure tout type de saisie de l'utilisateur (vocale, tactile, clavier). |
+| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;kbd&gt;')}}                         | {{Spec2('HTML4.01')}}     |                                                                                                        |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.kbd")}}</p>
+{{Compat("html.elements.kbd")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{htmlelement("code")}}</li>
- <li>{{htmlelement("samp")}}</li>
-</ul>
+- {{htmlelement("code")}}
+- {{htmlelement("samp")}}
diff --git a/files/fr/web/html/element/keygen/index.md b/files/fr/web/html/element/keygen/index.md
index 391387046e..a74f6f7836 100644
--- a/files/fr/web/html/element/keygen/index.md
+++ b/files/fr/web/html/element/keygen/index.md
@@ -9,52 +9,50 @@ tags:
   - Web
 translation_of: Web/HTML/Element/keygen
 ---
-<div>{{deprecated_header}}{{HTMLRef}}</div>
+{{deprecated_header}}{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;keygen&gt;</code></strong> existe afin de faciliter la génération de clés et l'envoi d'une clé publique via un formulaire HTML. Le mécanisme utilisé est conçu pour être utilisé avec les systèmes de gestion de certificats électroniques. L'élément <code>keygen</code> est prévu pour être utilisé dans un formulaire HTML avec d'autres informations permettant de construire une requête de certificat, le résultat du processus étant un certificat signé.</p>
+L'élément HTML **`<keygen>`** existe afin de faciliter la génération de clés et l'envoi d'une clé publique via un formulaire HTML. Le mécanisme utilisé est conçu pour être utilisé avec les systèmes de gestion de certificats électroniques. L'élément `keygen` est prévu pour être utilisé dans un formulaire HTML avec d'autres informations permettant de construire une requête de certificat, le résultat du processus étant un certificat signé.
 
+## Attributs
 
-<h2 id="Attributs">Attributs</h2>
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+- {{htmlattrdef("autofocus")}}
+  - : Cet attribut booléen permet de spécifier si le contrôle doit être sélectionné lorsque la page est chargée, à moins que l'utilisateur n'outrepasse ce comportement en remplissant un autre champ. Un seul élément par document peut avoir l'attribut **`autofocus`**.
+- {{htmlattrdef("challenge")}}
+  - : Une chaîne de caractères correspondant à une requête/réponse qui est envoyée avec la clé publique. La valeur par défaut est une chaîne de caractères vide.
+- {{htmlattrdef("disabled")}}
+  - : Cet attribut booléen indique qu'il est impossible d'interagir avec le contrôle.
+- {{htmlattrdef("form")}}
+  - : L'élément form auquel cet élément est rattaché (son formulaire propriétaire). La valeur de cet attribut doit être l'identifiant (ou **`id`**) d'un élément {{HTMLElement("form")}} du même document. Si cet attribut n'est pas renseigné, l'élément doit être un descendant d'un élément {{HTMLElement("form")}}. Cet attribut permet de placer des éléments `<keygen>` au sein du document sans qu'ils soient présentés dans un formulaire.
+- {{htmlattrdef("keytype")}}
+  - : Le type de clé générée, la valeur par défaut est `RSA`.
+- {{htmlattrdef("name")}}
+  - : Le nom du contrôle qui en envoyé avec les données du formulaire.
 
-<dl>
- <dt>{{htmlattrdef("autofocus")}}</dt>
- <dd>Cet attribut booléen permet de spécifier si le contrôle doit être sélectionné lorsque la page est chargée, à moins que l'utilisateur n'outrepasse ce comportement en remplissant un autre champ. Un seul élément par document peut avoir l'attribut <code><strong>autofocus</strong></code>.</dd>
- <dt>{{htmlattrdef("challenge")}}</dt>
- <dd>Une chaîne de caractères correspondant à une requête/réponse qui est envoyée avec la clé publique. La valeur par défaut est une chaîne de caractères vide.</dd>
- <dt>{{htmlattrdef("disabled")}}</dt>
- <dd>Cet attribut booléen indique qu'il est impossible d'interagir avec le contrôle.</dd>
- <dt>{{htmlattrdef("form")}}</dt>
- <dd>L'élément form auquel cet élément est rattaché (son formulaire propriétaire). La valeur de cet attribut doit être l'identifiant (ou <code><strong>id</strong></code>) d'un élément {{HTMLElement("form")}} du même document. Si cet attribut n'est pas renseigné, l'élément doit être un descendant d'un élément {{HTMLElement("form")}}. Cet attribut permet de placer des éléments <code>&lt;keygen&gt;</code> au sein du document sans qu'ils soient présentés dans un formulaire.</dd>
- <dt>{{htmlattrdef("keytype")}}</dt>
- <dd>Le type de clé générée, la valeur par défaut est <code>RSA</code>.</dd>
- <dt>{{htmlattrdef("name")}}</dt>
- <dd>Le nom du contrôle qui en envoyé avec les données du formulaire.</dd>
-</dl>
+L'élément se présente de cette façon :
 
-<p>L'élément se présente de cette façon :</p>
+```html
+<keygen name="nom" challenge="chaîne de challenge"
+        keytype="type" keyparams="pqg-params">
+```
 
-<pre class="brush: html">&lt;keygen name="<var>nom</var>" challenge="<var>chaîne de challenge</var>"
-        keytype="<var>type</var>" keyparams="<var>pqg-params</var>"&gt;</pre>
+Le paramètre `keytype` est utilisé pour spécifier le type de clé à générer. Les valeurs autorisées sont `RSA` (qui est la valeur par défaut), `DSA` et `EC`. Les attributs `name` et `challenge` sont obligatoires. L'attribut `keytype` est facultatif pour une génération de clé RSA mais obligatoire pour une génération de clé DSA et EC. L'attribut `keyparams` est requis pour la génération de clés DSA et EC et est ignoré pour la génération de clé RSA. `PQG` est un synonyme de `keyparams`. Les variantes suivantes sont donc équivalentes : `keyparams="pqg-params"` ou `pqg="pqg-params"`.
 
-<p>Le paramètre <code>keytype</code> est utilisé pour spécifier le type de clé à générer. Les valeurs autorisées sont <code>RSA</code> (qui est la valeur par défaut), <code>DSA</code> et <code>EC</code>. Les attributs <code>name</code> et <code>challenge</code> sont obligatoires. L'attribut <code>keytype</code> est facultatif pour une génération de clé RSA mais obligatoire pour une génération de clé DSA et EC. L'attribut <code>keyparams</code> est requis pour la génération de clés DSA et EC et est ignoré pour la génération de clé RSA. <code>PQG</code> est un synonyme de <code>keyparams</code>. Les variantes suivantes sont donc équivalentes : <code>keyparams="pqg-params"</code> ou <code>pqg="pqg-params"</code>.</p>
+Pour les clés RSA, le paramètre `keyparams` n'est pas utilisé (ignoré s'il est présent). L'utilisateur peut avoir le choix pour la force des clés RSA à générer. Actuellement, l'utilisateur peut choisir entre « `high` » (élevé) pour 2048 bits et « `medium` » (moyen) pour 1024 bits.
 
-<p>Pour les clés RSA, le paramètre <code>keyparams</code> n'est pas utilisé (ignoré s'il est présent). L'utilisateur peut avoir le choix pour la force des clés RSA à générer. Actuellement, l'utilisateur peut choisir entre « <code>high</code> » (élevé) pour 2048 bits et « <code>medium</code> » (moyen) pour 1024 bits.</p>
+Pour les clés DSA, le paramètre `keyparams` définit les paramètres DSA PQG à utiliser pendant le processus de génération de la clé. La valeur du paramètre `pqg` est encodée en DER en suivant la structure Dss-Parms comme énoncé dans le [RFC 3279](https://datatracker.ietf.org/doc/html/rfc3279). L'utilisateur peut avoir le choix des tailles de clés DSA, permettant à l'utilisateur de choisir parmi les tailles de clés définies dans le standard DSA.
 
-<p>Pour les clés DSA, le paramètre <code>keyparams</code> définit les paramètres DSA PQG à utiliser pendant le processus de génération de la clé. La valeur du paramètre <code>pqg</code> est encodée en DER en suivant la structure Dss-Parms comme énoncé dans le <a href="https://datatracker.ietf.org/doc/html/rfc3279">RFC 3279</a>. L'utilisateur peut avoir le choix des tailles de clés DSA, permettant à l'utilisateur de choisir parmi les tailles de clés définies dans le standard DSA.</p>
+Pour les clés EC, le paramètre `keyparams` définit le nom de la courbe elliptique sur laquelle sera générée la clé. Normalement, c'est une chaîne de caractères du tableau [nsKeygenHandler.cpp](https://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177). (Il faut noter que seulement un sous-ensemble des courbes peut être supporté par n'importe quel navigateur.) Si le paramètre `keyparams` n'est pas reconnu comme une chaîne de caractères correspondant à une courbe, une courbe est choisie selon la force de la clé choisie par l'utilisateur (faible, moyenne, élevée). La courbe `secp384r1` est utilisée pour une force élevée, la courbe `secp256r1` est utilisée pour des clés moyennes.
 
-<p>Pour les clés EC, le paramètre <code>keyparams</code> définit le nom de la courbe elliptique sur laquelle sera générée la clé. Normalement, c'est une chaîne de caractères du tableau <a class="external" href="https://mxr.mozilla.org/mozilla-central/source/security/manager/ssl/src/nsKeygenHandler.cpp?mark=179-185,187-206,208-227,229-256#177">nsKeygenHandler.cpp</a>. (Il faut noter que seulement un sous-ensemble des courbes peut être supporté par n'importe quel navigateur.) Si le paramètre <code>keyparams</code> n'est pas reconnu comme une chaîne de caractères correspondant à une courbe, une courbe est choisie selon la force de la clé choisie par l'utilisateur (faible, moyenne, élevée). La courbe <code>secp384r1</code> est utilisée pour une force élevée, la courbe <code>secp256r1</code> est utilisée pour des clés moyennes.</p>
+> **Note :** Les détails concernant le nombre de degrés de force, les valeurs par défaut de chaque degré et les interfaces utilisateurs à utiliser pour offrir ce choix sortent du cadre de ce document.
 
-<div class="note">
-<p><strong>Note :</strong> Les détails concernant le nombre de degrés de force, les valeurs par défaut de chaque degré et les interfaces utilisateurs à utiliser pour offrir ce choix sortent du cadre de ce document.</p>
-</div>
+L'élément `keygen` n'est valide que s'il appartient à un formulaire HTML. Il entraînera l'affichage d'une interface pour choisir la taille de clé à utiliser. L'interface peut être un menu, des boutons radio ou autre . Le navigateur offrant différents niveaux de forces pour les clés. Actuellement, deux forces sont proposées : élevée et moyenne (`high` et `medium`). Si le navigateur est configuré afin de supporter du matériel cryptographique (par exemple les « smart cards »), l'utilisateur peut avoir le choix du support sur lequel générer la clé : sur la carte ou par un logiciel puis stockée sur le disque.
 
-<p>L'élément <code>keygen</code> n'est valide que s'il appartient à un formulaire HTML. Il entraînera l'affichage d'une interface pour choisir la taille de clé à utiliser. L'interface peut être un menu, des boutons radio ou autre . Le navigateur offrant différents niveaux de forces pour les clés. Actuellement, deux forces sont proposées : élevée et moyenne (<code>high</code> et <code>medium</code>). Si le navigateur est configuré afin de supporter du matériel cryptographique (par exemple les « smart cards »), l'utilisateur peut avoir le choix du support sur lequel générer la clé : sur la carte ou par un logiciel puis stockée sur le disque.</p>
+Quand le bouton d'envoi du formulaire est activé, une paire de clés de la taille choisie est générée. La clé privée est chiffrée est stockée dans la base de clés locale.
 
-<p>Quand le bouton d'envoi du formulaire est activé, une paire de clés de la taille choisie est générée. La clé privée est chiffrée est stockée dans la base de clés locale.</p>
-
-<pre class="brush: bash">PublicKeyAndChallenge ::= SEQUENCE {
+```bash
+PublicKeyAndChallenge ::= SEQUENCE {
    spki SubjectPublicKeyInfo,
    challenge IA5STRING
 }
@@ -62,57 +60,85 @@ SignedPublicKeyAndChallenge ::= SEQUENCE {
    publicKeyAndChallenge PublicKeyAndChallenge,
    signatureAlgorithm AlgorithmIdentifier,
    signature BIT STRING
-}</pre>
+}
+```
 
-<p>La clé publique et la requête/réponse sont encodées en DER en tant que PublicKeyAndChallenge, puis signées avec la clé privée pour produire un SignedPublicKeyAndChallenge. Le  SignedPublicKeyAndChallenge est encodé en base64 et les données ASCII sont finalement envoyées au serveur sous forme d'une paire nom-valeur du formulaire. Le nom étant la valeur définie par l'attribut <code>name</code> de l'élément <code>keygen</code>. Si aucune chaîne de requête/réponse n'est fournie, cela sera encodé comme une IA5STRING de longueur nulle.</p>
+La clé publique et la requête/réponse sont encodées en DER en tant que PublicKeyAndChallenge, puis signées avec la clé privée pour produire un SignedPublicKeyAndChallenge. Le  SignedPublicKeyAndChallenge est encodé en base64 et les données ASCII sont finalement envoyées au serveur sous forme d'une paire nom-valeur du formulaire. Le nom étant la valeur définie par l'attribut `name` de l'élément `keygen`. Si aucune chaîne de requête/réponse n'est fournie, cela sera encodé comme une IA5STRING de longueur nulle.
 
-<p>Voici un exemple d'un envoi de formulaire, tel qu'envoyé au programme CGI par le serveur HTTP :</p>
+Voici un exemple d'un envoi de formulaire, tel qu'envoyé au programme CGI par le serveur HTTP :
 
-<pre class="brush: bash">   commonname=John+Doe&amp;email=doe@foo.com&amp;org=Foobar+Computing+Corp.&amp;
-   orgunit=Bureau+of+Bureaucracy&amp;locality=Anytown&amp;state=California&amp;country=US&amp;
-   key=MIHFMHEwXDANBgkqhkiG9w0BAQEFAANLADBIAkEAnX0TILJrOMUue%2BPtwBRE6XfV%0AWtKQbsshxk5ZhcUwcwyvcnIq9b82QhJdoACdD34rqfCAIND46fXKQUnb0mvKzQID%0AAQABFhFNb3ppbGxhSXNNeUZyaWVuZDANBgkqhkiG9w0BAQQFAANBAAKv2Eex2n%2FS%0Ar%2F7iJNroWlSzSMtTiQTEB%2BADWHGj9u1xrUrOilq%2Fo2cuQxIfZcNZkYAkWP4DubqW%0Ai0%2F%2FrgBvmco%3D</pre>
-<h2 id="Résumé_technique">Résumé technique</h2>
+```bash
+   commonname=John+Doe&email=doe@foo.com&org=Foobar+Computing+Corp.&
+   orgunit=Bureau+of+Bureaucracy&locality=Anytown&state=California&country=US&
+   key=MIHFMHEwXDANBgkqhkiG9w0BAQEFAANLADBIAkEAnX0TILJrOMUue%2BPtwBRE6XfV%0AWtKQbsshxk5ZhcUwcwyvcnIq9b82QhJdoACdD34rqfCAIND46fXKQUnb0mvKzQID%0AAQABFhFNb3ppbGxhSXNNeUZyaWVuZDANBgkqhkiG9w0BAQQFAANBAAKv2Eex2n%2FS%0Ar%2F7iJNroWlSzSMtTiQTEB%2BADWHGj9u1xrUrOilq%2Fo2cuQxIfZcNZkYAkWP4DubqW%0Ai0%2F%2FrgBvmco%3D
+```
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires">contenu associé aux formulaires</a> (listed, submittable, resettable), contenu interactif, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Aucun, c'est un élément vide</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>Doit avoir une balise de début mais pas de balise de fin.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLKeygenElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >,
+        <a
+          href="/fr/docs/Web/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires"
+          >contenu associé aux formulaires</a
+        >
+        (listed, submittable, resettable), contenu interactif,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Aucun, c'est un élément vide</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>Doit avoir une balise de début mais pas de balise de fin.</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément acceptant du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLKeygenElement")}}</td>
+    </tr>
+  </tbody>
 </table>
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
 
-<p>{{Compat("html.elements.keygen")}}</p>
+## Compatibilité des navigateurs
+
+{{Compat("html.elements.keygen")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les discussions autour de la dépréciation/obsolescence de l'élément <code>&lt;keygen&gt;</code> :
+- Les discussions autour de la dépréciation/obsolescence de l'élément `<keygen>` :
 
-  <ul>
-   <li><a href="https://github.com/w3c/html/issues/43">L'<em>issue</em> GitHub</a></li>
-   <li><a href="https://lists.w3.org/Archives/Public/public-html/2016May/0021.html">La discussion sur la liste de diffusion public-html</a></li>
-  </ul>
- </li>
-</ul>
+  - [L'_issue_ GitHub](https://github.com/w3c/html/issues/43)
+  - [La discussion sur la liste de diffusion public-html](https://lists.w3.org/Archives/Public/public-html/2016May/0021.html)
diff --git a/files/fr/web/html/element/label/index.md b/files/fr/web/html/element/label/index.md
index 785a98dd0c..4d36c25117 100644
--- a/files/fr/web/html/element/label/index.md
+++ b/files/fr/web/html/element/label/index.md
@@ -9,198 +9,213 @@ tags:
   - Web
 translation_of: Web/HTML/Element/label
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;label&gt;</code></strong> représente une légende pour un objet d'une interface utilisateur. Il peut être associé à un contrôle en utilisant l'attribut <code>for</code> ou en plaçant l'élément du contrôle à l'intérieur de l'élément <code>&lt;label&gt;</code>. Un tel contrôle est appelé <em>contrôle étiqueté</em> par l'élément <code>&lt;label&gt;</code>.</p>
+L'élément HTML **`<label>`** représente une légende pour un objet d'une interface utilisateur. Il peut être associé à un contrôle en utilisant l'attribut `for` ou en plaçant l'élément du contrôle à l'intérieur de l'élément `<label>`. Un tel contrôle est appelé _contrôle étiqueté_ par l'élément `<label>`.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/label.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/label.html", "tabbed-shorter")}}
 
-<p>Rattacher un libellé à un élément de saisie ({{HTMLElement("input")}}) offre différents avantages :</p>
+Rattacher un libellé à un élément de saisie ({{HTMLElement("input")}}) offre différents avantages :
 
-<ul>
- <li>Le texte du libellé n'est pas seulement associé visuellement au champ, il est <em>techniquement</em> associé avec le champ. Ainsi, lorsque l'utilisateur a le focus sur le champ, un lecteur d'écran pourra énoncer le contenu du libellé et permettre à l'utilisateur de disposer d'un meilleur contexte.</li>
- <li>Vous pouvez cliquer sur le libellé pour passer le focus voire activer le champ. De cette façon, on dispose d'une meilleure ergonomie car la surface d'utilisation du champ est agrandie, ce qui s'avère utile sur les petits appareils comme les téléphones portables.</li>
-</ul>
+- Le texte du libellé n'est pas seulement associé visuellement au champ, il est _techniquement_ associé avec le champ. Ainsi, lorsque l'utilisateur a le focus sur le champ, un lecteur d'écran pourra énoncer le contenu du libellé et permettre à l'utilisateur de disposer d'un meilleur contexte.
+- Vous pouvez cliquer sur le libellé pour passer le focus voire activer le champ. De cette façon, on dispose d'une meilleure ergonomie car la surface d'utilisation du champ est agrandie, ce qui s'avère utile sur les petits appareils comme les téléphones portables.
 
-<p>Pour associer un élément <code>&lt;label&gt;</code> avec un élément <code>&lt;input&gt;</code>, il faut fournir un identifiant à l'élément <code>&lt;input&gt;</code> sous la forme d'un attribut <code>id</code>. Ensuite, on peut renseigner l'attribut <code>for</code> de l'élément <code>&lt;label&gt;</code> avec la valeur de cet identifiant.</p>
+Pour associer un élément `<label>` avec un élément `<input>`, il faut fournir un identifiant à l'élément `<input>` sous la forme d'un attribut `id`. Ensuite, on peut renseigner l'attribut `for` de l'élément `<label>` avec la valeur de cet identifiant.
 
-<p>On peut également créer un lien implicite en imbriquant l'élément <code>&lt;input&gt;</code> directement au sein d'un élément <code>&lt;label&gt;</code> . Dans ce cas, les attributs <code>for</code> et <code>id</code> ne sont plus nécessaires.</p>
+On peut également créer un lien implicite en imbriquant l'élément `<input>` directement au sein d'un élément `<label>` . Dans ce cas, les attributs `for` et `id` ne sont plus nécessaires.
 
-<pre class="brush: html">&lt;label&gt;Aimez-vous les petits pois ?
-  &lt;input type="checkbox" name="petits_pois"&gt;
-&lt;/label&gt;
-</pre>
+```html
+<label>Aimez-vous les petits pois ?
+  <input type="checkbox" name="petits_pois">
+</label>
+```
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("for")}}</dt>
- <dd><p>L'identifiant (la valeur de l'attribut {{htmlattrxref("id")}}) de l'élément de formulaire associé, appartenant au même document que l'élément label. Le premier élément du document dont l'identifiant correspond est alors le contrôle étiqueté par l'élément.</p>
-   <div class="note">
-     <p><strong>Note :</strong> Un élément label peut simultanément avoir un attribut <code>for</code> et contenir un élément de contrôle tant que l'attribut <code>for</code> pointe vers l'élément contenu.</p>
-   </div>
- </dd>
- <dt>{{htmlattrdef("form")}}</dt>
- <dd><p>L'élément de formulaire auquel l'élément label est associé (son formulaire propriétaire). La valeur de cet attribut doit être l'identifiant d'un élément {{HTMLElement("form")}} contenu au sein du même document. Si l'attribut n'est pas renseigné, cet élément &lt;label&gt; doit être le descendant d'un élément {{HTMLElement("form")}}. Cet attribut permet de placer des éléments label dans le document sans qu'ils soient nécessairement imbriqués dans un formulaire.</p>
- <div class="note">
-   <p><strong>Note :</strong> La spécification HTML a été mise à jour le 28 avril 2016 afin de déprécier l'attribut {{htmlattrxref("form")}}. Celui-ci est toujours disponible dans les scripts mais sa définition a changé, il renvoie désormais le contrôle associé au formulaire ou <code>null</code> s'il n'y a pas de contrôle associé (autrement dit si {{domxref("HTMLLabelElement.control")}} vaut <code>null</code>).</p>
- </div>
- </dd>
-</dl>
+- {{htmlattrdef("for")}}
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+  - : L'identifiant (la valeur de l'attribut {{htmlattrxref("id")}}) de l'élément de formulaire associé, appartenant au même document que l'élément label. Le premier élément du document dont l'identifiant correspond est alors le contrôle étiqueté par l'élément.
 
-<ul>
- <li>Un élément <code>&lt;label&gt;</code> peut être associé à un contrôle en plaçant l'élément du contrôle dans l'élément <code>&lt;label&gt;</code> ou en utilisant l'attribut {{htmlattrxref("for")}}. Un tel contrôle sera appelé le contrôle <em>étiqueté</em> par l'élément <code>&lt;label&gt;</code>. Un contrôle peut être associé à plusieurs <code>&lt;label&gt;</code>.</li>
- <li>Les étiquettes ne sont pas directement associées aux formulaires. Elles le sont indirectement via le contrôle auquel elles sont rattachées.</li>
- <li>Lorsqu'on clique ou touche un élément <code>&lt;label&gt;</code> et que celui-ci est associé à un contrôle d'un formulaire, l'évènement <code>click</code> est également déclenché pour le contrôle.</li>
-</ul>
+    > **Note :** Un élément label peut simultanément avoir un attribut `for` et contenir un élément de contrôle tant que l'attribut `for` pointe vers l'élément contenu.
 
-<h2 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h2>
+- {{htmlattrdef("form")}}
 
-<p>Il n'existe pas de spécificité relative à la mise en forme des éléments <code>&lt;label&gt;</code>. Par défaut, ce sont des éléments <em>inline</em> et ils peuvent être mis en forme de la même façon que {{HTMLElement("span")}} et {{HTMLElement("a")}}.</p>
+  - : L'élément de formulaire auquel l'élément label est associé (son formulaire propriétaire). La valeur de cet attribut doit être l'identifiant d'un élément {{HTMLElement("form")}} contenu au sein du même document. Si l'attribut n'est pas renseigné, cet élément \<label> doit être le descendant d'un élément {{HTMLElement("form")}}. Cet attribut permet de placer des éléments label dans le document sans qu'ils soient nécessairement imbriqués dans un formulaire.
 
-<h2 id="Exemples">Exemples</h2>
+    > **Note :** La spécification HTML a été mise à jour le 28 avril 2016 afin de déprécier l'attribut {{htmlattrxref("form")}}. Celui-ci est toujours disponible dans les scripts mais sa définition a changé, il renvoie désormais le contrôle associé au formulaire ou `null` s'il n'y a pas de contrôle associé (autrement dit si {{domxref("HTMLLabelElement.control")}} vaut `null`).
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+## Notes d'utilisation
 
-<h4 id="HTML">HTML</h4>
+- Un élément `<label>` peut être associé à un contrôle en plaçant l'élément du contrôle dans l'élément `<label>` ou en utilisant l'attribut {{htmlattrxref("for")}}. Un tel contrôle sera appelé le contrôle _étiqueté_ par l'élément `<label>`. Un contrôle peut être associé à plusieurs `<label>`.
+- Les étiquettes ne sont pas directement associées aux formulaires. Elles le sont indirectement via le contrôle auquel elles sont rattachées.
+- Lorsqu'on clique ou touche un élément `<label>` et que celui-ci est associé à un contrôle d'un formulaire, l'évènement `click` est également déclenché pour le contrôle.
 
-<pre class="brush: html">&lt;label&gt;Cliquez ici&lt;input type="text" id="Utilisateur" name="Nom" /&gt;&lt;/label&gt;</pre>
+## Mise en forme avec CSS
 
-<h4 id="Résultat">Résultat</h4>
+Il n'existe pas de spécificité relative à la mise en forme des éléments `<label>`. Par défaut, ce sont des éléments _inline_ et ils peuvent être mis en forme de la même façon que {{HTMLElement("span")}} et {{HTMLElement("a")}}.
 
-<p>{{EmbedLiveSample('Exemple_simple', '200', '50', '')}}</p>
+## Exemples
 
-<h3 id="Utiliser_l’attribut_for">Utiliser l’attribut <code>for</code></h3>
+### Exemple simple
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;label for="Utilisateur"&gt;Cliquez ici&lt;/label&gt;
-&lt;input type="text" id="Utilisateur" name="Nom" /&gt;</pre>
+```html
+<label>Cliquez ici<input type="text" id="Utilisateur" name="Nom" /></label>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Utiliser_l’attribut_for", '200', '50', '')}}</p>
+{{EmbedLiveSample('Exemple_simple', '200', '50', '')}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+### Utiliser l’attribut `for`
 
-<h3 id="Contenu_interactif">Contenu interactif</h3>
+#### HTML
 
-<p>Il ne faut pas placer d'éléments interactifs (tels que les ancres ({{HTMLElement("a")}}) ou les boutons ({{HTMLElement("button")}})) dans un élément <code>label</code> sinon il sera difficile d'activer le contrôle associé à ce libellé.</p>
+```html
+<label for="Utilisateur">Cliquez ici</label>
+<input type="text" id="Utilisateur" name="Nom" />
+```
 
-<h4 id="Mauvaise_pratique">Mauvaise pratique</h4>
+#### Résultat
 
-<pre class="brush: html example-bad">&lt;label for="tac"&gt;
-  &lt;input id="tac" type="checkbox" name="terms-and-conditions"&gt;
-  J'accepte &lt;a href="terms-and-conditions.html"&gt;les conditions d'utilisation&lt;/a&gt;
-&lt;/label&gt;
-</pre>
+{{EmbedLiveSample("Utiliser_l’attribut_for", '200', '50', '')}}
 
-<h4 id="Bonne_pratique">Bonne pratique</h4>
+## Accessibilité
 
-<pre class="brush: html example-good">&lt;label for="tac"&gt;
-  &lt;input id="tac" type="checkbox" name="terms-and-conditions"&gt;
+### Contenu interactif
+
+Il ne faut pas placer d'éléments interactifs (tels que les ancres ({{HTMLElement("a")}}) ou les boutons ({{HTMLElement("button")}})) dans un élément `label` sinon il sera difficile d'activer le contrôle associé à ce libellé.
+
+#### Mauvaise pratique
+
+```html example-bad
+<label for="tac">
+  <input id="tac" type="checkbox" name="terms-and-conditions">
+  J'accepte <a href="terms-and-conditions.html">les conditions d'utilisation</a>
+</label>
+```
+
+#### Bonne pratique
+
+```html example-good
+<label for="tac">
+  <input id="tac" type="checkbox" name="terms-and-conditions">
   J'accepte les conditions d'utilisation
-&lt;/label&gt;
-&lt;p&gt;
-  &lt;a href="terms-and-conditions.html"&gt;Lire les conditions d'utilisation&lt;/a&gt;
-&lt;/p&gt;
-</pre>
+</label>
+<p>
+  <a href="terms-and-conditions.html">Lire les conditions d'utilisation</a>
+</p>
+```
 
-<h3 id="Titres">Titres</h3>
+### Titres
 
-<p>Placer des <a href="/fr/docs/Web/HTML/Element/Heading_Elements">éléments de titres</a> à l'intérieur d'un élément <code>label</code> causera des interférences avec de nombreux outils d'assistance car les titres sont généralement utilisés comme <a href="/en-US/docs/Web/HTML/Element/Heading_Elements#Navigation">une aide à la navigation</a>. Si le texte du libellé doit être ajusté visuellement, on utilisera une mise en forme via CSS.</p>
+Placer des [éléments de titres](/fr/docs/Web/HTML/Element/Heading_Elements) à l'intérieur d'un élément `label` causera des interférences avec de nombreux outils d'assistance car les titres sont généralement utilisés comme [une aide à la navigation](/en-US/docs/Web/HTML/Element/Heading_Elements#Navigation). Si le texte du libellé doit être ajusté visuellement, on utilisera une mise en forme via CSS.
 
-<p>S'il faut associer un titre à un formulaire ou à une section d'un formulaire, on utilisera l'élément {{HTMLElement("legend")}} au sein d'un élément {{HTMLElement("fieldset")}}.</p>
+S'il faut associer un titre à un formulaire ou à une section d'un formulaire, on utilisera l'élément {{HTMLElement("legend")}} au sein d'un élément {{HTMLElement("fieldset")}}.
 
-<h4 id="Mauvaise_pratique_2">Mauvaise pratique</h4>
+#### Mauvaise pratique
 
-<pre class="brush: html example-bad">&lt;label for="votre-nom"&gt;
-  &lt;h3&gt;Votre nom&lt;/h3&gt;
-  &lt;input id="votre-nom" name="votre-nom" type="text"&gt;
-&lt;/label&gt;
-</pre>
+```html example-bad
+<label for="votre-nom">
+  <h3>Votre nom</h3>
+  <input id="votre-nom" name="votre-nom" type="text">
+</label>
+```
 
-<h4 id="Bonne_pratique_2">Bonne pratique</h4>
+#### Bonne pratique
 
-<pre class="brush: html example-good">&lt;label class="label-grand" for="votre-nom"&gt;
+```html example-good
+<label class="label-grand" for="votre-nom">
   Votre nom
-  &lt;input id="votre-nom" name="votre-nom" type="text"&gt;
-&lt;/label&gt; </pre>
+  <input id="votre-nom" name="votre-nom" type="text">
+</label>
+```
 
-<h3 id="Boutons">Boutons</h3>
+### Boutons
 
-<p>Un élément {{HTMLElement("input")}} avec <code>type="button"</code> et un attribut <code>value</code> valide ne nécessite pas l'ajout d'un libellé. Rajouter un libellé inutile pourra créer des interférences avec les outils d'assistance. Il en va de même pour l'élément {{HTMLElement("button")}}.</p>
+Un élément {{HTMLElement("input")}} avec `type="button"` et un attribut `value` valide ne nécessite pas l'ajout d'un libellé. Rajouter un libellé inutile pourra créer des interférences avec les outils d'assistance. Il en va de même pour l'élément {{HTMLElement("button")}}.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires">contenu associé aux formulaires</a> (listed, submittable, resettable), <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>, contenu interactif.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> sans éléments <code>label</code> descendants. À l'exception du contrôle lié à la légende, pas d'autres éléments pouvant contenir un élément <code>label</code>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balise</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLLabelElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires"
+          >contenu associé aux formulaires</a
+        >
+        (listed, submittable, resettable),
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >, contenu interactif.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >
+        sans éléments <code>label</code> descendants. À l'exception du contrôle
+        lié à la légende, pas d'autres éléments pouvant contenir un élément
+        <code>label</code>.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balise</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément acceptant du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLLabelElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '&lt;label&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                        | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#the-label-element', '&lt;label&gt;')}} | {{Spec2('HTML WHATWG')}} |                      |
+| {{SpecName('HTML5 W3C', 'forms.html#the-label-element', '&lt;label&gt;')}} | {{Spec2('HTML5 W3C')}}     |                      |
+| {{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '&lt;label&gt;')}}     | {{Spec2('HTML4.01')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.label")}}</p>
+{{Compat("html.elements.label")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li>
-</ul>
+- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
diff --git a/files/fr/web/html/element/legend/index.md b/files/fr/web/html/element/legend/index.md
index 0ec932fbd6..6d4d6157ea 100644
--- a/files/fr/web/html/element/legend/index.md
+++ b/files/fr/web/html/element/legend/index.md
@@ -9,101 +9,96 @@ tags:
   - Web
 translation_of: Web/HTML/Element/legend
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong>&lt;legend&gt; </strong>représente une légende pour le contenu de son élément parent {{HTMLElement("fieldset")}}.</p>
+L'élément HTML **\<legend>** représente une légende pour le contenu de son élément parent {{HTMLElement("fieldset")}}.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/legend.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/legend.html", "tabbed-standard")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément contient uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément contient uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;form action="" method="post"&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Un champ pour le choix de la radio&lt;/legend&gt;
-    &lt;input type="radio" name="radio" id="radio"&gt;
-    &lt;label for="radio"&gt;Cliquez ici&lt;/label&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;</pre>
+```html
+<form action="" method="post">
+  <fieldset>
+    <legend>Un champ pour le choix de la radio</legend>
+    <input type="radio" name="radio" id="radio">
+    <label for="radio">Cliquez ici</label>
+  </fieldset>
+</form>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
+{{EmbedLiveSample("Exemples","100%","100%")}}
 
-<div class="note">
-<p><strong>Note :</strong> Voir la page sur {{HTMLElement("form")}} pour d'autres exemples qui utilisent <code>&lt;legend&gt;</code>.</p>
-</div>
-<h2 id="Résumé_technique">Résumé technique</h2>
+> **Note :** Voir la page sur {{HTMLElement("form")}} pour d'autres exemples qui utilisent `<legend>`.
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>Aucune, la balise ouvrante et la balise fermante doivent être présentes.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément {{HTMLElement("fieldset")}} dont le premier élément fils est cet élément <code>&lt;legend&gt;</code>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLLegendElement")}}</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "forms.html#the-legend-element", "&lt;legend&gt;")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Définition de l'élément <code>legend</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "forms.html#the-legend-element", "&lt;legend&gt;")}}</td>
-   <td>{{Spec2("HTML5 W3C")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML4.01", "interact/forms.html#h-17.10", "&lt;legend&gt;")}}</td>
-   <td>{{Spec2("HTML4.01")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        Aucune, la balise ouvrante et la balise fermante doivent être présentes.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Un élément {{HTMLElement("fieldset")}} dont le premier élément
+        fils est cet élément <code>&#x3C;legend></code>.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLLegendElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires                      |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------- |
+| {{SpecName("HTML WHATWG", "forms.html#the-legend-element", "&lt;legend&gt;")}} | {{Spec2("HTML WHATWG")}} | Définition de l'élément `legend`. |
+| {{SpecName("HTML5 W3C", "forms.html#the-legend-element", "&lt;legend&gt;")}}     | {{Spec2("HTML5 W3C")}}     |                                   |
+| {{SpecName("HTML4.01", "interact/forms.html#h-17.10", "&lt;legend&gt;")}}         | {{Spec2("HTML4.01")}}     | Définition initiale.              |
+
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.legend")}}</p>
+{{Compat("html.elements.legend")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("option")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li>
- <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA : le rôle <code>form</code></a></li>
-</ul>
+- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("option")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
+- [ARIA : le rôle `form`](/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role)
diff --git a/files/fr/web/html/element/li/index.md b/files/fr/web/html/element/li/index.md
index e8d7ca8a9e..7c5efa1d93 100644
--- a/files/fr/web/html/element/li/index.md
+++ b/files/fr/web/html/element/li/index.md
@@ -8,159 +8,156 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/li
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;li&gt;</code></strong> est utilisé pour représenter un élément dans une liste. Il doit être contenu dans un élément parent : une liste ordonnée ({{HTMLElement("ol")}}), une liste non ordonnée ({{HTMLElement("ul")}}) ou un menu ({{HTMLElement("menu")}}). Dans les menus et les listes non ordonnées, les éléments de liste sont habituellement affichés en utilisant des puces. Dans les listes ordonnées, ils sont habituellement affichés avec compteur croissant à gauche, tel qu'un nombre ou une lettre.</p>
+L'élément HTML **`<li>`** est utilisé pour représenter un élément dans une liste. Il doit être contenu dans un élément parent : une liste ordonnée ({{HTMLElement("ol")}}), une liste non ordonnée ({{HTMLElement("ul")}}) ou un menu ({{HTMLElement("menu")}}). Dans les menus et les listes non ordonnées, les éléments de liste sont habituellement affichés en utilisant des puces. Dans les listes ordonnées, ils sont habituellement affichés avec compteur croissant à gauche, tel qu'un nombre ou une lettre.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p>
+Cet élément inclut les [attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("value")}}</dt>
- <dd><p>Cette valeur entière indique la valeur ordinale en cours de l'élément de liste tel que défini par l'élément {{HTMLElement("ol")}}. La seule valeur autorisée pour cet attribut est un nombre, même si la liste est affichée avec des chiffres romains ou des lettres. Les éléments de la liste qui suivent celui-ci continueront la numérotation à partir de la valeur indiquée. L'attribut <strong>value</strong> n'a pas de signification pour les listes non ordonnées ({{HTMLElement("ul")}}) ou pour les menus ({{HTMLElement("menu")}}).</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.</p></div>
- <div class="note"><p><strong>Note :</strong> Avant {{Gecko("9.0")}}, des valeurs négatives étaient incorrectement converties en 0. A partir de {{Gecko("9.0")}}, toutes les valeurs entières ont été correctement analysées.</p></div>
- </dd>
- <dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
- <dd><p>Cet attribut de caractère indique le type de numérotation utilisé pour la liste :</p>
- <ul>
-  <li><code>a</code> : lettres minuscules</li>
-  <li><code>A</code> : lettres majuscules</li>
-  <li><code>i</code> : chiffres romains en minuscules</li>
-  <li><code>I</code> : chiffres romains en majuscules</li>
-  <li><code>1</code> : nombres</li>
- </ul>
- <p>Ce type surcharge celui utilisé par son élément parent {{HTMLElement("ol")}} si présent.</p>
-  <div class="note">
-    <p><strong>Note :</strong> Cet attribut a été déprécié : utilisez la propriété CSS {{cssxref("list-style-type")}} à la place.</p>
-  </div>
- </dd>
-</dl>
+- {{htmlattrdef("value")}}
 
-<h2 id="Exemples">Exemples</h2>
+  - : Cette valeur entière indique la valeur ordinale en cours de l'élément de liste tel que défini par l'élément {{HTMLElement("ol")}}. La seule valeur autorisée pour cet attribut est un nombre, même si la liste est affichée avec des chiffres romains ou des lettres. Les éléments de la liste qui suivent celui-ci continueront la numérotation à partir de la valeur indiquée. L'attribut **value** n'a pas de signification pour les listes non ordonnées ({{HTMLElement("ul")}}) ou pour les menus ({{HTMLElement("menu")}}).
 
-<h3 id="Liste_ordonnée">Liste ordonnée</h3>
+    > **Note :** Cet attribut a été déprécié en HTML4 mais a été réintroduit en HTML5.
 
-<h4 id="HTML">HTML</h4>
+    > **Note :** Avant {{Gecko("9.0")}}, des valeurs négatives étaient incorrectement converties en 0. A partir de {{Gecko("9.0")}}, toutes les valeurs entières ont été correctement analysées.
 
-<pre><code>&lt;ol&gt;
-    &lt;li&gt;premier article&lt;/li&gt;
-    &lt;li&gt;second article&lt;/li&gt;
-    &lt;li&gt;troisième article&lt;/li&gt;
-&lt;/ol&gt;</code></pre>
+- {{htmlattrdef("type")}} {{Deprecated_inline}}
 
-<h4 id="Résultat">Résultat</h4>
+  - : Cet attribut de caractère indique le type de numérotation utilisé pour la liste :
 
-<p>{{EmbedLiveSample("Liste_ordonnée")}}</p>
+    - `a` : lettres minuscules
+    - `A` : lettres majuscules
+    - `i` : chiffres romains en minuscules
+    - `I` : chiffres romains en majuscules
+    - `1` : nombres
 
-<h3 id="Liste_ordonnée_démarrant_avec_un_indice_donné">Liste ordonnée démarrant avec un indice donné</h3>
+    Ce type surcharge celui utilisé par son élément parent {{HTMLElement("ol")}} si présent.
 
-<h4 id="HTML_2">HTML</h4>
+    > **Note :** Cet attribut a été déprécié : utilisez la propriété CSS {{cssxref("list-style-type")}} à la place.
 
-<pre><code>&lt;ol type="I"&gt;
-    &lt;li value="3"&gt;troisième article&lt;/li&gt;
-    &lt;li&gt;quatrième article&lt;/li&gt;
-    &lt;li&gt;cinquième article&lt;/li&gt;
-&lt;/ol&gt;</code></pre>
+## Exemples
 
-<h4 id="Résultat_2">Résultat</h4>
+### Liste ordonnée
 
-<p>{{EmbedLiveSample("Liste_ordonnée_démarrant_avec_un_indice_donné")}}</p>
+#### HTML
 
-<h3 id="Liste_non_ordonnée">Liste non ordonnée</h3>
+    <ol>
+        <li>premier article</li>
+        <li>second article</li>
+        <li>troisième article</li>
+    </ol>
 
-<h4 id="HTML_3">HTML</h4>
+#### Résultat
 
-<pre><code>&lt;ul&gt;
-    &lt;li&gt;premier article&lt;/li&gt;
-    &lt;li&gt;second article&lt;/li&gt;
-    &lt;li&gt;troisième article&lt;/li&gt;
-&lt;/ul&gt;</code></pre>
+{{EmbedLiveSample("Liste_ordonnée")}}
 
-<h4 id="Résultat_3">Résultat</h4>
+### Liste ordonnée démarrant avec un indice donné
 
-<p>{{EmbedLiveSample("Liste_non_ordonnée")}}</p>
+#### HTML
 
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Pour d'autres exemples plus détaillés, voir les pages {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</p>
-</div>
+    <ol type="I">
+        <li value="3">troisième article</li>
+        <li>quatrième article</li>
+        <li>cinquième article</li>
+    </ol>
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+#### Résultat
+
+{{EmbedLiveSample("Liste_ordonnée_démarrant_avec_un_indice_donné")}}
+
+### Liste non ordonnée
+
+#### HTML
+
+    <ul>
+        <li>premier article</li>
+        <li>second article</li>
+        <li>troisième article</li>
+    </ul>
+
+#### Résultat
+
+{{EmbedLiveSample("Liste_non_ordonnée")}}
+
+> **Note :** Pour d'autres exemples plus détaillés, voir les pages {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>La balise de fin peut être absente si l'élément est immédiatement suivi par un autre élément {{HTMLElement("li")}} ou s'il n'y a plus d'autre contenu dans son élément parent.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément {{HTMLElement("ul")}}, {{HTMLElement("ol")}} ou {{HTMLElement("menu")}}. Bien que ce ne soit pas un usage conforme, l'élément obsolète {{HTMLElement("dir")}} peut également être un parent.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>{{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("presentation")}}, {{ARIARole("radio")}}, {{ARIARole("separator")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLLIElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        La balise de fin peut être absente si l'élément est immédiatement suivi
+        par un autre élément {{HTMLElement("li")}} ou s'il n'y a plus
+        d'autre contenu dans son élément parent.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Un élément {{HTMLElement("ul")}}, {{HTMLElement("ol")}} ou
+        {{HTMLElement("menu")}}. Bien que ce ne soit pas un usage
+        conforme, l'élément obsolète {{HTMLElement("dir")}} peut également
+        être un parent.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>
+        {{ARIARole("menuitem")}},
+        {{ARIARole("menuitemcheckbox")}},
+        {{ARIARole("menuitemradio")}}, {{ARIARole("option")}},
+        {{ARIARole("presentation")}}, {{ARIARole("radio")}},
+        {{ARIARole("separator")}}, {{ARIARole("tab")}},
+        {{ARIARole("treeitem")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLLIElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Statut</th>
-   <th scope="col">Commentaire</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-li-element', '&lt;li&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '&lt;li&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;li&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>L'attribut <code>type</code> a été déprécié.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                            | Statut                           | Commentaire                       |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------- |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-li-element', '&lt;li&gt;')}}     | {{Spec2('HTML WHATWG')}} |                                   |
+| {{SpecName('HTML5 W3C', 'grouping-content.html#the-li-element', '&lt;li&gt;')}} | {{Spec2('HTML5 W3C')}}     |                                   |
+| {{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;li&gt;')}}                 | {{Spec2('HTML4.01')}}     | L'attribut `type` a été déprécié. |
+
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("html.elements.li")}}
 
-<p>{{Compat("html.elements.li")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- Les autres éléments liés aux listes : {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} et {{HTMLElement("dir")}} (obsolète) ;
+- Les propriétés CSS qui peuvent être particulièrement utiles pour mettre en forme l'élément `<li>` :
 
-<ul>
- <li>Les autres éléments liés aux listes : {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} et {{HTMLElement("dir")}} (obsolète) ;</li>
- <li>Les propriétés CSS qui peuvent être particulièrement utiles pour mettre en forme l'élément <code>&lt;li&gt;</code> :
-  <ul>
-   <li>la propriété {{cssxref("list-style")}}, pour choisir la manière d'afficher l'ordinal,</li>
-   <li>les <a href="/fr/docs/Web/CSS/Compteurs_CSS">compteurs CSS</a>, pour gérer des listes imbriquées complexes,</li>
-   <li>la propriété {{cssxref("margin")}}, pour contrôler l'indentation de l'élément de liste.</li>
-  </ul>
- </li>
-</ul>
+  - la propriété {{cssxref("list-style")}}, pour choisir la manière d'afficher l'ordinal,
+  - les [compteurs CSS](/fr/docs/Web/CSS/Compteurs_CSS), pour gérer des listes imbriquées complexes,
+  - la propriété {{cssxref("margin")}}, pour contrôler l'indentation de l'élément de liste.
diff --git a/files/fr/web/html/element/link/index.md b/files/fr/web/html/element/link/index.md
index 33516d02d2..9bdb4e663d 100644
--- a/files/fr/web/html/element/link/index.md
+++ b/files/fr/web/html/element/link/index.md
@@ -8,184 +8,190 @@ tags:
   - Web
 translation_of: Web/HTML/Element/link
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML<strong> <code>&lt;link&gt;</code></strong> définit la relation entre le document courant et une ressource externe. Cet élément peut être utilisé pour définir un lien vers <a href="/fr/docs/Glossaire/CSS">une feuille de style</a>, vers les icônes utilisées en barre de titre ou comme icône d'application sur les appareils mobiles.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/link.html")}}</div>
-
-<p>Pour lier une feuille de style externe, on inclut un élément <code>&lt;link&gt;</code> de la forme suivante à l'intérieur de l'élément {{htmlelement("head")}} :</p>
-
-<pre class="brush: html">&lt;link href="main.css" rel="stylesheet"&gt;</pre>
-
-<p>Dans cet exemple, on indique le chemin vers la feuille de style grâce à l'attribut <code>href</code>, l'attribut  <code>rel</code> possède une valeur <code>stylesheet</code> qui indique que c'est une feuille de style. <code>rel</code> signifie <em>relationship</em> qui correspond donc à la relation entre la ressource et le document courant. Il existe de <a href="/fr/docs/Web/HTML/Types_de_lien">nombreux types de liens possibles</a>.</p>
-
-<p>Certains types sont assez fréquents. Ainsi, pour l'icône présentant le site dans l'onglet, on trouvera :</p>
-
-<pre class="brush: html">&lt;link rel="icon" href="favicon.ico"&gt;</pre>
-
-<p>Il existe différents types de relations pour préciser les icônes et qui permettent notamment de cibler certaines plateformes mobiles :</p>
-
-<pre class="brush: html">&lt;link rel="apple-touch-icon-precomposed" sizes="114x114"
-      href="apple-icon-114.png" type="image/png"&gt;</pre>
-
-<p>L'attribut <code>sizes</code> indique la taille de l'icône tandis que l'attribut <code>type</code> contient le type MIME de la ressource qui est liée. Ces attributs permettent alors au navigateur de sélectionner la ressource la plus adéquate.</p>
-
-<p>On peut également fournir l'attribut <code>media</code> afin d'utiliser telle ou telle ressource lorsqu'une requête média est vérifiée. Ainsi, on pourra utiliser ce qui suit afin d'avoir une feuille de style utilisée à l'impression et une autre dédiée au mobile :</p>
-
-<pre class="brush: html">&lt;link href="print.css" rel="stylesheet" media="print"&gt;
-&lt;link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"&gt;</pre>
-
-<p>Certaines fonctionnalités relatives à la sécurité sont également disponibles avec certains attributs de <code>&lt;link&gt;</code>. Dans cet exemple :</p>
-
-<pre class="brush: html">&lt;link rel="preload" href="myFont.woff2" as="font"
-      type="font/woff2" crossorigin="anonymous"&gt;</pre>
-
-<p>L'attribut <code>rel</code> vaut <code>preload</code> et indique que le navigateur doit précharger la ressource (voir <a href="/fr/docs/Web/HTML/Précharger_du_contenu">Le préchargement du contenu avec <code>rel="preload"</code></a> pour plus de détails), l'attribut <code>as</code> indique la classe de contenu qui est récupéré et l'attribut <code>crossorigin</code> indique si la ressource doit être récupérée avec une requête CORS.</p>
-
-<p>Quelques notes d'utilisation :</p>
-
-<ul>
- <li>Un élément <code>&lt;link&gt;</code> element peut être placé dans un élément {{HTMLElement("head")}} ou {{htmlelement("body")}} selon la valeur de la relation. C'est cependant une bonne pratique que de placer l'ensemble des éléments <code>&lt;link&gt;</code> dans l'élément <code>&lt;head&gt;</code>.</li>
- <li>Lorsque <code>&lt;link&gt;</code> est utilisé pour la <em>favicon</em> d'un site et que celui-ci utilise les règles CSP afin d'améliorer la sécurité, les règles s'appliquent également aux icônes. Aussi, si la <em>favicon</em> ne charge pas, veuillez vérifier que la directive <a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code></a> de l'en-tête {{HTTPHeader("Content-Security-Policy")}} ne bloque pas le chargement de l'image.</li>
- <li>Les spécifications HTML et XHTML définissent des gestionnaires d'évènements pour l'élément <code>&lt;link&gt;</code> mais leur utilisation reste incertaine.</li>
- <li>Pour XHTML 1.0, les éléments vides tels que <code>&lt;link&gt;</code> devaient utiliser une barre oblique de fin : <code>&lt;link /&gt;</code>.</li>
- <li>WebTV prend en charge la valeur <code>next</code> pour l'attribut <code>rel</code> afin de précharger la page suivante pour une série de documents.</li>
-</ul>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
-
-<dl>
- <dt>{{htmlattrdef("as")}}</dt>
- <dd>Cet attribut est uniquement utilisé lorsque <code>rel="preload"</code> ou <code>rel="prefetch"</code> est utilisé pour l'élément <code>&lt;link&gt;</code>. L'attribut indique le type de contenu chargé par l'élément <code>&lt;link&gt;</code> et permet au navigateur de déterminer la priorité du contenu, d'identifier les utilisations de la ressource plus bas dans le document, d'appliquer <a href="/fr/docs/HTTP/CSP">la bonne politique de sécurité des contenus</a> et de définir le bon en-tête de requête {{httpheader("Accept")}}.</dd>
- <dt>{{htmlattrdef("crossorigin")}}</dt>
- <dd>Cet attribut à valeur contrainte indique si le CORS doit être utilisé lorsque la ressource liée est récupérée. <a href="/fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP">Les images avec CORS activé</a> peuvent être réutilisée dans un élément {{HTMLElement("canvas")}} sans qu'il soit corrompu. Les valeurs autorisées sont :
- <ul>
-  <li><code>"anonymous"</code> : une requête <em>cross-origine</em> est effectuée (avec l'en-tête HTTP <code>Origin</code>). Mais aucune information d'identification n'est envoyée (aucun cookie, aucun certificat X.509, aucune authentification simple via HTTP). Si le serveur ne fournit pas d'informations au site d'origine (c'est-à-dire sans utiliser l'en-tête HTTP {{httpheader("Access-Control-Allow-Origin")}}, l'image sera <em>corrompue</em> et son utilisation sera restreinte.</li>
-  <li><code>"use-credentials"</code> : une requête <em>cross-origine</em> est effectuée (avec l'en-tête HTTP <code>Origin</code>) avec des informations d'authentification qui sont envoyées (un cookie, un certification et une authentification HTTP simple sont envoyés). Si le serveur ne fournit pas d'information d'authentification au site d'origine via l'en-tête {{httpheader("Access-Control-Allow-Credentials")}}, l'image sera corrompue et son utilisation sera restreinte.</li>
- </ul>
- Lorsque l'attribut est absent, la ressource est récupérée sans requête CORS (c'est-à-dire sans envoyer l'en-tête {{httpheader("Origin")}}) ce qui empêche de l'utiliser dans les éléments qui ne doivent pas être corrompus tels que {{HTMLElement('canvas')}}. Si la valeur est invalide, elle est synonyme de <code>anonymous</code>. Pour plus d'informations, consulter <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">l'article sur le contrôle d'origine HTTP (CORS)</a>.</dd>
- <dt>{{htmlattrdef("disabled")}}</dt>
- <dd>
- <p>Cet attribut est uniquement utilisable avec les liens avec <code>rel="stylesheet"</code>. L'attribut booléen <code>disabled</code> indique si la feuille de style référencée devrait être chargée et appliquée au document. Si l'attribut <code>disabled</code> est indiqué dans le document HTML lors de son chargement, la feuille de style ne sera pas chargé au chargement de la page. La feuille de style sera uniquement chargée à la demande si (et lorsque) l'attribut <code>disabled</code> est retiré ou passé à <code>false</code>via un script.</p>
-
- <p>Toutefois, une fois que la feuille de style a été chargée, toute modification à l'attribut <code>disabled</code> n'aura aucun impact, sa valeur ne sera pas liée à la propriété {{domxref("StyleSheet.disabled")}}. Modifier cet attribut ne fait qu'activer/désactiver la capacité de charger et d'appliquer la feuille de style au document.</p>
-
- <p>Cette propriété est à distinguer de la propriété <code>disabled</code> de l'interface {{domxref("StyleSheet")}} : lorsqu'on utilise celle-ci, la feuille de style est retirée de {{domxref("document.styleSheets")}} et elle n'est pas rechargée automatiquement lorsqu'on la repasse à <code>false</code>.</p>
- </dd>
- <dt>{{htmlattrdef("href")}}</dt>
- <dd>Cet attribut définit l'URL de la ressource liée. L'URL utilisée peut être absolue ou relative.</dd>
- <dt>{{htmlattrdef("hreflang")}}</dt>
- <dd>Cet attribut, purement indicatif, définit la langue de la ressource liée. La valeur doit être une balise de langue <a href="https://www.ietf.org/rfc/bcp/bcp47.txt">BCP47</a> valide. Cet attribut doit uniquement être utilisé si l'attribut <code>href</code> est présent.</dd>
- <dt>{{htmlattrdef("importance")}} {{experimental_inline}}</dt>
- <dd>Cet attribut indique l'importance relative de la ressource. Les indications de priorité utilisent ces valeurs :
- <dl>
-  <dt><code>auto</code></dt>
-  <dd>Aucune préférence n'est indiquée. Le navigateur peut utiliser une heuristique qui lui est propre afin de décider de la priorité de la ressource.</dd>
-  <dt><code>high</code></dt>
-  <dd>Cette valeur indique au navigateur que la ressource a une priorité élevée.</dd>
-  <dt><code>low</code></dt>
-  <dd>Cette valeur indique au navigateur que la ressource a une priorité basse.</dd>
- </dl>
-
- <p>Note : L'attribut <code>importance</code> peut uniquement être utilisé sur l'élément <code>link</code> si <code>rel</code> vaut <code>"preload"</code> ou <code>"prefetch"</code>.</p>
- </dd>
- <dt>{{htmlattrdef("integrity")}} {{experimental_inline}}</dt>
- <dd>Cet attribut contient des métadonnées en ligne qui correspondent à l'empreinte cryptographique de la ressource qu'on souhaite récupérer. Cela permet à l'agent utilisateur de contrôler que la ressource récupérée n'a pas été manipulée. Pour plus d'informations, consulter <a href="/fr/docs/Web/Security/Subresource_Integrity">l'article sur le contrôle des sous-ressources</a>.</dd>
- <dt>{{htmlattrdef("media")}}</dt>
- <dd><p>Cet attribut indique le média auquel s'applique la ressource liée. Sa valeur doit être <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">une requête média</a>. Cet attribut est principalement utilisé pour permettre à l'agent utilisateur de sélectionner la meilleure feuille de style en fonction de l'appareil de l'utilisateur.</p>
- <div class="note"><p><strong>Note :</strong></p>
- <ul>
-  <li>En HTML4, la valeur de cet attribut était une liste de descripteurs de médias (<a href="/fr/docs/Web/CSS/@media">des types ou des groupes de média</a>) séparés par des espaces, par exemple <code>print</code> <code>screen</code> <code>aural</code> <code>braille</code>. HTML5 étend cet attribut à l'ensemble <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">des requêtes média</a> qui forment un surensemble des valeurs autorisées en HTML 4.</li>
-  <li>Les navigateurs qui ne prennent pas en charge <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">les requêtes média CSS3</a> ne reconnaîtront pas nécessairement les liens adéquats et il faut donc toujours fournir des liens de recours.</li>
- </ul>
- </div>
- </dd>
- <dt>{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}</dt>
- <dd>Une chaîne de caractères qui indique le référent à utiliser lors de la récupération de la ressource :
- <ul>
-  <li><code>'no-referrer'</code> : l'en-tête {{HTTPHeader("Referer")}} n'est pas envoyé</li>
-  <li><code>'no-referrer-when-downgrade'</code> signifie qu'aucun en-tête {{HTTPHeader("Referer")}} ne sera envoyé lors de la navigation vers une origine non protégée par TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur si aucune autre règle n'est indiquée.</li>
-  <li><code>'origin'</code> indique que le référent sera l'origine de la page (ce qui correspond approximativement au schéma, à l'hôte et au port).</li>
-  <li><code>'origin-when-cross-origin'</code> indique que lorsqu'on navigue vers d'autres origines, le référent se limitera au schéma, à l'hôte et au port et que lorsqu'on navigue sur la même origine, il incluera le chemin.</li>
-  <li><code>'unsafe-url'</code> : le référent incluera l'origine et le chemin (mais ni le fragment, ni le mot de passe ou le nom d'utilisateur). Ce comportement n'est pas sécurisé car il peut laisser fuiter des origines et des chemins de ressources TLS vers des origines non-sécurisées.</li>
- </ul>
- </dd>
- <dt>{{htmlattrdef("rel")}}</dt>
- <dd>Cet attribut indique la relation qui existe entre le document et la ressource liée. Cet attribut doit être une liste de <a href="/fr/docs/Web/HTML/Types_de_lien">types de lien</a>, séparés par des espaces. La plupart du temps, cet attribut est utilisé pour caractériser un lien vers une feuille de style et il vaut alors <code>stylesheet</code> quand l'attribut <code>href</code> reçoit l'URL de la feuille de style à charger. WebTV supporte également la valeur <code>next</code> qui permet de précharger la page suivante d'une série de pages.</dd>
- <dt>{{htmlattrdef("sizes")}}</dt>
- <dd>Cet attribut définit les dimensions des icônes pour le média contenu dans la ressource. Cet attribut doit uniquement être présent lorsque {{htmlattrxref("rel","link")}} contient le type de lien <code>icon</code>. Il peut prendre l'une des valeurs suivantes :
- <ul>
-  <li><code>any</code> : l'icône peut être redimensionnée à volonté car elle utilise un format vectoriel (par exemple <code>image/svg+xml</code>).</li>
-  <li>une liste de tailles, séparées par des espaces, dont chacune est de la forme <code><em>&lt;largeur en pixels&gt;</em>x<em>&lt;hauteur en pixels&gt;</em></code> ou <code><em>&lt;largeur en pixels&gt;</em>X<em>&lt;hauteur en pixels&gt;</em></code>. Pour chacune de ces dimensions, il doit exister une image correspondante dans la ressource.</li>
- </ul>
-
- <div class="note"><p><strong>Note :</strong></p>
-
- <ul>
-  <li>La plupart des format d'icône permettent simplement de stocker une seule icône, c'est pour cela que, la plupart du temps, {{htmlattrxref("sizes")}} ne contient qu'un seul élément.</li>
-  <li>Safari sur iOS ne prend pas en charge cet attribut mais utilise des types de lien non-standards pour définir l'icône utilisé dans la barre du site ou pour le lancer : <code>apple-touch-icon</code> et <code>apple-touch-startup-icon</code>.</li>
- </ul>
- </div>
- </dd>
- <dt>{{htmlattrdef("title")}}</dt>
- <dd>L'attribut <code>title</code> possède un sens spécifique pour l'élément <code>&lt;link&gt;</code>. Utilisé pour un lien <code>&lt;link rel="stylesheet"&gt;</code>, l'attribut <code>title</code> définit <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">une feuille de style alternative ou une feuille de style préférée</a>. S'il est mal utilisé, <a href="/fr/docs/Utiliser_des_titres_corrects_avec_des_feuilles_de_styles_externes">la feuille de style pourra être ignorée</a>.</dd>
- <dt>{{htmlattrdef("type")}}</dt>
- <dd>Cet attribut est utilisé pour définir le type de contenu auquel le lien fait référence. La valeur de cet attribut doit être un type MIME tel que <code>text/html</code> ou <code>text/css</code>, etc. Le plus souvent, cet attribut est utilsé pour définir le type de feuille de style utilisé et la valeur la plus fréquente est <code>text/css</code> qui indique le format d'une feuille de style en cascade (<em>Cascading Style Sheet</em> pour CSS). Cet attribut est également utilisé pour les liens avec <code>rel="preload"</code> afin de vérifier la prise en charge du format de fichier (si le navigateur ne prend pas en charge ce fichier, il n'est pas téléchargé).</dd>
-</dl>
-
-<h3 id="Attributs_dépréciés_obsolètes_ou_non-standard">Attributs dépréciés, obsolètes ou non-standard</h3>
-
-<dl>
- <dt>{{htmlattrdef("charset")}}{{obsolete_inline}}</dt>
- <dd><p>Cet attribut définit l'encodage de la ressource lié. La valeur de cet attribut est une liste de jeux de caractères (tels que définis dans la RFC {{rfc(2045)}}) séparés par des espaces ou des virgules. La valeur par défaut de cet attribut est <code>iso-8859-1</code>.</p>
- <div class="note"><p><strong>Note :</strong> cet attribut est obsolète <strong>et ne doit pas être utilisé</strong>. Pour obtenir l'effet escompté, on utilisera l'en-tête HTTP {{httpheader("Content-Type")}} pour la ressource liée.</p></div>
- </dd>
- <dt>{{htmlattrdef("methods")}} {{Non-standard_inline}}</dt>
- <dd>La valeur de cet attribut fournit des informations quant aux fonctions qui peuvent être utilisées sur l'objet lié. Les valeurs sont généralement des méthodes HTTP mais elles peuvent également inclure des informations en avance sur le lien (le navigateur pourrait par exemple choisir un affichage différent pour un lien selon la méthode utilisée). Cet attribut n'est pas pris en charge de façon correcte, y compris par le navigateur qui le définit, Internet Explorer 4. Voir <a href="https://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx" rel="external nofollow">la page MSDN sur la propriété <code>methods</code></a>.</dd>
- <dt>{{htmlattrdef("prefetch")}} {{Non-standard_inline}} {{secureContext_inline}}</dt>
- <dd>Cet attribut permet d'identifier une ressource qui sera nécessaire dans la suite de la navigation et que l'agent utilisateur devrait télécharger. Cela permet à l'agent utilisateur d'avoir un meilleur temps de réponse lorsque la ressource sera nécessaire.</dd>
- <dt>{{htmlattrdef("rev")}}{{obsolete_inline}}</dt>
- <dd>La valeur de cet attribut décrit le lien entre le document courant et la ressource liée (définie par l'attribut {{htmlattrxref("href", "link")}}). Cet attribut définit donc la relation réciproque à la relation décrite par l'attribut <code>rel</code>. <a href="/fr/docs/Web/HTML/Types_de_lien">Les types de lien</a> utilisés pour cet attribut sont semblables aux valeurs autorisés par {{htmlattrxref("rel", "link")}}.
- <div class="note">
-   <p><strong>Note :</strong> cet attribut est obsolète en HTML5 <strong>et ne doit pas être utilisé</strong>. Pour obtenir le même effet, on utilisera l'attribut {{htmlattrxref("rel", "link")}} avec la valeur réciproque <a href="/fr/docs/Web/HTML/Types_de_lien">pour le type de lien</a>, (<code>made</code> devrait par exemple être remplacé par <code>author</code>). Cet attribut ne signifie pas « révision » et ne doit pas être utilisé comme un numéro de version.</p>
- </div>
-
- <div class="note">
- <p><strong>Note :</strong> La spécification actuelle de HTML 5.2 du W3C n'indique plus l'attribut <code>rev</code> comme obsolète. En revanche, la spécification du WHATWG le considère toujours comme obsolète. Tant que cette incohérence n'est pas résolue, mieux vaut considérer cet attribut comme obsolète.</p>
- </div>
- </dd>
- <dt>{{htmlattrdef("target")}}{{Non-standard_inline}}</dt>
- <dd>Cet attribut définit le nom de la <em>frame</em> ou de la fenêtre qui contient la ressource liée ou qui affichera la ressource liée.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Associer_une_feuille_de_style">Associer une feuille de style</h3>
-
-<p>Pour associer une feuille de style à la page courante, on utilisera la syntaxe suivante :</p>
-
-<pre class="brush: html">&lt;link href="style.css" rel="stylesheet"&gt;
-</pre>
-
-<h3 id="Fournir_des_feuilles_de_style_alternatives">Fournir des feuilles de style alternatives</h3>
-
-<p>Pour un document, on peut indiquer <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">plusieurs feuilles de style alternatives</a>.</p>
-
-<p>L'utilisateur pourra choisir parmi ces feuilles de style via le menu « Affichage &gt; Style de la page ». Ainsi, un utilisateur pourra voir différentes versions d'une même page.</p>
-
-<pre class="brush: html">&lt;link href="default.css" rel="stylesheet" title="Mise en forme par défaut"&gt;
-&lt;link href="joli.css" rel="alternate stylesheet" title="Joli"&gt;
-&lt;link href="simple.css" rel="alternate stylesheet" title="Simple"&gt;
-</pre>
-
-<h3 id="Évènements_déclenchés_au_chargement_dune_feuille_de_style">Évènements déclenchés au chargement d'une feuille de style</h3>
-
-<p>Il est possible de déterminer si une feuille de style a été chargée en écoutant l'évènement <code>load</code>. De la même façon, un évènement <code>error</code> indiquera qu'une erreur a eu lieu lors du traitement de la feuille de style:</p>
-
-<pre class="brush: html">&lt;script&gt;
+{{HTMLRef}}
+
+L'élément HTML** `<link>`** définit la relation entre le document courant et une ressource externe. Cet élément peut être utilisé pour définir un lien vers [une feuille de style](/fr/docs/Glossaire/CSS), vers les icônes utilisées en barre de titre ou comme icône d'application sur les appareils mobiles.
+
+{{EmbedInteractiveExample("pages/tabbed/link.html")}}
+
+Pour lier une feuille de style externe, on inclut un élément `<link>` de la forme suivante à l'intérieur de l'élément {{htmlelement("head")}} :
+
+```html
+<link href="main.css" rel="stylesheet">
+```
+
+Dans cet exemple, on indique le chemin vers la feuille de style grâce à l'attribut `href`, l'attribut  `rel` possède une valeur `stylesheet` qui indique que c'est une feuille de style. `rel` signifie _relationship_ qui correspond donc à la relation entre la ressource et le document courant. Il existe de [nombreux types de liens possibles](/fr/docs/Web/HTML/Types_de_lien).
+
+Certains types sont assez fréquents. Ainsi, pour l'icône présentant le site dans l'onglet, on trouvera :
+
+```html
+<link rel="icon" href="favicon.ico">
+```
+
+Il existe différents types de relations pour préciser les icônes et qui permettent notamment de cibler certaines plateformes mobiles :
+
+```html
+<link rel="apple-touch-icon-precomposed" sizes="114x114"
+      href="apple-icon-114.png" type="image/png">
+```
+
+L'attribut `sizes` indique la taille de l'icône tandis que l'attribut `type` contient le type MIME de la ressource qui est liée. Ces attributs permettent alors au navigateur de sélectionner la ressource la plus adéquate.
+
+On peut également fournir l'attribut `media` afin d'utiliser telle ou telle ressource lorsqu'une requête média est vérifiée. Ainsi, on pourra utiliser ce qui suit afin d'avoir une feuille de style utilisée à l'impression et une autre dédiée au mobile :
+
+```html
+<link href="print.css" rel="stylesheet" media="print">
+<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)">
+```
+
+Certaines fonctionnalités relatives à la sécurité sont également disponibles avec certains attributs de `<link>`. Dans cet exemple :
+
+```html
+<link rel="preload" href="myFont.woff2" as="font"
+      type="font/woff2" crossorigin="anonymous">
+```
+
+L'attribut `rel` vaut `preload` et indique que le navigateur doit précharger la ressource (voir [Le préchargement du contenu avec `rel="preload"`](/fr/docs/Web/HTML/Précharger_du_contenu) pour plus de détails), l'attribut `as` indique la classe de contenu qui est récupéré et l'attribut `crossorigin` indique si la ressource doit être récupérée avec une requête CORS.
+
+Quelques notes d'utilisation :
+
+- Un élément `<link>` element peut être placé dans un élément {{HTMLElement("head")}} ou {{htmlelement("body")}} selon la valeur de la relation. C'est cependant une bonne pratique que de placer l'ensemble des éléments `<link>` dans l'élément `<head>`.
+- Lorsque `<link>` est utilisé pour la _favicon_ d'un site et que celui-ci utilise les règles CSP afin d'améliorer la sécurité, les règles s'appliquent également aux icônes. Aussi, si la _favicon_ ne charge pas, veuillez vérifier que la directive [`img-src`](/fr/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) de l'en-tête {{HTTPHeader("Content-Security-Policy")}} ne bloque pas le chargement de l'image.
+- Les spécifications HTML et XHTML définissent des gestionnaires d'évènements pour l'élément `<link>` mais leur utilisation reste incertaine.
+- Pour XHTML 1.0, les éléments vides tels que `<link>` devaient utiliser une barre oblique de fin : `<link />`.
+- WebTV prend en charge la valeur `next` pour l'attribut `rel` afin de précharger la page suivante pour une série de documents.
+
+## Attributs
+
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
+
+- {{htmlattrdef("as")}}
+  - : Cet attribut est uniquement utilisé lorsque `rel="preload"` ou `rel="prefetch"` est utilisé pour l'élément `<link>`. L'attribut indique le type de contenu chargé par l'élément `<link>` et permet au navigateur de déterminer la priorité du contenu, d'identifier les utilisations de la ressource plus bas dans le document, d'appliquer [la bonne politique de sécurité des contenus](/fr/docs/HTTP/CSP) et de définir le bon en-tête de requête {{httpheader("Accept")}}.
+- {{htmlattrdef("crossorigin")}}
+
+  - : Cet attribut à valeur contrainte indique si le CORS doit être utilisé lorsque la ressource liée est récupérée. [Les images avec CORS activé](/fr/docs/Web/HTML/Images_avec_le_contrôle_d_accès_HTTP) peuvent être réutilisée dans un élément {{HTMLElement("canvas")}} sans qu'il soit corrompu. Les valeurs autorisées sont :
+
+    - `"anonymous"` : une requête _cross-origine_ est effectuée (avec l'en-tête HTTP `Origin`). Mais aucune information d'identification n'est envoyée (aucun cookie, aucun certificat X.509, aucune authentification simple via HTTP). Si le serveur ne fournit pas d'informations au site d'origine (c'est-à-dire sans utiliser l'en-tête HTTP {{httpheader("Access-Control-Allow-Origin")}}, l'image sera _corrompue_ et son utilisation sera restreinte.
+    - `"use-credentials"` : une requête _cross-origine_ est effectuée (avec l'en-tête HTTP `Origin`) avec des informations d'authentification qui sont envoyées (un cookie, un certification et une authentification HTTP simple sont envoyés). Si le serveur ne fournit pas d'information d'authentification au site d'origine via l'en-tête {{httpheader("Access-Control-Allow-Credentials")}}, l'image sera corrompue et son utilisation sera restreinte.
+
+    Lorsque l'attribut est absent, la ressource est récupérée sans requête CORS (c'est-à-dire sans envoyer l'en-tête {{httpheader("Origin")}}) ce qui empêche de l'utiliser dans les éléments qui ne doivent pas être corrompus tels que {{HTMLElement('canvas')}}. Si la valeur est invalide, elle est synonyme de `anonymous`. Pour plus d'informations, consulter [l'article sur le contrôle d'origine HTTP (CORS)](/fr/docs/Web/HTML/Reglages_des_attributs_CORS).
+
+- {{htmlattrdef("disabled")}}
+
+  - : Cet attribut est uniquement utilisable avec les liens avec `rel="stylesheet"`. L'attribut booléen `disabled` indique si la feuille de style référencée devrait être chargée et appliquée au document. Si l'attribut `disabled` est indiqué dans le document HTML lors de son chargement, la feuille de style ne sera pas chargé au chargement de la page. La feuille de style sera uniquement chargée à la demande si (et lorsque) l'attribut `disabled` est retiré ou passé à `false`via un script.
+
+    Toutefois, une fois que la feuille de style a été chargée, toute modification à l'attribut `disabled` n'aura aucun impact, sa valeur ne sera pas liée à la propriété {{domxref("StyleSheet.disabled")}}. Modifier cet attribut ne fait qu'activer/désactiver la capacité de charger et d'appliquer la feuille de style au document.
+
+    Cette propriété est à distinguer de la propriété `disabled` de l'interface {{domxref("StyleSheet")}} : lorsqu'on utilise celle-ci, la feuille de style est retirée de {{domxref("document.styleSheets")}} et elle n'est pas rechargée automatiquement lorsqu'on la repasse à `false`.
+
+- {{htmlattrdef("href")}}
+  - : Cet attribut définit l'URL de la ressource liée. L'URL utilisée peut être absolue ou relative.
+- {{htmlattrdef("hreflang")}}
+  - : Cet attribut, purement indicatif, définit la langue de la ressource liée. La valeur doit être une balise de langue [BCP47](https://www.ietf.org/rfc/bcp/bcp47.txt) valide. Cet attribut doit uniquement être utilisé si l'attribut `href` est présent.
+- {{htmlattrdef("importance")}} {{experimental_inline}}
+
+  - : Cet attribut indique l'importance relative de la ressource. Les indications de priorité utilisent ces valeurs :
+
+    - `auto`
+      - : Aucune préférence n'est indiquée. Le navigateur peut utiliser une heuristique qui lui est propre afin de décider de la priorité de la ressource.
+    - `high`
+      - : Cette valeur indique au navigateur que la ressource a une priorité élevée.
+    - `low`
+      - : Cette valeur indique au navigateur que la ressource a une priorité basse.
+
+    Note : L'attribut `importance` peut uniquement être utilisé sur l'élément `link` si `rel` vaut `"preload"` ou `"prefetch"`.
+
+- {{htmlattrdef("integrity")}} {{experimental_inline}}
+  - : Cet attribut contient des métadonnées en ligne qui correspondent à l'empreinte cryptographique de la ressource qu'on souhaite récupérer. Cela permet à l'agent utilisateur de contrôler que la ressource récupérée n'a pas été manipulée. Pour plus d'informations, consulter [l'article sur le contrôle des sous-ressources](/fr/docs/Web/Security/Subresource_Integrity).
+- {{htmlattrdef("media")}}
+
+  - : Cet attribut indique le média auquel s'applique la ressource liée. Sa valeur doit être [une requête média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries). Cet attribut est principalement utilisé pour permettre à l'agent utilisateur de sélectionner la meilleure feuille de style en fonction de l'appareil de l'utilisateur.
+
+    > **Note :**
+    >
+    > - En HTML4, la valeur de cet attribut était une liste de descripteurs de médias ([des types ou des groupes de média](/fr/docs/Web/CSS/@media)) séparés par des espaces, par exemple `print` `screen` `aural` `braille`. HTML5 étend cet attribut à l'ensemble [des requêtes média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries) qui forment un surensemble des valeurs autorisées en HTML 4.
+    > - Les navigateurs qui ne prennent pas en charge [les requêtes média CSS3](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries) ne reconnaîtront pas nécessairement les liens adéquats et il faut donc toujours fournir des liens de recours.
+
+- {{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
+
+  - : Une chaîne de caractères qui indique le référent à utiliser lors de la récupération de la ressource :
+
+    - `'no-referrer'` : l'en-tête {{HTTPHeader("Referer")}} n'est pas envoyé
+    - `'no-referrer-when-downgrade'` signifie qu'aucun en-tête {{HTTPHeader("Referer")}} ne sera envoyé lors de la navigation vers une origine non protégée par TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur si aucune autre règle n'est indiquée.
+    - `'origin'` indique que le référent sera l'origine de la page (ce qui correspond approximativement au schéma, à l'hôte et au port).
+    - `'origin-when-cross-origin'` indique que lorsqu'on navigue vers d'autres origines, le référent se limitera au schéma, à l'hôte et au port et que lorsqu'on navigue sur la même origine, il incluera le chemin.
+    - `'unsafe-url'` : le référent incluera l'origine et le chemin (mais ni le fragment, ni le mot de passe ou le nom d'utilisateur). Ce comportement n'est pas sécurisé car il peut laisser fuiter des origines et des chemins de ressources TLS vers des origines non-sécurisées.
+
+- {{htmlattrdef("rel")}}
+  - : Cet attribut indique la relation qui existe entre le document et la ressource liée. Cet attribut doit être une liste de [types de lien](/fr/docs/Web/HTML/Types_de_lien), séparés par des espaces. La plupart du temps, cet attribut est utilisé pour caractériser un lien vers une feuille de style et il vaut alors `stylesheet` quand l'attribut `href` reçoit l'URL de la feuille de style à charger. WebTV supporte également la valeur `next` qui permet de précharger la page suivante d'une série de pages.
+- {{htmlattrdef("sizes")}}
+
+  - : Cet attribut définit les dimensions des icônes pour le média contenu dans la ressource. Cet attribut doit uniquement être présent lorsque {{htmlattrxref("rel","link")}} contient le type de lien `icon`. Il peut prendre l'une des valeurs suivantes :
+
+    - `any` : l'icône peut être redimensionnée à volonté car elle utilise un format vectoriel (par exemple `image/svg+xml`).
+    - une liste de tailles, séparées par des espaces, dont chacune est de la forme `<largeur en pixels>x<hauteur en pixels>` ou `<largeur en pixels>X<hauteur en pixels>`. Pour chacune de ces dimensions, il doit exister une image correspondante dans la ressource.
+
+    > **Note :**
+    >
+    > - La plupart des format d'icône permettent simplement de stocker une seule icône, c'est pour cela que, la plupart du temps, {{htmlattrxref("sizes")}} ne contient qu'un seul élément.
+    > - Safari sur iOS ne prend pas en charge cet attribut mais utilise des types de lien non-standards pour définir l'icône utilisé dans la barre du site ou pour le lancer : `apple-touch-icon` et `apple-touch-startup-icon`.
+
+- {{htmlattrdef("title")}}
+  - : L'attribut `title` possède un sens spécifique pour l'élément `<link>`. Utilisé pour un lien `<link rel="stylesheet">`, l'attribut `title` définit [une feuille de style alternative ou une feuille de style préférée](/fr/docs/Web/CSS/Feuilles_de_style_alternatives). S'il est mal utilisé, [la feuille de style pourra être ignorée](/fr/docs/Utiliser_des_titres_corrects_avec_des_feuilles_de_styles_externes).
+- {{htmlattrdef("type")}}
+  - : Cet attribut est utilisé pour définir le type de contenu auquel le lien fait référence. La valeur de cet attribut doit être un type MIME tel que `text/html` ou `text/css`, etc. Le plus souvent, cet attribut est utilsé pour définir le type de feuille de style utilisé et la valeur la plus fréquente est `text/css` qui indique le format d'une feuille de style en cascade (_Cascading Style Sheet_ pour CSS). Cet attribut est également utilisé pour les liens avec `rel="preload"` afin de vérifier la prise en charge du format de fichier (si le navigateur ne prend pas en charge ce fichier, il n'est pas téléchargé).
+
+### Attributs dépréciés, obsolètes ou non-standard
+
+- {{htmlattrdef("charset")}}{{obsolete_inline}}
+
+  - : Cet attribut définit l'encodage de la ressource lié. La valeur de cet attribut est une liste de jeux de caractères (tels que définis dans la RFC {{rfc(2045)}}) séparés par des espaces ou des virgules. La valeur par défaut de cet attribut est `iso-8859-1`.
+
+    > **Note :** cet attribut est obsolète **et ne doit pas être utilisé**. Pour obtenir l'effet escompté, on utilisera l'en-tête HTTP {{httpheader("Content-Type")}} pour la ressource liée.
+
+- {{htmlattrdef("methods")}} {{Non-standard_inline}}
+  - : La valeur de cet attribut fournit des informations quant aux fonctions qui peuvent être utilisées sur l'objet lié. Les valeurs sont généralement des méthodes HTTP mais elles peuvent également inclure des informations en avance sur le lien (le navigateur pourrait par exemple choisir un affichage différent pour un lien selon la méthode utilisée). Cet attribut n'est pas pris en charge de façon correcte, y compris par le navigateur qui le définit, Internet Explorer 4. Voir [la page MSDN sur la propriété `methods`](https://msdn.microsoft.com/en-us/library/ms534168%28VS.85%29.aspx).
+- {{htmlattrdef("prefetch")}} {{Non-standard_inline}} {{secureContext_inline}}
+  - : Cet attribut permet d'identifier une ressource qui sera nécessaire dans la suite de la navigation et que l'agent utilisateur devrait télécharger. Cela permet à l'agent utilisateur d'avoir un meilleur temps de réponse lorsque la ressource sera nécessaire.
+- {{htmlattrdef("rev")}}{{obsolete_inline}}
+
+  - : La valeur de cet attribut décrit le lien entre le document courant et la ressource liée (définie par l'attribut {{htmlattrxref("href", "link")}}). Cet attribut définit donc la relation réciproque à la relation décrite par l'attribut `rel`. [Les types de lien](/fr/docs/Web/HTML/Types_de_lien) utilisés pour cet attribut sont semblables aux valeurs autorisés par {{htmlattrxref("rel", "link")}}.
+
+    > **Note :** cet attribut est obsolète en HTML5 **et ne doit pas être utilisé**. Pour obtenir le même effet, on utilisera l'attribut {{htmlattrxref("rel", "link")}} avec la valeur réciproque [pour le type de lien](/fr/docs/Web/HTML/Types_de_lien), (`made` devrait par exemple être remplacé par `author`). Cet attribut ne signifie pas « révision » et ne doit pas être utilisé comme un numéro de version.
+
+    > **Note :** La spécification actuelle de HTML 5.2 du W3C n'indique plus l'attribut `rev` comme obsolète. En revanche, la spécification du WHATWG le considère toujours comme obsolète. Tant que cette incohérence n'est pas résolue, mieux vaut considérer cet attribut comme obsolète.
+
+- {{htmlattrdef("target")}}{{Non-standard_inline}}
+  - : Cet attribut définit le nom de la _frame_ ou de la fenêtre qui contient la ressource liée ou qui affichera la ressource liée.
+
+## Exemples
+
+### Associer une feuille de style
+
+Pour associer une feuille de style à la page courante, on utilisera la syntaxe suivante :
+
+```html
+<link href="style.css" rel="stylesheet">
+```
+
+### Fournir des feuilles de style alternatives
+
+Pour un document, on peut indiquer [plusieurs feuilles de style alternatives](/fr/docs/Web/CSS/Feuilles_de_style_alternatives).
+
+L'utilisateur pourra choisir parmi ces feuilles de style via le menu « Affichage > Style de la page ». Ainsi, un utilisateur pourra voir différentes versions d'une même page.
+
+```html
+<link href="default.css" rel="stylesheet" title="Mise en forme par défaut">
+<link href="joli.css" rel="alternate stylesheet" title="Joli">
+<link href="simple.css" rel="alternate stylesheet" title="Simple">
+```
+
+### Évènements déclenchés au chargement d'une feuille de style
+
+Il est possible de déterminer si une feuille de style a été chargée en écoutant l'évènement `load`. De la même façon, un évènement `error` indiquera qu'une erreur a eu lieu lors du traitement de la feuille de style:
+
+```html
+<script>
   function sheetLoaded() {
     // faire quelque chose, sachant
     // que la feuille a été chargéee
@@ -194,113 +200,98 @@ translation_of: Web/HTML/Element/link
   function sheetError() {
     console.log("Erreur lors du chargement de la feuille de style !");
   }
-&lt;/script&gt;
+</script>
 
-&lt;link rel="stylesheet" href="mafeuilledestyle.css"
+<link rel="stylesheet" href="mafeuilledestyle.css"
   onload="sheetLoaded()"
-  onerror="sheetError()"&gt;
-</pre>
+  onerror="sheetError()">
+```
 
-<div class="note">
-  <p><strong>Note :</strong> L'évènement <code>load</code> est déclenché une fois que la feuille de style et que le contenu associé ont été chargés et analysés et immédiatement avant que la mise en forme soit appliquée au contenu.</p>
-</div>
+> **Note :** L'évènement `load` est déclenché une fois que la feuille de style et que le contenu associé ont été chargés et analysés et immédiatement avant que la mise en forme soit appliquée au contenu.
 
-<h3 id="Exemples_avec_preload">Exemples avec <code>preload</code></h3>
+### Exemples avec `preload`
 
-<p>De nombreux exemples avec <code>&lt;link rel="preload"&gt;</code> peuvent être lus sur <a href="/fr/docs/Web/HTML/Précharger_du_contenu">Précharger des ressources grâce à <code>rel="preload"</code></a>.</p>
+De nombreux exemples avec `<link rel="preload">` peuvent être lus sur [Précharger des ressources grâce à `rel="preload"`](/fr/docs/Web/HTML/Précharger_du_contenu).
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<ul>
- <li>Un élément <code>&lt;link&gt;</code> peut être utilisé à l'intérieur d'un élément {{HTMLElement("head")}} ou bien dans le corps du document ({{HTMLElement("body")}}) si <a href="https://html.spec.whatwg.org/multipage/links.html#body-ok">le type de lien le permet (<em>body-ok</em>)</a>. On peut par exemple utiliser <code>&lt;link rel="stylesheet"&gt;</code> car ce type de lien est autorisé au sein de l'élément <code>&lt;body&gt;</code>.</li>
- <li>HTML 3.2 définit uniquement les attributs <code>href</code>, <code>rel</code>, <code>rev</code> et <code>title</code> pour l'élément <code>&lt;link&gt;</code>.</li>
- <li>HTML 2 définit les attributs <code>href</code>, <code>methods</code>, <code>rel</code>, <code>rev</code>, <code>title</code> et <code>urn</code> pour l'élément <code>&lt;link&gt;</code>. Les attributs <code>methods</code> et <code>urn</code> ont ensuite été retirés des spécifications.</li>
- <li>Les spécifications HTML et XHTML définissent toutes deux des gestionnaires d'évènements pour l'élément <code>&lt;link&gt;</code>.</li>
- <li>En XHTML 1.0, il est nécessaire qu'un élément <code>&lt;link&gt;</code> ait une barre oblique avant le chevron fermant.</li>
-</ul>
+- Un élément `<link>` peut être utilisé à l'intérieur d'un élément {{HTMLElement("head")}} ou bien dans le corps du document ({{HTMLElement("body")}}) si [le type de lien le permet (_body-ok_)](https://html.spec.whatwg.org/multipage/links.html#body-ok). On peut par exemple utiliser `<link rel="stylesheet">` car ce type de lien est autorisé au sein de l'élément `<body>`.
+- HTML 3.2 définit uniquement les attributs `href`, `rel`, `rev` et `title` pour l'élément `<link>`.
+- HTML 2 définit les attributs `href`, `methods`, `rel`, `rev`, `title` et `urn` pour l'élément `<link>`. Les attributs `methods` et `urn` ont ensuite été retirés des spécifications.
+- Les spécifications HTML et XHTML définissent toutes deux des gestionnaires d'évènements pour l'élément `<link>`.
+- En XHTML 1.0, il est nécessaire qu'un élément `<link>` ait une barre oblique avant le chevron fermant.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td>Contenu de métadonnées. Si {{htmlattrxref("itemprop")}} est présent : <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th>Contenu autorisé</th>
-   <td>Aucun, cet élément est un élément vide.</td>
-  </tr>
-  <tr>
-   <th>Omission de balise</th>
-   <td>La balise de début doit être présente et la balise de fin ne doit pas être présente.</td>
-  </tr>
-  <tr>
-   <th>Parents autorisés</th>
-   <td>Tout élément qui accepte des éléments de métadonnées. Si l'attribut {{htmlattrxref("itemprop")}} est présent, tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th>Interface DOM</th>
-   <td>{{domxref("HTMLLinkElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        Contenu de métadonnées. Si {{htmlattrxref("itemprop")}} est
+        présent :
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >
+        et
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th>Contenu autorisé</th>
+      <td>Aucun, cet élément est un élément vide.</td>
+    </tr>
+    <tr>
+      <th>Omission de balise</th>
+      <td>
+        La balise de début doit être présente et la balise de fin ne doit pas
+        être présente.
+      </td>
+    </tr>
+    <tr>
+      <th>Parents autorisés</th>
+      <td>
+        Tout élément qui accepte des éléments de métadonnées. Si l'attribut
+        {{htmlattrxref("itemprop")}} est présent, tout élément qui
+        accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th>Interface DOM</th>
+      <td>{{domxref("HTMLLinkElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link&gt;")}}</td>
-   <td>{{Spec2('Subresource Integrity')}}</td>
-   <td>Ajout de l'attribut <code>integrity</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '&lt;link&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification depuis la dernière dérivation.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '&lt;link&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Ajout des attributs <code>crossorigin</code> et <code>sizes</code>. Les valeurs de <code>media</code> sont étendues à l'ensemble des requêtes médias, ajout de nombreuses autres valeurs pour <code>rel</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/links.html#h-12.3', '&lt;link&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Preload")}}</td>
-   <td>{{Spec2("Preload")}}</td>
-   <td>Définition de <code>&lt;link rel="preload"&gt;</code> et de l'attribut <code>as</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('Resource Hints','#prefetch','prefetch')}}</td>
-   <td>{{Spec2('Resource Hints')}}</td>
-   <td>Ajout des valeurs <code>dns-prefetch</code>, <code>preconnect</code>, <code>prefetch</code> et <code>prerender</code>.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                    | État                                         | Commentaires                                                                                                                                                        |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("Subresource Integrity", "#HTMLLinkElement", "lt;link&gt;")}}                 | {{Spec2('Subresource Integrity')}} | Ajout de l'attribut `integrity`.                                                                                                                                    |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-link-element', '&lt;link&gt;')}}         | {{Spec2('HTML WHATWG')}}             | Aucune modification depuis la dernière dérivation.                                                                                                                  |
+| {{SpecName('HTML5 W3C', 'document-metadata.html#the-link-element', '&lt;link&gt;')}} | {{Spec2('HTML5 W3C')}}                 | Ajout des attributs `crossorigin` et `sizes`. Les valeurs de `media` sont étendues à l'ensemble des requêtes médias, ajout de nombreuses autres valeurs pour `rel`. |
+| {{SpecName('HTML4.01', 'struct/links.html#h-12.3', '&lt;link&gt;')}}                     | {{Spec2('HTML4.01')}}                 |                                                                                                                                                                     |
+| {{SpecName("Preload")}}                                                                                 | {{Spec2("Preload")}}                 | Définition de `<link rel="preload">` et de l'attribut `as`.                                                                                                         |
+| {{SpecName('Resource Hints','#prefetch','prefetch')}}                                         | {{Spec2('Resource Hints')}}         | Ajout des valeurs `dns-prefetch`, `preconnect`, `prefetch` et `prerender`.                                                                                          |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.link",3)}}</p>
+{{Compat("html.elements.link",3)}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'en-tête HTTP {{HTTPHeader("Link")}}</li>
- <li><a href="https://pie.gd/test/script-link-events/">Le tableau de compatibilité de Ryan Grove à propos de <code>&lt;script&gt;</code> et <code>&lt;link&gt;</code></a></li>
-</ul>
+- L'en-tête HTTP {{HTTPHeader("Link")}}
+- [Le tableau de compatibilité de Ryan Grove à propos de `<script>` et `<link>`](https://pie.gd/test/script-link-events/)
diff --git a/files/fr/web/html/element/main/index.md b/files/fr/web/html/element/main/index.md
index 6f5982049c..40023666b2 100644
--- a/files/fr/web/html/element/main/index.md
+++ b/files/fr/web/html/element/main/index.md
@@ -8,175 +8,180 @@ tags:
   - Web
 translation_of: Web/HTML/Element/main
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L’élément HTML <strong><code>&lt;main&gt;</code></strong> représente le contenu majoritaire du {{HTMLElement("body")}} du document. Le contenu principal de la zone est constitué de contenu directement en relation, ou qui étend le sujet principal du document ou de la fonctionnalité principale d'une application.</p>
+L’élément HTML **`<main>`** représente le contenu majoritaire du {{HTMLElement("body")}} du document. Le contenu principal de la zone est constitué de contenu directement en relation, ou qui étend le sujet principal du document ou de la fonctionnalité principale d'une application.
 
-<p>Un document ne peut pas avoir plus d'un seul élément <code>&lt;main&gt;</code> sans attribut {{htmlattrxref("hidden")}}.</p>
+Un document ne peut pas avoir plus d'un seul élément `<main>` sans attribut {{htmlattrxref("hidden")}}.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/main.html","tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément prend uniquement en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément prend uniquement en charge [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<ul>
- <li>Ce contenu doit être unique dans le document, excluant tout contenu qui est répété sur plusieurs documents comme des barres latérales, liens de navigation, informations relative au droit d'auteur, logo du site, et champs de recherche (sauf, bien entendu, si la fonctionnalité principale du document est un champ de recherche).</li>
- <li><code>&lt;main&gt;</code> ne contribue pas au plan du document. Autrement dit, à la différence d'éléments tels que {{HTMLElement("body")}}, les niveaux de titre comme {{HTMLElement("h2")}}, etc. <code>&lt;main&gt;</code> n'affecte pas la structure même de la page, c'est un élément purement informatif.</li>
-</ul>
+- Ce contenu doit être unique dans le document, excluant tout contenu qui est répété sur plusieurs documents comme des barres latérales, liens de navigation, informations relative au droit d'auteur, logo du site, et champs de recherche (sauf, bien entendu, si la fonctionnalité principale du document est un champ de recherche).
+- `<main>` ne contribue pas au plan du document. Autrement dit, à la différence d'éléments tels que {{HTMLElement("body")}}, les niveaux de titre comme {{HTMLElement("h2")}}, etc. `<main>` n'affecte pas la structure même de la page, c'est un élément purement informatif.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;!-- autre contenu --&gt;
+```html
+<!-- autre contenu -->
 
-&lt;main&gt;
-  &lt;h1&gt;Pommes&lt;/h1&gt;
-  &lt;p&gt;La pomme est le fruit à pépin du pommier.&lt;/p&gt;
+<main>
+  <h1>Pommes</h1>
+  <p>La pomme est le fruit à pépin du pommier.</p>
 
-  &lt;article&gt;
-    &lt;h2&gt;Pomme rouge&lt;/h2&gt;
-    &lt;p&gt;Ce sont des pommes rouges vives très communes dans les supermarchés.&lt;p&gt;
-    &lt;p&gt;... &lt;/p&gt;
-    &lt;p&gt;... &lt;/p&gt;
-  &lt;/article&gt;
+  <article>
+    <h2>Pomme rouge</h2>
+    <p>Ce sont des pommes rouges vives très communes dans les supermarchés.<p>
+    <p>... </p>
+    <p>... </p>
+  </article>
 
-  &lt;article&gt;
-    &lt;h2&gt;La Granny Smith&lt;/h2&gt;
-    &lt;p&gt;Ces pommes juteuses, vertes, font une très belle garniture pour les tartes aux pommes.&lt;p&gt;
-    &lt;p&gt;... &lt;/p&gt;
-    &lt;p&gt;... &lt;/p&gt;
-  &lt;/article&gt;
+  <article>
+    <h2>La Granny Smith</h2>
+    <p>Ces pommes juteuses, vertes, font une très belle garniture pour les tartes aux pommes.<p>
+    <p>... </p>
+    <p>... </p>
+  </article>
 
-&lt;/main&gt;
+</main>
 
-&lt;!-- Autre contenu --&gt;</pre>
+<!-- Autre contenu -->
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+{{EmbedLiveSample("Exemples","300","200")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<h3 id="Balisage_du_document">Balisage du document</h3>
+### Balisage du document
 
-<p>L'élément <code>&lt;main&gt;</code> a le rôle d'une <a href="/fr/docs/Web/Accessibility/ARIA/Roles/Main_role">balise <code>main</code></a>. Dans le contexte de l'accessibilité, les <a href="/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA">balises</a> peuvent être utilisées par les outils d'assistance afin d'identifier et de naviguer rapidement entre les grandes sections d'un document. On privilégiera l'élément <code>&lt;main&gt;</code> à l'ajout du <code>role="main"</code>, à moins qu'il faille <a href="/fr/docs/Web/HTML/Element/main#Compatibilité_des_navigateurs">prendre en charge d'anciens navigateurs</a>.</p>
+L'élément `<main>` a le rôle d'une [balise `main`](/fr/docs/Web/Accessibility/ARIA/Roles/Main_role). Dans le contexte de l'accessibilité, les [balises](/fr/docs/Accessibilit%C3%A9/ARIA/Techniques_ARIA) peuvent être utilisées par les outils d'assistance afin d'identifier et de naviguer rapidement entre les grandes sections d'un document. On privilégiera l'élément `<main>` à l'ajout du `role="main"`, à moins qu'il faille [prendre en charge d'anciens navigateurs](/fr/docs/Web/HTML/Element/main#Compatibilité_des_navigateurs).
 
-<h3 id="Navigation_rapide">Navigation rapide</h3>
+### Navigation rapide
 
-<p>La navigation rapide (aussi appelée <em>skip navigation</em> ou <em>skipnav</em> en anglais) est une technique permettant aux outils d'assistance de passer certaines sections de contenu répétés (menu de navigation, bannières, etc.). Cela permet à l'utilisateur d'accéder plus rapidement au contenu principal de la page.</p>
+La navigation rapide (aussi appelée _skip navigation_ ou _skipnav_ en anglais) est une technique permettant aux outils d'assistance de passer certaines sections de contenu répétés (menu de navigation, bannières, etc.). Cela permet à l'utilisateur d'accéder plus rapidement au contenu principal de la page.
 
-<p>Ajouter un attribut {{htmlattrxref("id")}} à l'élément <code>&lt;main&gt;</code> lui permet d'être une cible pour la navigation rapide.</p>
+Ajouter un attribut {{htmlattrxref("id")}} à l'élément `<main>` lui permet d'être une cible pour la navigation rapide.
 
-<pre>&lt;body&gt;
-  &lt;a href="#main-content"&gt;Aller au contenu principal&lt;/a&gt;
+    <body>
+      <a href="#main-content">Aller au contenu principal</a>
 
-  &lt;!-- Contenu relatif à la navigation et en-tête du document --&gt;
+      <!-- Contenu relatif à la navigation et en-tête du document -->
 
-  &lt;main id="main-content"&gt;
-    &lt;!-- Contenu principal de la page --&gt;
-  &lt;/main&gt;
-&lt;/body&gt;
-</pre>
+      <main id="main-content">
+        <!-- Contenu principal de la page -->
+      </main>
+    </body>
 
-<ul>
- <li><a href="https://webaim.org/techniques/skipnav/">WebAIM : Liens et navigation rapide (en anglais)</a></li>
-</ul>
+- [WebAIM : Liens et navigation rapide (en anglais)](https://webaim.org/techniques/skipnav/)
 
-<h3 id="Mode_lecture">Mode lecture</h3>
+### Mode lecture
 
-<p>Les fonctionnalités « mode lecture » d'un navigateur vérifient la présence d'un élément <code>&lt;main&gt;</code> ainsi que la présence de <a href="/fr/docs/Web/HTML/Element/Heading_Elements">titres</a> et de <a href="/fr/docs/Web/HTML/Element#Sectionnement_du_contenu">sections</a> lors de la convertion du document pour le mode lecture.</p>
+Les fonctionnalités « mode lecture » d'un navigateur vérifient la présence d'un élément `<main>` ainsi que la présence de [titres](/fr/docs/Web/HTML/Element/Heading_Elements) et de [sections](/fr/docs/Web/HTML/Element#Sectionnement_du_contenu) lors de la convertion du document pour le mode lecture.
 
-<ul>
- <li><a href="https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9">Construire des sites web pour le mode lecture de Safari et pour les autres applications de lecture (en anglais)</a></li>
-</ul>
+- [Construire des sites web pour le mode lecture de Safari et pour les autres applications de lecture (en anglais)](https://medium.com/@mandy.michael/building-websites-for-safari-reader-mode-and-other-reading-apps-1562913c86c9)
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Categories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Omission de balise</dfn></th>
-   <td>Aucune, les balises d'ouverture et de fermeture sont toutes les deux obligatoires.</td>
-  </tr>
-  <tr>
-   <th scope="row">Éléments parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>, uniquement si c'est <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element">un élément hiérarchiquement correct pour un élément <code>&lt;main&gt;</code></a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Le rôle <code>main</code> est appliqué à <code>&lt;main&gt;</code> par défaut, et le rôle <code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></code> est également autorisé.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Categories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Omission de balise</dfn></th>
+      <td>
+        Aucune, les balises d'ouverture et de fermeture sont toutes les deux
+        obligatoires.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Éléments parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >, uniquement si c'est
+        <a
+          href="https://html.spec.whatwg.org/multipage/grouping-content.html#hierarchically-correct-main-element"
+          >un élément hiérarchiquement correct pour un élément
+          <code>&#x3C;main></code></a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>
+        Le rôle <code>main</code> est appliqué à <code>&#x3C;main></code> par
+        défaut, et le rôle <code
+          ><a
+            href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role"
+            >presentation</a
+          ></code
+        > est également autorisé.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Pas de changement de {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#semantics.html#the-main-element', '&lt;main&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Retrait de la restriction sur l'interdiction de l'utilisation de l'élément <code>&lt;main&gt;</code> comme descendant d'un élément {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, ou {{HTMLElement("nav")}}. Retrait de la restriction interdisant d'utiliser plusieurs fois <code>&lt;main&gt;</code> dans un document.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition intiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                    | État                             | Commentaires                                                                                                                                                                                                                                                                                                                                                                              |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML5.1', 'grouping-content.html#the-main-element', '&lt;main&gt;')}}     | {{Spec2('HTML5.1')}}     | Pas de changement de {{SpecName('HTML5 W3C')}}                                                                                                                                                                                                                                                                                                                                     |
+| {{SpecName('HTML WHATWG', '#semantics.html#the-main-element', '&lt;main&gt;')}}         | {{Spec2('HTML WHATWG')}} | Retrait de la restriction sur l'interdiction de l'utilisation de l'élément `<main>` comme descendant d'un élément {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, ou {{HTMLElement("nav")}}. Retrait de la restriction interdisant d'utiliser plusieurs fois `<main>` dans un document. |
+| {{SpecName('HTML5 W3C', 'grouping-content.html#the-main-element', '&lt;main&gt;')}} | {{Spec2('HTML5 W3C')}}     | Définition intiale.                                                                                                                                                                                                                                                                                                                                                                       |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.elements.main")}}
+
+## Voir aussi
+
+- Les éléments qui permettent de structurer un document HTML
+
+  - {{HTMLElement("html")}}
+  - {{HTMLElement("head")}}
+  - {{HTMLElement("body")}}
+
+- Les éléments liés au plan d'un document HTML :
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.elements.main")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<div>
-<ul>
- <li>Les éléments qui permettent de structurer un document HTML
-  <ul>
-   <li>{{HTMLElement("html")}}</li>
-   <li>{{HTMLElement("head")}}</li>
-   <li>{{HTMLElement("body")}}</li>
-  </ul>
- </li>
- <li>Les éléments liés au plan d'un document HTML :
-  <ul>
-   <li>{{HTMLElement("article")}}</li>
-   <li>{{HTMLElement("aside")}}</li>
-   <li>{{HTMLElement("footer")}}</li>
-   <li>{{HTMLElement("header")}}</li>
-   <li>{{HTMLElement("nav")}}</li>
-  </ul>
- </li>
-</ul>
-</div>
+  - {{HTMLElement("article")}}
+  - {{HTMLElement("aside")}}
+  - {{HTMLElement("footer")}}
+  - {{HTMLElement("header")}}
+  - {{HTMLElement("nav")}}
diff --git a/files/fr/web/html/element/map/index.md b/files/fr/web/html/element/map/index.md
index 0587aefb35..c097778c97 100644
--- a/files/fr/web/html/element/map/index.md
+++ b/files/fr/web/html/element/map/index.md
@@ -8,114 +8,115 @@ tags:
   - Web
 translation_of: Web/HTML/Element/map
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML<strong> <code>&lt;map&gt;</code></strong> est utilisé avec des éléments {{HTMLElement("area")}} afin de définir une image cliquable divisée en régions.</p>
+L'élément HTML** `<map>`** est utilisé avec des éléments {{HTMLElement("area")}} afin de définir une image cliquable divisée en régions.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/map.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/map.html", "tabbed-standard")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("name")}}</dt>
- <dd>Cet attribut fournit un nom afin que la carte cliquable puisse être référencée. Cet attribut est obligatoire et sa valeur doit être une chaîne de caractères non-vide qui ne contient pas de blancs. La valeur de cet attribut doit être unique pour tous les éléments {{HTMLElement("map")}} du document. Si l'attribut universel <code>id</code> est utilisé, <code>name</code> devra avoir la même valeur que celui-ci.</dd>
-</dl>
+- {{htmlattrdef("name")}}
+  - : Cet attribut fournit un nom afin que la carte cliquable puisse être référencée. Cet attribut est obligatoire et sa valeur doit être une chaîne de caractères non-vide qui ne contient pas de blancs. La valeur de cet attribut doit être unique pour tous les éléments {{HTMLElement("map")}} du document. Si l'attribut universel `id` est utilisé, `name` devra avoir la même valeur que celui-ci.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;map name="primary"&gt;
-  &lt;area shape="circle" coords="75,75,75" href="left.html"&gt;
-  &lt;area shape="circle" coords="275,75,75" href="right.html"&gt;
-&lt;/map&gt;
-&lt;img usemap="#primary" src="https://via.placeholder.com/350x150" alt="350 x 150 pic"&gt;
-</pre>
+```html
+<map name="primary">
+  <area shape="circle" coords="75,75,75" href="left.html">
+  <area shape="circle" coords="275,75,75" href="right.html">
+</map>
+<img usemap="#primary" src="https://via.placeholder.com/350x150" alt="350 x 150 pic">
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","450","230")}}</p>
+{{EmbedLiveSample("Exemples","450","230")}}
 
-<h3 id="Résultat_attendu">Résultat attendu</h3>
+### Résultat attendu
 
-<p>L'exemple précédent devrait faire apparaître des images semblables (en utilisant la touche <kbd>tab</kbd> de votre clavier)&nbsp;:</p>
+L'exemple précédent devrait faire apparaître des images semblables (en utilisant la touche <kbd>tab</kbd> de votre clavier) :
 
-<p><em>Pour le lien <code>left.html</code>&nbsp;:</em><br>
- <img alt="" src="screen_shot_2017-02-02_at_10.48.40_pm.png"></p>
+_Pour le lien `left.html` :_
+![](screen_shot_2017-02-02_at_10.48.40_pm.png)
 
-<p><em>Pour le lien <code>right.html</code>&nbsp;</em><br>
- <img alt="" src="screen_shot_2017-02-02_at_10.49.04_pm.png"></p>
+_Pour le lien `right.html` _
+![](screen_shot_2017-02-02_at_10.49.04_pm.png)
 
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Tout élément dont <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod%C3%A8le_de_contenu_transparent">le modèle de contenu est transparent</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">du contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLMapElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        Tout élément dont
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod%C3%A8le_de_contenu_transparent"
+          >le modèle de contenu est transparent</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9"
+          >du contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLMapElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-map-element', '&lt;map&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-map-element', '&lt;map&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;map&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                    | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'embedded-content.html#the-map-element', '&lt;map&gt;')}} | {{Spec2('HTML WHATWG')}} |                      |
+| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-map-element', '&lt;map&gt;')}} | {{Spec2('HTML5 W3C')}}     |                      |
+| {{SpecName('HTML4.01', 'struct/objects.html#h-13.6.1', '&lt;map&gt;')}}                 | {{Spec2('HTML4.01')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.map")}}</p>
+{{Compat("html.elements.map")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("a")}}</li>
- <li>{{HTMLElement("area")}}</li>
-</ul>
+- {{HTMLElement("a")}}
+- {{HTMLElement("area")}}
diff --git a/files/fr/web/html/element/mark/index.md b/files/fr/web/html/element/mark/index.md
index df2379de82..73cf9f4c98 100644
--- a/files/fr/web/html/element/mark/index.md
+++ b/files/fr/web/html/element/mark/index.md
@@ -8,148 +8,152 @@ tags:
   - Web
 translation_of: Web/HTML/Element/mark
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;mark&gt;</code></strong> représente un texte marqué ou surligné à cause de sa pertinence dans le contexte. Il peut par exemple être utilisé afin d'indiquer les correspondances d'un mot-clé recherché au sein d'un document.</p>
+L'élément HTML **`<mark>`** représente un texte marqué ou surligné à cause de sa pertinence dans le contexte. Il peut par exemple être utilisé afin d'indiquer les correspondances d'un mot-clé recherché au sein d'un document.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/mark.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2>
+## **Notes d'utilisation**
 
-<ul>
- <li>Au sein d'une citation ({{HTMLElement("q")}}) ou dans un autre bloc ({{HTMLElement("blockquote")}}), le texte surligné marque généralement du texte référencé en dehors de la citation  ou qui est indiqué pour demander une attention particulière bien que l'auteur ne considère pas ce texte comme important.</li>
- <li>Au sein du texte principal, le texte surligné marque du texte d'une pertinence partiulière pour l'utilisateur (par exemple lorsqu'il recherche un terme en particulier).</li>
- <li><code>&lt;mark&gt;</code> ne doit pas être utilisé pour de la coloration syntaxique, c'est l'élément {{HTMLElement("span")}} qui devra être utilisé.</li>
- <li><code>&lt;mark&gt;</code> ne doit pas être confondu avec {{HTMLElement("strong")}}. L'élément {{HTMLElement("strong")}} est utilisé afin d'indiquer des fragments de texte <em>importants</em> alors que <code>&lt;mark&gt;</code> est utilisé afin d'indiquer des fragments de texte <em>pertinents</em>.</li>
-</ul>
+- Au sein d'une citation ({{HTMLElement("q")}}) ou dans un autre bloc ({{HTMLElement("blockquote")}}), le texte surligné marque généralement du texte référencé en dehors de la citation  ou qui est indiqué pour demander une attention particulière bien que l'auteur ne considère pas ce texte comme important.
+- Au sein du texte principal, le texte surligné marque du texte d'une pertinence partiulière pour l'utilisateur (par exemple lorsqu'il recherche un terme en particulier).
+- `<mark>` ne doit pas être utilisé pour de la coloration syntaxique, c'est l'élément {{HTMLElement("span")}} qui devra être utilisé.
+- `<mark>` ne doit pas être confondu avec {{HTMLElement("strong")}}. L'élément {{HTMLElement("strong")}} est utilisé afin d'indiquer des fragments de texte _importants_ alors que `<mark>` est utilisé afin d'indiquer des fragments de texte _pertinents_.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
-  L'élément &amp;lt;mark&amp;gt; est utilisé pour
-  &lt;mark&gt;mettre en avant&lt;/mark&gt;
+```html
+<p>
+  L'élément &lt;mark&gt; est utilisé pour
+  <mark>mettre en avant</mark>
   du texte pertinent dans le contexte.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_simple","100%","100%")}}</p>
+{{EmbedLiveSample("Exemple_simple","100%","100%")}}
 
-<h3 id="Identifier_des_passages">Identifier des passages</h3>
+### Identifier des passages
 
-<p>Dans cet exemple, on utilise <code>&lt;mark&gt;</code> pour marquer les résultats d'une recherche dans un passage.</p>
+Dans cet exemple, on utilise `<mark>` pour marquer les résultats d'une recherche dans un passage.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;It is a dark time for the Rebellion. Although the Death
-Star has been destroyed, &lt;mark class="match"&gt;Imperial&lt;/mark&gt;
+```html
+<p>It is a dark time for the Rebellion. Although the Death
+Star has been destroyed, <mark class="match">Imperial</mark>
 troops have driven the Rebel forces from their hidden base and
-pursued them across the galaxy.&lt;/p&gt;
+pursued them across the galaxy.</p>
 
-&lt;p&gt;Evading the dreaded &lt;mark class="match"&gt;Imperial&lt;/mark&gt;
+<p>Evading the dreaded <mark class="match">Imperial</mark>
 Starfleet, a group of freedom fighters led by Luke Skywalker
 has established a new secret base on the remote ice world of
-Hoth.&lt;/p&gt;</pre>
+Hoth.</p>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Identifier_des_passages", 650, 130)}}</p>
+{{EmbedLiveSample("Identifier_des_passages", 650, 130)}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément <code>mark</code>. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.</p>
+Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément `mark`. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.
 
-<pre>mark::before,
-mark::after {
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
+    mark::before,
+    mark::after {
+      clip-path: inset(100%);
+      clip: rect(1px, 1px, 1px, 1px);
+      height: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
 
-mark::before {
-  content: " [Début du marquage]";
-}
+    mark::before {
+      content: " [Début du marquage]";
+    }
 
-mark::after {
-  content: " [Fin du marquage] ";
-}
-</pre>
+    mark::after {
+      content: " [Fin du marquage] ";
+    }
 
-<p>Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été marqué.</p>
+Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été marqué.
 
-<ul>
- <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/"><em>Short note on making your mark (more accessible) | The Paciello Group</em> (en anglais)</a></li>
- <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html"><em>Tweaking Text Level Styles | Adrian Roselli</em> (en anglais)</a></li>
-</ul>
+- [_Short note on making your mark (more accessible) | The Paciello Group_ (en anglais)](https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/)
+- [_Tweaking Text Level Styles | Adrian Roselli_ (en anglais)](http://adrianroselli.com/2017/12/tweaking-text-level-styles.html)
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">du contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >du contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element','&lt;mark&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-mark-element', '&lt;mark&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                        | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element','&lt;mark&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-mark-element', '&lt;mark&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.mark")}}</p>
+{{Compat("html.elements.mark")}}
diff --git a/files/fr/web/html/element/marquee/index.md b/files/fr/web/html/element/marquee/index.md
index 63b7b29eb2..5250a307f8 100644
--- a/files/fr/web/html/element/marquee/index.md
+++ b/files/fr/web/html/element/marquee/index.md
@@ -10,116 +10,93 @@ tags:
   - Web
 translation_of: Web/HTML/Element/marquee
 ---
-<div>{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}</div>
-
-<p>L'élément HTML <strong><code>&lt;marquee&gt;</code></strong> est utilisé pour insérer une zone de texte défilant.</p>
-
-<h2 id="Attributs">Attributs</h2>
-
-<dl>
- <dt>{{htmlattrdef("behavior")}}</dt>
- <dd>Définit comment le texte defile à l'intérieur du <code>&lt;marquee&gt;</code>. Les valeurs possibles sont <code>scroll</code>, <code>slide</code> et <code>alternate</code>. Si aucune valeur n'est spécifiée, la valeur par défaut est <code>scroll</code>.</dd>
- <dt>{{htmlattrdef("bgcolor")}}</dt>
- <dd>Définit la couleur de fond en utilisant le nom de la couleur ou son code hexadécimal.</dd>
- <dt>{{htmlattrdef("direction")}}</dt>
- <dd>Définit la direction du défilement dans le <code>&lt;marquee&gt;</code>. Les valeurs possibles sont <code>left</code>, <code>right</code>, <code>up</code> et <code>down</code>. SI aucune valeur n'est spécifiée, la valeur par défaut est <code>left</code>.</dd>
- <dt>{{htmlattrdef("height")}}</dt>
- <dd>Définit la hauteur en pixels ou en pourcentage.</dd>
- <dt>{{htmlattrdef("hspace")}}</dt>
- <dd>Définit la marge horizontale.</dd>
- <dt>{{htmlattrdef("loop")}}</dt>
- <dd>Définit le nombre de fois que le marquee va faire défiler le texte. Si aucune valeur n'est spécifiée, la valeur par défaut est <code>-1</code>, ce qui signifie que le marquee va défiler indéfiniment.</dd>
- <dt>{{htmlattrdef("scrollamount")}}</dt>
- <dd>Définit la quantité de défilement de chaque défilement en pixels. La valeur par défaut est <code>6</code>.</dd>
- <dt>{{htmlattrdef("scrolldelay")}}</dt>
- <dd>Définit l'intervalle entre chaque défilement en millisecondes. La valeur par défaut est <code>85</code>. Notez que toute valeur inférieure à 60 sera ignorée et 60 sera utilisé à la place, à moins que<code> truespeed </code>ne soit spécifié.</dd>
- <dt>{{htmlattrdef("truespeed")}}</dt>
- <dd>Par défaut, les valeurs de <code>scrolldelay</code> inférieures à 60 sont ignorées. <code>Si truespeed </code>est présent, ces valeurs ne seront pas ignorées.</dd>
- <dt>{{htmlattrdef("vspace")}}</dt>
- <dd>Définit la marge verticale en pixel ou en pourcentage.</dd>
- <dt>{{htmlattrdef("width")}}</dt>
- <dd>Définit la largeur en pixel en ou pourcentage.</dd>
-</dl>
-
-<h2 id="Gestionnaire_d’évènements">Gestionnaire d’évènements</h2>
-
-<dl>
- <dt>{{htmlattrdef("onbounce")}}</dt>
- <dd>Se déclenche quand le <code>&lt;marquee&gt;</code> arrive à la fin de son défilement. Il peut seulement se déclencher quand <code>behavior</code> est mis à <code>alternate</code>.</dd>
- <dt>{{htmlattrdef("onfinish")}}</dt>
- <dd>Se déclenche quand le <code>&lt;marquee&gt;</code> arrive à la fin de tous ses défilements tels que définis par l'attribut <code>loop</code>. Il peut seulement se déclencher quand le nombre de défilements est supérieur à 0.</dd>
- <dt>{{htmlattrdef("onstart")}}</dt>
- <dd>Se déclenche quand le <code>&lt;marquee&gt;</code> commence à défiler.</dd>
-</dl>
-
-<h2 id="Méthodes">Méthodes</h2>
-
-<dl>
- <dt><code>start()</code></dt>
- <dd>Commence à faire défiler le marquee.</dd>
- <dt><code>stop()</code></dt>
- <dd>Arrête de faire défiler le marquee.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;marquee&gt;ʕノ•ᴥ•ʔノ ︵ ┻━┻&lt;/marquee&gt;
-
-&lt;marquee direction="up"&gt;Ce texte va défiler de bas en haut&lt;/marquee&gt;
-
-&lt;marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"&gt;
-  &lt;marquee behavior="alternate"&gt;
+{{HTMLRef}}{{non-standard_header}}{{obsolete_header}}
+
+L'élément HTML **`<marquee>`** est utilisé pour insérer une zone de texte défilant.
+
+## Attributs
+
+- {{htmlattrdef("behavior")}}
+  - : Définit comment le texte defile à l'intérieur du `<marquee>`. Les valeurs possibles sont `scroll`, `slide` et `alternate`. Si aucune valeur n'est spécifiée, la valeur par défaut est `scroll`.
+- {{htmlattrdef("bgcolor")}}
+  - : Définit la couleur de fond en utilisant le nom de la couleur ou son code hexadécimal.
+- {{htmlattrdef("direction")}}
+  - : Définit la direction du défilement dans le `<marquee>`. Les valeurs possibles sont `left`, `right`, `up` et `down`. SI aucune valeur n'est spécifiée, la valeur par défaut est `left`.
+- {{htmlattrdef("height")}}
+  - : Définit la hauteur en pixels ou en pourcentage.
+- {{htmlattrdef("hspace")}}
+  - : Définit la marge horizontale.
+- {{htmlattrdef("loop")}}
+  - : Définit le nombre de fois que le marquee va faire défiler le texte. Si aucune valeur n'est spécifiée, la valeur par défaut est `-1`, ce qui signifie que le marquee va défiler indéfiniment.
+- {{htmlattrdef("scrollamount")}}
+  - : Définit la quantité de défilement de chaque défilement en pixels. La valeur par défaut est `6`.
+- {{htmlattrdef("scrolldelay")}}
+  - : Définit l'intervalle entre chaque défilement en millisecondes. La valeur par défaut est `85`. Notez que toute valeur inférieure à 60 sera ignorée et 60 sera utilisé à la place, à moins que` truespeed `ne soit spécifié.
+- {{htmlattrdef("truespeed")}}
+  - : Par défaut, les valeurs de `scrolldelay` inférieures à 60 sont ignorées. `Si truespeed `est présent, ces valeurs ne seront pas ignorées.
+- {{htmlattrdef("vspace")}}
+  - : Définit la marge verticale en pixel ou en pourcentage.
+- {{htmlattrdef("width")}}
+  - : Définit la largeur en pixel en ou pourcentage.
+
+## Gestionnaire d’évènements
+
+- {{htmlattrdef("onbounce")}}
+  - : Se déclenche quand le `<marquee>` arrive à la fin de son défilement. Il peut seulement se déclencher quand `behavior` est mis à `alternate`.
+- {{htmlattrdef("onfinish")}}
+  - : Se déclenche quand le `<marquee>` arrive à la fin de tous ses défilements tels que définis par l'attribut `loop`. Il peut seulement se déclencher quand le nombre de défilements est supérieur à 0.
+- {{htmlattrdef("onstart")}}
+  - : Se déclenche quand le `<marquee>` commence à défiler.
+
+## Méthodes
+
+- `start()`
+  - : Commence à faire défiler le marquee.
+- `stop()`
+  - : Arrête de faire défiler le marquee.
+
+## Exemples
+
+### HTML
+
+```html
+<marquee>ʕノ•ᴥ•ʔノ ︵ ┻━┻</marquee>
+
+<marquee direction="up">Ce texte va défiler de bas en haut</marquee>
+
+<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
+  <marquee behavior="alternate">
     Ce texte va rebondir
-  &lt;/marquee&gt;
-&lt;/marquee&gt;</pre>
+  </marquee>
+</marquee>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 600, 450)}}</p>
-<h2 id="Résumé_technique">Résumé technique</h2>
+{{EmbedLiveSample("Exemples", 600, 450)}}
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{DOMxRef("HTMLMarqueeElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{DOMxRef("HTMLMarqueeElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
+## Spécifications
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '&lt;marquee&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Rendu obsolète afin d'être remplacé par CSS. Définition du comportement attendu à des fins de rétrocompatibilité.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '&lt;marquee&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Rendu obsolète afin d'être remplacé par CSS. Définition du comportement attendu à des fins de rétrocompatibilité.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                             | Commentaires                                                                                                      |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'obsolete.html#the-marquee-element-2', '&lt;marquee&gt;')}} | {{Spec2('HTML WHATWG')}} | Rendu obsolète afin d'être remplacé par CSS. Définition du comportement attendu à des fins de rétrocompatibilité. |
+| {{SpecName('HTML5 W3C', 'obsolete.html#the-marquee-element-0', '&lt;marquee&gt;')}} | {{Spec2('HTML5 W3C')}}     | Rendu obsolète afin d'être remplacé par CSS. Définition du comportement attendu à des fins de rétrocompatibilité. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.marquee")}}</p>
+{{Compat("html.elements.marquee")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{DOMxRef("HTMLMarqueeElement")}}</li>
-</ul>
+- {{DOMxRef("HTMLMarqueeElement")}}
diff --git a/files/fr/web/html/element/menu/index.md b/files/fr/web/html/element/menu/index.md
index 760832b44d..4a21fa153d 100644
--- a/files/fr/web/html/element/menu/index.md
+++ b/files/fr/web/html/element/menu/index.md
@@ -8,208 +8,206 @@ tags:
   - Web
 translation_of: Web/HTML/Element/menu
 ---
-<div>{{HTMLRef}}{{SeeCompatTable}}</div>
+{{HTMLRef}}{{SeeCompatTable}}
 
-<p>L'élément HTML <strong><code>&lt;menu&gt;</code></strong> représente un groupe de commandes que l'utilisateur peut utiliser ou activer. Il peut être utilisé afin de créer des menus (affichés en haut d'un écran par exemple) et des menus contextuels (qui apparaissent au clic-droit ou après avoir cliqué sur un bouton).</p>
+L'élément HTML **`<menu>`** représente un groupe de commandes que l'utilisateur peut utiliser ou activer. Il peut être utilisé afin de créer des menus (affichés en haut d'un écran par exemple) et des menus contextuels (qui apparaissent au clic-droit ou après avoir cliqué sur un bouton).
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme pour tous les autres éléments, on peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur <code>&lt;menu&gt;</code>.</p>
+Comme pour tous les autres éléments, on peut utiliser [les attributs universels](/fr/docs/Web/HTML/Attributs_universels) sur `<menu>`.
 
-<dl>
- <dt>{{htmlattrdef("label")}} {{Deprecated_inline}}</dt>
- <dd>Le nom du menu qui est affiché pour l'utilisateur. Lorsque cet attribut est utilisé dans un menu imbriqué, c'est le nom affiché pour le sous-menu. Cet attribut doit uniquement être utilisé lorsque l'élément parent est un élément {{HTMLElement("menu")}}.</dd>
- <dt>{{htmlattrdef("type")}}</dt>
- <dd>Cet attribut indique le type de menu qui est déclaré. C'est un attribut à valeur contrainte qui peut prendre l'une des valeurs suivantes :
- <ul>
-  <li><code>context</code> {{Deprecated_inline}} : Cette valeur indique que le menu est dans un état de popup et qu'il contient des commandes relatives à un autre élément. Ce menu peut être référencé via l'attribut {{htmlattrxref("menu", "button")}} d'un élément {{HTMLElement("button")}} ou via l'attribut <a href="/fr/docs/Web/HTML/Attributs_universels#attr-contextmenu"><code>contextmenu</code></a> d'un élément. Cette valeur est la valeur par défaut de l'attribut lorsque l'élément parent est également un élément <code>&lt;menu&gt;</code>.</li>
-  <li><code>toolbar</code> : Cette valeur indique que le menu est une barre d'outils qui contient différentes commandes disponibles. Ces commandes peuvent être construites avec plusieurs éléments {{HTMLElement("li")}} ou avec du contenu de flux qui décrit les commandes disponibles. Cette valeur est la valeur par défaut de l'attribut.</li>
- </ul>
- </dd>
-</dl>
+- {{htmlattrdef("label")}} {{Deprecated_inline}}
+  - : Le nom du menu qui est affiché pour l'utilisateur. Lorsque cet attribut est utilisé dans un menu imbriqué, c'est le nom affiché pour le sous-menu. Cet attribut doit uniquement être utilisé lorsque l'élément parent est un élément {{HTMLElement("menu")}}.
+- {{htmlattrdef("type")}}
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+  - : Cet attribut indique le type de menu qui est déclaré. C'est un attribut à valeur contrainte qui peut prendre l'une des valeurs suivantes :
 
-<ul>
- <li>Les éléments {{HTMLElement("menu")}} et {{HTMLElement("ul")}} représentent tous les deux une liste non-ordonnées d'éléments. {{HTMLElement("ul")}} doit être utilisés pour des éléments qui doivent uniquement être affichés alors que {{HTMLElement("menu")}} est conçu pour des éléments interactifs.</li>
- <li><strong>Un menu contextuel</strong> se compose d'un élément <code>&lt;menu&gt;</code> qui contient des éléments {{HTMLElement("menuitem")}} dont chacun représente une option sélectionnable dans le menu. D'autres éléments <code>&lt;menu&gt;</code> peuvent être imbriqués afin de créer des sous-menus et l'élément {{HTMLElement("hr")}} peut être utilisé afin d'ajouter des séparateurs. Les menus contextuels sont associés à un élément d'u document au travers de son attribut {{htmlattrxref("contextmenu")}}. Lorsqu'il s'agit d'un bouton de menu, c'est l'attribut {{htmlattrxref("menu", "button")}} de {{HTMLElement("button")}} qui décrit ce lien.</li>
- <li><strong>Les menus de barre d'outils </strong>se composent d'un élément <code>&lt;menu&gt;</code> dont le contenu est décrit avec des éléments {{HTMLElement("li")}} qui forment une liste non-ordonnée ou avec du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> qui décrit les commandes et les options disponibles.</li>
- <li>Cet élément a été déprécié en HTML4 mais fut réintroduit dans la spécification HTML5.1 et dans le standard évolutif HTML.</li>
-</ul>
+    - `context` {{Deprecated_inline}} : Cette valeur indique que le menu est dans un état de popup et qu'il contient des commandes relatives à un autre élément. Ce menu peut être référencé via l'attribut {{htmlattrxref("menu", "button")}} d'un élément {{HTMLElement("button")}} ou via l'attribut [`contextmenu`](/fr/docs/Web/HTML/Attributs_universels#attr-contextmenu) d'un élément. Cette valeur est la valeur par défaut de l'attribut lorsque l'élément parent est également un élément `<menu>`.
+    - `toolbar` : Cette valeur indique que le menu est une barre d'outils qui contient différentes commandes disponibles. Ces commandes peuvent être construites avec plusieurs éléments {{HTMLElement("li")}} ou avec du contenu de flux qui décrit les commandes disponibles. Cette valeur est la valeur par défaut de l'attribut.
 
-<h2 id="Exemples">Exemples</h2>
+## Notes d'utilisation
 
-<h3 id="Menu_contextuelDeprecated_inline">Menu contextuel{{Deprecated_inline}}</h3>
+- Les éléments {{HTMLElement("menu")}} et {{HTMLElement("ul")}} représentent tous les deux une liste non-ordonnées d'éléments. {{HTMLElement("ul")}} doit être utilisés pour des éléments qui doivent uniquement être affichés alors que {{HTMLElement("menu")}} est conçu pour des éléments interactifs.
+- **Un menu contextuel** se compose d'un élément `<menu>` qui contient des éléments {{HTMLElement("menuitem")}} dont chacun représente une option sélectionnable dans le menu. D'autres éléments `<menu>` peuvent être imbriqués afin de créer des sous-menus et l'élément {{HTMLElement("hr")}} peut être utilisé afin d'ajouter des séparateurs. Les menus contextuels sont associés à un élément d'u document au travers de son attribut {{htmlattrxref("contextmenu")}}. Lorsqu'il s'agit d'un bouton de menu, c'est l'attribut {{htmlattrxref("menu", "button")}} de {{HTMLElement("button")}} qui décrit ce lien.
+- **Les menus de barre d'outils** se composent d'un élément `<menu>` dont le contenu est décrit avec des éléments {{HTMLElement("li")}} qui forment une liste non-ordonnée ou avec du [contenu de flux](/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux) qui décrit les commandes et les options disponibles.
+- Cet élément a été déprécié en HTML4 mais fut réintroduit dans la spécification HTML5.1 et dans le standard évolutif HTML.
 
-<p>{{Deprecated_header}}</p>
+## Exemples
 
-<h4 id="HTML">HTML</h4>
+### Menu contextuel{{Deprecated_inline}}
 
-<pre class="brush: html">&lt;!-- Un élément &lt;div&gt; avec un menu contextuel --&gt;
-&lt;div contextmenu="popup-menu"&gt;
+{{Deprecated_header}}
+
+#### HTML
+
+```html
+<!-- Un élément <div> avec un menu contextuel -->
+<div contextmenu="popup-menu">
   Vous pouvez effectuer un clic-droit pour voir le menu.
-&lt;/div&gt;
+</div>
 
-&lt;menu type="context" id="popup-menu"&gt;
-  &lt;menuitem&gt;Action&lt;/menuitem&gt;
-  &lt;menuitem&gt;Une autre action&lt;/menuitem&gt;
-  &lt;hr&gt;
-  &lt;menuitem&gt;Une action après un séparateur&lt;/menuitem&gt;
-&lt;/menu&gt;
-</pre>
+<menu type="context" id="popup-menu">
+  <menuitem>Action</menuitem>
+  <menuitem>Une autre action</menuitem>
+  <hr>
+  <menuitem>Une action après un séparateur</menuitem>
+</menu>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   width: 300px;
   height: 80px;
   background-color: lightgreen;
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Menu_contextuel', '100%', '80')}}</p>
+{{EmbedLiveSample('Menu_contextuel', '100%', '80')}}
 
-<h3 id="Bouton_de_menu">Bouton de menu</h3>
+### Bouton de menu
 
-<div class="warning">
-<p><strong>Attention :</strong> Les boutons de menu n'ont pas encore été implémentés dans les navigateurs et {{HTMLElement("menuitem")}} est désormais obsolète.</p>
-</div>
+> **Attention :** Les boutons de menu n'ont pas encore été implémentés dans les navigateurs et {{HTMLElement("menuitem")}} est désormais obsolète.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;!-- Un bouton qui affiche un menu lorsqu'on clique dessus. --&gt;
-&lt;button type="menu" menu="popup-menu"&gt;
+```html
+<!-- Un bouton qui affiche un menu lorsqu'on clique dessus. -->
+<button type="menu" menu="popup-menu">
   Dérouler
-&lt;/button&gt;
-
-&lt;menu type="context" id="popup-menu"&gt;
-  &lt;menuitem&gt;Action&lt;/menuitem&gt;
-  &lt;menuitem&gt;Une autre action&lt;/menuitem&gt;
-  &lt;hr&gt;
-  &lt;menuitem&gt;Une action après un séparateur&lt;/menuitem&gt;
-&lt;/menu&gt;
-</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample('Bouton_de_menu', '100%', '50')}}</p>
+</button>
+
+<menu type="context" id="popup-menu">
+  <menuitem>Action</menuitem>
+  <menuitem>Une autre action</menuitem>
+  <hr>
+  <menuitem>Une action après un séparateur</menuitem>
+</menu>
+```
+
+#### Résultat
+
+{{EmbedLiveSample('Bouton_de_menu', '100%', '50')}}
+
+### Barre d’outils {{experimental_inline}}
+
+> **Attention :** Les menus sous forme de barres d'outils n'ont pas encore été implémentés dans les navigateurs.
+
+#### HTML
+
+```html
+<!-- Un menu pour un éditeur basique
+     avec deux boutons de menu. -->
+<menu type="toolbar">
+  <li>
+    <button type="menu" menu="file-menu">Fichier</button>
+    <menu type="context" id="file-menu">
+      <menuitem label="Nouveau" onclick="newFile()">
+      <menuitem label="Enregistrer" onclick="saveFile()">
+    </menu>
+  </li>
+  <li>
+    <button type="menu" menu="edit-menu">Éditer</button>
+    <menu type="context" id="edit-menu">
+      <menuitem label="Couper" onclick="cutEdit()">
+      <menuitem label="Copier" onclick="copyEdit()">
+      <menuitem label="Coller" onclick="pasteEdit()">
+    </menu>
+  </li>
+</menu>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Barre_d’outils", '100%', '100')}}
+
+## Résumé technique
 
-<h3 id="Barre_d’outils_experimental_inline">Barre d’outils {{experimental_inline}}</h3>
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >
+        et
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >
+        si le menu est une liste (l'état par défaut, sauf si l'élément parent
+        est lui-même un élément <code>&#x3C;menu></code> auquel cas le menu est
+        dans un état contextuel).
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        Si le menu est une liste : du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >
+        ou zéro ou plusieurs éléments {{HTMLElement("li")}},
+        {{HTMLElement("script")}} et
+        {{HTMLElement("template")}}.<br />Si le menu est dans un menu
+        contextuel : zéro ou plusieurs éléments
+        {{HTMLElement("menu")}}, {{HTMLElement("menuitem")}},
+        {{HTMLElement("hr")}}, {{HTMLElement("script")}} et
+        {{HTMLElement("template")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLMenuElement")}}</td>
+    </tr>
+  </tbody>
+</table>
 
-<div class="warning">
-<p><strong>Attention :</strong> Les menus sous forme de barres d'outils n'ont pas encore été implémentés dans les navigateurs.</p>
-</div>
+## Spécifications
 
-<h4 id="HTML_3">HTML</h4>
-
-<pre class="brush: html">&lt;!-- Un menu pour un éditeur basique
-     avec deux boutons de menu. --&gt;
-&lt;menu type="toolbar"&gt;
-  &lt;li&gt;
-    &lt;button type="menu" menu="file-menu"&gt;Fichier&lt;/button&gt;
-    &lt;menu type="context" id="file-menu"&gt;
-      &lt;menuitem label="Nouveau" onclick="newFile()"&gt;
-      &lt;menuitem label="Enregistrer" onclick="saveFile()"&gt;
-    &lt;/menu&gt;
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;button type="menu" menu="edit-menu"&gt;Éditer&lt;/button&gt;
-    &lt;menu type="context" id="edit-menu"&gt;
-      &lt;menuitem label="Couper" onclick="cutEdit()"&gt;
-      &lt;menuitem label="Copier" onclick="copyEdit()"&gt;
-      &lt;menuitem label="Coller" onclick="pasteEdit()"&gt;
-    &lt;/menu&gt;
-  &lt;/li&gt;
-&lt;/menu&gt;
-</pre>
-
-<h4 id="Résultat_3">Résultat</h4>
-
-<p>{{EmbedLiveSample("Barre_d’outils", '100%', '100')}}</p>
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+| Spécification                                                                                                    | État                             | Commentaires                                                                        |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------- |
+| {{SpecName("HTML WHATWG", "grouping-content.html#the-menu-element", "&lt;menu&gt;")}} | {{Spec2("HTML WHATWG")}} | Aucune modification depuis la dernière dérivation, {{SpecName("HTML5.3")}} |
+| {{SpecName("HTML5.3", "grouping-content.html#the-menu-element", "&lt;menu&gt;")}}     | {{Spec2("HTML5.3")}}     | Aucune modification.                                                                |
+| {{SpecName("HTML5.2", "grouping-content.html#the-menu-element", "&lt;menu&gt;")}}     | {{Spec2("HTML5.2")}}     | Dérivation {{SpecName("HTML WHATWG")}}, suppression du type `context`.     |
+| {{SpecName("HTML5.1", "interactive-elements.html#the-menu-element", "&lt;menu&gt;")}} | {{Spec2("HTML5.1")}}     | Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.            |
 
-<table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a> et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a> si le menu est une liste (l'état par défaut, sauf si l'élément parent est lui-même un élément <code>&lt;menu&gt;</code> auquel cas le menu est dans un état contextuel).</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Si le menu est une liste : du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> ou zéro ou plusieurs éléments {{HTMLElement("li")}}, {{HTMLElement("script")}} et {{HTMLElement("template")}}.<br>
-    Si le menu est dans un menu contextuel : zéro ou plusieurs éléments {{HTMLElement("menu")}}, {{HTMLElement("menuitem")}}, {{HTMLElement("hr")}}, {{HTMLElement("script")}} et {{HTMLElement("template")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLMenuElement")}}</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "grouping-content.html#the-menu-element", "&lt;menu&gt;")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Aucune modification depuis la dernière dérivation, {{SpecName("HTML5.3")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.3", "grouping-content.html#the-menu-element", "&lt;menu&gt;")}}</td>
-   <td>{{Spec2("HTML5.3")}}</td>
-   <td>Aucune modification.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.2", "grouping-content.html#the-menu-element", "&lt;menu&gt;")}}</td>
-   <td>{{Spec2("HTML5.2")}}</td>
-   <td>Dérivation {{SpecName("HTML WHATWG")}}, suppression du type <code>context</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menu-element", "&lt;menu&gt;")}}</td>
-   <td>{{Spec2("HTML5.1")}}</td>
-   <td>Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+{{Compat("html.elements.menu")}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Voir aussi
 
-<p>{{Compat("html.elements.menu")}}</p>
+- Les autres éléments HTML relatifs aux listes :
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+  - {{HTMLElement("ol")}}
+  - {{HTMLElement("ul")}}
+  - {{HTMLElement("li")}}
+  - {{HTMLElement("hr")}}
+  - {{HTMLElement("dir")}} {{obsolete_inline}}
 
-<ul>
- <li>Les autres éléments HTML relatifs aux listes :
-  <ul>
-   <li>{{HTMLElement("ol")}}</li>
-   <li>{{HTMLElement("ul")}}</li>
-   <li>{{HTMLElement("li")}}</li>
-   <li>{{HTMLElement("hr")}}</li>
-   <li>{{HTMLElement("dir")}} {{obsolete_inline}}</li>
-  </ul>
- </li>
- <li>L'attribut universel <a href="/fr/docs/Web/HTML/Attributs_universels#attr-contextmenu"><code>contextmenu</code></a> qui peut être utilisé sur un élément et qui fait référence à l'attribut <code>id</code> d'un élément <code>menu</code> avec <code>context</code> qui vaut {{htmlattrxref("type","menu",'type="context"')}}.</li>
-</ul>
+- L'attribut universel [`contextmenu`](/fr/docs/Web/HTML/Attributs_universels#attr-contextmenu) qui peut être utilisé sur un élément et qui fait référence à l'attribut `id` d'un élément `menu` avec `context` qui vaut {{htmlattrxref("type","menu",'type="context"')}}.
diff --git a/files/fr/web/html/element/menuitem/index.md b/files/fr/web/html/element/menuitem/index.md
index e4200153e5..e03dfe98b4 100644
--- a/files/fr/web/html/element/menuitem/index.md
+++ b/files/fr/web/html/element/menuitem/index.md
@@ -9,145 +9,132 @@ tags:
   - Web
 translation_of: Web/HTML/Element/menuitem
 ---
-<p>{{HTMLRef}}{{Deprecated_Header("HTML5.2")}}</p>
-
-<p>L'élément HTML <strong><code>&lt;menuitem&gt;</code></strong> représente une commande qu'un utilisateur peut utiliser via un menu contextuel ou un menu rattaché à un bouton.</p>
-
-<p>Une commande peut être définie explicitement, avec un texte et éventuellement une icône ou bien faire référence à une commande décrite dans un autre élément. Une commande peut prendre la forme d'une case à cocher ou d’un groupe de boutons radio.</p>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>Cet élément inclut également <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> et notamment <code>title</code> qui peut être utilisé afin de décrire une commande ou pour fournir des indications quant à l'utilisation de celle-ci.</p>
-
-<dl>
- <dt>{{htmlattrdef("checked")}}</dt>
- <dd>Un attribut booléen qui indique si la commande est sélectionné. Cet attribut peut uniquement être utilisé lorsque l'attribut <code>type</code> vaut <code>checkbox</code> ou <code>radio</code>.</dd>
- <dt>{{htmlattrdef("command")}}</dt>
- <dd>Cet attribut définit l'identifiant d'un autre élément qui indique une commande invoquée indirectement. Cet attribut ne peut pas être utilisé si les attributs <code>checked</code>, <code>disabled</code>, <code>icon</code>, <code>label</code>, <code>radiogroup</code> ou <code>type</code> sont utilisés.</dd>
- <dt>{{htmlattrdef("default")}}</dt>
- <dd>Un attribut booléen qui indique la commande par défaut du menu.</dd>
- <dt>{{htmlattrdef("disabled")}}</dt>
- <dd>Un attribut booléen qui indique que la commande n'est pas disponible dans l'état actuel. On notera que <code>disabled</code> est sémantiquement différent de <code>hidden</code>.</dd>
- <dt>{{htmlattrdef("icon")}}</dt>
- <dd>Une URL vers image qui représente la commande.</dd>
- <dt>{{htmlattrdef("label")}}</dt>
- <dd>Le nom de la commande affiché pour l'utilisateur. Cet attribut est obligatoire lorsque l'attribut <code>command</code> est absent.</dd>
- <dt>{{htmlattrdef("radiogroup")}}</dt>
- <dd>Cet attribut indique le nom d'un groupe de commandes étant des boutons radio. Cet attribut peut uniquement être utilisé lorsque <code>type</code> vaut <code>radio</code>.</dd>
- <dt>{{htmlattrdef("type")}}</dt>
- <dd>Cet attribut indique le type de commande dans le menu. C'est un attribut à valeur contrainte qui peut prendre une des valeurs suivantes :
- <ul>
-  <li><code>command</code> : une commande associée à une action donnée. C'est la valeur par défaut de l'attribut.</li>
-  <li><code>checkbox</code> : une commande qui peut avoir un état parmi deux états différents.</li>
-  <li><code>radio</code> : une commande qui représente une sélection au sein d'un groupe de commandes qui sont des boutons radio.</li>
- </ul>
- </dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;!-- Un élément &lt;div&gt; avec un menu contextuel --&gt;
-&lt;div contextmenu="popup-menu"&gt;
+{{HTMLRef}}{{Deprecated_Header("HTML5.2")}}
+
+L'élément HTML **`<menuitem>`** représente une commande qu'un utilisateur peut utiliser via un menu contextuel ou un menu rattaché à un bouton.
+
+Une commande peut être définie explicitement, avec un texte et éventuellement une icône ou bien faire référence à une commande décrite dans un autre élément. Une commande peut prendre la forme d'une case à cocher ou d’un groupe de boutons radio.
+
+## Attributs
+
+Cet élément inclut également [les attributs universels](/fr/docs/Web/HTML/Attributs_universels) et notamment `title` qui peut être utilisé afin de décrire une commande ou pour fournir des indications quant à l'utilisation de celle-ci.
+
+- {{htmlattrdef("checked")}}
+  - : Un attribut booléen qui indique si la commande est sélectionné. Cet attribut peut uniquement être utilisé lorsque l'attribut `type` vaut `checkbox` ou `radio`.
+- {{htmlattrdef("command")}}
+  - : Cet attribut définit l'identifiant d'un autre élément qui indique une commande invoquée indirectement. Cet attribut ne peut pas être utilisé si les attributs `checked`, `disabled`, `icon`, `label`, `radiogroup` ou `type` sont utilisés.
+- {{htmlattrdef("default")}}
+  - : Un attribut booléen qui indique la commande par défaut du menu.
+- {{htmlattrdef("disabled")}}
+  - : Un attribut booléen qui indique que la commande n'est pas disponible dans l'état actuel. On notera que `disabled` est sémantiquement différent de `hidden`.
+- {{htmlattrdef("icon")}}
+  - : Une URL vers image qui représente la commande.
+- {{htmlattrdef("label")}}
+  - : Le nom de la commande affiché pour l'utilisateur. Cet attribut est obligatoire lorsque l'attribut `command` est absent.
+- {{htmlattrdef("radiogroup")}}
+  - : Cet attribut indique le nom d'un groupe de commandes étant des boutons radio. Cet attribut peut uniquement être utilisé lorsque `type` vaut `radio`.
+- {{htmlattrdef("type")}}
+
+  - : Cet attribut indique le type de commande dans le menu. C'est un attribut à valeur contrainte qui peut prendre une des valeurs suivantes :
+
+    - `command` : une commande associée à une action donnée. C'est la valeur par défaut de l'attribut.
+    - `checkbox` : une commande qui peut avoir un état parmi deux états différents.
+    - `radio` : une commande qui représente une sélection au sein d'un groupe de commandes qui sont des boutons radio.
+
+## Exemples
+
+### HTML
+
+```html
+<!-- Un élément <div> avec un menu contextuel -->
+<div contextmenu="popup-menu">
   Effectuez un clic-droit pour voir le menu contextuel
-&lt;/div&gt;
+</div>
 
-&lt;menu type="context" id="popup-menu"&gt;
-  &lt;menuitem type="checkbox" checked&gt;Une case à cocher&lt;/menuitem&gt;
-  &lt;hr&gt;
-  &lt;menuitem type="command" label="Cette commande ne fait rien" icon="https://developer.mozilla.org/static/img/favicon144.png"&gt;
+<menu type="context" id="popup-menu">
+  <menuitem type="checkbox" checked>Une case à cocher</menuitem>
+  <hr>
+  <menuitem type="command" label="Cette commande ne fait rien" icon="https://developer.mozilla.org/static/img/favicon144.png">
     Les commandes n'affichent pas leurs contenus.
-  &lt;/menuitem&gt;
-  &lt;menuitem type="command" label="Cette commande contient du JavAScript" onclick="alert('command clicked')"&gt;
+  </menuitem>
+  <menuitem type="command" label="Cette commande contient du JavAScript" onclick="alert('command clicked')">
     Les commandes n'affichent pas leurs contenus.
-  &lt;/menuitem&gt;
-  &lt;hr&gt;
-  &lt;menuitem type="radio" radiogroup="group1"&gt;Bouton radio 1&lt;/menuitem&gt;
-  &lt;menuitem type="radio" radiogroup="group1"&gt;Bouton radio 2&lt;/menuitem&gt;
-&lt;/menu&gt;
-</pre>
+  </menuitem>
+  <hr>
+  <menuitem type="radio" radiogroup="group1">Bouton radio 1</menuitem>
+  <menuitem type="radio" radiogroup="group1">Bouton radio 2</menuitem>
+</menu>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">div {
+```css
+div {
   width: 300px;
   height: 80px;
   background-color: lightgreen;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples', '300', '80')}}</p>
+{{EmbedLiveSample('Exemples', '300', '80')}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Aucun, c'est un élément vide.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>Cet élément doit avoir une balise ouvrante et ne doit pas avoir de balise fermante.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément {{HTMLElement("menu")}} lorsque son attribut vaut <code>type</code> ou que cet élément <code>&lt;menu&gt;</code> est lui même le fils d'un élément <code>&lt;menu</code>&gt;.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLMenuItemElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Aucun, c'est un élément vide.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        Cet élément doit avoir une balise ouvrante et ne doit pas avoir de
+        balise fermante.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Un élément {{HTMLElement("menu")}} lorsque son attribut vaut
+        <code>type</code> ou que cet élément <code>&#x3C;menu></code> est lui
+        même le fils d'un élément <code>&#x3C;menu</code>>.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLMenuItemElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "obsolete.html#menuitem", "&lt;menuitem&gt;")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Aucune modification depuis la dernière dérivation {{SpecName("HTML5.2")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.2", "obsolete.html#elementdef-menuitem", "&lt;menuitem&gt;")}}</td>
-   <td>{{Spec2("HTML5.2")}}</td>
-   <td>Dérivation de {{SpecName("HTML WHATWG")}}, rendue obsolète.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "interactive-elements.html#the-menuitem-element", "&lt;menuitem&gt;")}}</td>
-   <td>{{Spec2("HTML5.1")}}</td>
-   <td>Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                | État                             | Commentaires                                                                       |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------------- |
+| {{SpecName("HTML WHATWG", "obsolete.html#menuitem", "&lt;menuitem&gt;")}}                             | {{Spec2("HTML WHATWG")}} | Aucune modification depuis la dernière dérivation {{SpecName("HTML5.2")}} |
+| {{SpecName("HTML5.2", "obsolete.html#elementdef-menuitem", "&lt;menuitem&gt;")}}                 | {{Spec2("HTML5.2")}}     | Dérivation de {{SpecName("HTML WHATWG")}}, rendue obsolète.               |
+| {{SpecName("HTML5.1", "interactive-elements.html#the-menuitem-element", "&lt;menuitem&gt;")}} | {{Spec2("HTML5.1")}}     | Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.           |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.menuitem")}}</p>
+{{Compat("html.elements.menuitem")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("menu")}}</li>
- <li><a href="https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">Les menus contextuels HTML5 dans Firefox</a></li>
-</ul>
+- {{HTMLElement("menu")}}
+- [Les menus contextuels HTML5 dans Firefox](https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/)
diff --git a/files/fr/web/html/element/meta/index.md b/files/fr/web/html/element/meta/index.md
index d02f6807b6..351753a1f6 100644
--- a/files/fr/web/html/element/meta/index.md
+++ b/files/fr/web/html/element/meta/index.md
@@ -8,458 +8,548 @@ tags:
   - Web
 translation_of: Web/HTML/Element/meta
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;meta&gt;</code></strong> représente toute information de métadonnées qui ne peut pas être représentée par un des éléments ({{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} ou {{HTMLElement("title")}})</p>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>Comme tous les autres éléments, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
-
-<div class="note">
-<p><strong>Note :</strong> Il faut préciser que l'attribut {{htmlattrxref("name", "meta")}} possède une signification spécifique à l'élément {{HTMLElement("meta")}} et que l'attribut {{htmlattrxref("itemprop")}} ne doit pas être utilisé quand l'un de ces attributs est déjà utilisé : {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}}.</p>
-</div>
-
-<dl>
- <dt>{{htmlattrdef("charset")}}</dt>
- <dd>Cet attribut déclare l'encodage utilisé par la page. Il peut être outrepassé de manière locale en utilisant l'attribut <code><strong>lang</strong></code> d'un élément. La valeur de cet attribut est une chaîne de caractères et doit être l'un des <em>noms MIME préférés</em> d'un encodage comme <a href="https://www.iana.org/assignments/character-sets/character-sets.xml">spécifié par l'IANA</a>. Bien que le standard ne fixe pas d'encodage particulier, il fournit cependant quelques recommendations :
- <ul>
-  <li>Les auteurs sont invités à utiliser UTF-8.</li>
-  <li>Les auteurs ne devraient pas utiliser d'encodage incompatible avec l'ASCII (c'est à dire ceux dont les codes 8-bits de 0x20 à 0x7E ne correspondent pas, de manière respective, aux codes Unicode 0x0020 à 0x007E) car ceux-ci représentent un risque de sécurité, les navigateurs ne les supportant pas pouvant traduire du contenu bénin en des éléments HTML. Ceci est le cas pour les jeux de caractères suivants : <code>JIS_C6226-1983</code>, <code>JIS_X0212-1990</code>, <code>HZ-GB-2312</code>, <code>JOHAB</code>, la famille d'encodage <code>ISO-2022</code> et la famille d'encodage <code>EBCDIC</code>.</li>
-  <li>
-   <div class="warning">
-   <p><strong>Attention :</strong> Les auteurs ne doivent pas utiliser <code>CESU-8</code>, <code>UTF-7</code>, <code>BOCU-1</code> et <code>SCSU</code>. Ceux-ci rejoignent le cas précédents et n'ont pas été conçus pour être utilisés sur le web. Certaines attaques de types XSS (<em>Cross-site scripting</em>) ont pu être recensées avec ces encodages.</p>
-   </div>
-  </li>
-  <li>
-   <div class="warning">
-   <p><strong>Attention :</strong> Les auteurs ne devraient pas utiliser <code>UTF-32</code> car certains algorithmes d'encodage HTML5 ne peuvent différiencer <code>UTF-32</code> de <code>UTF-16</code>.</p>
-   </div>
-  </li>
- </ul>
-
- <div class="note"><p><strong>Note :</strong></p>
-
- <ul>
-  <li>Le jeux de caractères déclaré doit correspondre à celui utilisé dans la page. Il est inutile de déclarer un jeu de caractères incorrect (cela entraînant également une mauvaise expérience utilisateur).</li>
-  <li>L'élément {{HTMLElement("meta")}} doit appartenir à l'élément {{HTMLElement("head")}} et doit apparaître parmi les <strong>512 premiers octets de la page</strong>. En effet, certains navigateurs ne consultent seulement ces premiers octets pour déterminer l'encodage utilisé pour la page.</li>
-  <li>L'élément {{HTMLElement("meta")}} ne représente qu'une partie de l'<a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm">algorithme déterminant le jeu de caractères</a> à appliquer sur la page par le navigateur. Ainsi, l'en-tête HTTP Content-Type et tous les éléments BOM auront une priorité supérieure à cet élément.</li>
-  <li>Définir le jeu de caractères utilisé grâce à cet attribut représente une bonne pratique et est fortement recommandé. Si aucun encodage n'est défini pour la page, plusieurs techniques XSS peuvent porter atteinte à l'utilisateur (voir l'exemple de la <a class="external" href="https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7">technique XSS de recours à UTF-7</a>). Toujours renseigner cet élément meta protégera contre ces dangers.</li>
-  <li>L'élément {{HTMLElement("meta")}} est un synonyme de <code>&lt;meta http-equiv="Content-Type" content="text/html; charset=<em>IANAcharset</em>"&gt;</code> utilisé avant HTML5. Ici <em><code>IANAcharset</code> </em>correspond à la valeur de l'attribut {{htmlattrxref("charset", "meta")}} correspondant. Bien qu'elle soit obsolète et qu'elle ne soit plus recommandée, cette syntaxe est toujours autorisée.</li>
- </ul>
- </div>
- </dd>
- <dt>{{htmlattrdef("content")}}</dt>
- <dd>Cet attribut fournit la valeur associée avec l'attribut {{htmlattrxref("http-equiv", "meta")}} ou l'attribut {{htmlattrxref("name", "meta")}} suivant le contexte utilisé.</dd>
- <dt>{{htmlattrdef("http-equiv")}}</dt>
- <dd>Cet attribut pouvant prendre des valeurs pré-définies représente un objet pouvant modifier le comportement des serveurs ou des agents utilisateur. Sa valeur est définie grâce à l'attribut {{htmlattrxref("content", "meta")}} et peut être l'une des suivantes :
- <dl>
-  <dt><code>content-language</code> {{obsolete_inline}}</dt>
-  <dd>Définit la langue par défaut utilisée par une page
-  <div class="warning"><p><strong>Attention :</strong> Cette valeur n'est plus recommandée et ne doit donc plus être utilisée. L'attribut <code><strong>lang</strong></code> de l'élément {{HTMLElement("body")}} doit être utilisé pour remplir cette fonction.</p></div>
-  </dd>
-  <dt><code>Content-Security-Policy</code></dt>
-  <dd>Cette valeur permet aux administrateurs de sites web de définir des règles de gestion de contenu pour les ressources qui sont servies. Cela permet notamment d'indiquer les origines valides et les points d'accès aux scripts afin de protéger contre les attaques XSS.</dd>
-  <dt><code>content-type</code> {{obsolete_inline}}</dt>
-  <dd>Ce champ d'attribut définit le <a href="/fr/docs/Glossaire/Type_MIME">type MIME</a> du document et peut être suivi par son jeu de caractères. Il respecte la même syntaxe que le champ <code>content-type</code> appartenant à l'en-tête HTTP. Cet attribut faisant, lui, partie d'un élément HTML, il n'est pas possible d'utiliser la plupart des valeurs. La syntaxe correcte pour son contenu est donc la chaîne de caractère <code>'text/html</code>' éventuellement suivie par un jeu de caractères avec la syntaxe suivante : '<code>; charset=</code><em><code>IANAcharset</code></em>' où <code>IANAcharset</code> est l'appellation MIME du jeu de caractères, <a class="external" href="https://www.iana.org/assignments/character-sets">présentée par l'IANA</a>
-  <div class="warning"><p><strong>Attention :</strong></p>
-  <ul>
-   <li>Ce champ n'est plus recommandé et ne donc doit pas être utilisé. L'attribut {{htmlattrxref("charset", "meta")}} de l'élément {{HTMLElement("meta")}} doit être utilisé à la place.</li>
-   <li>Étant donné que l'élément {{HTMLElement("meta")}} peut ne pas être utilisé pour changer le type d'un document XHTML, ou d'un document HTML5 précédé par une syntaxe XHTML, il ne faut pas utiliser ce champs pour définir un type MIME étant un type MIME XHTML. Cela serait incorrect.</li>
-   <li>Seuls les documents HTML peuvent utiliser ce champ, cela entraîne donc une certaine redondance. C'est pourquoi il a été rendu obsolète et remplacé par l'attribut {{htmlattrxref("charset", "meta")}}.</li>
-  </ul>
-  </div>
-  </dd>
-  <dt><code>refresh</code></dt>
-  <dd>Ce champ définit :
-  <ul>
-   <li>le nombre de secondes qu'il faudrait attendre avant de recharger la page si l'attribut {{htmlattrxref("content", "meta")}} contient seulement un nombre entier positif</li>
-   <li>le nombre de secondes qu'il faudrait attendre avant que la page soit redirigée vers une autre page, si l'attribut {{htmlattrxref("content", "meta")}} contient un nombre entier positif suivi par la chaîne de caractères '<code>;url=</code>' ainsi qu'une URL valide.</li>
-  </ul>
-  </dd>
-  <dt><code>set-cookie</code> {{obsolete_inline}}{{non-standard_inline}}</dt>
-  <dd>Ce champ définit un cookie pour la page. Son contenu doit respecter la syntaxe énoncée par la <a class="external" href="https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14">IETF HTTP Cookie Specification</a>.
-  <div class="warning"><p><strong>Attention :</strong> Ce champ est désormais obsolète et ne doit donc pas être utilisé. L'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Set-Cookie">Set-Cookie</a> doit être utilisée à la place. Cette valeur a été retirée du standard et n'est plus prise en charge à partir de <a href="https://www.fxsitecompat.dev/en-CA/docs/2019/setting-cookies-with-meta-http-equiv-is-no-longer-allowed/">Firefox 68</a> et de <a href="https://www.chromestatus.com/feature/6170540112871424">Chrome 65</a>.</p></div>
-  </dd>
- </dl>
- </dd>
- <dt>{{htmlattrdef("name")}}</dt>
- <dd>Cet attribut définit le nom d'un métadonnée au niveau du document. Il ne doit pas être utilisé si l'un des attributs {{htmlattrxref("itemprop", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}} est utilisé.<br>
- Le nom de la métadonnée document est associé à une valeur contenue dans l'attribut {{htmlattrxref("content", "meta")}}. Les noms possibles et la signification de leurs valeurs (contenues dans l'attribut {{htmlattrxref("content", "meta")}}) sont :
- <ul>
-  <li><code>application-name</code>, qui définit le nom de l'application web utilisée dans la page
-   <div class="note"><p><strong>Note :</strong></p>
-   <ul>
-    <li>Les navigateurs peuvent l'utiliser pour identifier l'application. Il est à distinguer de l'élément {{HTMLElement("title")}} qui contient généralement le nom de l'application mais qui contient aussi des informations comme le nom du document ou un statut</li>
-    <li>Les pages web simples ne devraient pas utiliser cet attribut de métadonnée.</li>
-   </ul>
-   </div>
-  </li>
-  <li><code>author</code>, définit le nom de l'auteur du document (pas de contrainte de format)</li>
-  <li><code>description</code>, contient un résumé concis et pertinent du contenu de la page. Plusieurs navigateurs, dont Firefox et Opera, utilisent cette métadonnée comme description de la page lorsque celle-ci est mise dans les favoris.</li>
-  <li><code>generator</code>, contient l'identifiant du logiciel ayant généré la page (pas de contrainte de format)</li>
-  <li><code>keywords</code>, contient une liste de mots-clés séparés par des virgules. Ces mots-clés sont pertinents et relatifs au contenu de la page.</li>
-  <li><code>referrer</code> qui contrôle <a href="/fr/docs/Web/HTTP/Headers/Referer">l'en-tête HTTP <code>Referer</code> </a>attachée aux requêtes envoyées à partir du document :
-   <table class="standard-table">
-    <caption>Valeurs pour l'attribut <code>content</code> de <code>&lt;meta name="referrer"&gt;</code></caption>
-    <tbody>
-     <tr>
-      <td><code>no-referrer</code></td>
-      <td>Aucun en-tête HTTP <code>Referer</code> n'est envoyé.</td>
-     </tr>
-     <tr>
-      <td><code>origin</code></td>
-      <td>Seule l'<a href="/fr/docs/Glossary/Origin">origine</a> du document est envoyée.</td>
-     </tr>
-     <tr>
-      <td><code>no-referrer-when-downgrade</code></td>
-      <td>L'<a href="/fr/docs/Glossary/Origin">origine</a> est envoyée envers les URL qui sont aussi sécurisée que la page courante (https→https). Aucun référent n'est envoyé lorsque l'URL est moins sécurisée (https→http). Cette valeur est la valeur par défaut.</td>
-     </tr>
-     <tr>
-      <td><code>origin-when-crossorigin</code></td>
-      <td>L'URL complète (sans les paramètres) est envoyée pour les requêtes provenant de la même origine. Dans les autres cas, seule l'<a href="/fr/docs/Glossary/Origin">origine</a> est envoyée.</td>
-     </tr>
-     <tr>
-      <td><code>same-origin</code></td>
-      <td>Un référent est envoyé <a href="/fr:docs/Web/Security/Same-origin_policy">pour les sites d'origine équivalente</a>, mais les requêtes entre différentes origines ne contiendra pas de référent.</td>
-     </tr>
-     <tr>
-      <td><code>strict-origin</code></td>
-      <td>Seule l'origine du document est envoyée pour les destinations <em>a priori</em> aussi sécurisées que la page courante (HTTPS-&gt;HTTPS) mais cette information n'est pas envoyée vers une destination moins sécurisée (HTTPS-&gt;HTTP).</td>
-     </tr>
-     <tr>
-      <td><code>strict-origin-when-cross-origin</code></td>
-      <td>L'URL complète est envoyée pour une requête provenant de la même origine. Seule l'origine du document est envoyée pour les destinations aussi sécurisées que la page (HTTPS-&gt;HTTPS), aucun en-tête n'est envoyé pour les destinations moins sécurisées (HTTPS-&gt;HTTP).</td>
-     </tr>
-     <tr>
-      <td><code>unsafe-URL</code></td>
-      <td>L'URL complète (sans les paramètres) est envoyée pour les requête d'origines équivalents et pour les autres requêtes (<em>cross-origin</em>).</td>
-     </tr>
-    </tbody>
-   </table>
-
-   <div class="note">
-   <p><strong>Note :</strong></p>
-
-   <ul>
-    <li>Certains navigateurs prennent en charge les valeurs dépréciées <code>always</code>, <code>default</code> et <code>never</code>.</li>
-    <li>L'insertion dynamique de <code>&lt;meta name="referrer"&gt;</code> (grâce à <a href="/fr/docs/Web/API/Document/write"><code>document.write</code></a> ou <a href="/fr/docs/Web/API/Node/appendChild"><code>appendChild</code></a>) rend le comportement imprévisible.</li>
-    <li>Lorsque plusieurs règles conflictuelles sont définies, c'est la règle <code>no-referrer</code> qui est appliquée.</li>
-   </ul>
-   </div>
-  </li>
-  <li><code>theme-color</code> qui indique une suggestion de couleur que l'agent utilisateur devrait prendre en compte afin de personnaliser l'affichage de la page ou l'interface utilisateur environnante. L'attribut <code>content</code> contiendra une couleur valide au sens CSS (cf. {{cssxref("&lt;color&gt;")}}).</li>
-  <li>
-   <dl>
-    <dt><code>color-scheme</code></dt>
-    <dd>
-    <p>Définit un ou plusieurs modes de couleurs avec lesquels le document est compatible. Le navigateur utilisera cette information ainsi que les réglages du navigateur ou de l'appareil pour déterminer les couleurs à utiliser (que ce soit pour l'arrière-plan, les contrôles, les barres de défilement, etc.). <code>&lt;meta name="color-scheme"&gt;</code> sert principalement à indiquer la compatibilité et la préférence pour les différents modes de couleur (sombre / clair entre autres).</p>
-
-    <p>La valeur de {{htmlattrxref("content","meta")}} pour <code>color-scheme</code> peut être :</p>
-
-    <dl>
-     <dt><code>normal</code></dt>
-     <dd>Le document n'est pas affecté par les modes de couleurs et devrait utiliser la palette de couleur par défaut.</dd>
-     <dt><code>[light</code> | <code>dark]+</code></dt>
-     <dd>Un ou plusieurs modes de couleurs sont pris en charge par le document. Si un nom de mode est répété, cela est équivalent à le mentionner une seule fois. Lorsque plusieurs modes sont présents, cela indique une préférence pour le premier et aussi que le second est acceptable si l'utilisateur préfère celui-ci.</dd>
-     <dt><code>only light</code></dt>
-     <dd>Indique que le document prend uniquement en charge un mode clair (avec un fond clair et du contenu sombre). La valeur <code>only dark</code> n'est pas valide selon la spécification car le mode sombre est généralement mois lisible et que les navigateurs utilisent un mode clair par défaut.</dd>
-    </dl>
-
-    <p>Ainsi, si on préfére utiliser un mode sombre et laisser le mode clair utilisable, on pourra écrire :</p>
-
-    <pre class="brush: html">&lt;meta name="color-scheme" content="dark light"&gt;</pre>
-
-    <p>Cela fonctionne pour l'ensemble du document. Pour cibler des éléments en particulier, on pourra utiliser la propriété CSS {{cssxref("color-scheme")}}. La mise en forme pourra tirer parti du mode utilisé par le système grâce à la caractéristique <code><a href="/fr/docs/Web/CSS/@media/prefers-color-scheme">prefers-color-scheme</a></code>.</p>
-    </dd>
-   </dl>
-  </li>
- </ul>
-
- <p>Cet attribut peut également avoir une valeur définie dans une liste plus large : <a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions</a>. Bien qu'aucune n'ait encore été acceptée, certaines sont parfois utilisées fréquemment :</p>
-
- <ul>
-  <li><code>creator</code>, définit le nom du créateur du document (sans contrainte de format). Cela peut être le nom d'une institution. Si plusieurs créateurs sont à recenser, plusieurs éléments {{HTMLElement("meta")}} devront être utilisés</li>
-  <li><code>googlebot</code>, synonyme de <code>robots</code>, est suivi par Googlebot, le robot de Google qui indexe les pages</li>
-  <li><code>publisher</code>, définit le nom de l'éditeur du document (sans contrainte de format). Cela peut être le nom d'une institution.</li>
-  <li><code>robots</code>, définit le comportement que les robots d'indexation devraient respecter. C'est une liste de valeurs séparées par des virgules. La liste qui suit définit les valeurs que l'on peut utiliser :
-   <table class="standard-table">
-    <caption>Valeurs pour le contenu de <code>&lt;meta name="robots"&gt;</code></caption>
-    <thead>
-     <tr>
-      <th scope="col">Valeur</th>
-      <th scope="col">Description</th>
-      <th scope="col">Utilisé par</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-      <td><code>index</code></td>
-      <td>Permet au robot d'indexer la page</td>
-      <td>Tous</td>
-     </tr>
-     <tr>
-      <td><code>noindex</code></td>
-      <td>Interdit au robot d'indexer la page</td>
-      <td>Tous</td>
-     </tr>
-     <tr>
-      <td><code>follow</code></td>
-      <td>Permet au robot de suivre les liens contenus dans la page</td>
-      <td>Tous</td>
-     </tr>
-     <tr>
-      <td><code>nofollow</code></td>
-      <td>Interdit au robot de suivre les liens contenus dans la page</td>
-      <td>Tous</td>
-     </tr>
-     <tr>
-      <td><code>none</code></td>
-      <td>Synonyme de <code>noindex</code>, <code>nofollow</code></td>
-      <td><a href="https://support.google.com/webmasters/answer/79812">Google</a></td>
-     </tr>
-     <tr>
-      <td><code>noodp</code></td>
-      <td>Empêche que la description <a class="external" href="https://www.dmoz-odp.org/">Open Directory Project</a> si celle-ci est présente, soit affichée dans les résultats du moteur de recherche</td>
-      <td>
-       <p><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&amp;answer=79812">Google</a>, <a href="https://help.yahoo.com/l/us/yahoo/search/indexing/indexing-11.html;_ylt=Arh3LHnisvRMPJKzQqmJ97JYqCN4">Yahoo</a>, <a href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></p>
-      </td>
-     </tr>
-     <tr>
-      <td><code>noarchive</code></td>
-      <td>Empêche le moteur de recherche de mettre en cache le contenu de la page</td>
-      <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&amp;answer=79812">Google</a>, <a class="external" href="https://help.yahoo.com/l/us/yahoo/search/indexing/basics-10.html;_ylt=Aszma_Ly8TfhL7mn_LGWn5RYqCN4">Yahoo</a></td>
-     </tr>
-     <tr>
-      <td><code>nosnippet</code></td>
-      <td>Empêche l'affichage de la description de la page dans les résultats du moteur de recherche</td>
-      <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?answer=35304">Google</a></td>
-     </tr>
-     <tr>
-      <td><code>noimageindex</code></td>
-      <td>Empêche la page d'apparaître en tant que page de référence ayant permis l'indexation de l'image</td>
-      <td><a class="external" href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&amp;answer=79812">Google</a></td>
-     </tr>
-     <tr>
-      <td><code>noydir</code></td>
-      <td>Empêche l'utilisation et l'affichage de la description Yahoo Directory parmi les résultats du moteur de recherche, si celle-ci est présente</td>
-      <td>Yahoo</td>
-     </tr>
-     <tr>
-      <td><code>nocache</code></td>
-      <td>Synonyme de <code>noarchive</code></td>
-      <td>Bing</td>
-     </tr>
-    </tbody>
-   </table>
-
-   <div class="note"><p><strong>Note :</strong></p>
-
-   <ul>
-    <li>Seuls les robots « respectueux » suivront ces règles. Il ne faut pas considérer cela comme une manière efficace de blocage (robots indexeurs cherchant des adresses e-mails pour le spam notamment)</li>
-    <li>Le robot aura besoin d'accéder à la page pour lire la valeur de la métadonnée. Afin d'empêcher des accès intempestifs (par exemple pour réduire le débit utilisé) un fichier <em>{{Glossary("robots.txt")}}</em> doit être utilisé en priorité (ou en complément).</li>
-    <li>Si vous souhaitez retirer la page du contenu d'un index, la valeur <code>noindex</code> fonctionnera mais seulement à partir de la prochaine analyse. Assurez-vous de ne pas bloquer cette analyse (par exemple avec le fichier <code><a href="/fr/docs/Glossaire/Robots.txt">robots.txt</a></code>). Certains moteurs de recherches ont des outils destinés aux développeurs qui permettent de rapidement désindexer une page.</li>
-    <li>Certaines valeurs sont contradictoires et incompatibles : <code>index</code> et <code>noindex</code>, ou <code>follow</code> et <code>nofollow</code>. Dans le cas où ces valeurs sont utilisées simultanément, le comportement d'un robot est indéfini et peut varier selon les robots. Il est donc conseillé d'éviter de tels cas de figures.</li>
-    <li>Certains robots, comme ceux de Google, Yahoo Search ou Bing, supportent ces valeurs quand elles sont utilisées dans une directive HTTP <code>X-Robots-Tags</code>: . Cela permet d'utiliser cette information pour des documents non-HTML comme les images.</li>
-   </ul>
-   </div>
-  </li>
-  <li><code>slurp</code>, synonyme de <code>robots</code>, qui est suivi uniquement par Slurp, le robot d'indexation de Yahoo Search.</li>
- </ul>
-
- <p>Enfin, quelques noms sont utilisés fréquemment mais sont pas considérés comme standards :</p>
-
- <ul>
-  <li><code>viewport</code>, qui donne une indication quant à la taille du <a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a> (vue virtuelle). Cette information est utilisée pour les terminaux mobiles uniquement :<br>
-    <br>
-
-   <table class="fullwidth-table">
-    <caption>Valeurs pour le contenu de &lt;meta name="viewport"&gt;</caption>
-    <thead>
-     <tr>
-      <th scope="col">Valeur</th>
-      <th scope="col">Valeurs possibles</th>
-      <th scope="col">Description</th>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-      <td><code>width</code></td>
-      <td>un nombre entier positif ou le mot-clé <code>device-width</code></td>
-      <td>Définit la largeur, en pixels, de la zone d'affichage (<em>viewport</em>) dans laquelle on veut que le site soit affiché.</td>
-     </tr>
-     <tr>
-      <td><code>height</code></td>
-      <td>un nombre entier positif ou le mot-clé <code>device-height</code></td>
-      <td>Définit la hauteur, en pixels, de la zone d'affichage (viewport) dans laquelle on veut que le site soit affiché.</td>
-     </tr>
-     <tr>
-      <td><code>initial-scale</code></td>
-      <td>un nombre positif entre <code>0.0</code> et <code>10.0</code></td>
-      <td>définit le ratio entre la taille de l'écran du terminal (<code>device-width</code> en portrait ou <code>device-height</code> en paysage) et la taille de la zone d'affichage.</td>
-     </tr>
-     <tr>
-      <td><code>maximum-scale</code></td>
-      <td>un nombre positif entre <code>0.0</code> et <code>10.0</code></td>
-      <td>définit la valeur maximale du zoom possible. Doit être supérieur ou égal à<code> minimum-scale</code>, sinon le comportement est indéterminé</td>
-     </tr>
-     <tr>
-      <td><code>minimum-scale</code></td>
-      <td>un nombre positif entre <code>0.0</code> et <code>10.0</code></td>
-      <td>définit la valeur minimale du zoom possible. Doit être inférieur ou égal à<code> maximum-scale</code>, sinon le comportement est indéterminé</td>
-     </tr>
-     <tr>
-      <td><code>user-scalable</code></td>
-      <td>un booléen (<code>yes</code> ou <code>no</code>)</td>
-      <td>Si la valeur est <code>no</code>, l'utilisateur ne pourra pas zoomer sur le document. Par défaut, la valeur est <code>yes</code>.</td>
-     </tr>
-    </tbody>
-   </table>
-
-   <div class="warning"><p><strong>Attention :</strong></p>
-
-   <ul>
-    <li>Bien qu'il ne fasse pas partie du standard, cet attribut est utilisé par plusieurs navigateurs mobiles comme Safari Mobile, Firefox pour Mobile ou Opera Mobile.</li>
-    <li>Les valeurs par défaut peuvent être différentes suivant les appareils et les navigateurs.</li>
-    <li>Pour en savoir plus sur l'utilisation faite de cet attribut par Firefox pour Mobile, vous pouvez lire <a href="/fr/docs/Mozilla/Mobile/Viewport_meta_tag">cet article</a>.</li>
-   </ul>
-   </div>
-  </li>
- </ul>
- </dd>
- <dt>{{htmlattrdef("scheme")}} {{obsolete_inline}}</dt>
- <dd>Cet attribut définit le schéma dans lequel la métadonnée est décrite. Un schéma, de la même manière qu'un format, est un contexte permettant d'interpréter correctement la valeur de l'attribut {{htmlattrxref("content", "meta")}}.
- <div class="warning"><p><strong>Attention :</strong> Cet attribut a été déprécié et ne doit donc plus être utilisé. Il n'y pas d'attributs ou d'éléments remplaçant sa fonction car cet attribut n'était pas usité.</p></div>
- </dd>
-</dl>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Selon les attributs qui sont renseignés, la métadonnée peut être de différentes sortes :</p>
-
-<ul>
- <li>si {{htmlattrxref("name", "meta")}} est renseigné, c'est une <em>métadonnée de document</em> s'appliquant à la page entière,</li>
- <li>si {{htmlattrxref("http-equiv", "meta")}} est renseigné, c'est une information transmise au serveur web indiquant comment la page doit être servie (<em>pragma directive</em> en anglais),</li>
- <li>si {{htmlattrxref("charset", "meta")}} est renseigné, c'est une déclaration sur le jeu de caractères, autrement dit l'ensemble de caractères utilisés pour la version sérialisée de la page web,</li>
- <li>si {{htmlattrxref("itemprop", "meta")}} est renseigné, c'est une métadonnée définie par l'utilisateur, gérée de manière transparente par l'agent utilisateur car la signification de cette métadonnée est spécifique à l'utilisateur. {{experimental_inline}}</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;!-- En HTML5 --&gt;
-&lt;meta charset="utf-8"&gt;
-
-&lt;!-- Rediriger la page après 3 secondes --&gt;
-&lt;meta http-equiv="refresh" content="3;url=http://www.mozilla.org"&gt;
-
-</pre>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<h3 id="Rafraîchir_le_contenu">Rafraîchir le contenu</h3>
-
-<p>Les pages utilisant une valeur de <code>refresh</code> trop petite peuvent ne pas laisser le temps nécessaire à la compréhension aux personnes qui utilisent un lecteur d'écran. Le changement brutal de contenu peut également être source de confusion pour les personnes à faible vision.</p>
-
-<ul>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">Comprendre les règles WCAG 2.1</a></li>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">Comprendre les règles WCAG 3.1</a></li>
- <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 W3C Understanding WCAG 2.0</a></em></li>
- <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 W3C Understanding WCAG 2.0</a></em></li>
- <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 W3C Understanding WCAG 2.0</a></em></li>
-</ul>
-
-<h3 id="Redimensionner_la_zone_d'affichage_(viewport)">Redimensionner la zone d'affichage (<em>viewport</em>)</h3>
-
-<p>Désactiver la possibilité de zoom avec <code>user-scalable: no</code> empêche les personnes à faible vision de lire et de comprendre le contenu de la page.</p>
-
-<ul>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Comprendre les règles WCAG 1.4</a></li>
- <li><em><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 W3C Understanding WCAG 2.0</a></em></li>
-</ul>
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+{{HTMLRef}}
+
+L'élément HTML **`<meta>`** représente toute information de métadonnées qui ne peut pas être représentée par un des éléments ({{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} ou {{HTMLElement("title")}})
+
+## Attributs
+
+Comme tous les autres éléments, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
+
+> **Note :** Il faut préciser que l'attribut {{htmlattrxref("name", "meta")}} possède une signification spécifique à l'élément {{HTMLElement("meta")}} et que l'attribut {{htmlattrxref("itemprop")}} ne doit pas être utilisé quand l'un de ces attributs est déjà utilisé : {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}}.
+
+- {{htmlattrdef("charset")}}
+
+  - : Cet attribut déclare l'encodage utilisé par la page. Il peut être outrepassé de manière locale en utilisant l'attribut **`lang`** d'un élément. La valeur de cet attribut est une chaîne de caractères et doit être l'un des _noms MIME préférés_ d'un encodage comme [spécifié par l'IANA](https://www.iana.org/assignments/character-sets/character-sets.xml). Bien que le standard ne fixe pas d'encodage particulier, il fournit cependant quelques recommendations :
+
+    - Les auteurs sont invités à utiliser UTF-8.
+    - Les auteurs ne devraient pas utiliser d'encodage incompatible avec l'ASCII (c'est à dire ceux dont les codes 8-bits de 0x20 à 0x7E ne correspondent pas, de manière respective, aux codes Unicode 0x0020 à 0x007E) car ceux-ci représentent un risque de sécurité, les navigateurs ne les supportant pas pouvant traduire du contenu bénin en des éléments HTML. Ceci est le cas pour les jeux de caractères suivants : `JIS_C6226-1983`, `JIS_X0212-1990`, `HZ-GB-2312`, `JOHAB`, la famille d'encodage `ISO-2022` et la famille d'encodage `EBCDIC`.
+    - > **Attention :** Les auteurs ne doivent pas utiliser `CESU-8`, `UTF-7`, `BOCU-1` et `SCSU`. Ceux-ci rejoignent le cas précédents et n'ont pas été conçus pour être utilisés sur le web. Certaines attaques de types XSS (_Cross-site scripting_) ont pu être recensées avec ces encodages.
+    - > **Attention :** Les auteurs ne devraient pas utiliser `UTF-32` car certains algorithmes d'encodage HTML5 ne peuvent différiencer `UTF-32` de `UTF-16`.
+
+    > **Note :**
+    >
+    > - Le jeux de caractères déclaré doit correspondre à celui utilisé dans la page. Il est inutile de déclarer un jeu de caractères incorrect (cela entraînant également une mauvaise expérience utilisateur).
+    > - L'élément {{HTMLElement("meta")}} doit appartenir à l'élément {{HTMLElement("head")}} et doit apparaître parmi les **512 premiers octets de la page**. En effet, certains navigateurs ne consultent seulement ces premiers octets pour déterminer l'encodage utilisé pour la page.
+    > - L'élément {{HTMLElement("meta")}} ne représente qu'une partie de l'[algorithme déterminant le jeu de caractères](https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm) à appliquer sur la page par le navigateur. Ainsi, l'en-tête HTTP Content-Type et tous les éléments BOM auront une priorité supérieure à cet élément.
+    > - Définir le jeu de caractères utilisé grâce à cet attribut représente une bonne pratique et est fortement recommandé. Si aucun encodage n'est défini pour la page, plusieurs techniques XSS peuvent porter atteinte à l'utilisateur (voir l'exemple de la [technique XSS de recours à UTF-7](https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7)). Toujours renseigner cet élément meta protégera contre ces dangers.
+    > - L'élément {{HTMLElement("meta")}} est un synonyme de `<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">` utilisé avant HTML5. Ici *`IANAcharset` *correspond à la valeur de l'attribut {{htmlattrxref("charset", "meta")}} correspondant. Bien qu'elle soit obsolète et qu'elle ne soit plus recommandée, cette syntaxe est toujours autorisée.
+
+- {{htmlattrdef("content")}}
+  - : Cet attribut fournit la valeur associée avec l'attribut {{htmlattrxref("http-equiv", "meta")}} ou l'attribut {{htmlattrxref("name", "meta")}} suivant le contexte utilisé.
+- {{htmlattrdef("http-equiv")}}
+
+  - : Cet attribut pouvant prendre des valeurs pré-définies représente un objet pouvant modifier le comportement des serveurs ou des agents utilisateur. Sa valeur est définie grâce à l'attribut {{htmlattrxref("content", "meta")}} et peut être l'une des suivantes :
+
+    - `content-language` {{obsolete_inline}}
+
+      - : Définit la langue par défaut utilisée par une page
+
+        > **Attention :** Cette valeur n'est plus recommandée et ne doit donc plus être utilisée. L'attribut **`lang`** de l'élément {{HTMLElement("body")}} doit être utilisé pour remplir cette fonction.
+
+    - `Content-Security-Policy`
+      - : Cette valeur permet aux administrateurs de sites web de définir des règles de gestion de contenu pour les ressources qui sont servies. Cela permet notamment d'indiquer les origines valides et les points d'accès aux scripts afin de protéger contre les attaques XSS.
+    - `content-type` {{obsolete_inline}}
+
+      - : Ce champ d'attribut définit le [type MIME](/fr/docs/Glossaire/Type_MIME) du document et peut être suivi par son jeu de caractères. Il respecte la même syntaxe que le champ `content-type` appartenant à l'en-tête HTTP. Cet attribut faisant, lui, partie d'un élément HTML, il n'est pas possible d'utiliser la plupart des valeurs. La syntaxe correcte pour son contenu est donc la chaîne de caractère `'text/html`' éventuellement suivie par un jeu de caractères avec la syntaxe suivante : '`; charset=`_`IANAcharset`_' où `IANAcharset` est l'appellation MIME du jeu de caractères, [présentée par l'IANA](https://www.iana.org/assignments/character-sets)
+
+        > **Attention :**
+        >
+        > - Ce champ n'est plus recommandé et ne donc doit pas être utilisé. L'attribut {{htmlattrxref("charset", "meta")}} de l'élément {{HTMLElement("meta")}} doit être utilisé à la place.
+        > - Étant donné que l'élément {{HTMLElement("meta")}} peut ne pas être utilisé pour changer le type d'un document XHTML, ou d'un document HTML5 précédé par une syntaxe XHTML, il ne faut pas utiliser ce champs pour définir un type MIME étant un type MIME XHTML. Cela serait incorrect.
+        > - Seuls les documents HTML peuvent utiliser ce champ, cela entraîne donc une certaine redondance. C'est pourquoi il a été rendu obsolète et remplacé par l'attribut {{htmlattrxref("charset", "meta")}}.
+
+    - `refresh`
+
+      - : Ce champ définit :
+
+        - le nombre de secondes qu'il faudrait attendre avant de recharger la page si l'attribut {{htmlattrxref("content", "meta")}} contient seulement un nombre entier positif
+        - le nombre de secondes qu'il faudrait attendre avant que la page soit redirigée vers une autre page, si l'attribut {{htmlattrxref("content", "meta")}} contient un nombre entier positif suivi par la chaîne de caractères '`;url=`' ainsi qu'une URL valide.
+
+    - `set-cookie` {{obsolete_inline}}{{non-standard_inline}}
+
+      - : Ce champ définit un cookie pour la page. Son contenu doit respecter la syntaxe énoncée par la [IETF HTTP Cookie Specification](https://tools.ietf.org/html/draft-ietf-httpstate-cookie-14).
+
+        > **Attention :** Ce champ est désormais obsolète et ne doit donc pas être utilisé. L'en-tête HTTP [Set-Cookie](/fr/docs/Web/HTTP/Headers/Set-Cookie) doit être utilisée à la place. Cette valeur a été retirée du standard et n'est plus prise en charge à partir de [Firefox 68](https://www.fxsitecompat.dev/en-CA/docs/2019/setting-cookies-with-meta-http-equiv-is-no-longer-allowed/) et de [Chrome 65](https://www.chromestatus.com/feature/6170540112871424).
+
+- {{htmlattrdef("name")}}
+
+  - : Cet attribut définit le nom d'un métadonnée au niveau du document. Il ne doit pas être utilisé si l'un des attributs {{htmlattrxref("itemprop", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} ou {{htmlattrxref("charset", "meta")}} est utilisé.
+    Le nom de la métadonnée document est associé à une valeur contenue dans l'attribut {{htmlattrxref("content", "meta")}}. Les noms possibles et la signification de leurs valeurs (contenues dans l'attribut {{htmlattrxref("content", "meta")}}) sont :
+
+    - `application-name`, qui définit le nom de l'application web utilisée dans la page
+
+      > **Note :**
+      >
+      > - Les navigateurs peuvent l'utiliser pour identifier l'application. Il est à distinguer de l'élément {{HTMLElement("title")}} qui contient généralement le nom de l'application mais qui contient aussi des informations comme le nom du document ou un statut
+      > - Les pages web simples ne devraient pas utiliser cet attribut de métadonnée.
+
+    - `author`, définit le nom de l'auteur du document (pas de contrainte de format)
+    - `description`, contient un résumé concis et pertinent du contenu de la page. Plusieurs navigateurs, dont Firefox et Opera, utilisent cette métadonnée comme description de la page lorsque celle-ci est mise dans les favoris.
+    - `generator`, contient l'identifiant du logiciel ayant généré la page (pas de contrainte de format)
+    - `keywords`, contient une liste de mots-clés séparés par des virgules. Ces mots-clés sont pertinents et relatifs au contenu de la page.
+    - `referrer` qui contrôle [l'en-tête HTTP `Referer` ](/fr/docs/Web/HTTP/Headers/Referer)attachée aux requêtes envoyées à partir du document :
+
+      <table class="standard-table">
+        <caption>
+          Valeurs pour l'attribut
+          <code>content</code>
+          de
+          <code>&#x3C;meta name="referrer"></code>
+        </caption>
+        <tbody>
+          <tr>
+            <td><code>no-referrer</code></td>
+            <td>Aucun en-tête HTTP <code>Referer</code> n'est envoyé.</td>
+          </tr>
+          <tr>
+            <td><code>origin</code></td>
+            <td>
+              Seule l'<a href="/fr/docs/Glossary/Origin">origine</a> du document est
+              envoyée.
+            </td>
+          </tr>
+          <tr>
+            <td><code>no-referrer-when-downgrade</code></td>
+            <td>
+              L'<a href="/fr/docs/Glossary/Origin">origine</a> est envoyée envers les
+              URL qui sont aussi sécurisée que la page courante (https→https). Aucun
+              référent n'est envoyé lorsque l'URL est moins sécurisée (https→http).
+              Cette valeur est la valeur par défaut.
+            </td>
+          </tr>
+          <tr>
+            <td><code>origin-when-crossorigin</code></td>
+            <td>
+              L'URL complète (sans les paramètres) est envoyée pour les requêtes
+              provenant de la même origine. Dans les autres cas, seule l'<a
+                href="/fr/docs/Glossary/Origin"
+                >origine</a
+              >
+              est envoyée.
+            </td>
+          </tr>
+          <tr>
+            <td><code>same-origin</code></td>
+            <td>
+              Un référent est envoyé
+              <a href="/fr:docs/Web/Security/Same-origin_policy"
+                >pour les sites d'origine équivalente</a
+              >, mais les requêtes entre différentes origines ne contiendra pas de
+              référent.
+            </td>
+          </tr>
+          <tr>
+            <td><code>strict-origin</code></td>
+            <td>
+              Seule l'origine du document est envoyée pour les destinations
+              <em>a priori</em> aussi sécurisées que la page courante (HTTPS->HTTPS)
+              mais cette information n'est pas envoyée vers une destination moins
+              sécurisée (HTTPS->HTTP).
+            </td>
+          </tr>
+          <tr>
+            <td><code>strict-origin-when-cross-origin</code></td>
+            <td>
+              L'URL complète est envoyée pour une requête provenant de la même
+              origine. Seule l'origine du document est envoyée pour les destinations
+              aussi sécurisées que la page (HTTPS->HTTPS), aucun en-tête n'est envoyé
+              pour les destinations moins sécurisées (HTTPS->HTTP).
+            </td>
+          </tr>
+          <tr>
+            <td><code>unsafe-URL</code></td>
+            <td>
+              L'URL complète (sans les paramètres) est envoyée pour les requête
+              d'origines équivalents et pour les autres requêtes
+              (<em>cross-origin</em>).
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      > **Note :**
+      >
+      > - Certains navigateurs prennent en charge les valeurs dépréciées `always`, `default` et `never`.
+      > - L'insertion dynamique de `<meta name="referrer">` (grâce à [`document.write`](/fr/docs/Web/API/Document/write) ou [`appendChild`](/fr/docs/Web/API/Node/appendChild)) rend le comportement imprévisible.
+      > - Lorsque plusieurs règles conflictuelles sont définies, c'est la règle `no-referrer` qui est appliquée.
+
+    - `theme-color` qui indique une suggestion de couleur que l'agent utilisateur devrait prendre en compte afin de personnaliser l'affichage de la page ou l'interface utilisateur environnante. L'attribut `content` contiendra une couleur valide au sens CSS (cf. {{cssxref("&lt;color&gt;")}}).
+    - - `color-scheme`
+
+        - : Définit un ou plusieurs modes de couleurs avec lesquels le document est compatible. Le navigateur utilisera cette information ainsi que les réglages du navigateur ou de l'appareil pour déterminer les couleurs à utiliser (que ce soit pour l'arrière-plan, les contrôles, les barres de défilement, etc.). `<meta name="color-scheme">` sert principalement à indiquer la compatibilité et la préférence pour les différents modes de couleur (sombre / clair entre autres).
+
+          La valeur de {{htmlattrxref("content","meta")}} pour `color-scheme` peut être :
+
+          - `normal`
+            - : Le document n'est pas affecté par les modes de couleurs et devrait utiliser la palette de couleur par défaut.
+          - `[light` | `dark]+`
+            - : Un ou plusieurs modes de couleurs sont pris en charge par le document. Si un nom de mode est répété, cela est équivalent à le mentionner une seule fois. Lorsque plusieurs modes sont présents, cela indique une préférence pour le premier et aussi que le second est acceptable si l'utilisateur préfère celui-ci.
+          - `only light`
+            - : Indique que le document prend uniquement en charge un mode clair (avec un fond clair et du contenu sombre). La valeur `only dark` n'est pas valide selon la spécification car le mode sombre est généralement mois lisible et que les navigateurs utilisent un mode clair par défaut.
+
+          Ainsi, si on préfére utiliser un mode sombre et laisser le mode clair utilisable, on pourra écrire :
+
+          ```html
+          <meta name="color-scheme" content="dark light">
+          ```
+
+          Cela fonctionne pour l'ensemble du document. Pour cibler des éléments en particulier, on pourra utiliser la propriété CSS {{cssxref("color-scheme")}}. La mise en forme pourra tirer parti du mode utilisé par le système grâce à la caractéristique [`prefers-color-scheme`](/fr/docs/Web/CSS/@media/prefers-color-scheme).
+
+    Cet attribut peut également avoir une valeur définie dans une liste plus large : [WHATWG Wiki MetaExtensions](https://wiki.whatwg.org/wiki/MetaExtensions). Bien qu'aucune n'ait encore été acceptée, certaines sont parfois utilisées fréquemment :
+
+    - `creator`, définit le nom du créateur du document (sans contrainte de format). Cela peut être le nom d'une institution. Si plusieurs créateurs sont à recenser, plusieurs éléments {{HTMLElement("meta")}} devront être utilisés
+    - `googlebot`, synonyme de `robots`, est suivi par Googlebot, le robot de Google qui indexe les pages
+    - `publisher`, définit le nom de l'éditeur du document (sans contrainte de format). Cela peut être le nom d'une institution.
+    - `robots`, définit le comportement que les robots d'indexation devraient respecter. C'est une liste de valeurs séparées par des virgules. La liste qui suit définit les valeurs que l'on peut utiliser :
+
+      <table class="standard-table">
+        <caption>
+          Valeurs pour le contenu de
+          <code>&#x3C;meta name="robots"></code>
+        </caption>
+        <thead>
+          <tr>
+            <th scope="col">Valeur</th>
+            <th scope="col">Description</th>
+            <th scope="col">Utilisé par</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><code>index</code></td>
+            <td>Permet au robot d'indexer la page</td>
+            <td>Tous</td>
+          </tr>
+          <tr>
+            <td><code>noindex</code></td>
+            <td>Interdit au robot d'indexer la page</td>
+            <td>Tous</td>
+          </tr>
+          <tr>
+            <td><code>follow</code></td>
+            <td>Permet au robot de suivre les liens contenus dans la page</td>
+            <td>Tous</td>
+          </tr>
+          <tr>
+            <td><code>nofollow</code></td>
+            <td>Interdit au robot de suivre les liens contenus dans la page</td>
+            <td>Tous</td>
+          </tr>
+          <tr>
+            <td><code>none</code></td>
+            <td>Synonyme de <code>noindex</code>, <code>nofollow</code></td>
+            <td>
+              <a href="https://support.google.com/webmasters/answer/79812">Google</a>
+            </td>
+          </tr>
+          <tr>
+            <td><code>noodp</code></td>
+            <td>
+              Empêche que la description
+              <a class="external" href="https://www.dmoz-odp.org/"
+                >Open Directory Project</a
+              >
+              si celle-ci est présente, soit affichée dans les résultats du moteur de
+              recherche
+            </td>
+            <td>
+              <p>
+                <a
+                  class="external"
+                  href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&#x26;answer=79812"
+                  >Google</a
+                >,
+                <a
+                  href="https://help.yahoo.com/l/us/yahoo/search/indexing/indexing-11.html;_ylt=Arh3LHnisvRMPJKzQqmJ97JYqCN4"
+                  >Yahoo</a
+                >,
+                <a
+                  href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240"
+                  >Bing</a
+                >
+              </p>
+            </td>
+          </tr>
+          <tr>
+            <td><code>noarchive</code></td>
+            <td>
+              Empêche le moteur de recherche de mettre en cache le contenu de la page
+            </td>
+            <td>
+              <a
+                class="external"
+                href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&#x26;answer=79812"
+                >Google</a
+              >,
+              <a
+                class="external"
+                href="https://help.yahoo.com/l/us/yahoo/search/indexing/basics-10.html;_ylt=Aszma_Ly8TfhL7mn_LGWn5RYqCN4"
+                >Yahoo</a
+              >
+            </td>
+          </tr>
+          <tr>
+            <td><code>nosnippet</code></td>
+            <td>
+              Empêche l'affichage de la description de la page dans les résultats du
+              moteur de recherche
+            </td>
+            <td>
+              <a
+                class="external"
+                href="https://www.google.com/support/webmasters/bin/answer.py?answer=35304"
+                >Google</a
+              >
+            </td>
+          </tr>
+          <tr>
+            <td><code>noimageindex</code></td>
+            <td>
+              Empêche la page d'apparaître en tant que page de référence ayant permis
+              l'indexation de l'image
+            </td>
+            <td>
+              <a
+                class="external"
+                href="https://www.google.com/support/webmasters/bin/answer.py?hl=en&#x26;answer=79812"
+                >Google</a
+              >
+            </td>
+          </tr>
+          <tr>
+            <td><code>noydir</code></td>
+            <td>
+              Empêche l'utilisation et l'affichage de la description Yahoo Directory
+              parmi les résultats du moteur de recherche, si celle-ci est présente
+            </td>
+            <td>Yahoo</td>
+          </tr>
+          <tr>
+            <td><code>nocache</code></td>
+            <td>Synonyme de <code>noarchive</code></td>
+            <td>Bing</td>
+          </tr>
+        </tbody>
+      </table>
+
+      > **Note :**
+      >
+      > - Seuls les robots « respectueux » suivront ces règles. Il ne faut pas considérer cela comme une manière efficace de blocage (robots indexeurs cherchant des adresses e-mails pour le spam notamment)
+      > - Le robot aura besoin d'accéder à la page pour lire la valeur de la métadonnée. Afin d'empêcher des accès intempestifs (par exemple pour réduire le débit utilisé) un fichier _{{Glossary("robots.txt")}}_ doit être utilisé en priorité (ou en complément).
+      > - Si vous souhaitez retirer la page du contenu d'un index, la valeur `noindex` fonctionnera mais seulement à partir de la prochaine analyse. Assurez-vous de ne pas bloquer cette analyse (par exemple avec le fichier [`robots.txt`](/fr/docs/Glossaire/Robots.txt)). Certains moteurs de recherches ont des outils destinés aux développeurs qui permettent de rapidement désindexer une page.
+      > - Certaines valeurs sont contradictoires et incompatibles : `index` et `noindex`, ou `follow` et `nofollow`. Dans le cas où ces valeurs sont utilisées simultanément, le comportement d'un robot est indéfini et peut varier selon les robots. Il est donc conseillé d'éviter de tels cas de figures.
+      > - Certains robots, comme ceux de Google, Yahoo Search ou Bing, supportent ces valeurs quand elles sont utilisées dans une directive HTTP `X-Robots-Tags`: . Cela permet d'utiliser cette information pour des documents non-HTML comme les images.
+
+    - `slurp`, synonyme de `robots`, qui est suivi uniquement par Slurp, le robot d'indexation de Yahoo Search.
+
+    Enfin, quelques noms sont utilisés fréquemment mais sont pas considérés comme standards :
+
+    - `viewport`, qui donne une indication quant à la taille du [viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag) (vue virtuelle). Cette information est utilisée pour les terminaux mobiles uniquement :
+
+
+
+      <table class="fullwidth-table">
+        <caption>
+          Valeurs pour le contenu de &#x3C;meta name="viewport">
+        </caption>
+        <thead>
+          <tr>
+            <th scope="col">Valeur</th>
+            <th scope="col">Valeurs possibles</th>
+            <th scope="col">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td><code>width</code></td>
+            <td>un nombre entier positif ou le mot-clé <code>device-width</code></td>
+            <td>
+              Définit la largeur, en pixels, de la zone d'affichage
+              (<em>viewport</em>) dans laquelle on veut que le site soit affiché.
+            </td>
+          </tr>
+          <tr>
+            <td><code>height</code></td>
+            <td>un nombre entier positif ou le mot-clé <code>device-height</code></td>
+            <td>
+              Définit la hauteur, en pixels, de la zone d'affichage (viewport) dans
+              laquelle on veut que le site soit affiché.
+            </td>
+          </tr>
+          <tr>
+            <td><code>initial-scale</code></td>
+            <td>un nombre positif entre <code>0.0</code> et <code>10.0</code></td>
+            <td>
+              définit le ratio entre la taille de l'écran du terminal (<code
+                >device-width</code
+              >
+              en portrait ou <code>device-height</code> en paysage) et la taille de la
+              zone d'affichage.
+            </td>
+          </tr>
+          <tr>
+            <td><code>maximum-scale</code></td>
+            <td>un nombre positif entre <code>0.0</code> et <code>10.0</code></td>
+            <td>
+              définit la valeur maximale du zoom possible. Doit être supérieur ou égal
+              à<code> minimum-scale</code>, sinon le comportement est indéterminé
+            </td>
+          </tr>
+          <tr>
+            <td><code>minimum-scale</code></td>
+            <td>un nombre positif entre <code>0.0</code> et <code>10.0</code></td>
+            <td>
+              définit la valeur minimale du zoom possible. Doit être inférieur ou égal
+              à<code> maximum-scale</code>, sinon le comportement est indéterminé
+            </td>
+          </tr>
+          <tr>
+            <td><code>user-scalable</code></td>
+            <td>un booléen (<code>yes</code> ou <code>no</code>)</td>
+            <td>
+              Si la valeur est <code>no</code>, l'utilisateur ne pourra pas zoomer sur
+              le document. Par défaut, la valeur est <code>yes</code>.
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      > **Attention :**
+      >
+      > - Bien qu'il ne fasse pas partie du standard, cet attribut est utilisé par plusieurs navigateurs mobiles comme Safari Mobile, Firefox pour Mobile ou Opera Mobile.
+      > - Les valeurs par défaut peuvent être différentes suivant les appareils et les navigateurs.
+      > - Pour en savoir plus sur l'utilisation faite de cet attribut par Firefox pour Mobile, vous pouvez lire [cet article](/fr/docs/Mozilla/Mobile/Viewport_meta_tag).
+
+- {{htmlattrdef("scheme")}} {{obsolete_inline}}
+
+  - : Cet attribut définit le schéma dans lequel la métadonnée est décrite. Un schéma, de la même manière qu'un format, est un contexte permettant d'interpréter correctement la valeur de l'attribut {{htmlattrxref("content", "meta")}}.
+
+    > **Attention :** Cet attribut a été déprécié et ne doit donc plus être utilisé. Il n'y pas d'attributs ou d'éléments remplaçant sa fonction car cet attribut n'était pas usité.
+
+## Notes
+
+Selon les attributs qui sont renseignés, la métadonnée peut être de différentes sortes :
+
+- si {{htmlattrxref("name", "meta")}} est renseigné, c'est une _métadonnée de document_ s'appliquant à la page entière,
+- si {{htmlattrxref("http-equiv", "meta")}} est renseigné, c'est une information transmise au serveur web indiquant comment la page doit être servie (_pragma directive_ en anglais),
+- si {{htmlattrxref("charset", "meta")}} est renseigné, c'est une déclaration sur le jeu de caractères, autrement dit l'ensemble de caractères utilisés pour la version sérialisée de la page web,
+- si {{htmlattrxref("itemprop", "meta")}} est renseigné, c'est une métadonnée définie par l'utilisateur, gérée de manière transparente par l'agent utilisateur car la signification de cette métadonnée est spécifique à l'utilisateur. {{experimental_inline}}
+
+## Exemples
+
+### HTML
+
+```html
+<!-- En HTML5 -->
+<meta charset="utf-8">
+
+<!-- Rediriger la page après 3 secondes -->
+<meta http-equiv="refresh" content="3;url=http://www.mozilla.org">
+```
+
+## Accessibilité
+
+### Rafraîchir le contenu
+
+Les pages utilisant une valeur de `refresh` trop petite peuvent ne pas laisser le temps nécessaire à la compréhension aux personnes qui utilisent un lecteur d'écran. Le changement brutal de contenu peut également être source de confusion pour les personnes à faible vision.
+
+- [Comprendre les règles WCAG 2.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content)
+- [Comprendre les règles WCAG 3.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways)
+- _[Understanding Success Criterion 2.2.1 W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html)_
+- _[Understanding Success Criterion 2.2.4 W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html)_
+- _[Understanding Success Criterion 3.2.5 W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html)_
+
+### Redimensionner la zone d'affichage (_viewport_)
+
+Désactiver la possibilité de zoom avec `user-scalable: no` empêche les personnes à faible vision de lire et de comprendre le contenu de la page.
+
+- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- _[Understanding Success Criterion 1.4.4 W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html)_
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td>Contenu de métadonnées. Si l'attribut {{htmlattrxref("itemprop")}} est utilisé : du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a> ou du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th><dfn>Contenu autorisé</dfn></th>
-   <td>Aucun cet élément est un élément vide.</td>
-  </tr>
-  <tr>
-   <th><dfn>Omission de balises</dfn></th>
-   <td>Étant un élément vide, la balise de début doit être présente et la balise de fin doit être absente.</td>
-  </tr>
-  <tr>
-   <th><dfn>Éléments parents autorisés</dfn></th>
-   <td><code>&lt;meta charset&gt;</code>, <code>&lt;meta http-equiv&gt;</code> : un élément {{HTMLElement("head")}}. Si l'attribut {{htmlattrxref("http-equiv", "meta")}} n'est pas une déclaration d'encodage, l'élément peut également être au sein d'un élément {{HTMLElement("noscript")}} lui-même contenu par un élément {{HTMLElement("head")}}.<br>
-    <code>&lt;meta name&gt;</code> : tout élément acceptant du contenu de métadonnées.<br>
-    <code>&lt;meta itemprop&gt;</code> : tout élément acceptant du contenu de métadonnées ou du contenu phrasé.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th>Interface DOM</th>
-   <td>{{domxref("HTMLMetaElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        Contenu de métadonnées. Si l'attribut
+        {{htmlattrxref("itemprop")}} est utilisé : du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >
+        ou du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th><dfn>Contenu autorisé</dfn></th>
+      <td>Aucun cet élément est un élément vide.</td>
+    </tr>
+    <tr>
+      <th><dfn>Omission de balises</dfn></th>
+      <td>
+        Étant un élément vide, la balise de début doit être présente et la
+        balise de fin doit être absente.
+      </td>
+    </tr>
+    <tr>
+      <th><dfn>Éléments parents autorisés</dfn></th>
+      <td>
+        <code>&#x3C;meta charset></code>, <code>&#x3C;meta http-equiv></code> :
+        un élément {{HTMLElement("head")}}. Si l'attribut
+        {{htmlattrxref("http-equiv", "meta")}} n'est pas une
+        déclaration d'encodage, l'élément peut également être au sein d'un
+        élément {{HTMLElement("noscript")}} lui-même contenu par un
+        élément {{HTMLElement("head")}}.<br /><code
+          >&#x3C;meta name></code
+        >
+        : tout élément acceptant du contenu de métadonnées.<br /><code
+          >&#x3C;meta itemprop></code
+        >
+        : tout élément acceptant du contenu de métadonnées ou du contenu phrasé.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th>Interface DOM</th>
+      <td>{{domxref("HTMLMetaElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', '&lt;meta name="referrer"&gt;')}}</td>
-   <td>{{Spec2('Referrer Policy')}}</td>
-   <td>Définition des valeurs et de la sémantique associée pour <code>&lt;meta name="referrer"&gt;</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '&lt;meta&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Ajout de l'attribut <code>itemprop</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-meta-element', '&lt;meta&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Ajout de l'attribut <code>charset</code></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.4.2', '&lt;meta&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                    | État                                 | Commentaires                                                                       |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------- |
+| {{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', '&lt;meta name="referrer"&gt;')}} | {{Spec2('Referrer Policy')}} | Définition des valeurs et de la sémantique associée pour `<meta name="referrer">`. |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '&lt;meta&gt;')}}                         | {{Spec2('HTML WHATWG')}}     | Ajout de l'attribut `itemprop`                                                     |
+| {{SpecName('HTML5 W3C', 'document-metadata.html#the-meta-element', '&lt;meta&gt;')}}                 | {{Spec2('HTML5 W3C')}}         | Ajout de l'attribut `charset`                                                      |
+| {{SpecName('HTML4.01', 'struct/global.html#h-7.4.4.2', '&lt;meta&gt;')}}                                 | {{Spec2('HTML4.01')}}         |                                                                                    |
+
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("html.elements.meta")}}
 
-<p>{{Compat("html.elements.meta")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- Les autres éléments relatifs aux métadonnées :
 
-<ul>
- <li>Les autres éléments relatifs aux métadonnées :
-  <ul>
-   <li>{{HTMLElement("base")}}</li>
-   <li>{{HTMLElement("head")}}</li>
-   <li>{{HTMLElement("link")}}</li>
-   <li>{{HTMLElement("style")}}</li>
-   <li>{{HTMLElement("title")}}</li>
-  </ul>
- </li>
-</ul>
+  - {{HTMLElement("base")}}
+  - {{HTMLElement("head")}}
+  - {{HTMLElement("link")}}
+  - {{HTMLElement("style")}}
+  - {{HTMLElement("title")}}
diff --git a/files/fr/web/html/element/meter/index.md b/files/fr/web/html/element/meter/index.md
index 117cc298f6..440299e3e3 100644
--- a/files/fr/web/html/element/meter/index.md
+++ b/files/fr/web/html/element/meter/index.md
@@ -9,133 +9,149 @@ tags:
   - Web
 translation_of: Web/HTML/Element/meter
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;meter&gt;</code></strong> représente une valeur scalaire dans un intervalle donné ou une valeur fractionnaire.</p>
+L'élément HTML **`<meter>`** représente une valeur scalaire dans un intervalle donné ou une valeur fractionnaire.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme pour les autres éléments HTML, cet élément inclut également <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Comme pour les autres éléments HTML, cet élément inclut également [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("form")}}</dt>
- <dd>Cet attribut contient l'attribut <code><strong>id</strong></code> de l'élément {{HTMLElement("form")}} auquel celui-ci est rattaché. Par défaut, il est à l'élément {{HTMLElement("form")}} qui est son plus proche ancêtre.</dd>
- <dt>{{htmlattrdef("high")}}</dt>
- <dd>Cet attribut représente la valeur minimale à partir de laquelle la mesure est considérée comme haute. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si l'attribut <code><strong>low</strong></code> est aussi défini, il doit être plus grand que celui-ci.</dd>
- <dt>{{htmlattrdef("low")}}</dt>
- <dd>Cet attribut représente la valeur maximale à partir de laquelle la mesure est considérée comme basse. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si l'attribut <code><strong>high</strong></code> est aussi défini, il doit être plus petit que celui-ci.</dd>
- <dt>{{htmlattrdef("max")}}</dt>
- <dd>Cet attribut représente la valeur maximale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 1.0. Il doit être strictement plus grand que la valeur de l'attribut <code><strong>min</strong></code>.</dd>
- <dt>{{htmlattrdef("min")}}</dt>
- <dd>Cet attribut représente la valeur minimale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 0.0. Il doit être strictement plus petit que la valeur de l'attribut <code><strong>max</strong></code>.</dd>
- <dt>{{htmlattrdef("optimum")}}</dt>
- <dd>Cet attribut représente la valeur idéale pour la mesure. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs <code><strong>min </strong></code>et <code><strong>max</strong></code>. Si la valeur de <code><strong>optimum</strong></code> est inférieure à <code><strong>low</strong></code>, s'il est défini, cela signifie que les valeurs les plus petites sont meilleures; si sa valeur est supérieure à <code><strong>high</strong></code>, s'il est défini, cela signifie que les valeurs les plus grandes sont meilleures; enfin, s'il est compris entre <code><strong>low </strong></code>et <code><strong>high</strong></code>, cela signifie que les extrêmes ne sont pas les meilleures grandeurs.</dd>
- <dt>{{htmlattrdef("value")}}</dt>
- <dd>Cette attribut représente la valeur courante de la mesure. Cet attribut est obligatoire.
- <div class="note">
- <p><strong>Note :</strong> il est recommandé aux auteurs de dupliquer les valeurs des attributs <strong><code>min</code>, </strong><code><strong>max</strong></code> et <code><strong>value</strong></code> dans le contenu de cet élément de façon à permettre aux navigateurs ne supportant pas l'élément {{ HTMLElement("meter") }} de transmettre ces informations aux utilisateurs. Par exemple :</p>
+- {{htmlattrdef("form")}}
+  - : Cet attribut contient l'attribut **`id`** de l'élément {{HTMLElement("form")}} auquel celui-ci est rattaché. Par défaut, il est à l'élément {{HTMLElement("form")}} qui est son plus proche ancêtre.
+- {{htmlattrdef("high")}}
+  - : Cet attribut représente la valeur minimale à partir de laquelle la mesure est considérée comme haute. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs **`min `**et **`max`**. Si l'attribut **`low`** est aussi défini, il doit être plus grand que celui-ci.
+- {{htmlattrdef("low")}}
+  - : Cet attribut représente la valeur maximale à partir de laquelle la mesure est considérée comme basse. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs **`min `**et **`max`**. Si l'attribut **`high`** est aussi défini, il doit être plus petit que celui-ci.
+- {{htmlattrdef("max")}}
+  - : Cet attribut représente la valeur maximale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 1.0. Il doit être strictement plus grand que la valeur de l'attribut **`min`**.
+- {{htmlattrdef("min")}}
+  - : Cet attribut représente la valeur minimale que peut prendre la mesure. Il doit s'agir d'un nombre à virgule; s'il est invalide ou si l'attribut n'est pas défini, sa valeur par défaut est 0.0. Il doit être strictement plus petit que la valeur de l'attribut **`max`**.
+- {{htmlattrdef("optimum")}}
+  - : Cet attribut représente la valeur idéale pour la mesure. Si cet attribut est défini, il doit s'agir d'un nombre à virgule compris entre les valeurs des attributs **`min `**et **`max`**. Si la valeur de **`optimum`** est inférieure à **`low`**, s'il est défini, cela signifie que les valeurs les plus petites sont meilleures; si sa valeur est supérieure à **`high`**, s'il est défini, cela signifie que les valeurs les plus grandes sont meilleures; enfin, s'il est compris entre **`low `**et **`high`**, cela signifie que les extrêmes ne sont pas les meilleures grandeurs.
+- {{htmlattrdef("value")}}
 
- <pre class="brush: html">Utilisation de l'espace de stockage:
-&lt;meter value=6 max=8&gt;
-  6 blocs utilisés (sur un total de 8)
-&lt;/meter&gt;</pre>
- <p>Il n'y a pas de moyen sémantique de décrire l'unité de l'attribut <code><strong>value</strong></code>, néanmoins l'attribut global <code><strong>title</strong></code> peut être utilisé pour cela.</p></div>
- </dd>
-</dl>
+  - : Cette attribut représente la valeur courante de la mesure. Cet attribut est obligatoire.
 
-<h2 id="Exemples">Exemples</h2>
+    > **Note :** il est recommandé aux auteurs de dupliquer les valeurs des attributs **`min`,** **`max`** et **`value`** dans le contenu de cet élément de façon à permettre aux navigateurs ne supportant pas l'élément {{ HTMLElement("meter") }} de transmettre ces informations aux utilisateurs. Par exemple :
+    >
+    > ```html
+    > Utilisation de l'espace de stockage:
+    > <meter value=6 max=8>
+    >   6 blocs utilisés (sur un total de 8)
+    > </meter>
+    > ```
+    >
+    > Il n'y a pas de moyen sémantique de décrire l'unité de l'attribut **`value`**, néanmoins l'attribut global **`title`** peut être utilisé pour cela.
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+## Exemples
 
-<h4 id="HTML">HTML</h4>
+### Exemple simple
 
-<pre class="brush: html">&lt;p&gt;Chauffez le four à
-  &lt;meter min="100" max="250" value="180"&gt;180 degrés&lt;/meter&gt;.
-&lt;/p&gt;
-</pre>
+#### HTML
 
-<h4 id="Résultat">Résultat</h4>
+```html
+<p>Chauffez le four à
+  <meter min="100" max="250" value="180">180 degrés</meter>.
+</p>
+```
 
-<p>{{EmbedLiveSample("Exemple_simple", 300, 60)}}</p>
+#### Résultat
 
-<h3 id="Utilisation_de_high_et_low">Utilisation de <code>high</code> et <code>low</code></h3>
+{{EmbedLiveSample("Exemple_simple", 300, 60)}}
 
-<p>On remarquera ici que l'attribut <code>min</code> est absent (ce qui est autorisé), la valeur minimale sera alors 0.</p>
+### Utilisation de `high` et `low`
 
-<h4 id="HTML_2">HTML</h4>
+On remarquera ici que l'attribut `min` est absent (ce qui est autorisé), la valeur minimale sera alors 0.
 
-<pre class="brush: html">&lt;p&gt;
+#### HTML
+
+```html
+<p>
   Il a eu
-  &lt;meter low="69" high="80" max="100" value="84"&gt;B&lt;/meter&gt;
+  <meter low="69" high="80" max="100" value="84">B</meter>
   à son examen.
-&lt;/p&gt;
-</pre>
+</p>
+```
+
+#### Résultat
 
-<h4 id="Résultat_2">Résultat</h4>
+{{EmbedLiveSample("Utilisation_de_high_et_low", 300, 60)}}
 
-<p>{{EmbedLiveSample("Utilisation_de_high_et_low", 300, 60)}}</p>
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>, contenu étiquetable</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Contenu autorisé</dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> ne possédant pas d'élément <code>&lt;meter&gt;</code> parmi ses descendants.</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Omission de balises</dfn></th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Parents autorisés</dfn></th>
-   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLMeterElement")}}</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '&lt;meter&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >, contenu étiquetable
+      </td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Contenu autorisé</dfn></th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >
+        ne possédant pas d'élément <code>&#x3C;meter></code> parmi ses
+        descendants.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Omission de balises</dfn></th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Parents autorisés</dfn></th>
+      <td>
+        Tout élément acceptant du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLMeterElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
+
+| Spécification                                                                                        | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '&lt;meter&gt;')}} | {{Spec2('HTML WHATWG')}} |                      |
+| {{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '&lt;meter&gt;')}} | {{Spec2('HTML5 W3C')}}     | Définition initiale. |
+
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.meter")}}</p>
+{{Compat("html.elements.meter")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("progress")}}</li>
-</ul>
+- {{HTMLElement("progress")}}
diff --git a/files/fr/web/html/element/nav/index.md b/files/fr/web/html/element/nav/index.md
index 5d877594b7..e4d7c0b138 100644
--- a/files/fr/web/html/element/nav/index.md
+++ b/files/fr/web/html/element/nav/index.md
@@ -8,102 +8,110 @@ tags:
   - Web
 translation_of: Web/HTML/Element/nav
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong>&lt;nav&gt;</strong> représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page. Autrement dit, c'est une section destinée à la navigation dans un document (avec des menus, des tables des matières, des index, etc.).</p>
+L'élément HTML **\<nav>** représente une section d'une page ayant des liens vers d'autres pages ou des fragments de cette page. Autrement dit, c'est une section destinée à la navigation dans un document (avec des menus, des tables des matières, des index, etc.).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/nav.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/nav.html", "tabbed-standard")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément ne possède que <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>.</p>
+Cet élément ne possède que [les attributs universels](/fr/docs/Web/HTML/Global_attributes).
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<ul>
- <li>Tous les liens d'un document ne doivent pas faire partie d'un élément <code>&lt;nav&gt;</code>. Ce dernier est fait pour créer des blocs conséquents contenants des liens de navigations au sein du document. L'élément {{HTMLElement("footer")}} possède souvent différents liens, il n'a pour autant pas besoin d'être dans un élément {{HTMLElement("nav")}}.</li>
- <li>Un document peut avoir plusieurs éléments {{HTMLElement("nav")}}, par exemple un pour la navigation sur le site et  un autre pour la navigation au sein de la page. L'attribut <code><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby">aria-labelledby</a></code> pourra être utilisé afin d'améliorer l'accessibilité.</li>
- <li>Les agents utilisateurs, tels que les lecteurs d'écrans assistant les utilisateurs handicapés, peuvent utiliser cet élément pour déterminer s'il faut omettre ou non le rendu initial du contenu relatif uniquement à la navigation.</li>
-</ul>
+- Tous les liens d'un document ne doivent pas faire partie d'un élément `<nav>`. Ce dernier est fait pour créer des blocs conséquents contenants des liens de navigations au sein du document. L'élément {{HTMLElement("footer")}} possède souvent différents liens, il n'a pour autant pas besoin d'être dans un élément {{HTMLElement("nav")}}.
+- Un document peut avoir plusieurs éléments {{HTMLElement("nav")}}, par exemple un pour la navigation sur le site et  un autre pour la navigation au sein de la page. L'attribut [`aria-labelledby`](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby) pourra être utilisé afin d'améliorer l'accessibilité.
+- Les agents utilisateurs, tels que les lecteurs d'écrans assistant les utilisateurs handicapés, peuvent utiliser cet élément pour déterminer s'il faut omettre ou non le rendu initial du contenu relatif uniquement à la navigation.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;nav class="menu"&gt;
-  &lt;ul&gt;
-    &lt;li&gt;&lt;a href="#Accueil"&gt;Accueil&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#Apropos"&gt;À propos&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/nav&gt;
-</pre>
+```html
+<nav class="menu">
+  <ul>
+    <li><a href="#Accueil">Accueil</a></li>
+    <li><a href="#Apropos">À propos</a></li>
+    <li><a href="#Contact">Contact</a></li>
+  </ul>
+</nav>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
-<h2 id="Résumé_technique">Résumé technique</h2>
+{{EmbedLiveSample("Exemples","100%","100%")}}
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_sectionnant">contenu sectionnant</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Contenu autorisé</dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Omission de balises</dfn></th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Parents autorisés</dfn></th>
-   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification depuis la dernière dérivation.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '&lt;nav&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_sectionnant"
+          >contenu sectionnant</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Contenu autorisé</dfn></th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Omission de balises</dfn></th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Parents autorisés</dfn></th>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
+
+| Spécification                                                                                        | État                             | Commentaires                                       |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'sections.html#the-nav-element', '&lt;nav&gt;')}} | {{Spec2('HTML WHATWG')}} | Aucune modification depuis la dernière dérivation. |
+| {{SpecName('HTML5 W3C', 'sections.html#the-nav-element', '&lt;nav&gt;')}}     | {{Spec2('HTML5 W3C')}}     | Définition initiale.                               |
+
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.nav")}}</p>
+{{Compat("html.elements.nav")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les autres éléments HTML en relation avec les sections : {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
- <li><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Plan et section d'un document HTML5</a></li>
- <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">ARIA : le rôle <code>navigation</code></a></li>
-</ul>
+- Les autres éléments HTML en relation avec les sections : {{HTMLElement("body")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
+- [Plan et section d'un document HTML5](/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document)
+- [ARIA : le rôle `navigation`](/fr/docs/Web/Accessibility/ARIA/Roles/Navigation_Role)
diff --git a/files/fr/web/html/element/nobr/index.md b/files/fr/web/html/element/nobr/index.md
index 25296e38fa..d3266cad36 100644
--- a/files/fr/web/html/element/nobr/index.md
+++ b/files/fr/web/html/element/nobr/index.md
@@ -9,42 +9,27 @@ tags:
   - Web
 translation_of: Web/HTML/Element/nobr
 ---
-<div>{{HTMLRef}}{{obsolete_header}}{{non-standard_header}}</div>
+{{HTMLRef}}{{obsolete_header}}{{non-standard_header}}
 
-<p>L'élément HTML <strong><code>&lt;nobr&gt;</code></strong> évite qu'un texte soit coupé par un retour à la ligne automatique ; il est donc affiché sur une seule ligne. Il peut être alors nécessaire d'utiliser les barres de défilement pour lire le texte en intégralité.</p>
+L'élément HTML **`<nobr>`** évite qu'un texte soit coupé par un retour à la ligne automatique ; il est donc affiché sur une seule ligne. Il peut être alors nécessaire d'utiliser les barres de défilement pour lire le texte en intégralité.
 
-<div class="warning">
-<p><strong>Attention :</strong> Cet élément n'est pas standard en HTML et ne doit donc pas être utilisé. <strong>C'est la propriété CSS {{cssxref("white-space")}} doit être utilisée à la place</strong>, de cette manière :</p>
-</div>
+> **Attention :** Cet élément n'est pas standard en HTML et ne doit donc pas être utilisé. **C'est la propriété CSS {{cssxref("white-space")}} doit être utilisée à la place**, de cette manière :
 
-<pre class="brush: html">&lt;span style="white-space: nowrap"&gt;Un texte long sans retour à la ligne.&lt;/span&gt;</pre>
+```html
+<span style="white-space: nowrap">Un texte long sans retour à la ligne.</span>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "obsolete.html#nobr", "&lt;nobr&gt;")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Rendu obsolète et remplacé par {{CSSxRef("white-space")}}.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                             | Commentaires                                                         |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------- |
+| {{SpecName("HTML WHATWG", "obsolete.html#nobr", "&lt;nobr&gt;")}} | {{Spec2("HTML WHATWG")}} | Rendu obsolète et remplacé par {{CSSxRef("white-space")}}. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<div>{{Compat("html.elements.nobr")}}</div>
+{{Compat("html.elements.nobr")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("white-space")}}</li>
- <li>{{cssxref("overflow")}}</li>
-</ul>
+- {{cssxref("white-space")}}
+- {{cssxref("overflow")}}
diff --git a/files/fr/web/html/element/noembed/index.md b/files/fr/web/html/element/noembed/index.md
index 2215e87644..6bfb7e15db 100644
--- a/files/fr/web/html/element/noembed/index.md
+++ b/files/fr/web/html/element/noembed/index.md
@@ -9,32 +9,19 @@ tags:
   - Web
 translation_of: Web/HTML/Element/noembed
 ---
-<div>{{HTMLRef}}{{Non-standard_header}}{{obsolete_header}}</div>
+{{HTMLRef}}{{Non-standard_header}}{{obsolete_header}}
 
-<p>L'élément <code><strong>&lt;noembed&gt;</strong></code> est une façon obsolète et non standardisée de fournir une alternative de contenu pour les navigateurs ne supportant pas l'élément {{HTMLElement("embed")}} ou des <a href="/fr/docs/Web/HTML/Catégorie_de_contenu">catégories de contenu</a> qu'un auteur aimerait utiliser.<br>
- Cet élément a été rendu obsolète à partir de la version HTML 4.01 et a été remplacé par {{HTMLElement("object")}}. Le contenu alternatif doit être inséré entre la balise d'ouverture et celle de fermeture de {{HTMLElement("object")}}</p>
+L'élément **`<noembed>`** est une façon obsolète et non standardisée de fournir une alternative de contenu pour les navigateurs ne supportant pas l'élément {{HTMLElement("embed")}} ou des [catégories de contenu](/fr/docs/Web/HTML/Catégorie_de_contenu) qu'un auteur aimerait utiliser.
+Cet élément a été rendu obsolète à partir de la version HTML 4.01 et a été remplacé par {{HTMLElement("object")}}. Le contenu alternatif doit être inséré entre la balise d'ouverture et celle de fermeture de {{HTMLElement("object")}}
 
-<div class="note">
-<p><strong>Note :</strong> Bien que cet élément soit toujours supporté dans plusieurs navigateurs, il a été rendu obsolète et ne devrait pas être utilisé. Utilisez plutôt {{HTMLElement("object")}}</p>
-</div>
+> **Note :** Bien que cet élément soit toujours supporté dans plusieurs navigateurs, il a été rendu obsolète et ne devrait pas être utilisé. Utilisez plutôt {{HTMLElement("object")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#noembed', '&lt;noembed&gt;')}}</td>
-   <td>{{ Spec2('HTML WHATWG') }}</td>
-   <td>Indication que la fonctionnalité n'est pas conforme.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                | État                                 | Commentaires                                         |
+| ---------------------------------------------------------------------------- | ------------------------------------ | ---------------------------------------------------- |
+| {{SpecName('HTML WHATWG', '#noembed', '&lt;noembed&gt;')}} | {{ Spec2('HTML WHATWG') }} | Indication que la fonctionnalité n'est pas conforme. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.noembed")}}</p>
+{{Compat("html.elements.noembed")}}
diff --git a/files/fr/web/html/element/noframes/index.md b/files/fr/web/html/element/noframes/index.md
index fccceb6b8a..7ec076390b 100644
--- a/files/fr/web/html/element/noframes/index.md
+++ b/files/fr/web/html/element/noframes/index.md
@@ -9,72 +9,53 @@ tags:
   - Web
 translation_of: Web/HTML/Element/noframes
 ---
-<div>{{HTMLRef}}{{Obsolete_header}}</div>
+{{HTMLRef}}{{Obsolete_header}}
 
-<p>L'élément HTML obsolète <strong><code>&lt;noframes&gt;</code></strong> est utilisé par les navigateurs qui ne supportent pas les éléments {{HTMLElement("frame")}}, ou qui sont configurés afin de ne pas les supporter.</p>
+L'élément HTML obsolète **`<noframes>`** est utilisé par les navigateurs qui ne supportent pas les éléments {{HTMLElement("frame")}}, ou qui sont configurés afin de ne pas les supporter.
 
-<p><code>&lt;noframes&gt;</code> accepte n'importe quel élément HTML valide dans un élément {{HTMLElement("body")}}, à l'exception des éléments {{HTMLElement("frameset")}} et {{HTMLElement("frame")}}.</p>
+`<noframes>` accepte n'importe quel élément HTML valide dans un élément {{HTMLElement("body")}}, à l'exception des éléments {{HTMLElement("frameset")}} et {{HTMLElement("frame")}}.
 
-<p>Cet élément pouvait être utilisé afin d'afficher un message explicatif, destiné à l'utilisateur. Idéalement, le contenu devait présenter des fonctionnalités analogues à la <em>frame</em> qui n'était pas prise en charge.</p>
+Cet élément pouvait être utilisé afin d'afficher un message explicatif, destiné à l'utilisateur. Idéalement, le contenu devait présenter des fonctionnalités analogues à la _frame_ qui n'était pas prise en charge.
 
-<div class="note">
-  <p><strong>Note :</strong> Cet élément est aussi entièrement obsolète en HTML5, et doit être evité pour se conformer au standard.</p>
-</div>
+> **Note :** Cet élément est aussi entièrement obsolète en HTML5, et doit être evité pour se conformer au standard.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html">&lt;frameset cols="50%,50%"&gt;
-  &lt;frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frameset"/&gt;
-  &lt;frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frame"/&gt;
-  &lt;noframes&gt;
-    &lt;p&gt;
+```html
+<frameset cols="50%,50%">
+  <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frameset"/>
+  <frame src="https://developer.mozilla.org/fr/docs/Web/HTML/Element/frame"/>
+  <noframes>
+    <p>
       Il semblerait que votre navigateur ne supporte pas les frames,
       ou qu'il est configuré pour ne pas les autoriser.
-    &lt;/p&gt;
-  &lt;/noframes&gt;
-&lt;/frameset&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","100%")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', '#noframes', 'noframes')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'frames.html#edef-NOFRAMES', '&lt;noframes&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.elements.noframes")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{HTMLElement("frameset")}}</li>
- <li>{{HTMLElement("frame")}}</li>
-</ul>
+    </p>
+  </noframes>
+</frameset>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","100%")}}
+
+## Spécifications
+
+| Spécification                                                                                    | État                         | Commentaires |
+| ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ |
+| {{SpecName('HTML5 W3C', '#noframes', 'noframes')}}                             | {{Spec2('HTML5 W3C')}} |              |
+| {{SpecName('HTML4.01', 'frames.html#edef-NOFRAMES', '&lt;noframes&gt;')}} | {{Spec2('HTML4.01')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.elements.noframes")}}
+
+## Voir aussi
+
+- {{HTMLElement("frameset")}}
+- {{HTMLElement("frame")}}
diff --git a/files/fr/web/html/element/noscript/index.md b/files/fr/web/html/element/noscript/index.md
index 1ce4177762..9546190433 100644
--- a/files/fr/web/html/element/noscript/index.md
+++ b/files/fr/web/html/element/noscript/index.md
@@ -8,93 +8,114 @@ tags:
   - Web
 translation_of: Web/HTML/Element/noscript
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;noscript&gt;</code></strong> définit un fragment HTML qui doit être affiché si les fonctionnalités de script ne sont pas prises en charge ou si elles sont désactivées.</p>
+L'élément HTML **`<noscript>`** définit un fragment HTML qui doit être affiché si les fonctionnalités de script ne sont pas prises en charge ou si elles sont désactivées.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>On peut uniquement utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a> sur cet élément.</p>
+On peut uniquement utiliser [les attributs universels](/fr/docs/Web/HTML/Attributs_universels) sur cet élément.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;noscript&gt;
-  &lt;!-- Un lien vers un site externe --&gt;
-  &lt;a href="http://www.mozilla.com/"&gt;Un autre site&lt;/a&gt;
-&lt;/noscript&gt;
-&lt;p&gt;Elle est où la poulette ?&lt;/p&gt;
-</pre>
+```html
+<noscript>
+  <!-- Un lien vers un site externe -->
+  <a href="http://www.mozilla.com/">Un autre site</a>
+</noscript>
+<p>Elle est où la poulette ?</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","300","200")}}</p>
+{{EmbedLiveSample("Exemples","300","200")}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es">Contenu de métadonnées</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Lorsque les fonctionnalités de script sont désactivées et que l'élément est un descendant d'un élément {{HTMLElement("head")}} : zéro ou plusieurs éléments {{HTMLElement("link")}}, {{HTMLElement("style")}},{{HTMLElement("meta")}}.<br>
-    Lorsque les fonctionnalités de script sont désactivées et que cet élément n'est pas un descendant d'un élément {{HTMLElement("head")}} : du <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Modèle_de_contenu_transparent">contenu transparent</a> mais sans élément <code>&lt;noscript&gt;</code> parmi les descendants.<br>
-    Sinon : du contenu de flux ou du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>
-    <p>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a> et qui n'a pas d'ancêtre qui soit un élément <code>&lt;noscript&gt;</code> ; ou, s'il s'agit d'un document HTML, un élément {{HTMLElement("head")}} (sans ancêtre <code>&lt;noscript&gt;</code>).</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es"
+          >Contenu de métadonnées</a
+        >,
+        <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        Lorsque les fonctionnalités de script sont désactivées et que l'élément
+        est un descendant d'un élément {{HTMLElement("head")}} : zéro
+        ou plusieurs éléments {{HTMLElement("link")}},
+        {{HTMLElement("style")}},{{HTMLElement("meta")}}.<br />Lorsque
+        les fonctionnalités de script sont désactivées et que cet élément n'est
+        pas un descendant d'un élément {{HTMLElement("head")}} : du
+        <a
+          href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Modèle_de_contenu_transparent"
+          >contenu transparent</a
+        >
+        mais sans élément <code>&#x3C;noscript></code> parmi les descendants.<br />Sinon
+        : du contenu de flux ou du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        <p>
+          Tout élément qui accepte du
+          <a
+            href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9"
+            >contenu phrasé</a
+          >
+          et qui n'a pas d'ancêtre qui soit un élément
+          <code>&#x3C;noscript></code> ; ou, s'il s'agit d'un document HTML, un
+          élément {{HTMLElement("head")}} (sans ancêtre
+          <code>&#x3C;noscript></code>).
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'scripting.html#the-noscript-element', '&lt;noscript&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'scripting-1.html#the-noscript-element', '&lt;noscript&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'interact/scripts.html#h-18.3.1', '&lt;noscript&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'scripting.html#the-noscript-element', '&lt;noscript&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'scripting-1.html#the-noscript-element', '&lt;noscript&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'interact/scripts.html#h-18.3.1', '&lt;noscript&gt;')}}             | {{Spec2('HTML4.01')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.noscript")}}</p>
+{{Compat("html.elements.noscript")}}
diff --git a/files/fr/web/html/element/object/index.md b/files/fr/web/html/element/object/index.md
index fb4970dfbf..6be1ef1ce3 100644
--- a/files/fr/web/html/element/object/index.md
+++ b/files/fr/web/html/element/object/index.md
@@ -8,151 +8,165 @@ tags:
   - Web
 translation_of: Web/HTML/Element/object
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;object&gt;</code> </strong>représente une ressource externe qui peut être interprétée comme une image, un contexte de navigation imbriqué ou une ressource à traiter comme un <em>plugin</em>.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}}</div>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
-
-<dl>
- <dt>{{htmlattrdef("data")}}</dt>
- <dd>L'adresse de la ressource, une URL valide. Au moins un attribut <code><strong>data</strong></code> et un attribut <code><strong>type</strong></code> doivent être définis.</dd>
- <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt>
- <dd>L'élément de formulaire éventuel auquel l'élément est associé. La valeur de cet attribut doit être l'identifiant d'un élément  {{HTMLElement("form")}} du même document.</dd>
- <dt>{{htmlattrdef("height")}}</dt>
- <dd>La hauteur de la ressource à afficher, exprimée en pixels <a href="/fr/docs/Web/CSS">CSS</a> (uniquement en valeur absolue).</dd>
- <dt>{{htmlattrdef("name")}}</dt>
- <dd>Le nom du contexte de navigation valide (HTML5) ou du contrôle associé à l'élément (HTML 4).</dd>
- <dt>{{htmlattrdef("type")}}</dt>
- <dd>Le type MIME de la ressource définie par  <code><strong>data</strong></code>. Au moins un attribut <code><strong>data</strong></code> et un attribut <code><strong>type</strong></code> doivent être définis.</dd>
- <dt>{{htmlattrdef("typemustmatch")}} {{HTMLVersionInline(5)}}</dt>
- <dd>Cet attribut booléen indique si l'attribut <code>type</code> doit correspondre <a href="/fr/docs/Glossaire/Type_MIME">au type MIME</a> de la ressource afin que celle-ci puisse être utilisée.</dd>
- <dt>{{htmlattrdef("usemap")}}</dt>
- <dd>Une référence à l'élément {{HTMLElement("map")}}. La valeur de cet attribut doit être un '#' suivi de la valeur d'un attribut {{htmlattrxref("name", "map")}} d'un élément {{HTMLElement('map')}}.</dd>
- <dt>{{htmlattrdef("width")}}</dt>
- <dd>La largeur de la ressource à afficher, exprimée en pixels CSS (uniquement en valeur absolue).</dd>
-</dl>
-
-<h3 id="Attributs_obsolètes">Attributs obsolètes</h3>
-
-<dl>
- <dt>{{htmlattrdef("archive")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt>
- <dd>Une liste d'URIs séparés par des espaces, pointant vers des archives de resources pour l'objet.</dd>
- <dt>{{htmlattrdef("border")}} {{Obsolete_Inline("HTML5")}}</dt>
- <dd>La largeur de la bordure autour de l'objet, exprimée en pixels.</dd>
- <dt>{{htmlattrdef("classid")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt>
- <dd>L'URI de l'implémentation de l'objet. Cet attribut peut être utilisé avec (ou en remplacement de) l'attribut <code><strong>data</strong></code>.</dd>
- <dt>{{htmlattrdef("codebase")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt>
- <dd>Le chemin absolu de base servant à résoudre les URIs relatifs spécifiés par <code><strong>classid</strong></code>, <code><strong>data</strong></code>, ou <code><strong>archive</strong></code>. S'il n'est pas renseigné, l'URI de base considéré sera celui du document.</dd>
- <dt>{{htmlattrdef("codetype")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt>
- <dd>Le type de contenu des données spécifiés par <code><strong>classid</strong></code>.</dd>
-</dl>
-
-<dl>
- <dt>{{htmlattrdef("declare")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt>
- <dd>Si cet attribut booléen est présent, l'élément sera seulement une déclaration. L'objet devra donc être instancié par un élément  <code>&lt;object&gt;</code> dans la suite du document. En HTML5, il faut répéter l'élément &lt;object&gt; complètement chaque fois que la ressource est ré-utilisée.</dd>
-</dl>
-
-<dl>
- <dt>{{htmlattrdef("standby")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt>
- <dd>Un message que le navigateur peut afficher pendant le chargement de l'implémentation et des données liées à l'objet.</dd>
- <dt>{{htmlattrdef("tabindex")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}</dt>
- <dd>La position de l'élément dans la navigation par onglets au sein de l'élément courant.</dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;object data="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf" type="application/pdf"
-        width="500" height="500" typemustmatch&gt;
-  &lt;p&gt;Vous n'avez pas de plugin PDF mais vous pouvez &lt;a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf"&gt;télécharger le fichier.&lt;/a&gt;&lt;/p&gt;
-&lt;/object&gt;
-
-&lt;!-- Un exemple avec Flash --&gt;
-&lt;!--
-&lt;object data="animation.swf" type="application/x-shockwave-flash"&gt;
-  &lt;param name="param11" value="valeurConf"&gt;
-&lt;/object&gt;
---&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","520","520")}}</p>
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+{{HTMLRef}}
+
+L'élément HTML **`<object>` **représente une ressource externe qui peut être interprétée comme une image, un contexte de navigation imbriqué ou une ressource à traiter comme un _plugin_.
+
+{{EmbedInteractiveExample("pages/tabbed/object.html", "tabbed-standard")}}
+
+## Attributs
+
+Comme tous les autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
+
+- {{htmlattrdef("data")}}
+  - : L'adresse de la ressource, une URL valide. Au moins un attribut **`data`** et un attribut **`type`** doivent être définis.
+- {{htmlattrdef("form")}} {{HTMLVersionInline(5)}}
+  - : L'élément de formulaire éventuel auquel l'élément est associé. La valeur de cet attribut doit être l'identifiant d'un élément  {{HTMLElement("form")}} du même document.
+- {{htmlattrdef("height")}}
+  - : La hauteur de la ressource à afficher, exprimée en pixels [CSS](/fr/docs/Web/CSS) (uniquement en valeur absolue).
+- {{htmlattrdef("name")}}
+  - : Le nom du contexte de navigation valide (HTML5) ou du contrôle associé à l'élément (HTML 4).
+- {{htmlattrdef("type")}}
+  - : Le type MIME de la ressource définie par  **`data`**. Au moins un attribut **`data`** et un attribut **`type`** doivent être définis.
+- {{htmlattrdef("typemustmatch")}} {{HTMLVersionInline(5)}}
+  - : Cet attribut booléen indique si l'attribut `type` doit correspondre [au type MIME](/fr/docs/Glossaire/Type_MIME) de la ressource afin que celle-ci puisse être utilisée.
+- {{htmlattrdef("usemap")}}
+  - : Une référence à l'élément {{HTMLElement("map")}}. La valeur de cet attribut doit être un '#' suivi de la valeur d'un attribut {{htmlattrxref("name", "map")}} d'un élément {{HTMLElement('map')}}.
+- {{htmlattrdef("width")}}
+  - : La largeur de la ressource à afficher, exprimée en pixels CSS (uniquement en valeur absolue).
+
+### Attributs obsolètes
+
+- {{htmlattrdef("archive")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}
+  - : Une liste d'URIs séparés par des espaces, pointant vers des archives de resources pour l'objet.
+- {{htmlattrdef("border")}} {{Obsolete_Inline("HTML5")}}
+  - : La largeur de la bordure autour de l'objet, exprimée en pixels.
+- {{htmlattrdef("classid")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}
+  - : L'URI de l'implémentation de l'objet. Cet attribut peut être utilisé avec (ou en remplacement de) l'attribut **`data`**.
+- {{htmlattrdef("codebase")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}
+  - : Le chemin absolu de base servant à résoudre les URIs relatifs spécifiés par **`classid`**, **`data`**, ou **`archive`**. S'il n'est pas renseigné, l'URI de base considéré sera celui du document.
+- {{htmlattrdef("codetype")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}
+  - : Le type de contenu des données spécifiés par **`classid`**.
+
+<!---->
+
+- {{htmlattrdef("declare")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}
+  - : Si cet attribut booléen est présent, l'élément sera seulement une déclaration. L'objet devra donc être instancié par un élément  `<object>` dans la suite du document. En HTML5, il faut répéter l'élément \<object> complètement chaque fois que la ressource est ré-utilisée.
+
+<!---->
+
+- {{htmlattrdef("standby")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}
+  - : Un message que le navigateur peut afficher pendant le chargement de l'implémentation et des données liées à l'objet.
+- {{htmlattrdef("tabindex")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}}
+  - : La position de l'élément dans la navigation par onglets au sein de l'élément courant.
+
+## Exemples
+
+### HTML
+
+```html
+<object data="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf" type="application/pdf"
+        width="500" height="500" typemustmatch>
+  <p>Vous n'avez pas de plugin PDF mais vous pouvez <a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">télécharger le fichier.</a></p>
+</object>
+
+<!-- Un exemple avec Flash -->
+<!--
+<object data="animation.swf" type="application/x-shockwave-flash">
+  <param name="param11" value="valeurConf">
+</object>
+-->
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","520","520")}}
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int.C3.A9gr.C3.A9">contenu intégré</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>. Si l'élément a un attribut <strong>usemap</strong> il fait aussi partie de la catégorie de <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires">contenu listé pour les formulaires (<em>listed</em>), contenu pouvant être envoyé par un formulaire (<em>submittable</em>)</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Contenu autorisé</dfn></th>
-   <td>Zéro ou plusieurs éléments {{HTMLElement("param")}} suivis par du  <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod.C3.A8le_de_contenu_transparent">contenu transparent.</a></td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Omission de balise</dfn></th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Parents autorisés</dfn></th>
-   <td>Tout élément acceptant du contenu intégré.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("image")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLObjectElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int.C3.A9gr.C3.A9"
+          >contenu intégré</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >. Si l'élément a un attribut <strong>usemap</strong> il fait aussi
+        partie de la catégorie de
+        <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif"
+          >contenu interactif</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ.C3.A9_aux_formulaires"
+          >contenu listé pour les formulaires (<em>listed</em>), contenu pouvant
+          être envoyé par un formulaire (<em>submittable</em>)</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Contenu autorisé</dfn></th>
+      <td>
+        Zéro ou plusieurs éléments {{HTMLElement("param")}} suivis par
+        du 
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod.C3.A8le_de_contenu_transparent"
+          >contenu transparent.</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Omission de balise</dfn></th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Parents autorisés</dfn></th>
+      <td>Tout élément acceptant du contenu intégré.</td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>
+        {{ARIARole("application")}}, {{ARIARole("document")}},
+        {{ARIARole("image")}}
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLObjectElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-object-element', '&lt;object&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-object-element', '&lt;object&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3', '&lt;object&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'embedded-content.html#the-object-element', '&lt;object&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-object-element', '&lt;object&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'struct/objects.html#h-13.3', '&lt;object&gt;')}}                         | {{Spec2('HTML4.01')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.object")}}</p>
+{{Compat("html.elements.object")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("param")}}</li>
- <li>{{HTMLElement("applet")}} {{Obsolete_Inline}}</li>
- <li>{{HTMLElement("embed")}}</li>
-</ul>
+- {{HTMLElement("param")}}
+- {{HTMLElement("applet")}} {{Obsolete_Inline}}
+- {{HTMLElement("embed")}}
diff --git a/files/fr/web/html/element/ol/index.md b/files/fr/web/html/element/ol/index.md
index c36383b0aa..475069e0b5 100644
--- a/files/fr/web/html/element/ol/index.md
+++ b/files/fr/web/html/element/ol/index.md
@@ -9,211 +9,246 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/ol
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;ol&gt;</code></strong> représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un indicateur ordinal pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La mise en forme de la numérotation n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a>.</p>
+L'élément HTML **`<ol>`** représente une liste ordonnée. Les éléments d'une telle liste sont généralement affichés avec un indicateur ordinal pouvant prendre la forme de nombres, de lettres, de chiffres romains ou de points. La mise en forme de la numérotation n'est pas utilisée dans la description HTML mais dans la feuille de style CSS associée grâce à la propriété [`list-style-type`](/fr/docs/Web/CSS/list-style-type).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}
 
 <table class="properties">
   <tbody>
-     <tr>
-      <th scope="row"><dfn><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dfn></th>
-      <td><a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">Contenu de flux</a>, <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content">contenu tangible</a> si les enfants de l'élément <code>&lt;ol&gt;</code> incluent au moins un élément <a href="/fr/docs/Web/HTML/Element/li"><code>&lt;li&gt;</code></a>.</td>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/Guide/HTML/Content_categories"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#palpable_content"
+          >contenu tangible</a
+        >
+        si les enfants de l'élément <code>&#x3C;ol></code> incluent au moins un
+        élément <a href="/fr/docs/Web/HTML/Element/li"><code>&#x3C;li></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Contenu autorisé</th>
-      <td>Zéro, un, ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/li"><code>&lt;li&gt;</code></a> (qui peuvent imbriquer d'autres éléments <a href="/fr/docs/Web/HTML/Element/ol"><code>&lt;ol&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a>), <a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/template"><code>&lt;template&gt;</code></a>.</td>
+      <td>
+        Zéro, un, ou plusieurs éléments
+        <a href="/fr/docs/Web/HTML/Element/li"><code>&#x3C;li></code></a> (qui
+        peuvent imbriquer d'autres éléments
+        <a href="/fr/docs/Web/HTML/Element/ol"><code>&#x3C;ol></code></a> ou
+        <a href="/fr/docs/Web/HTML/Element/ul"><code>&#x3C;ul></code></a
+        >),
+        <a href="/fr/docs/Web/HTML/Element/script"
+          ><code>&#x3C;script></code></a
+        >
+        ou
+        <a href="/fr/docs/Web/HTML/Element/template"
+          ><code>&#x3C;template></code></a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Omission de balises</th>
-      <td>Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires</td>
+      <td>
+        Aucune, la balise d'ouverture et la balise de fermeture sont
+        obligatoires
+      </td>
     </tr>
     <tr>
       <th scope="row">Parents autorisés</th>
-      <td>Tout élément acceptant du <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content">contenu de flux</a>.</td>
+      <td>
+        Tout élément acceptant du
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories#flow_content"
+          >contenu de flux</a
+        >.
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôle ARIA implicite</th>
-      <td><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></code></td>
+      <td>
+        <code
+          ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/List_role"
+            >list</a
+          ></code
+        >
+      </td>
     </tr>
     <tr>
       <th scope="row">Rôles ARIA autorisés</th>
-      <td><a href="https://w3c.github.io/aria/#directory">directory</a>, <a href="https://w3c.github.io/aria/#group">group</a>, <a href="https://w3c.github.io/aria/#listbox">listbox</a>, <a href="https://w3c.github.io/aria/#menu">menu</a>, <a href="https://w3c.github.io/aria/#menubar">menubar</a>, <a href="https://w3c.github.io/aria/#none">none</a>, <a href="https://w3c.github.io/aria/#presentation">presentation</a>, <a href="https://w3c.github.io/aria/#radiogroup">radiogroup</a>, <a href="https://w3c.github.io/aria/#tablist">tablist</a>, <a href="https://w3c.github.io/aria/#toolbar">toolbar</a>, <a href="https://w3c.github.io/aria/#tree">tree</a>.</td>
+      <td>
+        <a href="https://w3c.github.io/aria/#directory">directory</a>,
+        <a href="https://w3c.github.io/aria/#group">group</a>,
+        <a href="https://w3c.github.io/aria/#listbox">listbox</a>,
+        <a href="https://w3c.github.io/aria/#menu">menu</a>,
+        <a href="https://w3c.github.io/aria/#menubar">menubar</a>,
+        <a href="https://w3c.github.io/aria/#none">none</a>,
+        <a href="https://w3c.github.io/aria/#presentation">presentation</a>,
+        <a href="https://w3c.github.io/aria/#radiogroup">radiogroup</a>,
+        <a href="https://w3c.github.io/aria/#tablist">tablist</a>,
+        <a href="https://w3c.github.io/aria/#toolbar">toolbar</a>,
+        <a href="https://w3c.github.io/aria/#tree">tree</a>.
+      </td>
     </tr>
     <tr>
       <th scope="row">Interface DOM</th>
-      <td><a href="/fr/docs/Web/API/HTMLOListElement"><code>HTMLOListElement</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLOListElement"
+          ><code>HTMLOListElement</code></a
+        >
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="attributes">Attributs</h2>
+## Attributs
 
-<p>À l'instar des autres éléments HTML, il est possible d'utiliser <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a> sur cet élément.</p>
+À l'instar des autres éléments HTML, il est possible d'utiliser [les attributs universels](/fr/docs/Web/HTML/Global_attributes) sur cet élément.
 
-<dl>
-  <dt><strong><code>reversed</code></strong></dt>
-  <dd>Cet attribut booléen indique que les éléments de la liste sont dans l'ordre inverse. Les éléments sont numérotés de haut en bas.</dd>
-  <dt><strong><code>start</code></strong></dt>
-  <dd>Un nombre entier à partir duquel on commence à compter pour les éléments de la liste. Toujours un chiffre arabique (1, 2, 3, etc.), même lorsque le <code>type</code> de numérotation est constitué de lettres ou de chiffres romains. Par exemple, pour commencer à numéroter les éléments à partir de la lettre "d" ou du chiffre romain "iv", utilisez <code>start="4"</code>.</dd>
-  <dt><strong><code>type</code></strong></dt>
-  <dd>Définit le type de numérotation :
-    <ul>
-      <li><code>a</code> pour les lettres minuscules</li>
-      <li><code>A</code> pour les lettres majuscules</li>
-      <li><code>i</code> pour les chiffres romains minuscules</li>
-      <li><code>I</code> pour les chiffres romains majuscules</li>
-      <li><code>1</code> pour les chiffres (par défaut)</li>
-    </ul>
-    <p>Le type spécifié est utilisé pour l'ensemble de la liste, sauf si un attribut différent <a href="/fr/docs/Web/HTML/Element/li#attr-type"><code>type</code></a> est utilisé sur un élément <a href="/fr/docs/Web/HTML/Element/li"><code>&lt;li&gt;</code></a> fermé.</p>
+- **`reversed`**
+  - : Cet attribut booléen indique que les éléments de la liste sont dans l'ordre inverse. Les éléments sont numérotés de haut en bas.
+- **`start`**
+  - : Un nombre entier à partir duquel on commence à compter pour les éléments de la liste. Toujours un chiffre arabique (1, 2, 3, etc.), même lorsque le `type` de numérotation est constitué de lettres ou de chiffres romains. Par exemple, pour commencer à numéroter les éléments à partir de la lettre "d" ou du chiffre romain "iv", utilisez `start="4"`.
+- **`type`**
 
-    <div class="note">
-      <p><strong>Note :</strong>À moins que le type du numéro de la liste n'ait de l'importance (comme dans les documents juridiques ou techniques où les éléments sont référencés par leur numéro/lettre), utilisez plutôt la propriété CSS <a href="/fr/docs/Web/CSS/list-style-type"><code>list-style-type</code></a>.</p>
-    </div>
-  </dd>
-</dl>
+  - : Définit le type de numérotation :
 
-<h2 id="usage_notes">Note d'utilisation</h2>
+    - `a` pour les lettres minuscules
+    - `A` pour les lettres majuscules
+    - `i` pour les chiffres romains minuscules
+    - `I` pour les chiffres romains majuscules
+    - `1` pour les chiffres (par défaut)
 
-<p>En général, les éléments d'une liste ordonnée s'affichent avec un <a href="/en-US/docs/Web/CSS/::marker">marqueur</a> précédant l'élément, tel qu'un chiffre ou une lettre.</p>
+    Le type spécifié est utilisé pour l'ensemble de la liste, sauf si un attribut différent [`type`](/fr/docs/Web/HTML/Element/li#attr-type) est utilisé sur un élément [`<li>`](/fr/docs/Web/HTML/Element/li) fermé.
 
-<p>Les éléments <code>&lt;ol&gt;</code> et <a href="/fr/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a> peuvent s'imbriquer aussi profondément que vous le souhaitez, alternant entre <code>&lt;ol&gt;</code> et <code>&lt;ul&gt;</code> comme vous le souhaitez.</p>
+    > **Note :**À moins que le type du numéro de la liste n'ait de l'importance (comme dans les documents juridiques ou techniques où les éléments sont référencés par leur numéro/lettre), utilisez plutôt la propriété CSS [`list-style-type`](/fr/docs/Web/CSS/list-style-type).
 
-<p>Les éléments <code>&lt;ol&gt;</code> et <a href="/fr/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a> représentent tous deux une liste d'éléments. La différence est qu'avec l'élément <code>&lt;ol&gt;</code>, l'ordre est significatif. Par exemple :</p>
+## Note d'utilisation
 
-<ul>
-  <li>Étapes d'une recette</li>
-  <li>Instructions détaillées</li>
-  <li>La liste des ingrédients en proportion décroissante sur les étiquettes d'information nutritionnelle</li>
-</ul>
+En général, les éléments d'une liste ordonnée s'affichent avec un [marqueur](/en-US/docs/Web/CSS/::marker) précédant l'élément, tel qu'un chiffre ou une lettre.
 
-<p>Pour déterminer la liste à utiliser, essayez de modifier l'ordre des éléments de la liste ; si le sens change, utilisez l'élément <code>&lt;ol&gt;</code> - sinon, vous pouvez utiliser <a href="/fr/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a>.</p>
+Les éléments `<ol>` et [`<ul>`](/fr/docs/Web/HTML/Element/ul) peuvent s'imbriquer aussi profondément que vous le souhaitez, alternant entre `<ol>` et `<ul>` comme vous le souhaitez.
 
-<h2 id="examples">Exemples</h2>
+Les éléments `<ol>` et [`<ul>`](/fr/docs/Web/HTML/Element/ul) représentent tous deux une liste d'éléments. La différence est qu'avec l'élément `<ol>`, l'ordre est significatif. Par exemple :
 
-<h3 id="simple_example">Exemple simple</h3>
+- Étapes d'une recette
+- Instructions détaillées
+- La liste des ingrédients en proportion décroissante sur les étiquettes d'information nutritionnelle
 
-<pre class="brush: html">&lt;ol&gt;
-  &lt;li&gt;Fee&lt;/li&gt;
-  &lt;li&gt;Fi&lt;/li&gt;
-  &lt;li&gt;Fo&lt;/li&gt;
-  &lt;li&gt;Fum&lt;/li&gt;
-&lt;/ol&gt;
-</pre>
+Pour déterminer la liste à utiliser, essayez de modifier l'ordre des éléments de la liste ; si le sens change, utilisez l'élément `<ol>` - sinon, vous pouvez utiliser [`<ul>`](/fr/docs/Web/HTML/Element/ul).
 
-<p>Le HTML ci-dessus affichera :</p>
+## Exemples
 
-<p>{{EmbedLiveSample("simple_example", 400, 150)}}</p>
+### Exemple simple
 
-<h3 id="using_roman_numeral_type">Utilisation des chiffres romains</h3>
+```html
+<ol>
+  <li>Fee</li>
+  <li>Fi</li>
+  <li>Fo</li>
+  <li>Fum</li>
+</ol>
+```
 
-<pre class="brush: html">&lt;ol start="i"&gt;
-  &lt;li&gt;Introduction&lt;/li&gt;
-  &lt;li&gt;Liste des Greffes&lt;/li&gt;
-  &lt;li&gt;Conclusion&lt;/li&gt;
-&lt;/ol&gt;
-</pre>
+Le HTML ci-dessus affichera :
 
-<p>Le HTML ci-dessus affichera :</p>
+{{EmbedLiveSample("simple_example", 400, 150)}}
 
-<p>{{EmbedLiveSample("using_roman_numeral_type", 400, 150)}}</p>
+### Utilisation des chiffres romains
 
-<h3 id="using_the_start_attribute">Utilisation de l'attribut start</h3>
+```html
+<ol start="i">
+  <li>Introduction</li>
+  <li>Liste des Greffes</li>
+  <li>Conclusion</li>
+</ol>
+```
 
-<pre class="brush: html">&lt;p&gt;Les places d'arrivée des concurrents qui ne sont pas dans le cercle des gagnants :&lt;/p&gt;
+Le HTML ci-dessus affichera :
 
-&lt;ol start="4"&gt;
-  &lt;li&gt;Speedwalk Stu&lt;/li&gt;
-  &lt;li&gt;Saunterin' Sam&lt;/li&gt;
-  &lt;li&gt;Slowpoke Rodriguez&lt;/li&gt;
-&lt;/ol&gt;</pre>
+{{EmbedLiveSample("using_roman_numeral_type", 400, 150)}}
 
-<p>Le HTML ci-dessus affichera :</p>
+### Utilisation de l'attribut start
 
-<p>{{EmbedLiveSample("using_the_start_attribute", 400, 160)}}</p>
+```html
+<p>Les places d'arrivée des concurrents qui ne sont pas dans le cercle des gagnants :</p>
 
-<h3 id="nesting_lists">Listes imbriquées</h3>
+<ol start="4">
+  <li>Speedwalk Stu</li>
+  <li>Saunterin' Sam</li>
+  <li>Slowpoke Rodriguez</li>
+</ol>
+```
 
-<pre class="brush: html">&lt;ol&gt;
-  &lt;li&gt;Premier élément&lt;/li&gt;
-  &lt;li&gt;Deuxième élément  &lt;!-- La fermeture &lt;/li&gt; n'est pas encore placée ! --&gt;
-    &lt;ol&gt;
-      &lt;li&gt;Premier élément de la liste imbriquée&lt;/li&gt;
-      &lt;li&gt;Deuxième élément de la liste imbriquée&lt;/li&gt;
-      &lt;li&gt;Troisième élément de la liste imbriquée&lt;/li&gt;
-    &lt;/ol&gt;
-  &lt;/li&gt;                 &lt;!-- Voici la fermeture &lt;/li&gt; ! --&gt;
-  &lt;li&gt;Troisième élément&lt;/li&gt;
-&lt;/ol&gt;
-</pre>
+Le HTML ci-dessus affichera :
 
-<p>Le HTML ci-dessus affichera :</p>
+{{EmbedLiveSample("using_the_start_attribute", 400, 160)}}
 
-<p>{{EmbedLiveSample("nesting_lists", 400, 200)}}</p>
+### Listes imbriquées
 
-<h3 id="unordered_list_inside_ordered_list">Liste non ordonnée dans une liste ordonnée</h3>
+```html
+<ol>
+  <li>Premier élément</li>
+  <li>Deuxième élément  <!-- La fermeture </li> n'est pas encore placée ! -->
+    <ol>
+      <li>Premier élément de la liste imbriquée</li>
+      <li>Deuxième élément de la liste imbriquée</li>
+      <li>Troisième élément de la liste imbriquée</li>
+    </ol>
+  </li>                 <!-- Voici la fermeture </li> ! -->
+  <li>Troisième élément</li>
+</ol>
+```
 
-<pre class="brush: html">&lt;ol&gt;
-  &lt;li&gt;Premier élément&lt;/li&gt;
-  &lt;li&gt;Deuxième élément  &lt;!-- La fermeture &lt;/li&gt; n'est pas placée ici ! --&gt;
-    &lt;ul&gt;
-      &lt;li&gt;Premier élément de la liste non-ordonnée imbriquée&lt;/li&gt;
-      &lt;li&gt;Deuxième élément de la liste non-ordonnée imbriquée&lt;/li&gt;
-      &lt;li&gt;Troisième élément de la liste non-ordonnée imbriquée&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;                 &lt;!-- La fermeture &lt;/li&gt; est ici. --&gt;
-  &lt;li&gt;Troisième élément&lt;/li&gt;
-&lt;/ol&gt;
-</pre>
+Le HTML ci-dessus affichera :
 
-<p>Le HTML ci-dessus affichera :</p>
+{{EmbedLiveSample("nesting_lists", 400, 200)}}
 
-<p>{{EmbedLiveSample("unordered_list_inside_ordered_list", 400, 200)}}</p>
+### Liste non ordonnée dans une liste ordonnée
 
-<h2 id="specifications">Spécifications</h2>
+```html
+<ol>
+  <li>Premier élément</li>
+  <li>Deuxième élément  <!-- La fermeture </li> n'est pas placée ici ! -->
+    <ul>
+      <li>Premier élément de la liste non-ordonnée imbriquée</li>
+      <li>Deuxième élément de la liste non-ordonnée imbriquée</li>
+      <li>Troisième élément de la liste non-ordonnée imbriquée</li>
+    </ul>
+  </li>                 <!-- La fermeture </li> est ici. -->
+  <li>Troisième élément</li>
+</ol>
+```
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Status</th>
-      <th scope="col">Commentaire</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ol-element', '&lt;ol&gt;')}}</td>
-      <td>{{Spec2('HTML WHATWG')}}</td>
-      <td>Aucune modification depuis la dernière dérivation W3C {{SpecName('HTML5 W3C')}}.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td>
-      <td>{{Spec2('HTML5 W3C')}}</td>
-      <td>Ajout des attributs <code>reversed</code> et <code>start</code>. L'attribut <code>type</code> n'est plus déprécié.</td>
-    </tr>
-    <tr>
-      <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;ol&gt;')}}</td>
-      <td>{{Spec2('HTML4.01')}}</td>
-      <td>Dépréciation des attributs <code>compact</code> et <code>type</code>.</td>
-    </tr>
-  </tbody>
-</table>
+Le HTML ci-dessus affichera :
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+{{EmbedLiveSample("unordered_list_inside_ordered_list", 400, 200)}}
 
-<p>{{Compat("html.elements.ol")}}</p>
+## Spécifications
 
-<h2 id="see_also">Voir aussi</h2>
+| Spécification                                                                                                    | Status                           | Commentaire                                                                             |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-ol-element', '&lt;ol&gt;')}}             | {{Spec2('HTML WHATWG')}} | Aucune modification depuis la dernière dérivation W3C {{SpecName('HTML5 W3C')}}. |
+| {{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}} | {{Spec2('HTML5 W3C')}}     | Ajout des attributs `reversed` et `start`. L'attribut `type` n'est plus déprécié.       |
+| {{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;ol&gt;')}}                         | {{Spec2('HTML4.01')}}     | Dépréciation des attributs `compact` et `type`.                                         |
 
-<ul>
-  <li>Les autres éléments HTML relatifs aux listes : <a href="/fr/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/li"><code>&lt;li&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/menu"><code>&lt;menu&gt;</code></a></li>
-  <li>Les propriétés CSS pouvant servir à la mise en forme de l'élément <code>&lt;ol&gt;</code> :
-    <ul>
-      <li><a href="/fr/docs/Web/CSS/list-style"><code>list-style</code></a> qui permet de choisir comment les nombres ordinaux sont affichés,</li>
-      <li><a href="/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">Les compteurs CSS</a>, utiles pour gérer les listes imbriquées complexes,</li>
-      <li><a href="/fr/docs/Web/CSS/line-height"><code>line-height</code></a> qui permet d'obtenir le même effet que l'attribut <a href="/fr/docs/Web/HTML/Element/ol#attr-compact"><code>compact</code></a> qui est déprécié,</li>
-      <li><a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> qui permet de contrôler l'indentation de la liste.</li>
-    </ul>
-  </li>
-</ul>
+## Compatibilité des navigateurs
+
+{{Compat("html.elements.ol")}}
+
+## Voir aussi
+
+- Les autres éléments HTML relatifs aux listes : [`<ul>`](/fr/docs/Web/HTML/Element/ul), [`<li>`](/fr/docs/Web/HTML/Element/li), [`<menu>`](/fr/docs/Web/HTML/Element/menu)
+- Les propriétés CSS pouvant servir à la mise en forme de l'élément `<ol>` :
+
+  - [`list-style`](/fr/docs/Web/CSS/list-style) qui permet de choisir comment les nombres ordinaux sont affichés,
+  - [Les compteurs CSS](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters), utiles pour gérer les listes imbriquées complexes,
+  - [`line-height`](/fr/docs/Web/CSS/line-height) qui permet d'obtenir le même effet que l'attribut [`compact`](/fr/docs/Web/HTML/Element/ol#attr-compact) qui est déprécié,
+  - [`margin`](/fr/docs/Web/CSS/margin) qui permet de contrôler l'indentation de la liste.
diff --git a/files/fr/web/html/element/optgroup/index.md b/files/fr/web/html/element/optgroup/index.md
index 74834d660c..0556863ec4 100644
--- a/files/fr/web/html/element/optgroup/index.md
+++ b/files/fr/web/html/element/optgroup/index.md
@@ -9,115 +9,99 @@ tags:
   - Web
 translation_of: Web/HTML/Element/optgroup
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;optgroup&gt;</code></strong>, utilisé dans un formulaire, permet de créer un groupe d'options parmi lesquelles on peut choisir dans un élément {{HTMLElement("select")}}.</p>
+L'élément HTML **`<optgroup>`**, utilisé dans un formulaire, permet de créer un groupe d'options parmi lesquelles on peut choisir dans un élément {{HTMLElement("select")}}.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/optgroup.html", "tabbed-standard")}}
 
-<div class="note">
-<p><strong>Note :</strong> Il n'est pas possible d'imbriquer plusieurs éléments <code>&lt;optgroup&gt;</code> entre eux.</p>
-</div>
+> **Note :** Il n'est pas possible d'imbriquer plusieurs éléments `<optgroup>` entre eux.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("disabled")}}</dt>
- <dd>Si cet attribut booléen est défini et aucun élément du groupe d'options ne peut être sélectionné. Cet élément ne recevra pas les évènements de navigation (tels que les clics ou les changements de focus). Les navigateurs affichent ces éléments en les grisant.</dd>
- <dt>{{htmlattrdef("label")}}</dt>
- <dd>Le nom du groupe d'options qui peut être affiché par le navigateur. Cet attribut est obligatoire.</dd>
-</dl>
+- {{htmlattrdef("disabled")}}
+  - : Si cet attribut booléen est défini et aucun élément du groupe d'options ne peut être sélectionné. Cet élément ne recevra pas les évènements de navigation (tels que les clics ou les changements de focus). Les navigateurs affichent ces éléments en les grisant.
+- {{htmlattrdef("label")}}
+  - : Le nom du groupe d'options qui peut être affiché par le navigateur. Cet attribut est obligatoire.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;select&gt;
-  &lt;optgroup label="Groupe 1"&gt;
-    &lt;option&gt;Option 1.1&lt;/option&gt;
-  &lt;/optgroup&gt;
-  &lt;optgroup label="Groupe 2"&gt;
-    &lt;option&gt;Option 2.1&lt;/option&gt;
-    &lt;option&gt;Option 2.2&lt;/option&gt;
-  &lt;/optgroup&gt;
-  &lt;optgroup label="Groupe 3" disabled&gt;
-    &lt;option&gt;Option 3.1&lt;/option&gt;
-    &lt;option&gt;Option 3.2&lt;/option&gt;
-    &lt;option&gt;Option 3.3&lt;/option&gt;
-  &lt;/optgroup&gt;
-&lt;/select&gt;
-</pre>
+```html
+<select>
+  <optgroup label="Groupe 1">
+    <option>Option 1.1</option>
+  </optgroup>
+  <optgroup label="Groupe 2">
+    <option>Option 2.1</option>
+    <option>Option 2.2</option>
+  </optgroup>
+  <optgroup label="Groupe 3" disabled>
+    <option>Option 3.1</option>
+    <option>Option 3.2</option>
+    <option>Option 3.3</option>
+  </optgroup>
+</select>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
-<h2 id="Résumé_technique">Résumé technique</h2>
+{{EmbedLiveSample("Exemples")}}
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Zéro ou plusieurs éléments {{HTMLElement("option")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>La balise de début est obligatoire, la balise de fin est optionnelle si l'élément est immédiatement suivi par un autre élément &lt;optgroup&gt; ou si l'élément parent n'a pas d'autre contenu.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément {{HTMLElement("select")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLOptGroupElement")}}</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;optgroup&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Zéro ou plusieurs éléments {{HTMLElement("option")}}.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        La balise de début est obligatoire, la balise de fin est optionnelle si
+        l'élément est immédiatement suivi par un autre élément &#x3C;optgroup>
+        ou si l'élément parent n'a pas d'autre contenu.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>Un élément {{HTMLElement("select")}}.</td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLOptGroupElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
+
+| Spécification                                                                                                | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '&lt;optgroup&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;optgroup&gt;')}}         | {{Spec2('HTML4.01')}}     |              |
+
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.optgroup")}}</p>
+{{Compat("html.elements.optgroup")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li>
-</ul>
+- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("option")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
diff --git a/files/fr/web/html/element/option/index.md b/files/fr/web/html/element/option/index.md
index 469756c960..6ad5a657bd 100644
--- a/files/fr/web/html/element/option/index.md
+++ b/files/fr/web/html/element/option/index.md
@@ -9,108 +9,101 @@ tags:
   - Web
 translation_of: Web/HTML/Element/option
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;option&gt;</code></strong>, utilisé dans un formulaire, permet de représenter un contrôle au sein d'un élément {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}. Cet élément peut donc représenter des éléments d'un menu dans un document HTML.</p>
+L'élément HTML **`<option>`**, utilisé dans un formulaire, permet de représenter un contrôle au sein d'un élément {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}. Cet élément peut donc représenter des éléments d'un menu dans un document HTML.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/option.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/option.html", "tabbed-standard")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("disabled")}}</dt>
- <dd>Si cet attribut booléen est défini, l'option ne peut pas être sélectionnée. Généralement, les navigateurs affichent l'option grisée et celle-ci ne reçoit pas les évènements de navigation (liés aux clics ou au focus par exemple). Si cet attribut n'est pas défini, l'élément peut tout de même être désactivé si un de ses ancêtres est un élément {{HTMLElement("optgroup")}} désactivé.</dd>
- <dt>{{htmlattrdef("label")}}</dt>
- <dd>La valeur de cet attribut correspond au texte affiché pour expliquer l'option. Si cet attribut n'est pas défini, sa valeur correspondra à celle du texte contenu dans l'élément.</dd>
- <dt>{{htmlattrdef("selected")}}</dt>
- <dd>S'il est présent, cet attribut booléen indique que l'option est sélectionnée à l'état initial. Si l'élément <code>&lt;option&gt;</code> est un élément descendant d'un élément {{HTMLElement("select")}} dont l'attribut {{htmlattrxref("multiple", "select")}} n'est pas activé, seul une <code>&lt;option&gt;</code> de cet élément {{HTMLElement("select")}} peut être sélectionnée de cette façon.</dd>
- <dt>{{htmlattrdef("value")}}</dt>
- <dd>Le contenu de cet attribut représente la valeur qu'on souhaite envoyer au formulaire lorsque l'option est sélectionnée. Si cet attribut n'est pas défini, la valeur sera le contenu texuel de l'élément <code>&lt;option&gt;</code>.</dd>
-</dl>
+- {{htmlattrdef("disabled")}}
+  - : Si cet attribut booléen est défini, l'option ne peut pas être sélectionnée. Généralement, les navigateurs affichent l'option grisée et celle-ci ne reçoit pas les évènements de navigation (liés aux clics ou au focus par exemple). Si cet attribut n'est pas défini, l'élément peut tout de même être désactivé si un de ses ancêtres est un élément {{HTMLElement("optgroup")}} désactivé.
+- {{htmlattrdef("label")}}
+  - : La valeur de cet attribut correspond au texte affiché pour expliquer l'option. Si cet attribut n'est pas défini, sa valeur correspondra à celle du texte contenu dans l'élément.
+- {{htmlattrdef("selected")}}
+  - : S'il est présent, cet attribut booléen indique que l'option est sélectionnée à l'état initial. Si l'élément `<option>` est un élément descendant d'un élément {{HTMLElement("select")}} dont l'attribut {{htmlattrxref("multiple", "select")}} n'est pas activé, seul une `<option>` de cet élément {{HTMLElement("select")}} peut être sélectionnée de cette façon.
+- {{htmlattrdef("value")}}
+  - : Le contenu de cet attribut représente la valeur qu'on souhaite envoyer au formulaire lorsque l'option est sélectionnée. Si cet attribut n'est pas défini, la valeur sera le contenu texuel de l'élément `<option>`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;select name="select"&gt;
+```html
+<select name="select">
   Elle est où la poulette ?
-  &lt;option value="value1"&gt;Avec les lapins&lt;/option&gt;
-  &lt;option value="value2" selected&gt;Avec les canards&lt;/option&gt;
-  &lt;option value="value3"&gt;Pas là&lt;/option&gt;
-&lt;/select&gt;</pre>
+  <option value="value1">Avec les lapins</option>
+  <option value="value2" selected>Avec les canards</option>
+  <option value="value3">Pas là</option>
+</select>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","320","50")}}</p>
+{{EmbedLiveSample("Exemples","320","50")}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Du texte qui contient éventuellement des caractères échappés (par exemple <code>&amp;eacute;</code>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>La balise de début est obligatoire. La balise de fin est optionnelle si l'élément est immédiatement suivi par un autre élément <code>&lt;option&gt;</code> ou {{HTMLElement("optgroup")}} ou si l'élément parent n'a plus d'autre contenu.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément {{HTMLElement("select")}}, {{HTMLElement("optgroup")}} ou {{HTMLElement("datalist")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles autorisés</th>
-   <td>Aucune</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLOptionElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        Du texte qui contient éventuellement des caractères échappés (par
+        exemple <code>&#x26;eacute;</code>).
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        La balise de début est obligatoire. La balise de fin est optionnelle si
+        l'élément est immédiatement suivi par un autre élément
+        <code>&#x3C;option></code> ou {{HTMLElement("optgroup")}} ou si
+        l'élément parent n'a plus d'autre contenu.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Un élément {{HTMLElement("select")}},
+        {{HTMLElement("optgroup")}} ou
+        {{HTMLElement("datalist")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles autorisés</th>
+      <td>Aucune</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLOptionElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#the-option-element', '&lt;option&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#the-option-element', '&lt;option&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;option&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#the-option-element', '&lt;option&gt;')}} | {{Spec2('HTML WHATWG')}} |                      |
+| {{SpecName('HTML5 W3C', 'forms.html#the-option-element', '&lt;option&gt;')}}     | {{Spec2('HTML5 W3C')}}     |                      |
+| {{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;option&gt;')}}         | {{Spec2('HTML4.01')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.option")}}</p>
+{{Compat("html.elements.option")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li>
-</ul>
+- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
diff --git a/files/fr/web/html/element/output/index.md b/files/fr/web/html/element/output/index.md
index fc074e2d4c..c1af499a5d 100644
--- a/files/fr/web/html/element/output/index.md
+++ b/files/fr/web/html/element/output/index.md
@@ -9,105 +9,111 @@ tags:
   - Web
 translation_of: Web/HTML/Element/output
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;output&gt;</code></strong> représente un conteneur dans lequel un site ou une application peut injecter le résultat d'un calcul ou d'une action utilisateur.</p>
+L'élément HTML **`<output>`** représente un conteneur dans lequel un site ou une application peut injecter le résultat d'un calcul ou d'une action utilisateur.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("for")}}</dt>
- <dd>Une liste d'<a href="/fr/docs/Web/HTML/Attributs_universels/id">identifiants </a>d'autres éléments, séparés par des espaces, qui ont joué un rôle dans le calcul (en tant que valeurs d'entrée ou autrement).</dd>
- <dt>{{htmlattrdef("form")}}</dt>
- <dd>L'identifiant d'un élément de formulaire ({{HTMLElement("form")}}) auquel cet élément est rattaché. La valeur de cet attribut doit être un identifiant (<code>id</code>) d'un formulaire qui fait partie du même document. Cet attribut n'est pas nécessaire si l'élément <code>&lt;output&gt;</code> est situé dans un formulaire ou si l'élément <code>&lt;output&gt;</code> n'est pas du tout associé à un formulaire. Cet attribut permet ainsi de placer l'élément <code>&lt;output&gt;</code> où on veut dans le document, pas nécessairement comme descendant d'un formulaire.</dd>
- <dt>{{htmlattrdef("name")}}</dt>
- <dd>Le nom de l'élément, utilisé pour identifier l'élément <code>&lt;output&gt;</code> lors de l'envoi du formulaire.</dd>
-</dl>
+- {{htmlattrdef("for")}}
+  - : Une liste d'[identifiants ](/fr/docs/Web/HTML/Attributs_universels/id)d'autres éléments, séparés par des espaces, qui ont joué un rôle dans le calcul (en tant que valeurs d'entrée ou autrement).
+- {{htmlattrdef("form")}}
+  - : L'identifiant d'un élément de formulaire ({{HTMLElement("form")}}) auquel cet élément est rattaché. La valeur de cet attribut doit être un identifiant (`id`) d'un formulaire qui fait partie du même document. Cet attribut n'est pas nécessaire si l'élément `<output>` est situé dans un formulaire ou si l'élément `<output>` n'est pas du tout associé à un formulaire. Cet attribut permet ainsi de placer l'élément `<output>` où on veut dans le document, pas nécessairement comme descendant d'un formulaire.
+- {{htmlattrdef("name")}}
+  - : Le nom de l'élément, utilisé pour identifier l'élément `<output>` lors de l'envoi du formulaire.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Le formulaire qui suit fournit un curseur dont la valeur peut aller de 0 à 100 ainsi qu'un élément {{HTMLElement("input")}} dans lequel on peut saisir un deuxième nombre. Les deux nombres sont additionnés et le résultat est affiché dans l'élément <code>&lt;output&gt;</code> et est actualisé lorsqu'une des deux valeurs est modifiée.</p>
+Le formulaire qui suit fournit un curseur dont la valeur peut aller de 0 à 100 ainsi qu'un élément {{HTMLElement("input")}} dans lequel on peut saisir un deuxième nombre. Les deux nombres sont additionnés et le résultat est affiché dans l'élément `<output>` et est actualisé lorsqu'une des deux valeurs est modifiée.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;form oninput="result.value=parseInt(a.value)+parseInt(b.value)"&gt;
-    &lt;input type="range" name="b" value="50" /&gt; +
-    &lt;input type="number" name="a" value="10" /&gt; =
-    &lt;output name="result"&gt;60&lt;/output&gt;
-&lt;/form&gt;
-</pre>
+```html
+<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
+    <input type="range" name="b" value="50" /> +
+    <input type="number" name="a" value="10" /> =
+    <output name="result">60</output>
+</form>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample('Exemples','300','200')}}</p>
+{{EmbedLiveSample('Exemples','300','200')}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ%C3%A9_aux_formulaires">contenu associé au formulaire (énuméré, étiquetable, réinitialisable)</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLOutputElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_associ%C3%A9_aux_formulaires"
+          >contenu associé au formulaire (énuméré, étiquetable,
+          réinitialisable)</a
+        >,
+        <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLOutputElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-output-element', '&lt;output&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#the-output-element', '&lt;output&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'the-button-element.html#the-output-element', '&lt;output&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'forms.html#the-output-element', '&lt;output&gt;')}}                     | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.output")}}</p>
+{{Compat("html.elements.output")}}
 
-<div class="blockIndicator note">
-<p><strong>Note :</strong> La plupart des navigateurs implémente cet élément comme s'il avait l'attribut <code>aria-live</code> par défaut. Les outils d'assistance annonceront donc les résultats des interactions avec l'interface utilisateur qui arrivent sur cet élément sans demander à avoir passé le focus depuis un autre contrôle. Toutefois, ce comportement n'est pas précisément décrit dans les spécifications actuelles.</p>
-</div>
+> **Note :** La plupart des navigateurs implémente cet élément comme s'il avait l'attribut `aria-live` par défaut. Les outils d'assistance annonceront donc les résultats des interactions avec l'interface utilisateur qui arrivent sur cet élément sans demander à avoir passé le focus depuis un autre contrôle. Toutefois, ce comportement n'est pas précisément décrit dans les spécifications actuelles.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li>
-</ul>
+- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
diff --git a/files/fr/web/html/element/p/index.md b/files/fr/web/html/element/p/index.md
index 678b9bc74e..686f8c678a 100644
--- a/files/fr/web/html/element/p/index.md
+++ b/files/fr/web/html/element/p/index.md
@@ -8,127 +8,141 @@ tags:
   - Web
 translation_of: Web/HTML/Element/p
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;p&gt;</code></strong> représente un paragraphe de texte. Les paragraphes sont généralement représentés comme des blocs et séparés par un espace vertical, leur première ligne est également parfois indentée. Les paragraphes sont <a href="/fr/docs/Web/HTML/Éléments_en_bloc">des éléments blocs</a>.</p>
+L'élément HTML **`<p>`** représente un paragraphe de texte. Les paragraphes sont généralement représentés comme des blocs et séparés par un espace vertical, leur première ligne est également parfois indentée. Les paragraphes sont [des éléments blocs](/fr/docs/Web/HTML/Éléments_en_bloc).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/p.html", "tabbed-standard")}}
 
-<p>Étant des éléments de bloc, les paragraphes se fermeront automatiquement si un autre élément de bloc est analysé avant la balise de fermeture <code>&lt;/p&gt;</code> (voir Omission de balises dans le tableau qui suit).</p>
+Étant des éléments de bloc, les paragraphes se fermeront automatiquement si un autre élément de bloc est analysé avant la balise de fermeture `</p>` (voir Omission de balises dans le tableau qui suit).
 
-<div class="note">
-<p><strong>Note :</strong> Pour modifier l'espacement entre les paragraphes, il faudra utiliser la propriété CSS {{cssxref("margin")}}. <em>Il ne faut pas insérer de paragraphes vides ou d'éléments {{HTMLElement("br")}} afin de créer un espace</em>.</p>
-</div>
+> **Note :** Pour modifier l'espacement entre les paragraphes, il faudra utiliser la propriété CSS {{cssxref("margin")}}. _Il ne faut pas insérer de paragraphes vides ou d'éléments {{HTMLElement("br")}} afin de créer un espace_.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément, comme les autres éléments HTML, inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément, comme les autres éléments HTML, inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<div class="note">
-<p><strong>Note :</strong> L'attribut <code>align</code> pour les balises <code>&lt;p&gt;</code> est obsolète et ne doit plus être utilisé.</p>
-</div>
+> **Note :** L'attribut `align` pour les balises `<p>` est obsolète et ne doit plus être utilisé.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Premier paragraphe du texte.
   J'aime les licornes beaucoup
   beaucoup beaucoup.
-&lt;/p&gt;
+</p>
 
-&lt;p&gt;
+<p>
   Deuxième paragraphe du texte.
   Et si j'en avais une apprivoisée
   je serais très contente.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","300","150")}}</p>
+{{EmbedLiveSample("Exemples","300","150")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Répartir le contenu entre différents paragraphes permet d'améliorer l'accessibilité d'une page. Les lecteurs d'écran et autres outils d'assistance fournissent des raccourcis qui permettent aux utilisateurs d'accéder rapidement au paragraphe suivant ou précédent et ainsi de naviguer plus rapidement sur la page, comme le permettent les blancs pour la navigation visuelle des autres utilisateurs.</p>
+Répartir le contenu entre différents paragraphes permet d'améliorer l'accessibilité d'une page. Les lecteurs d'écran et autres outils d'assistance fournissent des raccourcis qui permettent aux utilisateurs d'accéder rapidement au paragraphe suivant ou précédent et ainsi de naviguer plus rapidement sur la page, comme le permettent les blancs pour la navigation visuelle des autres utilisateurs.
 
-<p>L'utilisation de paragraphes vides (des éléments HTML <code>&lt;p&gt;</code> sans contenu) est problématique pour les personnes qui naviguent sur une page à l'aide d'outils d'assistance. Les lecteurs d'écran, par exemple, pourraient annoncer l'élément mais pas le contenu associé ce qui peut être frustrant ou source de confusion.</p>
+L'utilisation de paragraphes vides (des éléments HTML `<p>` sans contenu) est problématique pour les personnes qui naviguent sur une page à l'aide d'outils d'assistance. Les lecteurs d'écran, par exemple, pourraient annoncer l'élément mais pas le contenu associé ce qui peut être frustrant ou source de confusion.
 
-<p>S'il est nécessaire d'avoir un espace supplémentaire, on pourra utiliser des propriétés CSS comme {{cssxref("margin")}} pour obtenir l'effet désiré.</p>
+S'il est nécessaire d'avoir un espace supplémentaire, on pourra utiliser des propriétés CSS comme {{cssxref("margin")}} pour obtenir l'effet désiré.
 
-<pre class="brush: css">p {
+```css
+p {
   margin-bottom: 2em; // on ajoute un espace après chaque paragraphe
 }
-</pre>
+```
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément {{HTMLElement("p")}} est immédiatement suivi d'un élément  {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hr")}}, {{HTMLElement("menu")}}, {{HTMLElement("nav")}}, {{HTMLElement("ol")}}, {{HTMLElement("pre")}}, {{HTMLElement("section")}}, {{HTMLElement("table")}}, {{HTMLElement("ul")}} ou d'un autre élément {{HTMLElement("p")}} ou s'il n'y a plus de contenu dans l'élément parent et que l'élément parent n'est pas un élément {{HTMLElement("a")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLParagraphElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        La balise de début est obligatoire. La balise de fin peut être absente
+        si l'élément {{HTMLElement("p")}} est immédiatement suivi d'un
+        élément  {{HTMLElement("address")}},
+        {{HTMLElement("article")}}, {{HTMLElement("aside")}},
+        {{HTMLElement("blockquote")}}, {{HTMLElement("div")}},
+        {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}},
+        {{HTMLElement("footer")}}, {{HTMLElement("form")}},
+        {{HTMLElement("h1")}}, {{HTMLElement("h2")}},
+        {{HTMLElement("h3")}}, {{HTMLElement("h4")}},
+        {{HTMLElement("h5")}}, {{HTMLElement("h6")}},
+        {{HTMLElement("header")}}, {{HTMLElement("hr")}},
+        {{HTMLElement("menu")}}, {{HTMLElement("nav")}},
+        {{HTMLElement("ol")}}, {{HTMLElement("pre")}},
+        {{HTMLElement("section")}}, {{HTMLElement("table")}},
+        {{HTMLElement("ul")}} ou d'un autre élément
+        {{HTMLElement("p")}} ou s'il n'y a plus de contenu dans
+        l'élément parent et que l'élément parent n'est pas un élément
+        {{HTMLElement("a")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLParagraphElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '&lt;p&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification depuis la dernière dérivation depuis la spécification W3C {{SpecName("HTML5 W3C")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '&lt;p&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Obsolescence de l'attribut <code>align</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '&lt;p&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Définition intiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires                                                                                                    |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-p-element', '&lt;p&gt;')}}         | {{Spec2('HTML WHATWG')}} | Aucune modification depuis la dernière dérivation depuis la spécification W3C {{SpecName("HTML5 W3C")}}. |
+| {{SpecName('HTML5 W3C', 'grouping-content.html#the-p-element', '&lt;p&gt;')}} | {{Spec2('HTML5 W3C')}}     | Obsolescence de l'attribut `align`.                                                                             |
+| {{SpecName('HTML4.01', 'struct/text.html#h-9.3.1', '&lt;p&gt;')}}                 | {{Spec2('HTML4.01')}}     | Définition intiale.                                                                                             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.p")}}</p>
+{{Compat("html.elements.p")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("hr")}}</li>
- <li>{{HTMLElement("br")}}</li>
-</ul>
+- {{HTMLElement("hr")}}
+- {{HTMLElement("br")}}
diff --git a/files/fr/web/html/element/param/index.md b/files/fr/web/html/element/param/index.md
index 69faf12605..b0299e19ad 100644
--- a/files/fr/web/html/element/param/index.md
+++ b/files/fr/web/html/element/param/index.md
@@ -8,107 +8,94 @@ tags:
   - Web
 translation_of: Web/HTML/Element/param
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;param&gt;</code></strong> définit les paramètres qui peuvent être employés dans un élément {{HTMLElement("object")}}.</p>
+L'élément HTML **`<param>`** définit les paramètres qui peuvent être employés dans un élément {{HTMLElement("object")}}.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("name")}}</dt>
- <dd>Le nom du paramètre</dd>
- <dt>{{htmlattrdef("value")}}</dt>
- <dd>Cet attribut définit la valeur du paramètre.</dd>
-</dl>
+- {{htmlattrdef("name")}}
+  - : Le nom du paramètre
+- {{htmlattrdef("value")}}
+  - : Cet attribut définit la valeur du paramètre.
 
-<h3 id="Attributs_obsolètes">Attributs obsolètes</h3>
+### Attributs obsolètes
 
-<dl>
- <dt>{{htmlattrdef("type")}} {{obsolete_inline}}</dt>
- <dd>Cet attribut est uniquement utilisé si l'attribut <code>valuetype</code> vaut <code>"ref"</code>. Il définit le type MIME des valeurs trouvées à l'URI.</dd>
- <dt>{{htmlattrdef("valuetype")}} {{obsolete_inline}}</dt>
- <dd>Cet attribut définit le type de la valeur indiquée par l'attribut <code>value</code>. Les valeurs possibles sont :
- <ul>
-  <li><code>data</code> : la valeur par défaut. La valeur est passée sous la forme d'une chaîne de caractères.</li>
-  <li><code>ref</code> : la valeur est une URI vers une ressource où sont stockées les valeurs de l'exécution.</li>
-  <li><code>object</code> : l'identifiant d'un autre élément {{HTMLElement("object")}} dans le document.</li>
- </ul>
- </dd>
-</dl>
+- {{htmlattrdef("type")}} {{obsolete_inline}}
+  - : Cet attribut est uniquement utilisé si l'attribut `valuetype` vaut `"ref"`. Il définit le type MIME des valeurs trouvées à l'URI.
+- {{htmlattrdef("valuetype")}} {{obsolete_inline}}
 
-<h2 id="Exemples">Exemples</h2>
+  - : Cet attribut définit le type de la valeur indiquée par l'attribut `value`. Les valeurs possibles sont :
 
-<pre class="brush: html">&lt;object data="animation.swf" type="application/x-shockwave-flash"&gt;
-  &lt;param name="param11" value="valeurConf"&gt;
-&lt;/object&gt; </pre>
-<h2 id="Résumé_technique">Résumé technique</h2>
+    - `data` : la valeur par défaut. La valeur est passée sous la forme d'une chaîne de caractères.
+    - `ref` : la valeur est une URI vers une ressource où sont stockées les valeurs de l'exécution.
+    - `object` : l'identifiant d'un autre élément {{HTMLElement("object")}} dans le document.
+
+## Exemples
+
+```html
+<object data="animation.swf" type="application/x-shockwave-flash">
+  <param name="param11" value="valeurConf">
+</object>
+```
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Aucun, c'est un élément vide.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balise</th>
-   <td>Cet élément est un élément vide, As it is a void element, the start tag must be present and the end tag must not be present.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément {{HTMLElement("object")}} avant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLParamElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Aucun, c'est un élément vide.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balise</th>
+      <td>
+        Cet élément est un élément vide, As it is a void element, the start tag
+        must be present and the end tag must not be present.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Un élément {{HTMLElement("object")}} avant du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLParamElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'the-iframe-element.html#the-param-element', '&lt;param&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'embedded-content-0.html#the-param-element', '&lt;param&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/objects.html#h-13.3.2', '&lt;param&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'the-iframe-element.html#the-param-element', '&lt;param&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-param-element', '&lt;param&gt;')}}     | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'struct/objects.html#h-13.3.2', '&lt;param&gt;')}}                         | {{Spec2('HTML4.01')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.param")}}</p>
+{{Compat("html.elements.param")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("object")}}</li>
-</ul>
+- {{HTMLElement("object")}}
diff --git a/files/fr/web/html/element/picture/index.md b/files/fr/web/html/element/picture/index.md
index 92dda31bdd..99675b83d5 100644
--- a/files/fr/web/html/element/picture/index.md
+++ b/files/fr/web/html/element/picture/index.md
@@ -8,115 +8,124 @@ tags:
   - Web
 translation_of: Web/HTML/Element/picture
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;picture&gt;</code></strong> est un conteneur utilisé afin de définir zéro ou plusieurs éléments {{HTMLElement("source")}} destinés à un élément {{HTMLElement("img")}}. Le navigateur choisira la source la plus pertinente selon la disposition de la page (les contraintes qui s'appliquent à la boîte dans laquelle l'image devra être affichée), selon l'appareil utilisé (la densité de pixels de l'affichage par exemple avec les appareils hiDPI) et selon les formats pris en charge (ex. WebP pour les navigateurs Chromium ou PNG pour les autres). Si aucune correspondance n'est trouvée parmi les éléments <code>&lt;source&gt;</code>, c'est le fichier défini par l'attribut {{htmlattrxref("src", "img")}} de l'élément <code>&lt;img&gt;</code> qui sera utilisé.</p>
+L'élément HTML **`<picture>`** est un conteneur utilisé afin de définir zéro ou plusieurs éléments {{HTMLElement("source")}} destinés à un élément {{HTMLElement("img")}}. Le navigateur choisira la source la plus pertinente selon la disposition de la page (les contraintes qui s'appliquent à la boîte dans laquelle l'image devra être affichée), selon l'appareil utilisé (la densité de pixels de l'affichage par exemple avec les appareils hiDPI) et selon les formats pris en charge (ex. WebP pour les navigateurs Chromium ou PNG pour les autres). Si aucune correspondance n'est trouvée parmi les éléments `<source>`, c'est le fichier défini par l'attribut {{htmlattrxref("src", "img")}} de l'élément `<img>` qui sera utilisé.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/picture.html", "tabbed-standard")}}
 
-<p>L'agent utilisateur examine chaque attribut présent dans <code>&lt;source&gt;</code> ({{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, and {{htmlattrxref("type", "source")}}) pour sélectionner l'URL de la meilleure ressource selon la disposition de la page, les caractéristiques de l'écran de l'appareil, etc.</p>
+L'agent utilisateur examine chaque attribut présent dans `<source>` ({{htmlattrxref("srcset", "source")}}, {{htmlattrxref("media", "source")}}, and {{htmlattrxref("type", "source")}}) pour sélectionner l'URL de la meilleure ressource selon la disposition de la page, les caractéristiques de l'écran de l'appareil, etc.
 
-<p>L'élément <code>&lt;picture&gt;</code> peut être utilisé pour :</p>
+L'élément `<picture>` peut être utilisé pour :
 
-<ul>
- <li>Fournir une direction artistique : rogner, modifier des images selon différentes conditions de média</li>
- <li>Fournir différents formats d'image lorsque certains formats ne sont pas pris en charge par les navigateurs</li>
-</ul>
+- Fournir une direction artistique : rogner, modifier des images selon différentes conditions de média
+- Fournir différents formats d'image lorsque certains formats ne sont pas pris en charge par les navigateurs
 
-<p>Lorsqu'on fournit des versions haute densité d'une image pour les appareils avec un DPI élevé, on utilisera plutôt {{htmlattrxref("srcset", "img")}} sur l'élément <code>&lt;img&gt;</code> à la place. Ainsi, les navigateurs pourront choisir une image à plus basse densité dans un contexte où les flux réseaux doivent être économisés. De plus, il ne sera pas nécessaire d'écrire des requêtes média explicites.</p>
+Lorsqu'on fournit des versions haute densité d'une image pour les appareils avec un DPI élevé, on utilisera plutôt {{htmlattrxref("srcset", "img")}} sur l'élément `<img>` à la place. Ainsi, les navigateurs pourront choisir une image à plus basse densité dans un contexte où les flux réseaux doivent être économisés. De plus, il ne sera pas nécessaire d'écrire des requêtes média explicites.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster le positionnement de l'image dans le cadre de l'élément. La propriété {{cssxref("object-fit")}} permet quant à elle de contrôler la façon dont la taille de l'image est ajustée.</p>
+Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster le positionnement de l'image dans le cadre de l'élément. La propriété {{cssxref("object-fit")}} permet quant à elle de contrôler la façon dont la taille de l'image est ajustée.
 
-<div class="note">
-<p><strong>Note :</strong> Ces propriétés doivent être utilisées sur les éléments <code>&lt;img&gt;</code> fils et pas sur l'élément <code>&lt;picture&gt;</code>.</p>
-</div>
+> **Note :** Ces propriétés doivent être utilisées sur les éléments `<img>` fils et pas sur l'élément `<picture>`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Utiliser_l'attribut_media">Utiliser l'attribut <code>media</code></h3>
+### Utiliser l'attribut `media`
 
-<p>L'attribut <code>media</code> de l'élément {{HTMLElement("source")}} permet de rédiger une requête média qui sera évaluée par l'agent utilisateur afin de sélectionner ou non la source. Si la requête média est évaluée à <code>false</code>, l'élément {{HTMLElement("source")}} est ignoré.</p>
+L'attribut `media` de l'élément {{HTMLElement("source")}} permet de rédiger une requête média qui sera évaluée par l'agent utilisateur afin de sélectionner ou non la source. Si la requête média est évaluée à `false`, l'élément {{HTMLElement("source")}} est ignoré.
 
-<pre class="brush: html">&lt;picture&gt;
- &lt;source srcset="mdn-logo-wide.png" media="(min-width: 600px)"&gt;
- &lt;img src="mdn-logo-narrow.png" alt="MDN"&gt;
-&lt;/picture&gt;
-</pre>
+```html
+<picture>
+ <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
+ <img src="mdn-logo-narrow.png" alt="MDN">
+</picture>
+```
 
-<h3 id="Utiliser_l'attribut_type">Utiliser l'attribut <code>type</code></h3>
+### Utiliser l'attribut `type`
 
-<p>L'attribut <code>type</code> d'un élément {{HTMLElement("source")}} permet d'indiquer le type MIME du fichier fourni via l'attribut <code>srcset</code>. Si l'agent utilisateur ne prend pas en charge ce type de fichier, l'élément {{HTMLElement("source")}} est ignoré.</p>
+L'attribut `type` d'un élément {{HTMLElement("source")}} permet d'indiquer le type MIME du fichier fourni via l'attribut `srcset`. Si l'agent utilisateur ne prend pas en charge ce type de fichier, l'élément {{HTMLElement("source")}} est ignoré.
 
-<pre class="brush: html">​&lt;picture&gt;
- &lt;source srcset="mdn-logo.svg" type="image/svg+xml"&gt;
- &lt;img src="mdn-logo.png" alt="MDN"&gt;
-&lt;/picture&gt;
-</pre>
+```html
+​<picture>
+ <source srcset="mdn-logo.svg" type="image/svg+xml">
+ <img src="mdn-logo.png" alt="MDN">
+</picture>
+```
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Zéro ou plusieurs éléments {{HTMLElement("source")}} suivi d'un élément {{HTMLElement("img")}} avec éventuellement des éléments scriptés entre.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui peut contenir du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9">contenu intégré</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLPictureElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras%C3%A9"
+          >contenu phrasé</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9"
+          >contenu intégré</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        Zéro ou plusieurs éléments {{HTMLElement("source")}} suivi d'un
+        élément {{HTMLElement("img")}} avec éventuellement des éléments
+        scriptés entre.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui peut contenir du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_int%C3%A9gr%C3%A9"
+          >contenu intégré</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLPictureElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '&lt;picture&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '&lt;picture&gt;')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.picture")}}</p>
+{{Compat("html.elements.picture")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("img")}}</li>
- <li>{{HTMLElement("source")}}</li>
- <li>Les propriétés CSS aidant au positionnement et au redimensionnement : {{cssxref("object-position")}} et {{cssxref("object-fit")}}</li>
-</ul>
+- {{HTMLElement("img")}}
+- {{HTMLElement("source")}}
+- Les propriétés CSS aidant au positionnement et au redimensionnement : {{cssxref("object-position")}} et {{cssxref("object-fit")}}
diff --git a/files/fr/web/html/element/plaintext/index.md b/files/fr/web/html/element/plaintext/index.md
index 80b5a98b0c..6e2105bcfe 100644
--- a/files/fr/web/html/element/plaintext/index.md
+++ b/files/fr/web/html/element/plaintext/index.md
@@ -9,39 +9,32 @@ tags:
   - Web
 translation_of: Web/HTML/Element/plaintext
 ---
-<div>{{HTMLRef}}{{Obsolete_header}}</div>
+{{HTMLRef}}{{Obsolete_header}}
 
-<p>L'élément HTML <strong><code>&lt;plaintext&gt;</code></strong> permet d'afficher du texte qui n'est pas interprété comme du HTML. Il ne possède pas de balise de fermeture, car tout ce qui suit n'est plus considéré comme du HTML.</p>
+L'élément HTML **`<plaintext>`** permet d'afficher du texte qui n'est pas interprété comme du HTML. Il ne possède pas de balise de fermeture, car tout ce qui suit n'est plus considéré comme du HTML.
 
-<div class="note"><p><strong>Note :</strong> Ne pas utiliser cet élément.</p>
+> **Note :** Ne pas utiliser cet élément.
+>
+> - Il est déprécié depuis HTML 2, et n'a jamais été implementé par tous les navigateurs d'une manière cohérente. De plus, il est obsolète depuis HTML5, et pourra être rendu par les agents-utilisateurs qui l'acceptent comme un élément {{HTMLElement("pre")}}, qui interprètera le HTML contenu même si ce n'est pas ce qui est souhaité !
+> - Si l'élément {{HTMLElement("plaintext")}} est le premier élément de la page (sauf éléments non affichés), n'utilisez pas de HTML. Configurez votre serveur pour servir la page avec le [type MIME](/fr/docs/Properly_Configuring_Server_MIME_Types) `text/plain`.
+> - Utilisez plutôt l'élément {{HTMLElement("pre")}} ou, si c'est sémantiquement approprié, l'élément {{HTMLElement("code")}}. Échappez éventuellement '`<`', '`>`' et `&` pour que le contenu ne soit pas interprété par inadvertance.
+> - Une police à chasse fixe peut aussi être obtenue par un simple élément {{HTMLElement("div")}}, et en appliquant la police générique `monospace` comme valeur pour la propriété [CSS](/fr/docs/Web/CSS) {{cssxref("font-family")}}.
 
-<ul>
- <li>Il est déprécié depuis HTML 2, et n'a jamais été implementé par tous les navigateurs d'une manière cohérente. De plus, il est obsolète depuis HTML5, et pourra être rendu par les agents-utilisateurs qui l'acceptent comme un élément {{HTMLElement("pre")}}, qui interprètera le HTML contenu même si ce n'est pas ce qui est souhaité !</li>
- <li>Si l'élément {{HTMLElement("plaintext")}} est le premier élément de la page (sauf éléments non affichés), n'utilisez pas de HTML. Configurez votre serveur pour servir la page avec le <a href="/fr/docs/Properly_Configuring_Server_MIME_Types">type MIME</a> <code>text/plain</code>.</li>
- <li>Utilisez plutôt l'élément {{HTMLElement("pre")}} ou, si c'est sémantiquement approprié, l'élément {{HTMLElement("code")}}. Échappez éventuellement '<code>&lt;</code>', '<code>&gt;</code>' et <code>&amp;</code> pour que le contenu ne soit pas interprété par inadvertance.</li>
- <li>Une police à chasse fixe peut aussi être obtenue par un simple élément {{HTMLElement("div")}}, et en appliquant la police générique <code>monospace</code> comme valeur pour la propriété <a href="/fr/docs/Web/CSS">CSS</a> {{cssxref("font-family")}}.</li>
-</ul>
-</div>
+## Attributs
 
-<h2 id="Attributs">Attributs</h2>
+Cet élément n'a aucun autre attribut en dehors des [attributs universels](/fr/docs/Web/HTML/Attributs_universels), communs à tous les éléments.
 
-<p>Cet élément n'a aucun autre attribut en dehors des <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>, communs à tous les éléments.</p>
+## Interface DOM
 
-<h2 id="Interface_DOM">Interface DOM</h2>
+Cet élément implémente l'interface {{domxref('HTMLElement')}}.
 
-<p>Cet élément implémente l'interface {{domxref('HTMLElement')}}.</p>
+> **Note :** Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref('HTMLSpanElement')}} pour cet élément.
 
-<div class="note">
-<p><strong>Note :</strong> Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</p>
-</div>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("html.elements.plaintext")}}
 
-<p>{{Compat("html.elements.plaintext")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{HTMLElement("pre")}} et {{HTMLElement("code")}} qui doivent être utilisés à la place</li>
- <li>{{HTMLElement("listing")}} et {{HTMLElement("xmp")}}, similaires mais également obsolètes</li>
-</ul>
+- {{HTMLElement("pre")}} et {{HTMLElement("code")}} qui doivent être utilisés à la place
+- {{HTMLElement("listing")}} et {{HTMLElement("xmp")}}, similaires mais également obsolètes
diff --git a/files/fr/web/html/element/pre/index.md b/files/fr/web/html/element/pre/index.md
index 6b6aadfb0c..7bc734efe0 100644
--- a/files/fr/web/html/element/pre/index.md
+++ b/files/fr/web/html/element/pre/index.md
@@ -8,142 +8,133 @@ tags:
   - Web
 translation_of: Web/HTML/Element/pre
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML<strong> <code>&lt;pre&gt;</code></strong> représente du texte préformaté, généralement écrit avec une police à chasse fixe. Le texte est affiché tel quel, les espaces utilisés dans le document HTML seront retranscrits.</p>
+L'élément HTML** `<pre>`** représente du texte préformaté, généralement écrit avec une police à chasse fixe. Le texte est affiché tel quel, les espaces utilisés dans le document HTML seront retranscrits.
 
-<div class="note">
-<p><strong>Note :</strong> Il est nécessaire d'échapper les caractères '<code>&lt;</code>' en '<code>&amp;lt;</code>' afin de s'assurer que le code écrit entre les éléments ne soit pas interprété de façon involontaire.</p>
-</div>
+> **Note :** Il est nécessaire d'échapper les caractères '`<`' en '`&lt;`' afin de s'assurer que le code écrit entre les éléments ne soit pas interprété de façon involontaire.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{deprecated_inline}}</dt>
- <dd>Cet attribut contient le nombre <em>préféré</em> de caractères qu'une ligne devrait avoir. Cet attribut était un synonyme non-standard de {{htmlattrxref("width", "pre")}}. Afin d'obtenir cet effet, il est plutôt conseillé d'utiliser la propriété {{cssxref("width")}}.</dd>
- <dt>{{htmlattrdef("width")}} {{deprecated_inline}}</dt>
- <dd>Cet attribut contient le nombre <em>préféré</em> de caractères qu'une ligne devrait avoir. Bien qu'implémenté, cet attribut n'a aucun effet visuel. Pour obtenir cet effet, il est plutôt conseillé d'utiliser {{cssxref("width")}}.</dd>
- <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt>
- <dd>Cet attribut est une indication sur la façon de gérer le dépassement d'une ligne. Les navigateurs modernes ignorent cette indication et cet attribut n'engendre aucun effet visuel. Pour obtenir cet effet, il faut utiliser la propriété CSS {{cssxref("white-space")}}.</dd>
-</dl>
+- {{htmlattrdef("cols")}} {{non-standard_inline}}{{deprecated_inline}}
+  - : Cet attribut contient le nombre _préféré_ de caractères qu'une ligne devrait avoir. Cet attribut était un synonyme non-standard de {{htmlattrxref("width", "pre")}}. Afin d'obtenir cet effet, il est plutôt conseillé d'utiliser la propriété {{cssxref("width")}}.
+- {{htmlattrdef("width")}} {{deprecated_inline}}
+  - : Cet attribut contient le nombre _préféré_ de caractères qu'une ligne devrait avoir. Bien qu'implémenté, cet attribut n'a aucun effet visuel. Pour obtenir cet effet, il est plutôt conseillé d'utiliser {{cssxref("width")}}.
+- {{htmlattrdef("wrap")}} {{non-standard_inline}}
+  - : Cet attribut est une indication sur la façon de gérer le dépassement d'une ligne. Les navigateurs modernes ignorent cette indication et cet attribut n'engendre aucun effet visuel. Pour obtenir cet effet, il faut utiliser la propriété CSS {{cssxref("white-space")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;pre&gt;
+```html
+<pre>
 body {
   color:red;
 }
-&lt;/pre&gt;
 </pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","200","120")}}</p>
+{{EmbedLiveSample("Exemples","200","120")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Il est important de fournir une description alternative pour toute image ou diagramme créé avec du texte préformaté. Cette description alternative devrait décrire clairement, et de façon concise, le contenu du diagramme.</p>
+Il est important de fournir une description alternative pour toute image ou diagramme créé avec du texte préformaté. Cette description alternative devrait décrire clairement, et de façon concise, le contenu du diagramme.
 
-<p>Les personnes souffrant de troubles de la vision et/ou naviguant à l'aide d'outils d'assistance comme des lecteurs d'écran peuvent ne pas comprendre le diagramme si celui-ci est construit avec des lettres et symboles.</p>
+Les personnes souffrant de troubles de la vision et/ou naviguant à l'aide d'outils d'assistance comme des lecteurs d'écran peuvent ne pas comprendre le diagramme si celui-ci est construit avec des lettres et symboles.
 
-<p>Pour légender un tel diagramme, on pourra utiliser une combinaison d'éléments {{HTMLElement("figure")}} et {{HTMLElement("figcaption")}} relié via un attribut {{htmlattrxref("id")}} et les attributs <a href="/fr/docs/Accessibilité/ARIA">ARIA</a> <code>role</code> et <code>aria-labelledby</code> afin que le texte soit annoncé comme une image et que l'élément <code>figcaption</code> fournisse la description alternative.</p>
+Pour légender un tel diagramme, on pourra utiliser une combinaison d'éléments {{HTMLElement("figure")}} et {{HTMLElement("figcaption")}} relié via un attribut {{htmlattrxref("id")}} et les attributs [ARIA](/fr/docs/Accessibilité/ARIA) `role` et `aria-labelledby` afin que le texte soit annoncé comme une image et que l'élément `figcaption` fournisse la description alternative.
 
-<h3 id="Exemple">Exemple</h3>
+### Exemple
 
-<pre>&lt;figure role="img" aria-labelledby="legende-vache"&gt;
-  &lt;pre&gt;
-  _____________
-&lt; Oh la vache !&gt;
-  -------------
-         \   ^__^
-          \  (oo)\_______
-             (__)\       )\/\
-                 ||----w |
-                 ||     ||
-  &lt;/pre&gt;
-  &lt;figcaption id="legende-vache"&gt;
-    Une vache qui dit « Oh la vache ! ». La vache est illustrée avec du texte à chasse fixe.
-  &lt;/figcaption&gt;
-&lt;/figure&gt;
-</pre>
+    <figure role="img" aria-labelledby="legende-vache">
+      <pre>
+      _____________
+    < Oh la vache !>
+      -------------
+             \   ^__^
+              \  (oo)\_______
+                 (__)\       )\/\
+                     ||----w |
+                     ||     ||
+      </pre>
+      <figcaption id="legende-vache">
+        Une vache qui dit « Oh la vache ! ». La vache est illustrée avec du texte à chasse fixe.
+      </figcaption>
+    </figure>
 
-<ul>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">Comprendre les règles WCAG 1.1</a></li>
- <li><em><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></em><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html"> (en anglais)</a></li>
-</ul>
+- [Comprendre les règles WCAG 1.1](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content)
+- _[H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H86.html)_[ (en anglais)](https://www.w3.org/TR/WCAG20-TECHS/H86.html)
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLPreElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLPreElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-pre-element', '&lt;pre&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification majure depuis {{SpecName("HTML5 W3C")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Aucune modification majeure depuis {{SpecName("HTML4.01")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '&lt;pre&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Dépréciation de l'attribut  <code>cols</code>.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                | État                             | Commentaires                                                         |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-pre-element', '&lt;pre&gt;')}}         | {{Spec2('HTML WHATWG')}} | Aucune modification majure depuis {{SpecName("HTML5 W3C")}}   |
+| {{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}} | {{Spec2('HTML5 W3C')}}     | Aucune modification majeure depuis {{SpecName("HTML4.01")}}. |
+| {{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '&lt;pre&gt;')}}                     | {{Spec2('HTML4.01')}}     | Dépréciation de l'attribut  `cols`.                                  |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.pre")}}</p>
+{{Compat("html.elements.pre")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les propriétés CSS {{cssxref('white-space')}} et {{cssxref('word-break')}}</li>
-</ul>
+- Les propriétés CSS {{cssxref('white-space')}} et {{cssxref('word-break')}}
diff --git a/files/fr/web/html/element/progress/index.md b/files/fr/web/html/element/progress/index.md
index ea62218a67..d5335cb80b 100644
--- a/files/fr/web/html/element/progress/index.md
+++ b/files/fr/web/html/element/progress/index.md
@@ -8,107 +8,113 @@ tags:
   - Web
 translation_of: Web/HTML/Element/progress
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;progress&gt;</code></strong> indique l'état de complétion d'une tâche et est généralement représenté par une barre de progression.</p>
+L'élément HTML **`<progress>`** indique l'état de complétion d'une tâche et est généralement représenté par une barre de progression.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/progress.html", "tabbed-standard")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("max")}}</dt>
- <dd>Cet attribut indique la valeur correspondant à la complétion de la tâche. Si l'attribut <code>max</code> est présent, sa valeur doit être un nombre décimal supérieur à 0. La valeur par défaut est 1.</dd>
- <dt>{{htmlattrdef("value")}}</dt>
- <dd>Cet attribut indique l'état actuel de complétion de la tâche avec une valeur numérique. La valeur de l'attribut doit être un nombre décimal compris entre 0 et <code>max</code>  (ou entre 0 et 1 si l'attribut <code>max</code> est absent). Si l'attribut <code>value</code> est absent, la barre de progression traduit un état indéterminé (la tâche est en cours et on ne sait pas la durée qu'elle prendra).</dd>
-</dl>
+- {{htmlattrdef("max")}}
+  - : Cet attribut indique la valeur correspondant à la complétion de la tâche. Si l'attribut `max` est présent, sa valeur doit être un nombre décimal supérieur à 0. La valeur par défaut est 1.
+- {{htmlattrdef("value")}}
+  - : Cet attribut indique l'état actuel de complétion de la tâche avec une valeur numérique. La valeur de l'attribut doit être un nombre décimal compris entre 0 et `max`  (ou entre 0 et 1 si l'attribut `max` est absent). Si l'attribut `value` est absent, la barre de progression traduit un état indéterminé (la tâche est en cours et on ne sait pas la durée qu'elle prendra).
 
-<div class="note">
-<p><strong>Note :</strong> La valeur minimale est toujours 0 et il n'existe pas d'attribut <code>min</code> pour l'élément <code>progress</code>. La propriété CSS {{cssxref("-moz-orient")}} peut être utilisée afin d'indiquer si barre de progression doit être affichée horizontalement (le comportement par défaut) ou verticalement.<br>
- La pseudo-classe CSS {{cssxref(":indeterminate")}} permet quant à elle de cibler les barres de progression indéterminées. Pour qu'une barre d'avancement retrouve un état indéterminé après qu'elle ait eu une valeur, on pourra utiliser <code>element.removeAttribute("value")</code>.</p>
-</div>
+> **Note :** La valeur minimale est toujours 0 et il n'existe pas d'attribut `min` pour l'élément `progress`. La propriété CSS {{cssxref("-moz-orient")}} peut être utilisée afin d'indiquer si barre de progression doit être affichée horizontalement (le comportement par défaut) ou verticalement.
+> La pseudo-classe CSS {{cssxref(":indeterminate")}} permet quant à elle de cibler les barres de progression indéterminées. Pour qu'une barre d'avancement retrouve un état indéterminé après qu'elle ait eu une valeur, on pourra utiliser `element.removeAttribute("value")`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;progress value="70" max="100"&gt;70 %&lt;/progress&gt;
-</pre>
+```html
+<progress value="70" max="100">70 %</progress>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples", 200, 50)}}</p>
+{{EmbedLiveSample("Exemples", 200, 50)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">contenu de formulaire (étiquetable)</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> sans élément <code>&lt;progress&gt;</code> parmi ses descendants.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLProgressElement")}}.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires"
+          >contenu de formulaire (étiquetable)</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >
+        sans élément <code>&#x3C;progress></code> parmi ses descendants.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLProgressElement")}}.</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '&lt;progress&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', '&lt;progress&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '&lt;progress&gt;')}} | {{Spec2('HTML WHATWG')}} |                      |
+| {{SpecName('HTML5 W3C', 'forms.html#the-progress-element', '&lt;progress&gt;')}} | {{Spec2('HTML5 W3C')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.progress")}}</p>
+{{Compat("html.elements.progress")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("meter")}}</li>
- <li>{{cssxref(":indeterminate")}}</li>
- <li>{{cssxref("-moz-orient")}}</li>
- <li>{{cssxref("::-moz-progress-bar")}}</li>
- <li>{{cssxref("::-ms-fill")}}</li>
- <li>{{cssxref("::-webkit-progress-bar")}}</li>
- <li>{{cssxref("::-webkit-progress-value")}}</li>
- <li>{{cssxref("::-webkit-progress-inner-element")}}</li>
-</ul>
+- {{HTMLElement("meter")}}
+- {{cssxref(":indeterminate")}}
+- {{cssxref("-moz-orient")}}
+- {{cssxref("::-moz-progress-bar")}}
+- {{cssxref("::-ms-fill")}}
+- {{cssxref("::-webkit-progress-bar")}}
+- {{cssxref("::-webkit-progress-value")}}
+- {{cssxref("::-webkit-progress-inner-element")}}
diff --git a/files/fr/web/html/element/q/index.md b/files/fr/web/html/element/q/index.md
index f4656745b2..e64882a6cf 100644
--- a/files/fr/web/html/element/q/index.md
+++ b/files/fr/web/html/element/q/index.md
@@ -8,107 +8,109 @@ tags:
   - Web
 translation_of: Web/HTML/Element/q
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML<strong> <code>&lt;q&gt;</code></strong> indique que le texte qu'il contient est une citation en incise. La plupart des navigateurs modernes entoure le texte de cet élément avec des marques de citation. Cet élément est destiné aux citations courtes qui ne nécessitent pas de sauts de paragraphe. Pour les plus grandes citations, on utilisera l'élément {{HTMLElement("blockquote")}}.</p>
+L'élément HTML** `<q>`** indique que le texte qu'il contient est une citation en incise. La plupart des navigateurs modernes entoure le texte de cet élément avec des marques de citation. Cet élément est destiné aux citations courtes qui ne nécessitent pas de sauts de paragraphe. Pour les plus grandes citations, on utilisera l'élément {{HTMLElement("blockquote")}}.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/q.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/q.html", "tabbed-shorter")}}
 
-<div class="note">
-<p><strong>Note :</strong> La plupart des navigateurs récents ajoutent automatiquement des guillemets autours du contenu d'un élément <code>&lt;q&gt;</code> mais il peut être nécessaire d'ajouter une règle CSS pour les ajouter dans les anciens navigateurs.</p>
-</div>
+> **Note :** La plupart des navigateurs récents ajoutent automatiquement des guillemets autours du contenu d'un élément `<q>` mais il peut être nécessaire d'ajouter une règle CSS pour les ajouter dans les anciens navigateurs.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("cite")}}</dt>
- <dd>La valeur de cet attribut est une URL désignant la source du message ou de l'information citée. Cet attribut est prévu pour fournir des renseignements concernant le contexte ou la référence de cette citation.</dd>
-</dl>
+- {{htmlattrdef("cite")}}
+  - : La valeur de cet attribut est une URL désignant la source du message ou de l'information citée. Cet attribut est prévu pour fournir des renseignements concernant le contexte ou la référence de cette citation.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;Chaque fois que Kenny est tué, Stan dira
-   &lt;q cite="http://fr.wikipedia.org/wiki/Kenny_McCormick#Le_dialogue_rituel"&gt;
+```html
+<p>Chaque fois que Kenny est tué, Stan dira
+   <q cite="http://fr.wikipedia.org/wiki/Kenny_McCormick#Le_dialogue_rituel">
      Oh mon Dieu, ils ont tué Kenny !
-   &lt;/q&gt;.
-&lt;/p&gt;
-</pre>
+   </q>.
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","300","120")}}</p>
+{{EmbedLiveSample("Exemples","300","120")}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLQuoteElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément acceptant du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLQuoteElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-q-element', '&lt;q&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '&lt;q&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '&lt;q&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                | État                             | Commentaires         |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-q-element', '&lt;q&gt;')}}             | {{Spec2('HTML WHATWG')}} |                      |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '&lt;q&gt;')}} | {{Spec2('HTML5 W3C')}}     |                      |
+| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '&lt;q&gt;')}}                     | {{Spec2('HTML4.01')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.q")}}</p>
+{{Compat("html.elements.q")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("blockquote")}} pour les citations longues</li>
- <li>{{HTMLElement("cite")}} pour les sources des citations</li>
-</ul>
+- {{HTMLElement("blockquote")}} pour les citations longues
+- {{HTMLElement("cite")}} pour les sources des citations
diff --git a/files/fr/web/html/element/rb/index.md b/files/fr/web/html/element/rb/index.md
index 033176d14d..983f583aa2 100644
--- a/files/fr/web/html/element/rb/index.md
+++ b/files/fr/web/html/element/rb/index.md
@@ -8,131 +8,133 @@ tags:
   - Ruby
 translation_of: Web/HTML/Element/rb
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément de <strong>base ruby (<code>&lt;rb&gt;</code>) </strong>est utilisé afin de délimiter le composant texte de base d'une annotation {{HTMLElement("ruby")}}. Autrement dit, le texte qui est annoté. Un élément <code>&lt;rb&gt;</code> devrait encadrer chaque segment atomique du texte de base.</p>
+L'élément de **base ruby (`<rb>`)** est utilisé afin de délimiter le composant texte de base d'une annotation {{HTMLElement("ruby")}}. Autrement dit, le texte qui est annoté. Un élément `<rb>` devrait encadrer chaque segment atomique du texte de base.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Seuls les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> peuvent être utilisés sur cet élément.</p>
+Seuls les [attributs universels](/fr/docs/Web/HTML/Attributs_universels) peuvent être utilisés sur cet élément.
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<ul>
- <li>Les annotations ruby sont utilisées afin d'afficher la prononciation pour les caractères d'Asie orientale tels que les caractères japonais furigana ou les caractères taïwanais bopomofo. L'élément <code>&lt;rb&gt;</code> permet de séparer chaque segment du texte de base ruby.</li>
- <li>Bien que <code>&lt;rb&gt;</code> ne soit pas un élément vide, il est courant de n'inclure que la balise d'ouverture de chaque élément afin de simplifier le balisage dédié aux annotations ruby.</li>
- <li>Il faut inclure un élément {{htmlelement("rt")}} pour chaque segment de base <code>&lt;rb&gt;</code> qu'on souhaite annoter.</li>
-</ul>
+- Les annotations ruby sont utilisées afin d'afficher la prononciation pour les caractères d'Asie orientale tels que les caractères japonais furigana ou les caractères taïwanais bopomofo. L'élément `<rb>` permet de séparer chaque segment du texte de base ruby.
+- Bien que `<rb>` ne soit pas un élément vide, il est courant de n'inclure que la balise d'ouverture de chaque élément afin de simplifier le balisage dédié aux annotations ruby.
+- Il faut inclure un élément {{htmlelement("rt")}} pour chaque segment de base `<rb>` qu'on souhaite annoter.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Dans cet exemple, on fournit une annotation pour le caractère original correspondant à "Kanji" :</p>
+Dans cet exemple, on fournit une annotation pour le caractère original correspondant à "Kanji" :
 
-<pre class="brush: html">&lt;ruby&gt;
-  &lt;rb&gt;漢&lt;rb&gt;字
-  &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;kan&lt;rt&gt;ji&lt;rp&gt;)&lt;/rp&gt;
-&lt;/ruby&gt;</pre>
+```html
+<ruby>
+  <rb>漢<rb>字
+  <rp>(</rp><rt>kan<rt>ji<rp>)</rp>
+</ruby>
+```
 
-<p>On voit ici que deux éléments <code>&lt;rb&gt;</code> sont inclus et permettent de délimiter les deux segments du texte de base. Pour l'annotation, chaque partie correspondante est délimitée par un élément {{htmlelement("rt")}}.</p>
+On voit ici que deux éléments `<rb>` sont inclus et permettent de délimiter les deux segments du texte de base. Pour l'annotation, chaque partie correspondante est délimitée par un élément {{htmlelement("rt")}}.
 
-<p>On aurait également pu écrire cet exemple avec les deux parties du texte de base complètement séparées. Dans ce cas, il n'aurait pas été nécessaire d'inclure les éléments <code>&lt;rb&gt;</code> :</p>
+On aurait également pu écrire cet exemple avec les deux parties du texte de base complètement séparées. Dans ce cas, il n'aurait pas été nécessaire d'inclure les éléments `<rb>` :
 
-<pre class="brush: html">&lt;ruby&gt;
-  漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Kan&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
-  字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ji&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
-&lt;/ruby&gt;</pre>
+```html
+<ruby>
+  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
+  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
+</ruby>
+```
 
-<h3 id="Avec_prise_en_charge_de_ruby">Avec prise en charge de ruby</h3>
+### Avec prise en charge de ruby
 
-<pre class="brush: html hidden">&lt;ruby&gt; &lt;rb&gt;漢&lt;rb&gt;字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;kan&lt;rt&gt;ji&lt;rp&gt;)&lt;/rp&gt; &lt;/ruby&gt;
-</pre>
+```html hidden
+<ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   font-size: 22px;
-}</pre>
+}
+```
 
-<p>Voici le résultat obtenu :</p>
+Voici le résultat obtenu :
 
-<p>{{EmbedLiveSample("Avec_prise_en_charge_de_ruby", "100%", 60)}}</p>
+{{EmbedLiveSample("Avec_prise_en_charge_de_ruby", "100%", 60)}}
 
-<p>Pour un navigateur qui ne prend pas en charge les annotations ruby, voici à quoi aurait ressemblé le résultat :</p>
+Pour un navigateur qui ne prend pas en charge les annotations ruby, voici à quoi aurait ressemblé le résultat :
 
-<h3 id="Sans_prise_en_charge_de_ruby">Sans prise en charge de ruby</h3>
+### Sans prise en charge de ruby
 
-<pre class="brush: html hidden">漢字 (kan ji)</pre>
+```html hidden
+漢字 (kan ji)
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   font-size: 22px;
 }
-</pre>
+```
+
+{{EmbedLiveSample("Sans_prise_en_charge_de_ruby", "100%", 60)}}
 
-<p>{{EmbedLiveSample("Sans_prise_en_charge_de_ruby", "100%", 60)}}</p>
+> **Note :** Voir l'article sur l'élément {{HTMLElement("ruby")}} pour de plus amples exemples.
 
-<div class="note">
-<p><strong>Note :</strong> Voir l'article sur l'élément {{HTMLElement("ruby")}} pour de plus amples exemples.</p>
-</div>
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu">Catégories de contenu</a></th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Cet élément peut être l'élément fils d'un élément {{htmlelement("ruby")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balise</th>
-   <td>La balise de fin peut être omise si l'élément est immédiatement suivi d'un élément {{HTMLElement("rt")}}, {{HTMLElement("rtc")}} ou {{HTMLElement("rp")}} ou encore par un autre élément <code>&lt;rb&gt;</code> ou s'il n'y a plus de contenu dans l'élément parent.</td>
-  </tr>
-  <tr>
-   <th scope="row">Éléments parents autorisés</th>
-   <td>Un élément {{HTMLElement("ruby")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>N'importe quel rôle</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        Cet élément peut être l'élément fils d'un élément
+        {{htmlelement("ruby")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balise</th>
+      <td>
+        La balise de fin peut être omise si l'élément est immédiatement suivi
+        d'un élément {{HTMLElement("rt")}}, {{HTMLElement("rtc")}}
+        ou {{HTMLElement("rp")}} ou encore par un autre élément
+        <code>&#x3C;rb></code> ou s'il n'y a plus de contenu dans l'élément
+        parent.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Éléments parents autorisés</th>
+      <td>Un élément {{HTMLElement("ruby")}}.</td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>N'importe quel rôle</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
+## Spécifications
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rb-element', '&lt;rb&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                         | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rb-element', '&lt;rb&gt;')}} | {{Spec2('HTML5 W3C')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.rb")}}</p>
+{{Compat("html.elements.rb")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("ruby")}}</li>
- <li>{{HTMLElement("rt")}}</li>
- <li>{{HTMLElement("rp")}}</li>
- <li>
-  <p>{{HTMLElement("rtc")}}</p>
- </li>
-</ul>
+- {{HTMLElement("ruby")}}
+- {{HTMLElement("rt")}}
+- {{HTMLElement("rp")}}
+- {{HTMLElement("rtc")}}
diff --git a/files/fr/web/html/element/rp/index.md b/files/fr/web/html/element/rp/index.md
index f7db845a0f..1391f3f195 100644
--- a/files/fr/web/html/element/rp/index.md
+++ b/files/fr/web/html/element/rp/index.md
@@ -9,116 +9,124 @@ tags:
   - Web
 translation_of: Web/HTML/Element/rp
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;rp&gt;</code> </strong>est utilisé pour fournir ce qui fera office de parenthèse aux navigateurs qui ne prennent pas en charge les annotations Ruby.</p>
+L'élément HTML **`<rp>` **est utilisé pour fournir ce qui fera office de parenthèse aux navigateurs qui ne prennent pas en charge les annotations Ruby.
 
-<p>Les annotations Ruby permettent d'afficher la prononciation des caractères d'Asie orientale, notamment lors de l'usage de caractères furigana Japonais ou bopomofo Taïwanais.</p>
+Les annotations Ruby permettent d'afficher la prononciation des caractères d'Asie orientale, notamment lors de l'usage de caractères furigana Japonais ou bopomofo Taïwanais.
 
-<p>Un élément <code>&lt;rp&gt;</code> devrait encadrer chaque parenthèse ouvrante et fermante englobant l'élément {{HTMLElement("rt")}} contenant les annotations.</p>
+Un élément `<rp>` devrait encadrer chaque parenthèse ouvrante et fermante englobant l'élément {{HTMLElement("rt")}} contenant les annotations.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/rp.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Avec_prise_en_charge_de_ruby">Avec prise en charge de ruby</h3>
-<h4 id="HTML">HTML</h4>
+### Avec prise en charge de ruby
 
-<pre class="brush: html">&lt;ruby&gt;
-  漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Kan&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
-  字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ji&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
-&lt;/ruby&gt;</pre>
+#### HTML
 
+```html
+<ruby>
+  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
+  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
+</ruby>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   font-size: 22px;
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Avec_prise_en_charge_de_ruby","300","150")}}</p>
+{{EmbedLiveSample("Avec_prise_en_charge_de_ruby","300","150")}}
 
-<h3 id="Sans_prise_en_charge_de_ruby">Sans prise en charge de ruby</h3>
+### Sans prise en charge de ruby
 
-<p>Avec un navigateur ne prenant pas en charge les annotations Ruby, on aurait :</p>
+Avec un navigateur ne prenant pas en charge les annotations Ruby, on aurait :
 
-<pre class="brush: html hidden">漢 (Kan) 字 (ji)</pre>
+```html hidden
+漢 (Kan) 字 (ji)
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   font-size: 22px;
 }
-</pre>
+```
 
-<p>{{EmbedLiveSample("Sans_prise_en_charge_de_ruby", 600, 60)}}</p>
+{{EmbedLiveSample("Sans_prise_en_charge_de_ruby", 600, 60)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>. Texte.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>La balise de fin peut être absente si l'élément est immédiatement suivi d'un élément {{HTMLElement("rt")}} ou d'un autre élément <code>&lt;rp&gt;</code> ou s'il n'y a plus de contenu dans l'élément parent.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément {{HTMLElement("ruby")}}. <code>&lt;rp&gt;</code> doit être positionné immédiatement avant ou après un élément {{HTMLElement("rt")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >. Texte.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        La balise de fin peut être absente si l'élément est immédiatement suivi
+        d'un élément {{HTMLElement("rt")}} ou d'un autre élément
+        <code>&#x3C;rp></code> ou s'il n'y a plus de contenu dans l'élément
+        parent.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Un élément {{HTMLElement("ruby")}}. <code>&#x3C;rp></code> doit
+        être positionné immédiatement avant ou après un élément
+        {{HTMLElement("rt")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rp-element', '&lt;rp&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rp-element', '&lt;rp&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                    | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rp-element', '&lt;rp&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rp-element', '&lt;rp&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.rp")}}</p>
+{{Compat("html.elements.rp")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("ruby")}}</li>
- <li>{{HTMLElement("rt")}}</li>
- <li>{{HTMLElement("rb")}}</li>
- <li>{{HTMLElement("rtc")}}</li>
-</ul>
+- {{HTMLElement("ruby")}}
+- {{HTMLElement("rt")}}
+- {{HTMLElement("rb")}}
+- {{HTMLElement("rtc")}}
diff --git a/files/fr/web/html/element/rt/index.md b/files/fr/web/html/element/rt/index.md
index 5cc3fcc684..aecb46554c 100644
--- a/files/fr/web/html/element/rt/index.md
+++ b/files/fr/web/html/element/rt/index.md
@@ -9,85 +9,70 @@ tags:
   - Web
 translation_of: Web/HTML/Element/rt
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;rt&gt;</code></strong> indique la composante texte d'une annotation Ruby, il est notamment utilisé pour la prononciation, la traduction ou la translitération des caractères d'Asie orientale. Cet élément est toujours contenu dans un élément {{HTMLElement("ruby")}}.</p>
+L'élément HTML **`<rt>`** indique la composante texte d'une annotation Ruby, il est notamment utilisé pour la prononciation, la traduction ou la translitération des caractères d'Asie orientale. Cet élément est toujours contenu dans un élément {{HTMLElement("ruby")}}.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/rt.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/rt.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Avec_prise_en_charge_de_ruby">Avec prise en charge de ruby</h3>
+### Avec prise en charge de ruby
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ruby&gt;
-  漢 &lt;rt&gt;Kan&lt;/rt&gt;
-  字 &lt;rt&gt;ji&lt;/rt&gt;
-&lt;/ruby&gt;
-</pre>
+```html
+<ruby>
+  漢 <rt>Kan</rt>
+  字 <rt>ji</rt>
+</ruby>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   font-size: 22px;
 }
-</pre>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Avec_prise_en_charge_de_ruby","100%","130")}}</p>
+{{EmbedLiveSample("Avec_prise_en_charge_de_ruby","100%","130")}}
 
-<h3 id="Sans_prise_en_charge_de_ruby">Sans prise en charge de ruby</h3>
+### Sans prise en charge de ruby
 
-<p>Pour un navigateur sans prise en charge de Ruby, on aurait le résultat suivant :</p>
+Pour un navigateur sans prise en charge de Ruby, on aurait le résultat suivant :
 
-<pre class="brush: html hidden">漢 Kan 字 ji</pre>
+```html hidden
+漢 Kan 字 ji
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   font-size: 22px;
 }
-</pre>
-
-<p>{{EmbedLiveSample("Sans_prise_en_charge_de_ruby", 600, 60)}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rt-element', '&lt;rt&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rt-element', '&lt;rt&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.elements.rt")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{HTMLElement("ruby")}}</li>
- <li>{{HTMLElement("rp")}}</li>
- <li>{{HTMLElement("rb")}}</li>
- <li>{{HTMLElement("rtc")}}</li>
- <li>{{CSSXRef("text-transform", "text-transform: full-size-kana")}}</li>
-</ul>
-</div>
+```
+
+{{EmbedLiveSample("Sans_prise_en_charge_de_ruby", 600, 60)}}
+
+## Spécifications
+
+| Spécification                                                                                                    | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rt-element', '&lt;rt&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rt-element', '&lt;rt&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.elements.rt")}}
+
+## Voir aussi
+
+- {{HTMLElement("ruby")}}
+- {{HTMLElement("rp")}}
+- {{HTMLElement("rb")}}
+- {{HTMLElement("rtc")}}
+- {{CSSXRef("text-transform", "text-transform: full-size-kana")}}
diff --git a/files/fr/web/html/element/rtc/index.md b/files/fr/web/html/element/rtc/index.md
index c1b53d7ffa..26fcffd77c 100644
--- a/files/fr/web/html/element/rtc/index.md
+++ b/files/fr/web/html/element/rtc/index.md
@@ -9,110 +9,106 @@ tags:
   - Web
 translation_of: Web/HTML/Element/rtc
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément<strong> <code>&lt;rtc&gt;</code> </strong>permet d'ajouter des notations Ruby sémantiques. Il est donc « proche » des éléments liées à la représentation Ruby comme {{HTMLElement("rb")}}, {{HTMLElement("ruby")}}. Les éléments {{HTMLElement("rb")}} peuvent être annotés pour la prononciation ({{HTMLElement("rt")}}) ou pour la sémantique ({{HTMLElement("rtc")}}).</p>
+L'élément** `<rtc>` **permet d'ajouter des notations Ruby sémantiques. Il est donc « proche » des éléments liées à la représentation Ruby comme {{HTMLElement("rb")}}, {{HTMLElement("ruby")}}. Les éléments {{HTMLElement("rb")}} peuvent être annotés pour la prononciation ({{HTMLElement("rt")}}) ou pour la sémantique ({{HTMLElement("rtc")}}).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/rtc.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/rtc.html", "tabbed-standard")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément peut utiliser <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément peut utiliser [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;ruby&gt;
-   &lt;rb&gt;旧&lt;/rb&gt; &lt;rt&gt;jiù&lt;/rt&gt;
-   &lt;rb&gt;金&lt;/rb&gt; &lt;rt&gt;jīn&lt;/rt&gt;
-   &lt;rb&gt;山&lt;/rb&gt; &lt;rt&gt;shān&lt;/rt&gt;
-   &lt;rtc&gt;San Francisco&lt;/rtc&gt;
-&lt;/ruby&gt;
-</pre>
+```html
+<ruby>
+   <rb>旧</rb> <rt>jiù</rt>
+   <rb>金</rb> <rt>jīn</rt>
+   <rb>山</rb> <rt>shān</rt>
+   <rtc>San Francisco</rtc>
+</ruby>
+```
 
-<pre class="brush: css hidden">.info {
+```css hidden
+.info {
   padding-top: 10px;
   font-size: 36px;
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
+
+{{EmbedLiveSample("Exemple",600,120)}}
+
+## Résumé technique
 
-<p>{{EmbedLiveSample("Exemple",600,120)}}</p>
-<h2 id="Résumé_technique">Résumé technique</h2>
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a> ou des éléments {{HTMLElement("rt")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>La balise de fin peut être omise si l'élément est immédiatement suivi par un élément {{HTMLElement("rb")}}, {{HTMLElement("rtc")}} ou {{HTMLElement("rt")}} ou s'il est immédiatement suivi par la balise de fermeture de l'élément parent.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément {{HTMLElement("ruby")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
-</table>
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML5.3', 'textlevel-semantics.html#the-rtc-element', '&lt;rtc&gt;')}}</td>
-   <td>{{Spec2('HTML5.3')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.2', 'textlevel-semantics.html#the-rtc-element', '&lt;rtc&gt;')}}</td>
-   <td>{{Spec2('HTML5.2')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'textlevel-semantics.html#the-rtc-element', '&lt;rtc&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rtc-element', '&lt;rtc&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        Du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >
+        ou des éléments {{HTMLElement("rt")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        La balise de fin peut être omise si l'élément est immédiatement suivi
+        par un élément {{HTMLElement("rb")}},
+        {{HTMLElement("rtc")}} ou {{HTMLElement("rt")}} ou s'il est
+        immédiatement suivi par la balise de fermeture de l'élément parent.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>Un élément {{HTMLElement("ruby")}}.</td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
+
+| Spécification                                                                                                    | État                         | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- |
+| {{SpecName('HTML5.3', 'textlevel-semantics.html#the-rtc-element', '&lt;rtc&gt;')}}     | {{Spec2('HTML5.3')}} |                      |
+| {{SpecName('HTML5.2', 'textlevel-semantics.html#the-rtc-element', '&lt;rtc&gt;')}}     | {{Spec2('HTML5.2')}} |                      |
+| {{SpecName('HTML5.1', 'textlevel-semantics.html#the-rtc-element', '&lt;rtc&gt;')}}     | {{Spec2('HTML5.1')}} |                      |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rtc-element', '&lt;rtc&gt;')}} | {{Spec2('HTML5 W3C')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.rtc")}}</p>
+{{Compat("html.elements.rtc")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("ruby")}}</li>
- <li>{{HTMLElement("rp")}}</li>
- <li>{{HTMLElement("rb")}}</li>
- <li>{{HTMLElement("rt")}}</li>
- <li>{{HTMLElement("rtc")}}</li>
-</ul>
+- {{HTMLElement("ruby")}}
+- {{HTMLElement("rp")}}
+- {{HTMLElement("rb")}}
+- {{HTMLElement("rt")}}
+- {{HTMLElement("rtc")}}
diff --git a/files/fr/web/html/element/ruby/index.md b/files/fr/web/html/element/ruby/index.md
index 89542e8bc2..a602a5e216 100644
--- a/files/fr/web/html/element/ruby/index.md
+++ b/files/fr/web/html/element/ruby/index.md
@@ -9,109 +9,121 @@ tags:
   - Web
 translation_of: Web/HTML/Element/ruby
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;ruby&gt;</code></strong> représente une annotation ruby. Les annotations Ruby servent à afficher la prononciation des caractères d'Asie orientale.</p>
+L'élément HTML **`<ruby>`** représente une annotation ruby. Les annotations Ruby servent à afficher la prononciation des caractères d'Asie orientale.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/ruby.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement les <a href="/fr/docs/Web/HTML/Global_attributes">attributs globaux</a>.</p>
+Cet élément inclut uniquement les [attributs globaux](/fr/docs/Web/HTML/Global_attributes).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Annoter_un_caractère">Annoter un caractère</h3>
+### Annoter un caractère
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush:html">&lt;ruby&gt;
-  漢 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Kan&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
-  字 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;ji&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
-&lt;/ruby&gt;</pre>
+```html
+<ruby>
+  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
+  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
+</ruby>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Annoter_un_caractère")}}</p>
+{{EmbedLiveSample("Annoter_un_caractère")}}
 
-<h3 id="Annoter_un_mot">Annoter un mot</h3>
+### Annoter un mot
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush:html">&lt;ruby&gt;
-  明日 &lt;rp&gt;(&lt;/rp&gt;&lt;rt&gt;Ashita&lt;/rt&gt;&lt;rp&gt;)&lt;/rp&gt;
-&lt;/ruby&gt;</pre>
+```html
+<ruby>
+  明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
+</ruby>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Annoter_un_mot")}}</p>
+{{EmbedLiveSample("Annoter_un_mot")}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu de phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu de phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu de phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu de phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu de phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu de phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ruby-element', '&lt;ruby&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '&lt;ruby&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                        | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-ruby-element', '&lt;ruby&gt;')}}             | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-ruby-element', '&lt;ruby&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.ruby")}}</p>
+{{Compat("html.elements.ruby")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("rt")}}</li>
- <li>{{HTMLElement("rp")}}</li>
- <li>{{HTMLElement("rb")}}</li>
- <li>{{HTMLElement("rtc")}}</li>
- <li>{{HTMLElement("rbc")}}</li>
- <li>{{CSSXRef("text-transform", "text-transform: full-size-kana")}}</li>
-</ul>
+- {{HTMLElement("rt")}}
+- {{HTMLElement("rp")}}
+- {{HTMLElement("rb")}}
+- {{HTMLElement("rtc")}}
+- {{HTMLElement("rbc")}}
+- {{CSSXRef("text-transform", "text-transform: full-size-kana")}}
diff --git a/files/fr/web/html/element/s/index.md b/files/fr/web/html/element/s/index.md
index 01b03545fe..e9fd188e95 100644
--- a/files/fr/web/html/element/s/index.md
+++ b/files/fr/web/html/element/s/index.md
@@ -8,122 +8,123 @@ tags:
   - Web
 translation_of: Web/HTML/Element/s
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;s&gt;</code></strong> permet d'afficher du texte qui est barré car il n'est plus pertinent ou car il est obsolète. <code>&lt;s&gt;</code> ne doit pas être employé pour indiquer des éditions dans un document (on utilisera alors {{HTMLElement("del")}} et {{HTMLElement("ins")}}).</p>
+L'élément HTML **`<s>`** permet d'afficher du texte qui est barré car il n'est plus pertinent ou car il est obsolète. `<s>` ne doit pas être employé pour indiquer des éditions dans un document (on utilisera alors {{HTMLElement("del")}} et {{HTMLElement("ins")}}).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/s.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/s.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
-  &lt;s&gt;Le plat du jour : saumon à la hollandaise&lt;/s&gt; &lt;em&gt;plus disponible&lt;/em&gt;
-&lt;/p&gt;</pre>
+```html
+<p>
+  <s>Le plat du jour : saumon à la hollandaise</s> <em>plus disponible</em>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément <code>s</code>. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.</p>
+Par défaut, la plupart des outils d'assistance n'annoncent pas la présence de l'élément `s`. On peut le rendre annonçable via la propriété CSS {{cssxref("content")}} et grâce aux pseudo-éléments {{cssxref("::before")}} et {{cssxref("::after")}}.
 
-<pre>s::before,
-s::after {
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
+    s::before,
+    s::after {
+      clip-path: inset(100%);
+      clip: rect(1px, 1px, 1px, 1px);
+      height: 1px;
+      overflow: hidden;
+      position: absolute;
+      white-space: nowrap;
+      width: 1px;
+    }
 
-s::before {
-  content: " [Début du texte rayé]";
-}
+    s::before {
+      content: " [Début du texte rayé]";
+    }
 
-s::after {
-  content: " [Fin du texte rayé] ";
-}
-</pre>
+    s::after {
+      content: " [Fin du texte rayé] ";
+    }
 
-<p>Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été rayé.</p>
+Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment ces annonces pour éviter une verbosité trop importante. Il est donc important de ne pas abuser de cette technique et de ne l'appliquer qu'à des situations où il est nécessaire de comprendre que du contenu a été rayé.
 
-<ul>
- <li><a href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/"><em>Short note on making your mark (more accessible) | The Paciello Group</em> (en anglais)</a></li>
- <li><a href="http://adrianroselli.com/2017/12/tweaking-text-level-styles.html"><em>Tweaking Text Level Styles | Adrian Roselli</em> (en anglais)</a></li>
-</ul>
+- [_Short note on making your mark (more accessible) | The Paciello Group_ (en anglais)](https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/)
+- [_Tweaking Text Level Styles | Adrian Roselli_ (en anglais)](http://adrianroselli.com/2017/12/tweaking-text-level-styles.html)
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Attributs_universels">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a> ou <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Attributs_universels"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >Contenu phrasé</a
+        >
+        ou
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','semantics.html#the-s-element','s element')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C','text-level-semantics.html#the-s-element','s element')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG','semantics.html#the-s-element','s element')}}             | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C','text-level-semantics.html#the-s-element','s element')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.s")}}</p>
+{{Compat("html.elements.s")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{obsolete_inline}} {{HTMLElement("strike")}} qui était un ancien synonyme de <code>&lt;s&gt;</code>, désormais obsolète et qui ne doit plus être utilisé sur le Web</li>
- <li>{{HTMLElement("del")}} qui est utilisé afin d'indiquer des données ou des portions de texte qui ont été supprimées</li>
- <li>La propriété CSS {{cssxref("text-decoration-line")}} qui permet de contrôler l'aspect de la ligne utilisée sur le contenu de l'élément {{HTMLElement("s")}}</li>
-</ul>
+- {{obsolete_inline}} {{HTMLElement("strike")}} qui était un ancien synonyme de `<s>`, désormais obsolète et qui ne doit plus être utilisé sur le Web
+- {{HTMLElement("del")}} qui est utilisé afin d'indiquer des données ou des portions de texte qui ont été supprimées
+- La propriété CSS {{cssxref("text-decoration-line")}} qui permet de contrôler l'aspect de la ligne utilisée sur le contenu de l'élément {{HTMLElement("s")}}
diff --git a/files/fr/web/html/element/samp/index.md b/files/fr/web/html/element/samp/index.md
index f6b73cc9e6..613be3c1b4 100644
--- a/files/fr/web/html/element/samp/index.md
+++ b/files/fr/web/html/element/samp/index.md
@@ -8,156 +8,166 @@ tags:
   - Web
 translation_of: Web/HTML/Element/samp
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;samp&gt;</code></strong> est un élément qui permet de représenter un résultat produit par un programme informatique. Il est généralement affiché avec la police à chasse fixe du navigateur (par exemple en Courier ou en Lucida Console).</p>
+L'élément HTML **`<samp>`** est un élément qui permet de représenter un résultat produit par un programme informatique. Il est généralement affiché avec la police à chasse fixe du navigateur (par exemple en Courier ou en Lucida Console).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/samp.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Il est possible d'utiliser une règle CSS afin de surcharger la police par défaut utilisée par le navigateur pour les éléments <code>&lt;samp&gt;</code>. On rappelle ici que les préférences de l'utilisateur peuvent également prendre le pas sur les feuilles de styles des documents.</p>
+Il est possible d'utiliser une règle CSS afin de surcharger la police par défaut utilisée par le navigateur pour les éléments `<samp>`. On rappelle ici que les préférences de l'utilisateur peuvent également prendre le pas sur les feuilles de styles des documents.
 
-<p>Voici un exemple de règle permettant de surcharger la police par défaut pour ces éléments :</p>
+Voici un exemple de règle permettant de surcharger la police par défaut pour ces éléments :
 
-<pre class="brush: css">samp {
+```css
+samp {
   font-family: "Courier";
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note :</strong> S'il vous faut un élément qui serve de conteneur pour une valeur produite par le site ou l'application, vous devriez utiliser {{HTMLElement("output")}} plutôt que <code>&lt;samp&gt;</code>.</p>
-</div>
+> **Note :** S'il vous faut un élément qui serve de conteneur pour une valeur produite par le site ou l'application, vous devriez utiliser {{HTMLElement("output")}} plutôt que `<samp>`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Texte normal.
-  &lt;samp&gt;Extrait de texte produit par un programme.&lt;/samp&gt;
+  <samp>Extrait de texte produit par un programme.</samp>
   Texte normal.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemples")}}</p>
+{{EmbedLiveSample("Exemples")}}
 
-<h3 id="Sortie_incluant_une_entrée_utilisateur">Sortie incluant une entrée utilisateur</h3>
+### Sortie incluant une entrée utilisateur
 
-<p>Il est possible d'imbriquer un élément {{HTMLElement("kbd")}} dans un bloc <code>&lt;samp&gt;</code> afin de représenter un fragment de texte saisi par l'utilisateur. Par exemple, si on souhaite retranscrire une session d'un terminal (sous Linux ou macOS), on pourra utiliser le code suivant.</p>
+Il est possible d'imbriquer un élément {{HTMLElement("kbd")}} dans un bloc `<samp>` afin de représenter un fragment de texte saisi par l'utilisateur. Par exemple, si on souhaite retranscrire une session d'un terminal (sous Linux ou macOS), on pourra utiliser le code suivant.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;pre&gt;
-&lt;samp&gt;&lt;span class="prompt"&gt;jean@internets:~$&lt;/span&gt;&lt;kbd&gt;md5 -s "Coucou monde"&lt;/kbd&gt;
+```html
+<pre>
+<samp><span class="prompt">jean@internets:~$</span><kbd>md5 -s "Coucou monde"</kbd>
 MD5 ("Coucou monde") = b961d9fb0ef48ff051fb67625abd0022
 
-&lt;span class="prompt"&gt;jean@internets:~$&lt;/span&gt; &lt;span class="cursor"&gt;█&lt;/span&gt;&lt;/samp&gt;&lt;/pre&gt;</pre>
+<span class="prompt">jean@internets:~$</span> <span class="cursor">█</span></samp></pre>
+```
 
-<p>On notera l'utilisation de {{HTMLElement("span")}} qui permet de personnaliser l'apparence de certaines portions du texte (comme l'invite ou le curseur). On notera également l'utilisation de <code>&lt;kbd&gt;</code> afin de représenter la commande saisie par l'utilisateur dans l'invite.</p>
+On notera l'utilisation de {{HTMLElement("span")}} qui permet de personnaliser l'apparence de certaines portions du texte (comme l'invite ou le curseur). On notera également l'utilisation de `<kbd>` afin de représenter la commande saisie par l'utilisateur dans l'invite.
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<p>Voici la feuille de style que nous utilisons :</p>
+Voici la feuille de style que nous utilisons :
 
-<pre class="brush: css">.prompt {
+```css
+.prompt {
   color: #b00;
 }
 
-samp &gt; kbd {
+samp > kbd {
   font-weight: bold;
 }
 
 .cursor {
   color: #00b;
-}</pre>
+}
+```
 
-<p>Cela permet simplement de colorer légèrement l'invite et le curseur. On utilise du gras pour le texte saisi au clavier.</p>
+Cela permet simplement de colorer légèrement l'invite et le curseur. On utilise du gras pour le texte saisi au clavier.
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Sortie_incluant_une_entrée_utilisateur", 650, 120)}}</p>
+{{EmbedLiveSample("Sortie_incluant_une_entrée_utilisateur", 650, 120)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément acceptant du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-samp-element', '&lt;samp&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-samp-element', '&lt;samp&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;samp&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                        | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-samp-element', '&lt;samp&gt;')}}             | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-samp-element', '&lt;samp&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '&lt;samp&gt;')}}                         | {{Spec2('HTML4.01')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.samp")}}</p>
+{{Compat("html.elements.samp")}}
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>On peut appliquer une règle CSS sur le sélecteur <code>samp</code> afin de remplacer la police de caractère par défaut du navigateur.</p>
+On peut appliquer une règle CSS sur le sélecteur `samp` afin de remplacer la police de caractère par défaut du navigateur.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("code")}}</li>
- <li>{{HTMLElement("kbd")}}</li>
- <li>{{HTMLElement("pre")}}</li>
- <li>{{HTMLElement("output")}}</li>
-</ul>
+- {{HTMLElement("code")}}
+- {{HTMLElement("kbd")}}
+- {{HTMLElement("pre")}}
+- {{HTMLElement("output")}}
diff --git a/files/fr/web/html/element/script/index.md b/files/fr/web/html/element/script/index.md
index 30e0122fa1..207f13d997 100644
--- a/files/fr/web/html/element/script/index.md
+++ b/files/fr/web/html/element/script/index.md
@@ -8,196 +8,187 @@ tags:
   - Web
 translation_of: Web/HTML/Element/script
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;script&gt;</code></strong> est utilisé pour intégrer ou faire référence à un script exécutable. Cela fait généralement référence à du code JavaScript mais ce peut également être un autre type de script (par exemple <a href="/fr/docs/Apprendre/WebGL">WebGL</a>).</p>
-
-<p>Les scripts sans attribut <code>async</code> ou <code>defer</code> sont chargés et exécutés immédiatement avant que le navigateur continue l'analyse de la page.</p>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
-
-<dl>
- <dt>{{htmlattrdef("async")}}</dt>
- <dd><p>Cet attribut booléen indique si le navigateur doit, dans la mesure du possible, exécuter les scripts de manière asynchrone. <strong><em>Cet attribut ne doit pas être utilisé si l'attribut <code>src</code> est absent (c'est-à-dire pour les scripts « inline » déclarés dans les éléments), dans ce cas il n'aurait aucun effet.</em></strong></p>
- <p>Par défaut, les navigateurs prennent l'hypothèse la plus pessimiste et chargent les scripts de façon synchrone (autrement dit, le comportement par défaut est <code>async="false"</code>) lors de l'analyse du document HTML.</p>
- <p>Les scripts insérés dynamiquement (via {{domxref("document.createElement()")}}) sont exécutés de façon asynchrone par défaut. Pour activer le mode d'exécution synchrone, il faudra explicitement indiquer <code>async="false"</code>.</p>
- <p>Se référer au tableau de compatibilité ci-après pour les informations concernant la prise en charge par les navigateurs. Voir aussi la page sur <a href="/fr/docs/Games/Techniques/Async_scripts">les scripts asynchrones avec asm.js</a>.</p></dd>
- <dt>{{htmlattrdef("crossorigin")}}</dt>
- <dd>Les balises de <code>script</code> classiques enverront un minimum d'informations à {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} pour les scripts qui ne respectent pas les contrôles standard du <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a>. Afin de disposer de plus de renseignements sur les erreurs pour les sites utilisant des domaines séparés pour des documents statiques, on pourra utiliser cet attribut. Voir <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">la page de réglages des attributs CORS</a> pour plus d'explications quant aux valeurs valides.</dd>
- <dt>{{htmlattrdef("defer")}}</dt>
- <dd><p>Cet attribut booléen permet d'indiquer au navigateur que le script doit être exécuté après l'analyse du document et avant l'évènement {{event("DOMContentLoaded")}}. <strong><em>Cet attribut ne doit pas être utilisé si l'attribut <code>src</code> est absent (c'est-à-dire pour les scripts contenus déclarés dans les éléments), dans ce cas il n'aurait aucun effet.</em></strong> Pour obtenir un effet similaire avec les scripts insérés de façon dynamique, on utilisera explicitement <code>async=false</code>. Les scripts qui possèdent un attribut <code>defer</code> seront exécutés dans l'ordre dans lequel ils apparaissent dans le document.</p>
- <p>Les scripts qui utilisent l'attribut <code>defer</code> empêche le déclenchement de l'évènement <code>DOMContentLoaded</code> tant que le script n'a pas été chargé et que son évaluation n'est pas terminée.</p></dd>
- <dt>{{htmlattrdef("integrity")}}</dt>
- <dd>Cet attribut contient des métadonnées que l'agent utilisateur peut vérifier afin de contrôler qu'une ressource téléchargée n'a pas été modifiée de façon frauduleuse. Pour plus d'informations, consulter <a href="/fr/docs/Web/Security/Subresource_Integrity">la page relative à l'intégrité des sous-ressources</a>.</dd>
- <dt>{{htmlattrdef("nomodule")}}</dt>
- <dd>Cet attribut booléen indique que le script ne doit pas être exécuté dans le navigateur si celui prend en charge <a href="https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules">les modules ES6</a>. En pratique, de tels scripts seront utilisés pour couvrir les cas où le navigateur ne prend pas en charge les modules JavaScript.</dd>
- <dt>{{htmlattrdef("nonce")}}</dt>
- <dd>Un <em>nonce</em> cryptographique utilisé pour inscrire les scripts en ligne sur une liste blanche pour la règle <code>script-src</code> de la CSP (<em>Content Security Policy</em>). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité.</dd>
- <dt>{{htmlattrdef("referrerpolicy")}}</dt>
- <dd><p>Une chaîne de caractères qui indique le référent (<em>referrer</em>) à utiliser lors de la récupération du script :</p>
- <ul>
-  <li><code>no-referrer</code> signifie que l'en-tête {{HTTPHeader("Referer")}} ne sera pas envoyé.</li>
-  <li><code>no-referrer-when-downgrade</code> signifie qu'aucune en-tête <code>Referrer</code> ne sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur.</li>
-  <li><code>origin</code> signifie que le référent sera l'origine de la page (c'est-à-dire son schéma, son hôte et le port utilisé).</li>
-  <li><code>origin-when-cross-origin</code> signifie que les navigations vers d'autres origines seront limitées aux schémas, hôtes et ports. Les navigations sur la même origine inclueront le chemin explicite du référent.</li>
-  <li><code>same-origin</code> un référent sera envoyé pour <a href="/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript">les origines du même site</a> mais les requêtes multi-origines ne contiendront pas d'informations de référent.</li>
-  <li><code>strict-origin</code> seule l'origine du document est envoyée comme référent lorsque le protocole de sécurité est le même (HTTPS→HTTPS). L'origine n'est pas envoyée lorsque la destination est moins sécurisée (HTTPS→HTTP).</li>
-  <li><code>strict-origin-when-cross-origin</code> : l'URL complète est envoyée pour les requêtes de même origine, seule l'origine est envoyée lorsque le protocole de sécurité est le même (HTTPS→HTTPS) et aucun en-tête n'est envoyé pour une destination moins sécurisée (HTTPS→HTTP).</li>
-  <li><code>unsafe-url</code> signifie que le référent incluera l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom utilisateur). Cette valeur n'est pas sûre car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines insécures.</li>
- </ul>
-
- <p>Utiliser une chaîne vide (<code>""</code>) correspond à la valeur par défaut et à la valeur utilisée si <code>referrerpolicy</code> n'est pas pris en charge. Si cet attribut n'est pas explicitement défini sur l'élément <code>&lt;script&gt;</code>, ce dernier respectera la politique défine à un niveau supérieur (sur le document ou sur le domaine). Si une telle politique n'est pas disponible, la chaîne vide sera considérée comme équivalente à <code>no-referrer-when-downgrade</code>.</p>
- </dd>
- <dt>{{htmlattrdef("src")}}</dt>
- <dd>Cet attribut définit l'URI d'un script externe. Cela peut être utilisé pour insérer des scripts autrement qu'en les insérant à même le document. <strong><em>Les éléments <code>script</code> avec un attribut <code>src</code> défini ne doivent pas avoir de script compris dans leurs balises. Cela peut causer un comportement inattendu où le contenu du fichier référencé est chargé mais où le contenu de l'élément est ignoré.</em></strong></dd>
- <dt>{{htmlattrdef("type")}}</dt>
- <dd>
- <p>Cet attribut indique le type de script. La valeur de cet attribut peut appartenir à l'une de ces catégories :</p>
-
- <ul>
-  <li><strong>Correspondant à un type MIME JavaScript ou absent :</strong> Cela indique que le script est en JavaScript. La spécification HTML5 conseille aux auteurs d'omettre cet attribut plutôt que de fournir un type MIME redondant. Pour les navigateurs plus anciens, cela indiquait le langage de script du code embarqué. Les types MIME correspondant à JavaScript sont <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types">énumérés dans la spécification</a>.</li>
-  <li><strong><code>module</code> :</strong> Le code sera traité comme un module JavaScript. Le traitement du script n'est pas affecté par les attributs <code>charset</code> et <code>defer</code>. Pour plus d'informations sur l'utilisation des modules, voir le guide sur <a href="/fr/docs/Web/JavaScript/Guide/Modules">les modules JavaScript</a>.</li>
-  <li><strong>Toute autre valeur :</strong> Le contenu embarqué est considéré comm un bloc de donnée et ne sera pas traité par le navigateur. Les développeurs doivent utiliser un type MIME valide qui n'est pas un type MIME JavaScript afin d'indiquer de tels blocs de donnée. Dans ce cas, l'attribut <code>src</code> sera ignoré.</li>
- </ul>
-
- <div class="note">
- <p><strong>Note :</strong> Avec Firefox, on pouvait indiquer la version JavaScript d'un élément <code>&lt;script&gt;</code> en incluant un paramètre non-standard <code>version</code> à l'intérieur de <code>type</code> (ex. <code>type="text/javascript;version=1.8"</code>). Cette spécificité a été retirée avec Firefox 59 (cf. {{bug(1428745)}}).</p>
- </div>
- </dd>
-</dl>
-
-<h3 id="Attributs_dépréciés">Attributs dépréciés</h3>
-
-<dl>
- <dt>{{htmlattrdef("charset")}} {{Deprecated_inline}}</dt>
- <dd>Si cet attribut est présent, sa valeur doit correspondre (quelle que soit la casse) à "<code>utf-8"</code>. Cet attribut est superflu car les documents doivent utiliser UTF-8 et car les éléments <code>script</code> héritent de l'encodage du document.</dd>
- <dt>{{htmlattrdef("language")}} {{Deprecated_inline}}</dt>
- <dd>Comme l'attribut <code>type</code>, cet attribut spécifie le langage de script utilisé. Cependant, contrairement à l'attribut <code>type</code> les valeurs possibles de cet attribut n'ont jamais été normalisées. Il est recommandé d'utiliser l'attribut <code>type</code> plutôt que celui-là.</dd>
-</dl>
-
-<h2 id="Notes">Notes</h2>
-
-<p>Le script doit être servi avec le type MIME <code>text/javascript</code>. Cependant, les navigateurs appliquent cette règle avec une certaine flexibilité et ne bloquent que si le script est servi avec un type image (<code>image/*</code>), vidéo (<code>video/*</code>) ou audio (<code>audio/*</code>) ou CSV (<code>text/csv</code>). Si le script est bloqué, un évènement {{event("error")}} sera déclenché sur l'élément, sinon, l'évènement {{event("load")}} sera envoyé.</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="Exemple_simple">Exemple simple</h3>
-
-<pre class="brush: html">&lt;!-- HTML4 et (x)HTML --&gt;
-&lt;script type="text/javascript" src="javascript.js"&gt;&lt;/script&gt;
-
-&lt;!-- HTML5 --&gt;
-&lt;script src="javascript.js"&gt;&lt;/script&gt;
-</pre>
-
-<h3 id="Utilisation_des_modules_et_d'une_alternative">Utilisation des modules et d'une alternative</h3>
-
-<p>Les navigateurs qui prennent en charge le type <code>module</code> prennent également en charge un attribut <code>nomodule</code> qui permet aux navigateurs qui ne gèrent pas les modules d'utiliser un autre script.</p>
-
-<pre class="brush: html">&lt;script type="module" src="main.mjs"&gt;&lt;/script&gt;
-&lt;script nomodule src="fallback.js"&gt;&lt;/script&gt;
-</pre>
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+{{HTMLRef}}
+
+L'élément HTML **`<script>`** est utilisé pour intégrer ou faire référence à un script exécutable. Cela fait généralement référence à du code JavaScript mais ce peut également être un autre type de script (par exemple [WebGL](/fr/docs/Apprendre/WebGL)).
+
+Les scripts sans attribut `async` ou `defer` sont chargés et exécutés immédiatement avant que le navigateur continue l'analyse de la page.
+
+## Attributs
+
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
+
+- {{htmlattrdef("async")}}
+
+  - : Cet attribut booléen indique si le navigateur doit, dans la mesure du possible, exécuter les scripts de manière asynchrone. **_Cet attribut ne doit pas être utilisé si l'attribut `src` est absent (c'est-à-dire pour les scripts « inline » déclarés dans les éléments), dans ce cas il n'aurait aucun effet._**
+
+    Par défaut, les navigateurs prennent l'hypothèse la plus pessimiste et chargent les scripts de façon synchrone (autrement dit, le comportement par défaut est `async="false"`) lors de l'analyse du document HTML.
+
+    Les scripts insérés dynamiquement (via {{domxref("document.createElement()")}}) sont exécutés de façon asynchrone par défaut. Pour activer le mode d'exécution synchrone, il faudra explicitement indiquer `async="false"`.
+
+    Se référer au tableau de compatibilité ci-après pour les informations concernant la prise en charge par les navigateurs. Voir aussi la page sur [les scripts asynchrones avec asm.js](/fr/docs/Games/Techniques/Async_scripts).
+
+- {{htmlattrdef("crossorigin")}}
+  - : Les balises de `script` classiques enverront un minimum d'informations à {{domxref('GlobalEventHandlers.onerror', 'window.onerror')}} pour les scripts qui ne respectent pas les contrôles standard du [CORS](/fr/docs/HTTP/Access_control_CORS). Afin de disposer de plus de renseignements sur les erreurs pour les sites utilisant des domaines séparés pour des documents statiques, on pourra utiliser cet attribut. Voir [la page de réglages des attributs CORS](/fr/docs/Web/HTML/Reglages_des_attributs_CORS) pour plus d'explications quant aux valeurs valides.
+- {{htmlattrdef("defer")}}
+
+  - : Cet attribut booléen permet d'indiquer au navigateur que le script doit être exécuté après l'analyse du document et avant l'évènement {{event("DOMContentLoaded")}}. **_Cet attribut ne doit pas être utilisé si l'attribut `src` est absent (c'est-à-dire pour les scripts contenus déclarés dans les éléments), dans ce cas il n'aurait aucun effet._** Pour obtenir un effet similaire avec les scripts insérés de façon dynamique, on utilisera explicitement `async=false`. Les scripts qui possèdent un attribut `defer` seront exécutés dans l'ordre dans lequel ils apparaissent dans le document.
+
+    Les scripts qui utilisent l'attribut `defer` empêche le déclenchement de l'évènement `DOMContentLoaded` tant que le script n'a pas été chargé et que son évaluation n'est pas terminée.
+
+- {{htmlattrdef("integrity")}}
+  - : Cet attribut contient des métadonnées que l'agent utilisateur peut vérifier afin de contrôler qu'une ressource téléchargée n'a pas été modifiée de façon frauduleuse. Pour plus d'informations, consulter [la page relative à l'intégrité des sous-ressources](/fr/docs/Web/Security/Subresource_Integrity).
+- {{htmlattrdef("nomodule")}}
+  - : Cet attribut booléen indique que le script ne doit pas être exécuté dans le navigateur si celui prend en charge [les modules ES6](https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules). En pratique, de tels scripts seront utilisés pour couvrir les cas où le navigateur ne prend pas en charge les modules JavaScript.
+- {{htmlattrdef("nonce")}}
+  - : Un _nonce_ cryptographique utilisé pour inscrire les scripts en ligne sur une liste blanche pour la règle `script-src` de la CSP (_Content Security Policy_). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité.
+- {{htmlattrdef("referrerpolicy")}}
+
+  - : Une chaîne de caractères qui indique le référent (_referrer_) à utiliser lors de la récupération du script :
+
+    - `no-referrer` signifie que l'en-tête {{HTTPHeader("Referer")}} ne sera pas envoyé.
+    - `no-referrer-when-downgrade` signifie qu'aucune en-tête `Referrer` ne sera envoyé lorsqu'on navigue vers une origine qui n'utilise pas TLS (HTTPS). C'est le comportement par défaut de l'agent utilisateur.
+    - `origin` signifie que le référent sera l'origine de la page (c'est-à-dire son schéma, son hôte et le port utilisé).
+    - `origin-when-cross-origin` signifie que les navigations vers d'autres origines seront limitées aux schémas, hôtes et ports. Les navigations sur la même origine inclueront le chemin explicite du référent.
+    - `same-origin` un référent sera envoyé pour [les origines du même site](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript) mais les requêtes multi-origines ne contiendront pas d'informations de référent.
+    - `strict-origin` seule l'origine du document est envoyée comme référent lorsque le protocole de sécurité est le même (HTTPS→HTTPS). L'origine n'est pas envoyée lorsque la destination est moins sécurisée (HTTPS→HTTP).
+    - `strict-origin-when-cross-origin` : l'URL complète est envoyée pour les requêtes de même origine, seule l'origine est envoyée lorsque le protocole de sécurité est le même (HTTPS→HTTPS) et aucun en-tête n'est envoyé pour une destination moins sécurisée (HTTPS→HTTP).
+    - `unsafe-url` signifie que le référent incluera l'origine et le chemin (mais pas le fragment, le mot de passe ou le nom utilisateur). Cette valeur n'est pas sûre car elle peut entraîner des fuites d'origine ou de chemin provenant de ressources sécurisées avec TLS vers des origines insécures.
+
+    Utiliser une chaîne vide (`""`) correspond à la valeur par défaut et à la valeur utilisée si `referrerpolicy` n'est pas pris en charge. Si cet attribut n'est pas explicitement défini sur l'élément `<script>`, ce dernier respectera la politique défine à un niveau supérieur (sur le document ou sur le domaine). Si une telle politique n'est pas disponible, la chaîne vide sera considérée comme équivalente à `no-referrer-when-downgrade`.
+
+- {{htmlattrdef("src")}}
+  - : Cet attribut définit l'URI d'un script externe. Cela peut être utilisé pour insérer des scripts autrement qu'en les insérant à même le document. **_Les éléments `script` avec un attribut `src` défini ne doivent pas avoir de script compris dans leurs balises. Cela peut causer un comportement inattendu où le contenu du fichier référencé est chargé mais où le contenu de l'élément est ignoré._**
+- {{htmlattrdef("type")}}
+
+  - : Cet attribut indique le type de script. La valeur de cet attribut peut appartenir à l'une de ces catégories :
+
+    - **Correspondant à un type MIME JavaScript ou absent :** Cela indique que le script est en JavaScript. La spécification HTML5 conseille aux auteurs d'omettre cet attribut plutôt que de fournir un type MIME redondant. Pour les navigateurs plus anciens, cela indiquait le langage de script du code embarqué. Les types MIME correspondant à JavaScript sont [énumérés dans la spécification](/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#JavaScript_types).
+    - **`module` :** Le code sera traité comme un module JavaScript. Le traitement du script n'est pas affecté par les attributs `charset` et `defer`. Pour plus d'informations sur l'utilisation des modules, voir le guide sur [les modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules).
+    - **Toute autre valeur :** Le contenu embarqué est considéré comm un bloc de donnée et ne sera pas traité par le navigateur. Les développeurs doivent utiliser un type MIME valide qui n'est pas un type MIME JavaScript afin d'indiquer de tels blocs de donnée. Dans ce cas, l'attribut `src` sera ignoré.
+
+    > **Note :** Avec Firefox, on pouvait indiquer la version JavaScript d'un élément `<script>` en incluant un paramètre non-standard `version` à l'intérieur de `type` (ex. `type="text/javascript;version=1.8"`). Cette spécificité a été retirée avec Firefox 59 (cf. {{bug(1428745)}}).
+
+### Attributs dépréciés
+
+- {{htmlattrdef("charset")}} {{Deprecated_inline}}
+  - : Si cet attribut est présent, sa valeur doit correspondre (quelle que soit la casse) à "`utf-8"`. Cet attribut est superflu car les documents doivent utiliser UTF-8 et car les éléments `script` héritent de l'encodage du document.
+- {{htmlattrdef("language")}} {{Deprecated_inline}}
+  - : Comme l'attribut `type`, cet attribut spécifie le langage de script utilisé. Cependant, contrairement à l'attribut `type` les valeurs possibles de cet attribut n'ont jamais été normalisées. Il est recommandé d'utiliser l'attribut `type` plutôt que celui-là.
+
+## Notes
+
+Le script doit être servi avec le type MIME `text/javascript`. Cependant, les navigateurs appliquent cette règle avec une certaine flexibilité et ne bloquent que si le script est servi avec un type image (`image/*`), vidéo (`video/*`) ou audio (`audio/*`) ou CSV (`text/csv`). Si le script est bloqué, un évènement {{event("error")}} sera déclenché sur l'élément, sinon, l'évènement {{event("load")}} sera envoyé.
+
+## Exemples
+
+### Exemple simple
+
+```html
+<!-- HTML4 et (x)HTML -->
+<script type="text/javascript" src="javascript.js"></script>
+
+<!-- HTML5 -->
+<script src="javascript.js"></script>
+```
+
+### Utilisation des modules et d'une alternative
+
+Les navigateurs qui prennent en charge le type `module` prennent également en charge un attribut `nomodule` qui permet aux navigateurs qui ne gèrent pas les modules d'utiliser un autre script.
+
+```html
+<script type="module" src="main.mjs"></script>
+<script nomodule src="fallback.js"></script>
+```
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_m.C3.A9ta-donn.C3.A9es">contenu de méta-données</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Script dynamique tel que <code>text/javascript</code>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_m.C3.A9ta-donn.C3.A9es">contenu de méta-données</a> ou tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLScriptElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_m.C3.A9ta-donn.C3.A9es"
+          >contenu de méta-données</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Script dynamique tel que <code>text/javascript</code>.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément acceptant du
+        <a
+          href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_m.C3.A9ta-donn.C3.A9es"
+          >contenu de méta-données</a
+        >
+        ou tout élément acceptant du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLScriptElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "scripting.html#the-script-element", "&lt;script&gt;")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Retrait de l'attribut {{HTMLAttrxRef("charset", "script")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.3", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
-   <td>{{Spec2("HTML5.3")}}</td>
-   <td>Retrait de l'attribut {{HTMLAttrxRef("charset", "script")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.2", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
-   <td>{{Spec2("HTML5.2")}}</td>
-   <td>Ajout de la valeur <code>module</code> pour {{HTMLAttrxRef("type", "script")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}}</td>
-   <td>{{Spec2("HTML5.1")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "scripting-1.html#script", "&lt;script&gt;")}}</td>
-   <td>{{Spec2("HTML5 W3C")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "&lt;script&gt;")}}</td>
-   <td>{{Spec2("HTML4.01")}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName("Subresource Integrity", "#htmlscriptelement", "&lt;script&gt;")}}</td>
-   <td>{{Spec2("Subresource Integrity")}}</td>
-   <td>Ajout de l'attribut {{HTMLAttrxRef("integrity", "script")}}.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                        | État                                         | Commentaires                                                                  |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------------------------------------------------------------------------- |
+| {{SpecName("HTML WHATWG", "scripting.html#the-script-element", "&lt;script&gt;")}}         | {{Spec2("HTML WHATWG")}}             | Retrait de l'attribut {{HTMLAttrxRef("charset", "script")}}.       |
+| {{SpecName("HTML5.3", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}} | {{Spec2("HTML5.3")}}                 | Retrait de l'attribut {{HTMLAttrxRef("charset", "script")}}.       |
+| {{SpecName("HTML5.2", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}} | {{Spec2("HTML5.2")}}                 | Ajout de la valeur `module` pour {{HTMLAttrxRef("type", "script")}} |
+| {{SpecName("HTML5.1", "semantics-scripting.html#the-script-element", "&lt;script&gt;")}} | {{Spec2("HTML5.1")}}                 |                                                                               |
+| {{SpecName("HTML5 W3C", "scripting-1.html#script", "&lt;script&gt;")}}                         | {{Spec2("HTML5 W3C")}}                 |                                                                               |
+| {{SpecName("HTML4.01", "interact/scripts.html#h-18.2.1", "&lt;script&gt;")}}                 | {{Spec2("HTML4.01")}}                 |                                                                               |
+| {{SpecName("Subresource Integrity", "#htmlscriptelement", "&lt;script&gt;")}}             | {{Spec2("Subresource Integrity")}} | Ajout de l'attribut {{HTMLAttrxRef("integrity", "script")}}.     |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.script",2)}}</p>
+{{Compat("html.elements.script",2)}}
 
-<h3 id="Notes_de_compatibilité">Notes de compatibilité</h3>
+### Notes de compatibilité
 
-<p>Pour les anciens navigateurs qui ne prennent pas en charge l'attribut <code>async</code> attribute, les scripts insérés lors de l'analyse (<em>parsing</em>) bloquent l'analyseur, les scripts insérés par d'autres scripts s'exécutent en asynchrone sous IE et WebKit et en synchrone sous Opera et sous Firefox pour les versions antérieures à Firefox 4.0.</p>
+Pour les anciens navigateurs qui ne prennent pas en charge l'attribut `async` attribute, les scripts insérés lors de l'analyse (_parsing_) bloquent l'analyseur, les scripts insérés par d'autres scripts s'exécutent en asynchrone sous IE et WebKit et en synchrone sous Opera et sous Firefox pour les versions antérieures à Firefox 4.0.
 
-<p>Sous Firefox 4.0, la propriété <code>async</code> du DOM vaut <code>true</code> par défaut pour les scripts créés avec <code>document.createElement("script").async</code> afin que le comportement par défaut corresponde au comportement d'IE et de WebKit. Afin que les scripts insérés par des scripts externes soient lancés dans l'ordre d'insertion, on définira <code>.async=false</code> pour les scripts dont on souhaite conserver l'ordre d'exécution.</p>
+Sous Firefox 4.0, la propriété `async` du DOM vaut `true` par défaut pour les scripts créés avec `document.createElement("script").async` afin que le comportement par défaut corresponde au comportement d'IE et de WebKit. Afin que les scripts insérés par des scripts externes soient lancés dans l'ordre d'insertion, on définira `.async=false` pour les scripts dont on souhaite conserver l'ordre d'exécution.
 
-<p><code>document.write()</code> ne doit jamais être appelé sur un script asynchrone avec <code>async</code>. Sous Gecko 1.9.2, si on appelle <code>document.write()</code>, cela aura un effet imprévisible. Pour Gecko 2.0, appeler <code>document.write()</code> depuis un script asynchrone n'aura aucun effet (en dehors d'afficher un message d'erreur dans la console).</p>
+`document.write()` ne doit jamais être appelé sur un script asynchrone avec `async`. Sous Gecko 1.9.2, si on appelle `document.write()`, cela aura un effet imprévisible. Pour Gecko 2.0, appeler `document.write()` depuis un script asynchrone n'aura aucun effet (en dehors d'afficher un message d'erreur dans la console).
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("document.currentScript")}}</li>
- <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li>
- <li><a href="/fr/docs/Web/JavaScript/Guide/Modules">Guide sur les modules JavaScript</a></li>
- <li><a href="https://pie.gd/test/script-link-events/">Tableau de compatibilité de Ryan Grove pour les évènements liés aux éléments <code>&lt;script&gt;</code> et <code>&lt;link&gt;</code></a></li>
- <li><a href="https://flaviocopes.com/javascript-async-defer/">Un article de Flavio Copes sur le chargement de ressources JavaScript et les différences entre <code>async</code> et <code>defer</code> (en anglais)</a></li>
-</ul>
+- {{domxref("document.currentScript")}}
+- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML)
+- [Guide sur les modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules)
+- [Tableau de compatibilité de Ryan Grove pour les évènements liés aux éléments `<script>` et `<link>`](https://pie.gd/test/script-link-events/)
+- [Un article de Flavio Copes sur le chargement de ressources JavaScript et les différences entre `async` et `defer` (en anglais)](https://flaviocopes.com/javascript-async-defer/)
diff --git a/files/fr/web/html/element/section/index.md b/files/fr/web/html/element/section/index.md
index b532475bba..66c72ddf96 100644
--- a/files/fr/web/html/element/section/index.md
+++ b/files/fr/web/html/element/section/index.md
@@ -8,112 +8,120 @@ tags:
   - Web
 translation_of: Web/HTML/Element/section
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;section&gt;</code></strong> représente une section générique d'un document, par exemple un groupe de contenu thématique. Une section commence généralement avec un titre.</p>
+L'élément HTML **`<section>`** représente une section générique d'un document, par exemple un groupe de contenu thématique. Une section commence généralement avec un titre.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/section.html", "tabbed-standard")}}
 
-<p>Ainsi, un menu de navigation devrait être délimité par un élément {{htmlelement("nav")}} mais une liste de résultat de recherche, qui ne dispose pas d'élément spécifique pour être représentée, pourrait être englobée dans un élément <code>&lt;section&gt;</code>.</p>
+Ainsi, un menu de navigation devrait être délimité par un élément {{htmlelement("nav")}} mais une liste de résultat de recherche, qui ne dispose pas d'élément spécifique pour être représentée, pourrait être englobée dans un élément `<section>`.
 
-<div class="note">
-<p><strong>Note :</strong> Si le contenu de l'élément devrait être considéré comme un fragment indépendant (qui puisse être séparée du reste du contenu), l'élément {{HTMLElement("article")}} sera plus pertinent.</p>
-</div>
+> **Note :** Si le contenu de l'élément devrait être considéré comme un fragment indépendant (qui puisse être séparée du reste du contenu), l'élément {{HTMLElement("article")}} sera plus pertinent.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<ul>
- <li>Chaque élément <code>&lt;section&gt;</code> devrait être identifié, généralement grâce à un élément de titre ({{HTMLElement('h1')}}-{{HTMLElement('h6')}}) qui est un élément fils de l'élément <code>&lt;section&gt;</code>.</li>
- <li>S'il est plus pertinent que le contenu soit à part, on utilisera l'élément {{HTMLElement("article")}}.</li>
- <li>L'élément <code>&lt;section&gt;</code> ne doit pas être utilisé comme un conteneur générique : c'est le rôle de {{HTMLElement("div")}}, notamment lorsque le sectionnement du contenu sert uniquement la mise en forme. Pour savoir lequel utiliser, on peut se demander si la section doit apparaître sur le plan du document : si oui, on utilisera <code>&lt;section&gt;</code>, sinon, <code>&lt;div&gt;</code>.</li>
-</ul>
+- Chaque élément `<section>` devrait être identifié, généralement grâce à un élément de titre ({{HTMLElement('h1')}}-{{HTMLElement('h6')}}) qui est un élément fils de l'élément `<section>`.
+- S'il est plus pertinent que le contenu soit à part, on utilisera l'élément {{HTMLElement("article")}}.
+- L'élément `<section>` ne doit pas être utilisé comme un conteneur générique : c'est le rôle de {{HTMLElement("div")}}, notamment lorsque le sectionnement du contenu sert uniquement la mise en forme. Pour savoir lequel utiliser, on peut se demander si la section doit apparaître sur le plan du document : si oui, on utilisera `<section>`, sinon, `<div>`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;section&gt;
-  &lt;h1&gt;Titre&lt;/h1&gt;
-  &lt;p&gt;Du contenu sur un thème pour ce titre&lt;/p&gt;
-&lt;/section&gt;
-</pre>
+```html
+<section>
+  <h1>Titre</h1>
+  <p>Du contenu sur un thème pour ce titre</p>
+</section>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","120")}}</p>
+{{EmbedLiveSample("Exemples","100%","120")}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_sectionnant">contenu sectionnant</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>. Un élément <code>&lt;section&gt;</code> ne peut pas être le descendant d'un élément {{HTMLElement("address")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>{{ARIARole("alert")}}, {{ARIARole("alertdialog")}}, {{ARIARole("application")}}, {{ARIARole("banner")}}, {{ARIARole("complementary")}}, {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}}, {{ARIARole("document")}}, {{ARIARole("feed")}}, {{ARIARole("log")}}, {{ARIARole("main")}}, {{ARIARole("marquee")}}, {{ARIARole("navigation")}}, {{ARIARole("search")}}, {{ARIARole("status")}}, {{ARIARole("tabpanel")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_sectionnant"
+          >contenu sectionnant</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >. Un élément <code>&#x3C;section></code> ne peut pas être le descendant
+        d'un élément {{HTMLElement("address")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>
+        {{ARIARole("alert")}}, {{ARIARole("alertdialog")}},
+        {{ARIARole("application")}}, {{ARIARole("banner")}},
+        {{ARIARole("complementary")}},
+        {{ARIARole("contentinfo")}}, {{ARIARole("dialog")}},
+        {{ARIARole("document")}}, {{ARIARole("feed")}},
+        {{ARIARole("log")}}, {{ARIARole("main")}},
+        {{ARIARole("marquee")}}, {{ARIARole("navigation")}},
+        {{ARIARole("search")}}, {{ARIARole("status")}},
+        {{ARIARole("tabpanel")}}
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'sections.html#the-section-element', '&lt;section&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                    | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'sections.html#the-section-element', '&lt;section&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5.1', 'sections.html#the-section-element', '&lt;section&gt;')}}         | {{Spec2('HTML5.1')}}     |              |
+| {{SpecName('HTML5 W3C', 'sections.html#the-section-element', '&lt;section&gt;')}}     | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.section")}}</p>
+{{Compat("html.elements.section")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les autres éléments HTML relatifs au plan du document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}</li>
- <li><a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Structure et sections d'un document HTML5</a></li>
- <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Region_role">ARIA : le rôle <code>region</code></a></li>
-</ul>
+- Les autres éléments HTML relatifs au plan du document : {{HTMLElement("body")}}, {{HTMLElement("nav")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("address")}}
+- [Structure et sections d'un document HTML5](/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document)
+- [ARIA : le rôle `region`](/fr/docs/Web/Accessibility/ARIA/Roles/Region_role)
diff --git a/files/fr/web/html/element/select/index.md b/files/fr/web/html/element/select/index.md
index e941bc306d..7c6a5b3686 100644
--- a/files/fr/web/html/element/select/index.md
+++ b/files/fr/web/html/element/select/index.md
@@ -9,205 +9,245 @@ tags:
   - Web
 translation_of: Web/HTML/Element/select
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;select&gt;</code></strong> représente un contrôle qui fournit une liste d'options parmi lesquelles l'utilisateur pourra choisir.</p>
+L'élément HTML **`<select>`** représente un contrôle qui fournit une liste d'options parmi lesquelles l'utilisateur pourra choisir.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/select.html", "tabbed-standard")}}
 
-<p>L'exemple ci-avant illustre une utilisation simple de <code>&lt;select&gt;</code> où l'attribut <code>id</code> peut être associé à un élément {{htmlelement("label")}} qui permettra d'avoir un libellé accessible pour ce champ et où un attribut <code>name</code> représente le nom de la donnée qui sera envoyée au serveur. Chaque option est définie grâce à un élément {{htmlelement("option")}} qui se situe à l'intérieur de l'élément <code>&lt;select&gt;</code>.</p>
+L'exemple ci-avant illustre une utilisation simple de `<select>` où l'attribut `id` peut être associé à un élément {{htmlelement("label")}} qui permettra d'avoir un libellé accessible pour ce champ et où un attribut `name` représente le nom de la donnée qui sera envoyée au serveur. Chaque option est définie grâce à un élément {{htmlelement("option")}} qui se situe à l'intérieur de l'élément `<select>`.
 
-<p>Chaque élément <code>&lt;option&gt;</code> doit avoir un attribut <code>value</code> qui contient la valeur qui sera envoyée au serveur lorsque l'option est sélectionnée. Si aucune valeur n'est fournie, la valeur par défaut sera le texte contenu dans l'élément. Il est possible d'inclure un attribut <code>selected</code> sur un élément <code>&lt;option&gt;</code> afin que cette option soit sélectionnée par défaut au chargement de la page.</p>
+Chaque élément `<option>` doit avoir un attribut `value` qui contient la valeur qui sera envoyée au serveur lorsque l'option est sélectionnée. Si aucune valeur n'est fournie, la valeur par défaut sera le texte contenu dans l'élément. Il est possible d'inclure un attribut `selected` sur un élément `<option>` afin que cette option soit sélectionnée par défaut au chargement de la page.
 
-<p>L'élément <code>&lt;select&gt;</code> possède certains attributs spécifiques dont <code>multiple</code> qui permet de choisir plusieurs options simultanément et <code>size</code> qui indique le nombre d'options affichées en même temps. Cet élément accepte également divers attributs qui sont utilisés pour les champs de formulaire tels que <code>required</code>, <code>disabled</code>, <code>autofocus</code>, etc.</p>
+L'élément `<select>` possède certains attributs spécifiques dont `multiple` qui permet de choisir plusieurs options simultanément et `size` qui indique le nombre d'options affichées en même temps. Cet élément accepte également divers attributs qui sont utilisés pour les champs de formulaire tels que `required`, `disabled`, `autofocus`, etc.
 
-<p>Il est possible de regrouper plusieurs éléments <code>&lt;option&gt;</code> à l'intérieur d'éléments {{htmlelement("optgroup")}} afin de créer des groupes d'options distincts.</p>
+Il est possible de regrouper plusieurs éléments `<option>` à l'intérieur d'éléments {{htmlelement("optgroup")}} afin de créer des groupes d'options distincts.
 
-<p>Pour plus d'exemples, voir <a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Contenu_déroulant">les contrôles natifs pour les formulaires</a>.</p>
+Pour plus d'exemples, voir [les contrôles natifs pour les formulaires](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Contenu_déroulant).
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, celui-ci inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, celui-ci inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("autocomplete")}}</dt>
- <dd>Une chaîne de caractères qui fournit une indication à l'agent utilisateur pour les fonctionnalités d'autocomplétion. Voir <a href="/fr/docs/Web/HTML/Attributs/autocomplete">la page sur l'attribut <code>autocomplete</code></a> pour une liste des valeurs utilisables et de leurs impacts sur l'autocomplétion.</dd>
- <dt>{{htmlattrdef("autofocus")}}</dt>
- <dd>Cet attribut booléen permet d'indiquer si ce contrôle du formulaire devrait recevoir le focus au chargement de la page. Pour un même document, seul un élément de formulaire peut avoir l'attribut <code>autofocus</code> activé.</dd>
- <dt>{{htmlattrdef("disabled")}}</dt>
- <dd>Cet attribut booléen indique que l'utilisateur ne peut pas intéragir avec le contrôle. Si cet attribut n'est pas utilisé, le contrôle héritera de l'état paramétré selon son conteneur (par exemple, via son élément parent {{HTMLElement("fieldset")}}. Si aucun élément parent n'a l'attribut <code>disabled</code> activé, le contrôle sera actif.</dd>
- <dt>{{htmlattrdef("form")}}</dt>
- <dd>Cet attribut sert de référence au formulaire auquel est associé cet élément. Si cet attribut est utilisé, sa valeur doit être l'identifiant d'un élément {{HTMLElement("form")}} du même document. Cet attribut permet de placer des éléments n'importe où dans le document et pas nécessairement comme descendants d'un formulaire.</dd>
- <dt>{{htmlattrdef("multiple")}}</dt>
- <dd>Cet attribut booléen indique qu'on peut sélectionner plusieurs options parmi celles offertes dans le contrôle. Par défaut, si cet attribut n'est pas utilisé, seule une option peut être sélectionnée.</dd>
- <dt>{{htmlattrdef("name")}}</dt>
- <dd>Le nom associé au contrôle.</dd>
- <dt>{{htmlattrdef("required")}}</dt>
- <dd>Un attribut booléen qui indique qu'une option dont la valeur est une chaîne de caractères non-vide doit être sélectionnée.</dd>
- <dt>{{htmlattrdef("size")}}</dt>
- <dd>Si le contrôle est affichée comme une liste déroulante, cet attribut indique le nombre de lignes qui doivent être visibles à l'écran en même temps. On notera que les navigateurs ne sont pas obligés de présenter un élément <code>&lt;select</code><code>&gt;</code> sous la forme d'une liste déroulante. La valeur par défaut de cet attribut est 0 (cf. notes de compatibilité ci-après).</dd>
-</dl>
+- {{htmlattrdef("autocomplete")}}
+  - : Une chaîne de caractères qui fournit une indication à l'agent utilisateur pour les fonctionnalités d'autocomplétion. Voir [la page sur l'attribut `autocomplete`](/fr/docs/Web/HTML/Attributs/autocomplete) pour une liste des valeurs utilisables et de leurs impacts sur l'autocomplétion.
+- {{htmlattrdef("autofocus")}}
+  - : Cet attribut booléen permet d'indiquer si ce contrôle du formulaire devrait recevoir le focus au chargement de la page. Pour un même document, seul un élément de formulaire peut avoir l'attribut `autofocus` activé.
+- {{htmlattrdef("disabled")}}
+  - : Cet attribut booléen indique que l'utilisateur ne peut pas intéragir avec le contrôle. Si cet attribut n'est pas utilisé, le contrôle héritera de l'état paramétré selon son conteneur (par exemple, via son élément parent {{HTMLElement("fieldset")}}. Si aucun élément parent n'a l'attribut `disabled` activé, le contrôle sera actif.
+- {{htmlattrdef("form")}}
+  - : Cet attribut sert de référence au formulaire auquel est associé cet élément. Si cet attribut est utilisé, sa valeur doit être l'identifiant d'un élément {{HTMLElement("form")}} du même document. Cet attribut permet de placer des éléments n'importe où dans le document et pas nécessairement comme descendants d'un formulaire.
+- {{htmlattrdef("multiple")}}
+  - : Cet attribut booléen indique qu'on peut sélectionner plusieurs options parmi celles offertes dans le contrôle. Par défaut, si cet attribut n'est pas utilisé, seule une option peut être sélectionnée.
+- {{htmlattrdef("name")}}
+  - : Le nom associé au contrôle.
+- {{htmlattrdef("required")}}
+  - : Un attribut booléen qui indique qu'une option dont la valeur est une chaîne de caractères non-vide doit être sélectionnée.
+- {{htmlattrdef("size")}}
+  - : Si le contrôle est affichée comme une liste déroulante, cet attribut indique le nombre de lignes qui doivent être visibles à l'écran en même temps. On notera que les navigateurs ne sont pas obligés de présenter un élément ` <select``> ` sous la forme d'une liste déroulante. La valeur par défaut de cet attribut est 0 (cf. notes de compatibilité ci-après).
 
-<h2 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h2>
+## Mise en forme avec CSS
 
-<p>Il est communément admis que l'élément <code>&lt;select&gt;</code> est difficilement mis en forme avec CSS. Certains aspects de l'élément, <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte">son modèle de boîte</a>, <a href="/fr/docs/Web/CSS/CSS_Fonts">la police utilisée</a> ou encore l'apparence ({{cssxref("appearance")}}), peuvent être modifiés.</p>
+Il est communément admis que l'élément `<select>` est difficilement mis en forme avec CSS. Certains aspects de l'élément, [son modèle de boîte](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte), [la police utilisée](/fr/docs/Web/CSS/CSS_Fonts) ou encore l'apparence ({{cssxref("appearance")}}), peuvent être modifiés.
 
-<p>Toutefois, ces propriétés peuvent fournir des résultats incohérents entre les différents navigateurs et il peut être difficile d'aligner différents contrôles sur une colonne.Aussi, si la structure interne de cet élément est trop complexe, on pourra créer un tel contrôle en utilisant des éléments non sémantiques, du code JavaScript et WAI-ARIA afin de décrire la sémantique du contrôle.</p>
+Toutefois, ces propriétés peuvent fournir des résultats incohérents entre les différents navigateurs et il peut être difficile d'aligner différents contrôles sur une colonne.Aussi, si la structure interne de cet élément est trop complexe, on pourra créer un tel contrôle en utilisant des éléments non sémantiques, du code JavaScript et WAI-ARIA afin de décrire la sémantique du contrôle.
 
-<p>Pour plus d'informations sur la mise en forme de <code>&lt;select&gt;</code> :</p>
+Pour plus d'informations sur la mise en forme de `<select>` :
 
-<ul>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mettre en forme les formulaires HTML</a></li>
- <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li>
-</ul>
+- [Mettre en forme les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML)
+- [Mise en forme avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms)
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_basique">Exemple basique</h3>
+### Exemple basique
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;!-- C'est la deuxième valeur --&gt;
-&lt;!-- qui sera initialement sélectionnée --&gt;
-&lt;select id="monselect"&gt;
-  &lt;option value="valeur1"&gt;Valeur 1&lt;/option&gt;
-  &lt;option value="valeur2" selected&gt;Valeur 2&lt;/option&gt;
-  &lt;option value="valeur3"&gt;Valeur 3&lt;/option&gt;
-&lt;/select&gt;
-</pre>
+```html
+<!-- C'est la deuxième valeur -->
+<!-- qui sera initialement sélectionnée -->
+<select id="monselect">
+  <option value="valeur1">Valeur 1</option>
+  <option value="valeur2" selected>Valeur 2</option>
+  <option value="valeur3">Valeur 3</option>
+</select>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_basique","100%","150")}}</p>
+{{EmbedLiveSample("Exemple_basique","100%","150")}}
 
-<h3 id="Exemple_multi-selection">Exemple multi-selection</h3>
+### Exemple multi-selection
 
-<p>L'exemple qui suit est légèrement plus complexe et illustre certaines fonctionnalités qui peuvent être utilisées avec un élément <code>&lt;select&gt;</code> :</p>
+L'exemple qui suit est légèrement plus complexe et illustre certaines fonctionnalités qui peuvent être utilisées avec un élément `<select>` :
 
-<pre class="brush: html">&lt;label&gt;Veuillez choisir un ou plusieurs animaux :
-  &lt;select name="pets" multiple size="4"&gt;
-    &lt;optgroup label="Animaux à 4-jambes"&gt;
-      &lt;option value="Chien"&gt;Chien&lt;/option&gt;
-      &lt;option value="chat"&gt;Chat&lt;/option&gt;
-      &lt;option value="hamster" disabled&gt;Hamster&lt;/option&gt;
-    &lt;/optgroup&gt;
-    &lt;optgroup label="Animaux volants"&gt;
-      &lt;option value="perroquet"&gt;Perroquet&lt;/option&gt;
-      &lt;option value="macaw"&gt;Macaw&lt;/option&gt;
-      &lt;option value="albatros"&gt;Albatros&lt;/option&gt;
-    &lt;/optgroup&gt;
-  &lt;/select&gt;
-&lt;/label&gt;
-</pre>
+```html
+<label>Veuillez choisir un ou plusieurs animaux :
+  <select name="pets" multiple size="4">
+    <optgroup label="Animaux à 4-jambes">
+      <option value="Chien">Chien</option>
+      <option value="chat">Chat</option>
+      <option value="hamster" disabled>Hamster</option>
+    </optgroup>
+    <optgroup label="Animaux volants">
+      <option value="perroquet">Perroquet</option>
+      <option value="macaw">Macaw</option>
+      <option value="albatros">Albatros</option>
+    </optgroup>
+  </select>
+</label>
+```
 
-<p>Cet exemple n'est pas disponible de façon interactive (le moteur de MDN supprime l'attribut <code>multiple</code> lors de l'affichage de la page) mais vous pouvez voir <a href="https://mdn.github.io/learning-area/html/forms/select-example/select-multiple.html">l'exemple sur GitHub</a>.</p>
+Cet exemple n'est pas disponible de façon interactive (le moteur de MDN supprime l'attribut `multiple` lors de l'affichage de la page) mais vous pouvez voir [l'exemple sur GitHub](https://mdn.github.io/learning-area/html/forms/select-example/select-multiple.html).
 
-<p>Vous pourrez voir que :</p>
+Vous pourrez voir que :
 
-<ul>
- <li>Plusieurs options peuvent être sélectionnées grâce à l'attribut <code>multiple</code>.</li>
- <li>L'attribut <code>size</code> permet d'afficher uniquement 4 lignes simultanément et qu'il faut faire défiler le contenu.</li>
- <li>Les éléments <code>&lt;optgroup&gt;</code> ont été utilisés pour diviser les choix en différents groupes. Cela applique un effet simplement visuel (avec le nom en gras et les options indentées).</li>
- <li>Le choix "Hamster" est présent avec l'attribut <code>disabled</code> et ne peut donc pas être sélectionné.</li>
-</ul>
+- Plusieurs options peuvent être sélectionnées grâce à l'attribut `multiple`.
+- L'attribut `size` permet d'afficher uniquement 4 lignes simultanément et qu'il faut faire défiler le contenu.
+- Les éléments `<optgroup>` ont été utilisés pour diviser les choix en différents groupes. Cela applique un effet simplement visuel (avec le nom en gras et les options indentées).
+- Le choix "Hamster" est présent avec l'attribut `disabled` et ne peut donc pas être sélectionné.
 
-<div class="note">
-<p><strong>Note :</strong> Sur un ordinateur de bureau, on pourra maintenir les touches <kbd>Ctrl</kbd>, <kbd>Command</kbd>, ou <kbd>Shift</kbd> en cliquant afin de sélectionner/déselectionner plusieurs options.</p>
-</div>
+> **Note :** Sur un ordinateur de bureau, on pourra maintenir les touches <kbd>Ctrl</kbd>, <kbd>Command</kbd>, ou <kbd>Shift</kbd> en cliquant afin de sélectionner/déselectionner plusieurs options.
 
-<h3 id="Sélectionner_plusieurs_options">Sélectionner plusieurs options</h3>
+### Sélectionner plusieurs options
 
-<p>Sur un ordinateur de bureau, il existe différentes façons de sélectionner plusieurs options pour un élément <code>&lt;select&gt;</code> utilisant un attribut <code>multiple</code>.</p>
+Sur un ordinateur de bureau, il existe différentes façons de sélectionner plusieurs options pour un élément `<select>` utilisant un attribut `multiple`.
 
-<p>Pour les personnes qui utilisent la souris, il est possible de maintenir les touches <kbd>Ctrl</kbd>, <kbd>Command</kbd> ou <kbd>Shift</kbd> (selon le système d'exploitation utilisé) et de cliquer sur les différentes options afin de les sélectionner/déselectionner.</p>
+Pour les personnes qui utilisent la souris, il est possible de maintenir les touches <kbd>Ctrl</kbd>, <kbd>Command</kbd> ou <kbd>Shift</kbd> (selon le système d'exploitation utilisé) et de cliquer sur les différentes options afin de les sélectionner/déselectionner.
 
-<div class="warning">
-<p><strong>Attention :</strong> Les moyens décrits ci-après pour sélectionner des options qui ne sont pas contigües semblent ne fonctionner qu'avec Firefox. On notera également que sur macOS, les raccourcis <kbd>Ctrl</kbd> + <kbd>Bas</kbd> et <kbd>Ctrl</kbd> + <kbd>Haut</kbd> sont utilisées par défaut par le système d'exploitation et qu'il faut les désactiver si on souhaite qu'ils fonctionnent dans le navigateurs.</p>
-</div>
+> **Attention :** Les moyens décrits ci-après pour sélectionner des options qui ne sont pas contigües semblent ne fonctionner qu'avec Firefox. On notera également que sur macOS, les raccourcis <kbd>Ctrl</kbd> + <kbd>Bas</kbd> et <kbd>Ctrl</kbd> + <kbd>Haut</kbd> sont utilisées par défaut par le système d'exploitation et qu'il faut les désactiver si on souhaite qu'ils fonctionnent dans le navigateurs.
 
-<p>Les utilisateurs du clavier pourront sélectionner des options contigües de la façon suivante :</p>
+Les utilisateurs du clavier pourront sélectionner des options contigües de la façon suivante :
 
-<ul>
- <li>Placer le focus sur l'élément <code>&lt;select&gt;</code> (avec la touche <kbd>Tab</kbd> par exemple).</li>
- <li>Sélectionner une option en haut ou en bas de l'intervalle en se déplaçant avec les touches <kbd>Haut</kbd> et <kbd>Bas</kbd>.</li>
- <li>Maintenir la touche <kbd>Shift</kbd> puis utiliser les touches <kbd>Haut</kbd> et <kbd>Bas</kbd> pour augmenter ou réduire le nombre d'options sélectionnées.</li>
-</ul>
+- Placer le focus sur l'élément `<select>` (avec la touche
 
-<p>Les utilisateurs du clavier pourront sélectionner des options non-contigües de la façon suivante :</p>
+  <kbd>Tab</kbd>
 
-<ul>
- <li>Placer le focus sur l'élément <code>&lt;select&gt;</code> (avec la touche <kbd>Tab</kbd> par exemple).</li>
- <li>Maintenir la touche <kbd>Ctrl</kbd> puis utiliser les touches <kbd>Haut</kbd> et <kbd>Bas</kbd> pour modifier le focus sur l'option qu'on souhaite choisir ou rejeter. L'option avec le focus sera entourée par un contour en pointillé.</li>
- <li>Appuyer sur <kbd>Espace</kbd> pour sélectionner/déselectionner les options avec le focus et ainsi de suite pour les différentes options.</li>
-</ul>
+  par exemple).
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+- Sélectionner une option en haut ou en bas de l'intervalle en se déplaçant avec les touches
+
+  <kbd>Haut</kbd>
+
+  et
+
+  <kbd>Bas</kbd>
+
+  .
+
+- Maintenir la touche
+
+  <kbd>Shift</kbd>
+
+  puis utiliser les touches
+
+  <kbd>Haut</kbd>
+
+  et
+
+  <kbd>Bas</kbd>
+
+  pour augmenter ou réduire le nombre d'options sélectionnées.
+
+Les utilisateurs du clavier pourront sélectionner des options non-contigües de la façon suivante :
+
+- Placer le focus sur l'élément `<select>` (avec la touche
+
+  <kbd>Tab</kbd>
+
+  par exemple).
+
+- Maintenir la touche
+
+  <kbd>Ctrl</kbd>
+
+  puis utiliser les touches
+
+  <kbd>Haut</kbd>
+
+  et
+
+  <kbd>Bas</kbd>
+
+  pour modifier le focus sur l'option qu'on souhaite choisir ou rejeter. L'option avec le focus sera entourée par un contour en pointillé.
+
+- Appuyer sur
+
+  <kbd>Espace</kbd>
+
+  pour sélectionner/déselectionner les options avec le focus et ainsi de suite pour les différentes options.
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">contenu de formulaire</a> (listé, étiquetable, réinitialisable, qui peut être envoyé).</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Zéro ou plusieurs éléments {{HTMLElement("option")}} ou {{HTMLElement("optgroup")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisé</th>
-   <td>{{ARIARole("menu")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLSelectElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_interactif"
+          >contenu interactif</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires"
+          >contenu de formulaire</a
+        >
+        (listé, étiquetable, réinitialisable, qui peut être envoyé).
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        Zéro ou plusieurs éléments {{HTMLElement("option")}} ou
+        {{HTMLElement("optgroup")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisé</th>
+      <td>{{ARIARole("menu")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLSelectElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#the-select-element', '&lt;select&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#the-select-element', '&lt;select&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;select&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'forms.html#the-select-element', '&lt;select&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'forms.html#the-select-element', '&lt;select&gt;')}}     | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '&lt;select&gt;')}}         | {{Spec2('HTML4.01')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.select")}}</p>
+{{Compat("html.elements.select")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}</li>
- <li>Les évènements déclenchés par <code>&lt;select&gt;</code> : <code><a href="/fr/docs/Web/Events/input">input</a></code>, <code><a href="/fr/docs/Web/Events/change">change</a></code></li>
-</ul>
+- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("button")}}, {{HTMLElement("option")}}, {{HTMLElement("datalist")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("input")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}
+- Les évènements déclenchés par `<select>` : [`input`](/fr/docs/Web/Events/input), [`change`](/fr/docs/Web/Events/change)
diff --git a/files/fr/web/html/element/shadow/index.md b/files/fr/web/html/element/shadow/index.md
index 3d493de32a..b09fcdc622 100644
--- a/files/fr/web/html/element/shadow/index.md
+++ b/files/fr/web/html/element/shadow/index.md
@@ -10,36 +10,35 @@ tags:
   - Web
 translation_of: Web/HTML/Element/shadow
 ---
-<div>{{deprecated_header}}{{HTMLRef}}</div>
+{{deprecated_header}}{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;shadow&gt;</code></strong> était utilisé comme un point d'insertion ({{glossary("insertion point")}}) du <em>shadow DOM</em>. Cet élément a été retiré de la spécification et est <a href="https://github.com/w3c/webcomponents/commit/041ba5518b9372768234d2766de503b98a03fa45">désormais obsolète</a>.</p>
+L'élément HTML **`<shadow>`** était utilisé comme un point d'insertion ({{glossary("insertion point")}}) du _shadow DOM_. Cet élément a été retiré de la spécification et est [désormais obsolète](https://github.com/w3c/webcomponents/commit/041ba5518b9372768234d2766de503b98a03fa45).
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Voici un exemple simple de l'utilisation de l'élément <code>&lt;shadow&gt;</code>. Il s'agit d'un fichier HTML pourvu de tout ce qui est nécessaire.</p>
+Voici un exemple simple de l'utilisation de l'élément `<shadow>`. Il s'agit d'un fichier HTML pourvu de tout ce qui est nécessaire.
 
-<div class="note">
-<p><strong>Note :</strong> il s'agit d'une technologie expérimentale. Pour faire fonctionner ce code, le navigateur où vous l'affichez doit supporter les composants web (<em>web components</em>). Pour plus d'informations, voir <a href="/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox">Activer les composants web sous Firefox</a>.</p>
-</div>
+> **Note :** il s'agit d'une technologie expérimentale. Pour faire fonctionner ce code, le navigateur où vous l'affichez doit supporter les composants web (_web components_). Pour plus d'informations, voir [Activer les composants web sous Firefox](/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox).
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;html&gt;
-  &lt;head&gt;&lt;/head&gt;
-  &lt;body&gt;
+```html
+<html>
+  <head></head>
+  <body>
 
-  &lt;!-- Ce &lt;div&gt; accueillera les shadow roots. --&gt;
-  &lt;div&gt;
-    &lt;!-- Ce titre ne sera pas affiché --&gt;
-    &lt;h4&gt;My Original Heading&lt;/h4&gt;
-  &lt;/div&gt;
+  <!-- Ce <div> accueillera les shadow roots. -->
+  <div>
+    <!-- Ce titre ne sera pas affiché -->
+    <h4>My Original Heading</h4>
+  </div>
 
-  &lt;script&gt;
-    // Récupère le contenu du &lt;div&gt; ci-dessus
+  <script>
+    // Récupère le contenu du <div> ci-dessus
     var origContent = document.querySelector('div');
     // Crée le premier shadow root
     var shadowroot1 = origContent.createShadowRoot();
@@ -48,67 +47,79 @@ translation_of: Web/HTML/Element/shadow
 
     // Insère un contenu dans le plus vieux shadow root
     shadowroot1.innerHTML =
-      '&lt;p&gt;Older shadow root inserted by &amp;lt;shadow&amp;gt;&lt;/p&gt;';
-    // Insère dans le plus jeune shadow root, y compris &lt;shadow&gt;.
+      '<p>Older shadow root inserted by &lt;shadow&gt;</p>';
+    // Insère dans le plus jeune shadow root, y compris <shadow>.
     // La balise précédente ne sera pas affichée à moins que
-    // l'élément &lt;shadow&gt; ne soit utilisé ci-dessous.
+    // l'élément <shadow> ne soit utilisé ci-dessous.
     shadowroot2.innerHTML =
-      '&lt;shadow&gt;&lt;/shadow&gt; &lt;p&gt;Younger shadow root, displayed because it is the youngest.&lt;/p&gt;';
-  &lt;/script&gt;
+      '<shadow></shadow> <p>Younger shadow root, displayed because it is the youngest.</p>';
+  </script>
 
-  &lt;/body&gt;
-&lt;/html&gt;
-</pre>
+  </body>
+</html>
+```
 
-<h3 id="Résultat_statique">Résultat statique</h3>
+### Résultat statique
 
-<p><img alt="Exemple pour shadow" src="shadow-example.png"></p>
-
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+![Exemple pour shadow](shadow-example.png)
 
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu">Catégories de contenu </a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Content_categories#Transparent_content_model">Contenu transparent</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Contenu autorisé </dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Omission de balises</dfn></th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Parents autorisés</dfn></th>
-   <td>Tout élément qui accepte un contenu de flux.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Interface DOM</dfn></th>
-   <td>{{domxref("HTMLShadowElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Content_categories#Transparent_content_model"
+          >Contenu transparent</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Contenu autorisé</dfn></th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Omission de balises</dfn></th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Parents autorisés</dfn></th>
+      <td>Tout élément qui accepte un contenu de flux.</td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Interface DOM</dfn></th>
+      <td>{{domxref("HTMLShadowElement")}}</td>
+    </tr>
+  </tbody>
 </table>
-<h2 id="Spécifications">Spécifications</h2>
 
-<p>Cet élément ne fait plus partie d'aucune spécification.</p>
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
+
+Cet élément ne fait plus partie d'aucune spécification.
+
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.shadow")}}</p>
+{{Compat("html.elements.shadow")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/Web_Components">Les composants web</a></li>
- <li>{{HTMLElement("content")}}</li>
- <li>{{HTMLElement("template")}}</li>
- <li>{{HTMLElement("slot")}}</li>
- <li>{{HTMLElement("element")}}</li>
-</ul>
+- [Les composants web](/fr/docs/Web/Web_Components)
+- {{HTMLElement("content")}}
+- {{HTMLElement("template")}}
+- {{HTMLElement("slot")}}
+- {{HTMLElement("element")}}
diff --git a/files/fr/web/html/element/slot/index.md b/files/fr/web/html/element/slot/index.md
index ce9967dc3e..0a1c7971e5 100644
--- a/files/fr/web/html/element/slot/index.md
+++ b/files/fr/web/html/element/slot/index.md
@@ -10,24 +10,25 @@ tags:
   - shadow dom
 translation_of: Web/HTML/Element/slot
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;slot&gt;</code></strong> représente un emplacement d'un composant web qu'on peut remplir avec son propre balisage. On peut ainsi obtenir un document construit avec différents arbres DOM. Cet élément fait partie des outils relatifs <a href="/fr/docs/Web/Web_Components">aux composants web (Web Components)</a>.</p>
+L'élément HTML **`<slot>`** représente un emplacement d'un composant web qu'on peut remplir avec son propre balisage. On peut ainsi obtenir un document construit avec différents arbres DOM. Cet élément fait partie des outils relatifs [aux composants web (Web Components)](/fr/docs/Web/Web_Components).
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("name")}}</dt>
- <dd><p>Le nom de l'emplacement créé.</p>
- <p>Un <strong><dfn>« slot » nommé</dfn></strong> est un élément <code>&lt;slot&gt;</code> avec un attribut <code>name</code>.</p></dd>
-</dl>
+- {{htmlattrdef("name")}}
 
-<h2 id="Exemples">Exemples</h2>
+  - : Le nom de l'emplacement créé.
 
-<pre class="brush: html">&lt;template id="element-details-template"&gt;
-  &lt;style&gt;
+    Un **_« slot » nommé_** est un élément `<slot>` avec un attribut `name`.
+
+## Exemples
+
+```html
+<template id="element-details-template">
+  <style>
     details {font-family: "Open Sans Light", Helvetica, Arial, sans-serif }
     .name {font-weight: bold; color: #217ac0; font-size: 120% }
     h4 {
@@ -40,89 +41,90 @@ translation_of: Web/HTML/Element/slot
     }
     .attributes { margin-left: 22px; font-size: 90% }
     .attributes p { margin-left: 16px; font-style: italic }
-  &lt;/style&gt;
-  &lt;details&gt;
-    &lt;summary&gt;
-      &lt;code class="name"&gt;&amp;lt;&lt;slot name="element-name"&gt;Remplacer ce nom&lt;/slot&gt;&amp;gt;&lt;/code&gt;
-      &lt;i class="desc"&gt;&lt;slot name="description"&gt;Remplacer cette description&lt;/slot&gt;&lt;/i&gt;
-    &lt;/summary&gt;
-    &lt;div class="attributes"&gt;
-      &lt;h4&gt;Attributs&lt;/h4&gt;
-      &lt;slot name="attributes"&gt;&lt;p&gt;Aucun&lt;/p&gt;&lt;/slot&gt;
-    &lt;/div&gt;
-  &lt;/details&gt;
-  &lt;hr&gt;
-&lt;/template&gt;</pre>
-
-<div class="note">
-<p><strong>Note :</strong> Vous pouvez retrouver cet exemple sur <a href="https://github.com/mdn/web-components-examples/tree/master/element-details">ce dépôt GitHub</a> et observer <a href="https://mdn.github.io/web-components-examples/element-details/">son fonctionnement en live ici</a>. Une explication plus détaillée est également disponible avec l'article <a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Manipuler <code>template</code> et <code>slot</code></a>.</p>
-</div>
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+  </style>
+  <details>
+    <summary>
+      <code class="name">&lt;<slot name="element-name">Remplacer ce nom</slot>&gt;</code>
+      <i class="desc"><slot name="description">Remplacer cette description</slot></i>
+    </summary>
+    <div class="attributes">
+      <h4>Attributs</h4>
+      <slot name="attributes"><p>Aucun</p></slot>
+    </div>
+  </details>
+  <hr>
+</template>
+```
+
+> **Note :** Vous pouvez retrouver cet exemple sur [ce dépôt GitHub](https://github.com/mdn/web-components-examples/tree/master/element-details) et observer [son fonctionnement en live ici](https://mdn.github.io/web-components-examples/element-details/). Une explication plus détaillée est également disponible avec l'article [Manipuler `template` et `slot`](/fr/docs/Web/Web_Components/Using_templates_and_slots).
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent">Contenu transparent</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Évènements</th>
-   <td>{{event("slotchange")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"> contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLSlotElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Catégorie_de_contenu#Modèle_de_contenu_transparent"
+          >Contenu transparent</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Évènements</th>
+      <td>{{event("slotchange")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLSlotElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','scripting.html#the-slot-element','&lt;slot&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                        | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG','scripting.html#the-slot-element','&lt;slot&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('DOM WHATWG','#shadow-tree-slots','Slots')}}                             | {{Spec2('DOM WHATWG')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.slot")}}</p>
+{{Compat("html.elements.slot")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("template")}}</li>
-</ul>
+- {{HTMLElement("template")}}
diff --git a/files/fr/web/html/element/small/index.md b/files/fr/web/html/element/small/index.md
index cf38e99a93..ab702873c4 100644
--- a/files/fr/web/html/element/small/index.md
+++ b/files/fr/web/html/element/small/index.md
@@ -8,103 +8,104 @@ tags:
   - Web
 translation_of: Web/HTML/Element/small
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;small&gt;</code></strong> permet de représenter des commentaires ou des textes à écrire en petits caractères (des termes d'un contrat, des mentions relatives au droit d'auteur, etc.) quelle que soit la présentation.</p>
+L'élément HTML **`<small>`** permet de représenter des commentaires ou des textes à écrire en petits caractères (des termes d'un contrat, des mentions relatives au droit d'auteur, etc.) quelle que soit la présentation.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/small.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/small.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
    Voici une phrase avant des infos à
    présenter en plus petit.
-   &lt;small&gt;© tous droits réservés&lt;/small&gt;
-&lt;/p&gt;
-</pre>
+   <small>© tous droits réservés</small>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","120")}}</p>
+{{EmbedLiveSample("Exemples","100%","120")}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Catégories de contenu</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>Aucune, la balise ouvrante et la balise fermante doivent toutes les deux être présentes.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a> ou tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Catégories de contenu</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        Aucune, la balise ouvrante et la balise fermante doivent toutes les deux
+        être présentes.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >
+        ou tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-small-element', '&lt;small&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-small-element', '&lt;small&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'present/graphics.html#edef-SMALL', '&lt;small&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-small-element', '&lt;small&gt;')}}             | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-small-element', '&lt;small&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'present/graphics.html#edef-SMALL', '&lt;small&gt;')}}                 | {{Spec2('HTML4.01')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.small")}}</p>
+{{Compat("html.elements.small")}}
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<p>Bien que l'élément <code>&lt;small&gt;</code> et les éléments <code>&lt;b&gt;</code> et <code>&lt;i&gt;</code> soient souvent considérés comme allant à l'encontre du découpage structure/présentation, ils sont tous valides en HTML5. Les auteurs doivent appliquer leur esprit critique afin de déterminer s'il est préférable d'employer <code>&lt;small&gt;</code> ou des règles CSS.</p>
+Bien que l'élément `<small>` et les éléments `<b>` et `<i>` soient souvent considérés comme allant à l'encontre du découpage structure/présentation, ils sont tous valides en HTML5. Les auteurs doivent appliquer leur esprit critique afin de déterminer s'il est préférable d'employer `<small>` ou des règles CSS.
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("b")}}</li>
- <li>{{HTMLElement("font")}}</li>
- <li>{{HTMLElement("style")}}</li>
-</ul>
+- {{HTMLElement("b")}}
+- {{HTMLElement("font")}}
+- {{HTMLElement("style")}}
diff --git a/files/fr/web/html/element/source/index.md b/files/fr/web/html/element/source/index.md
index 31882e6eed..bbd033ba30 100644
--- a/files/fr/web/html/element/source/index.md
+++ b/files/fr/web/html/element/source/index.md
@@ -9,134 +9,136 @@ tags:
   - Web
 translation_of: Web/HTML/Element/source
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;source&gt;</code></strong> définit différentes ressources média pour un élément {{HTMLElement("picture")}}, {{HTMLElement("audio")}} ou {{HTMLElement("video")}}. C'est un élément vide : il ne possède pas de contenu et ne nécessite pas de balise fermante. Il est généralement utilisé pour distribuer le même contenu en utilisant <a href="/fr/docs/Web/HTML/formats_media_support">les différents formats pris en charge par les différents navigateurs</a>.</p>
+L'élément HTML **`<source>`** définit différentes ressources média pour un élément {{HTMLElement("picture")}}, {{HTMLElement("audio")}} ou {{HTMLElement("video")}}. C'est un élément vide : il ne possède pas de contenu et ne nécessite pas de balise fermante. Il est généralement utilisé pour distribuer le même contenu en utilisant [les différents formats pris en charge par les différents navigateurs](/fr/docs/Web/HTML/formats_media_support).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("media")}}</dt>
- <dd><a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">Une requête média</a> pour sélectionner la source du média. Cet attribut doit uniquement être utilisé pour un élément {{HTMLElement("picture")}}.</dd>
- <dt>{{htmlattrdef("sizes")}}</dt>
- <dd>Cet attribut est une liste de chaîne de caractères, séparées par des virgules, dont chacune décrit une condition de taille. Cette information est utilisée par le navigateur, avant la disposition de la page, pour déterminer quelle image parmi celles définies via l'attribut {{htmlattrxref("srcset", "source")}}. Cet attribut aura un effet uniquement lorsque l'élément {{HTMLElement("source")}} est un élément fils direct d'un élément {{HTMLElement("picture")}}.</dd>
- <dt>{{htmlattrdef("src")}}</dt>
- <dd>Cet attribut est obligatoire pour les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}}. Il définit l'adresse de la ressource. La valeur de cet attribut est ignorée lorsque l'élément <code>&lt;source&gt;</code> est à l'intérieur d'un élément{{HTMLElement("picture")}}.</dd>
- <dt>{{htmlattrdef("srcset")}}</dt>
- <dd>Une liste d'une ou plusieurs chaînes de caractères, séparées par des virgules. Cette liste indique un ensemble d'images qui peuvent être utilisées comme sources par le navigateur. Chaque chaîne de caractères se compose :
- <ol>
-  <li>D'une URL pointant vers l'image,</li>
-  <li>D'un descripteur de largeur, c'est un entier positif, directement suivi par <code>'w'</code>. La valeur par défaut, si ce descripteur est absent, correspond à l'infini positif.</li>
-  <li>D'un descripteur de densité de pixel, c'est un nombre décimal positif, directement suivi par <code>'x'</code>. La valeur par défaut, si ce descripteur est absent, est <code>1x</code>.</li>
- </ol>
+- {{htmlattrdef("media")}}
+  - : [Une requête média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries) pour sélectionner la source du média. Cet attribut doit uniquement être utilisé pour un élément {{HTMLElement("picture")}}.
+- {{htmlattrdef("sizes")}}
+  - : Cet attribut est une liste de chaîne de caractères, séparées par des virgules, dont chacune décrit une condition de taille. Cette information est utilisée par le navigateur, avant la disposition de la page, pour déterminer quelle image parmi celles définies via l'attribut {{htmlattrxref("srcset", "source")}}. Cet attribut aura un effet uniquement lorsque l'élément {{HTMLElement("source")}} est un élément fils direct d'un élément {{HTMLElement("picture")}}.
+- {{htmlattrdef("src")}}
+  - : Cet attribut est obligatoire pour les éléments {{HTMLElement("audio")}} et {{HTMLElement("video")}}. Il définit l'adresse de la ressource. La valeur de cet attribut est ignorée lorsque l'élément `<source>` est à l'intérieur d'un élément{{HTMLElement("picture")}}.
+- {{htmlattrdef("srcset")}}
 
- <p>Pour être valide, chaque chaîne de caractères doit comporter au moins un descripteur de largeur ou un descripteur de densité de pixel. Dans cette liste, il ne peut y avoir qu'une seule chaîne pour un même couple de descripteurs largeur/pixels. Le navigateur choisira la meilleure image parmi celles fournies dans la liste.<br>
-  L'attribut <code>srcset</code> n'aura un effet que lorsque l'élément {{HTMLElement("source")}} est le fils direct de l'élément {{HTMLElement("picture")}}.</p>
- </dd>
- <dt>{{htmlattrdef("type")}}</dt>
- <dd>Le type MIME de la ressource, éventuellement complété d'un paramètre <code>codecs</code>. <a class="external" href="https://tools.ietf.org/html/rfc4281">La RFC 4281</a> indique comment indiquer des codecs. Si l'attribut <code>type</code> n'est pas défini, le type de média est récupéré depuis le serveur et le navigateur vérifie s'il peut le gérer. Si le fichier ne peut être utilisé, la source suivante est contrôlée et ainsi de suite. Si l'attribut <code>type</code> est indiqué, le navigateur le compare avec la liste des types qu'il prend en charge, si le type n'est pas reconnu, le serveur n'est pas interrogé et le navigateur analyse l'élément <code>&lt;source&gt;</code> qui suit.</dd>
-</dl>
+  - : Une liste d'une ou plusieurs chaînes de caractères, séparées par des virgules. Cette liste indique un ensemble d'images qui peuvent être utilisées comme sources par le navigateur. Chaque chaîne de caractères se compose :
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+    1.  D'une URL pointant vers l'image,
+    2.  D'un descripteur de largeur, c'est un entier positif, directement suivi par `'w'`. La valeur par défaut, si ce descripteur est absent, correspond à l'infini positif.
+    3.  D'un descripteur de densité de pixel, c'est un nombre décimal positif, directement suivi par `'x'`. La valeur par défaut, si ce descripteur est absent, est `1x`.
 
-<p>L'élément <code>&lt;source&gt;</code> est un <em>élément vide</em> ce qui signifie qu'il n'a aucun contenu et qu'il n'y a pas de balise fermante associée. Autrement dit, on n'utilisera pas <code>&lt;/source&gt;</code> dans le code d'un document HTML.</p>
+    Pour être valide, chaque chaîne de caractères doit comporter au moins un descripteur de largeur ou un descripteur de densité de pixel. Dans cette liste, il ne peut y avoir qu'une seule chaîne pour un même couple de descripteurs largeur/pixels. Le navigateur choisira la meilleure image parmi celles fournies dans la liste.
+    L'attribut `srcset` n'aura un effet que lorsque l'élément {{HTMLElement("source")}} est le fils direct de l'élément {{HTMLElement("picture")}}.
 
-<h2 id="Exemples">Exemples</h2>
+- {{htmlattrdef("type")}}
+  - : Le type MIME de la ressource, éventuellement complété d'un paramètre `codecs`. [La RFC 4281](https://tools.ietf.org/html/rfc4281) indique comment indiquer des codecs. Si l'attribut `type` n'est pas défini, le type de média est récupéré depuis le serveur et le navigateur vérifie s'il peut le gérer. Si le fichier ne peut être utilisé, la source suivante est contrôlée et ainsi de suite. Si l'attribut `type` est indiqué, le navigateur le compare avec la liste des types qu'il prend en charge, si le type n'est pas reconnu, le serveur n'est pas interrogé et le navigateur analyse l'élément `<source>` qui suit.
 
-<h3 id="Vidéo">Vidéo</h3>
+## Notes d'utilisation
 
-<p>Dans cet exemple, on voit comment distribuer une vidéo au format Ogg pour les navigateurs qui prennent en charge ce format, la même vidéo au format QuickTime pour d'autres voire au format webm. Si le navigateur ne prend pas en charge <code>&lt;audio&gt;</code> ou <code>&lt;video&gt;</code>, un message sera affiché. Si le navigateur prend en charge l'élément mais aucun des formats proposé, un évènement <code>error</code> sera déclenché et le lecteur média (s'il est activé) indiquera une erreur. <a href="/fr/docs/Web/HTML/formats_media_support">Cette page indique les différents formats pris en charge par les navigateurs</a> pour les éléments <code>&lt;audio&gt;</code> et <code>&lt;video&gt;</code>.</p>
+L'élément `<source>` est un _élément vide_ ce qui signifie qu'il n'a aucun contenu et qu'il n'y a pas de balise fermante associée. Autrement dit, on n'utilisera pas `</source>` dans le code d'un document HTML.
 
-<h4 id="HTML">HTML</h4>
+## Exemples
 
-<pre class="brush: html">&lt;video controls&gt;
-  &lt;source src="toto.webm" type="video/webm"&gt;
-  &lt;source src="toto.ogg" type="video/ogg"&gt;
-  &lt;source src="toto.mov" type="video/quicktime"&gt;
+### Vidéo
+
+Dans cet exemple, on voit comment distribuer une vidéo au format Ogg pour les navigateurs qui prennent en charge ce format, la même vidéo au format QuickTime pour d'autres voire au format webm. Si le navigateur ne prend pas en charge `<audio>` ou `<video>`, un message sera affiché. Si le navigateur prend en charge l'élément mais aucun des formats proposé, un évènement `error` sera déclenché et le lecteur média (s'il est activé) indiquera une erreur. [Cette page indique les différents formats pris en charge par les navigateurs](/fr/docs/Web/HTML/formats_media_support) pour les éléments `<audio>` et `<video>`.
+
+#### HTML
+
+```html
+<video controls>
+  <source src="toto.webm" type="video/webm">
+  <source src="toto.ogg" type="video/ogg">
+  <source src="toto.mov" type="video/quicktime">
   Votre navigateur ne prend pas en charge audio ou video.
-&lt;/video&gt;
-</pre>
+</video>
+```
 
-<p>Pour plus d'exemples, se référer à <a href="/fr/docs/Web/HTML/Utilisation_d'audio_et_video_en_HTML5">Manipuler les éléments <code>&lt;audio&gt;</code> et <code>&lt;video&gt;</code> dans Firefox</a>.</p>
+Pour plus d'exemples, se référer à [Manipuler les éléments `<audio>` et `<video>` dans Firefox](/fr/docs/Web/HTML/Utilisation_d'audio_et_video_en_HTML5).
 
-<h3 id="Image">Image</h3>
+### Image
 
-<pre class="brush: html">&lt;picture&gt;
-   &lt;source srcset="mdn-logo-wide.png" media="(min-width: 800px)"&gt;
-   &lt;source srcset="mdn-logo-medium.png" media="(min-width: 600px)"&gt;
-   &lt;img src="mdn-logo-narrow.png" alt="MDN"&gt;
-&lt;/picture&gt;
-</pre>
+```html
+<picture>
+   <source srcset="mdn-logo-wide.png" media="(min-width: 800px)">
+   <source srcset="mdn-logo-medium.png" media="(min-width: 600px)">
+   <img src="mdn-logo-narrow.png" alt="MDN">
+</picture>
+```
 
-<p>Avec l'élément {{HTMLElement("picture")}}, il faut toujours inclure un élément {{HTMLElement("img")}} comme image de secours, avec un attribut <code>alt</code> qui garantit une certaine accessibilité.</p>
+Avec l'élément {{HTMLElement("picture")}}, il faut toujours inclure un élément {{HTMLElement("img")}} comme image de secours, avec un attribut `alt` qui garantit une certaine accessibilité.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Aucun, c'est un élément vide.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>Cet élément doit avoir une balise ouvrante mais pas de balise fermante.</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Parents autorisés</dfn></th>
-   <td>
-    <div>Un élément média —{{HTMLElement("audio")}} ou {{HTMLelement("video")}}— pour lequel l'élément <code>&lt;source&gt;</code> doit être placé avant <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">tout contenu de flux</a> ou tout élément {{HTMLElement("track")}}.</div>
-
-    <div>Un élément {{HTMLElement("picture")}}, pour lequel l'élément <code>&lt;source&gt;</code> doit être placé avant tout élément {{HTMLElement("img")}}.</div>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLSourceElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Aucun, c'est un élément vide.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        Cet élément doit avoir une balise ouvrante mais pas de balise fermante.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Parents autorisés</dfn></th>
+      <td>
+        <div>
+          Un élément média —{{HTMLElement("audio")}} ou
+          {{HTMLelement("video")}}— pour lequel l'élément
+          <code>&#x3C;source></code> doit être placé avant
+          <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+            >tout contenu de flux</a
+          >
+          ou tout élément {{HTMLElement("track")}}.
+        </div>
+        <div>
+          Un élément {{HTMLElement("picture")}}, pour lequel l'élément
+          <code>&#x3C;source></code> doit être placé avant tout élément
+          {{HTMLElement("img")}}.
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLSourceElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-source-element', '&lt;source&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'embedded-content.html#the-source-element', '&lt;source&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.source")}}</p>
+{{Compat("html.elements.source")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("picture")}}</li>
- <li>{{HTMLElement("audio")}}</li>
- <li>{{HTMLElement("video")}}</li>
- <li><a href="/fr/docs/Learn/Performance">Les performances sur le Web</a></li>
-</ul>
+- {{HTMLElement("picture")}}
+- {{HTMLElement("audio")}}
+- {{HTMLElement("video")}}
+- [Les performances sur le Web](/fr/docs/Learn/Performance)
diff --git a/files/fr/web/html/element/spacer/index.md b/files/fr/web/html/element/spacer/index.md
index 9b52538cb9..a6209f23f6 100644
--- a/files/fr/web/html/element/spacer/index.md
+++ b/files/fr/web/html/element/spacer/index.md
@@ -9,45 +9,44 @@ tags:
   - Web
 translation_of: Web/HTML/Element/spacer
 ---
-<div>{{non-standard_header}}{{obsolete_header}}{{HTMLRef}}</div>
+{{non-standard_header}}{{obsolete_header}}{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;spacer&gt;</code></strong> était utilisé pour insérer des blancs au sein d'une page web. Il a été créé par Netscape pour obtenir le même effet que celui qui était créé avec des images GIF d'un pixel, permettant d'ajouter des espaces blancs. Cependant, <code>&lt;spacer&gt;</code> n'est pas pris en charge par les principaux navigateurs principaux et il faut utiliser les règles CSS pour obtenir ces effets d'alignement. Firefox ne prend plus en charge cet élément depuis la version 4.</p>
+L'élément HTML **`<spacer>`** était utilisé pour insérer des blancs au sein d'une page web. Il a été créé par Netscape pour obtenir le même effet que celui qui était créé avec des images GIF d'un pixel, permettant d'ajouter des espaces blancs. Cependant, `<spacer>` n'est pas pris en charge par les principaux navigateurs principaux et il faut utiliser les règles CSS pour obtenir ces effets d'alignement. Firefox ne prend plus en charge cet élément depuis la version 4.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément supporte <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément supporte [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("type")}}</dt>
- <dd>Cet attribut détermine le type de <code>&lt;spacer&gt;</code>. Les valeurs possibles sont <code>horizontal</code>, <code>vertical</code> et <code>block</code>.</dd>
- <dt>{{htmlattrdef("size")}}</dt>
- <dd>Cet attribut peut être utilisé pour définir la taille du <code>&lt;spacer&gt;</code> en pixels lorsque son type vaut <code>horizontal</code> ou <code>vertical</code>.</dd>
- <dt>{{htmlattrdef("width")}}</dt>
- <dd>Cet attribut peut être utilisé pour définir la largeur du <code>&lt;spacer&gt;</code> en pixels quand son type est <code>block</code>.</dd>
- <dt>{{htmlattrdef("height")}}</dt>
- <dd>Cet attribut peut être utilisé pour définir la hauteur du <code>&lt;spacer&gt;</code> en pixels quand son type est <code>block</code>.</dd>
- <dt>{{htmlattrdef("align")}}</dt>
- <dd>Cet attribut détermine l'alignement du <code>&lt;spacer&gt;</code>. Les valeurs possibles sont <code>left</code>, <code>right</code> et <code>center</code>.</dd>
-</dl>
+- {{htmlattrdef("type")}}
+  - : Cet attribut détermine le type de `<spacer>`. Les valeurs possibles sont `horizontal`, `vertical` et `block`.
+- {{htmlattrdef("size")}}
+  - : Cet attribut peut être utilisé pour définir la taille du `<spacer>` en pixels lorsque son type vaut `horizontal` ou `vertical`.
+- {{htmlattrdef("width")}}
+  - : Cet attribut peut être utilisé pour définir la largeur du `<spacer>` en pixels quand son type est `block`.
+- {{htmlattrdef("height")}}
+  - : Cet attribut peut être utilisé pour définir la hauteur du `<spacer>` en pixels quand son type est `block`.
+- {{htmlattrdef("align")}}
+  - : Cet attribut détermine l'alignement du `<spacer>`. Les valeurs possibles sont `left`, `right` et `center`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html">&lt;span&gt;Un nœud texte&lt;/span&gt;
-&lt;spacer type="horizontal" size="10"&gt;&lt;/spacer&gt;
-&lt;span&gt;Un autre nœud texte&lt;/span&gt;
-&lt;spacer type="block" width="10" height="10"&gt;&lt;/spacer&gt;
-</pre>
+```html
+<span>Un nœud texte</span>
+<spacer type="horizontal" size="10"></spacer>
+<span>Un autre nœud texte</span>
+<spacer type="block" width="10" height="10"></spacer>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","170")}}</p>
+{{EmbedLiveSample("Exemples","100%","170")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<p>Cet élément ne fait partie d'aucune spécification.</p>
+Cet élément ne fait partie d'aucune spécification.
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.spacer")}}</p>
+{{Compat("html.elements.spacer")}}
diff --git a/files/fr/web/html/element/span/index.md b/files/fr/web/html/element/span/index.md
index da8b897455..9f0c24e946 100644
--- a/files/fr/web/html/element/span/index.md
+++ b/files/fr/web/html/element/span/index.md
@@ -8,98 +8,110 @@ tags:
   - Web
 translation_of: Web/HTML/Element/span
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;span&gt;</code></strong> est un conteneur générique en ligne (<em>inline</em>) pour les contenus phrasés. Il ne représente rien de particulier. Il peut être utilisé pour grouper des éléments afin de les mettre en forme (grâce aux attributs {{htmlattrxref("class")}} ou {{htmlattrxref("id")}} et aux règles <a href="/fr/docs/Web/CSS">CSS</a>) ou parce qu'ils partagent certaines valeurs d'attribut comme {{htmlattrxref("lang")}}. Il doit uniquement être utilisé lorsqu'aucun autre élément sémantique n'est approprié. <code>&lt;span&gt;</code> est très proche de l'élément {{HTMLElement("div")}}, mais l'élément <code>&lt;div&gt;</code> est <a href="/fr/docs/Web/HTML/Éléments_en_bloc">un élément de bloc</a>, alors que <code>&lt;span&gt;</code> est <a href="/fr/docs/Web/HTML/Éléments_en_ligne">un élément en ligne</a>.</p>
+L'élément HTML **`<span>`** est un conteneur générique en ligne (_inline_) pour les contenus phrasés. Il ne représente rien de particulier. Il peut être utilisé pour grouper des éléments afin de les mettre en forme (grâce aux attributs {{htmlattrxref("class")}} ou {{htmlattrxref("id")}} et aux règles [CSS](/fr/docs/Web/CSS)) ou parce qu'ils partagent certaines valeurs d'attribut comme {{htmlattrxref("lang")}}. Il doit uniquement être utilisé lorsqu'aucun autre élément sémantique n'est approprié. `<span>` est très proche de l'élément {{HTMLElement("div")}}, mais l'élément `<div>` est [un élément de bloc](/fr/docs/Web/HTML/Éléments_en_bloc), alors que `<span>` est [un élément en ligne](/fr/docs/Web/HTML/Éléments_en_ligne).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/span.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html">&lt;p&gt;&lt;span&gt;Un peu de texte&lt;/span&gt;&lt;/p&gt;</pre>
+```html
+<p><span>Un peu de texte</span></p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">p span {
+```css
+p span {
   background: green;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","100")}}</p>
+{{EmbedLiveSample("Exemples","100%","100")}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Contenu autorisé</dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Omission de balises</dfn></th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row"><dfn>Parents autorisés</dfn></th>
-   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, ou tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Any</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLSpanElement")}} (avant HTML 5, l'interface était {{domxref("HTMLElement")}})</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Contenu autorisé</dfn></th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Omission de balises</dfn></th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Parents autorisés</dfn></th>
+      <td>
+        Tout élément acceptant du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >, ou tout élément acceptant du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Any</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>
+        {{domxref("HTMLSpanElement")}} (avant HTML 5, l'interface
+        était {{domxref("HTMLElement")}})
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>L'interface DOM est désormais {{domxref("HTMLSpanElement")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '&lt;span&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires                                                            |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}} | {{Spec2('HTML WHATWG')}} |                                                                         |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}}     | {{Spec2('HTML5 W3C')}}     | L'interface DOM est désormais {{domxref("HTMLSpanElement")}}. |
+| {{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '&lt;span&gt;')}}                         | {{Spec2('HTML4.01')}}     |                                                                         |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.span")}}</p>
+{{Compat("html.elements.span")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("div")}}</li>
-</ul>
+- {{HTMLElement("div")}}
diff --git a/files/fr/web/html/element/strike/index.md b/files/fr/web/html/element/strike/index.md
index 60b89cf846..5e6aee64ca 100644
--- a/files/fr/web/html/element/strike/index.md
+++ b/files/fr/web/html/element/strike/index.md
@@ -8,75 +8,49 @@ tags:
   - Reference
 translation_of: Web/HTML/Element/strike
 ---
-<div>{{Obsolete_header}}{{HTMLRef}}</div>
+{{Obsolete_header}}{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;strike&gt;</code></strong> permet de représenter du texte barré ou avec une ligne le traversant.</p>
+L'élément HTML **`<strike>`** permet de représenter du texte barré ou avec une ligne le traversant.
 
-<div class="note">
-  <p><strong>Note :</strong> Comme tous les éléments se limitant à la présentation, {{HTMLElement("strike")}} a été déprécié en HTML 4 et XHTML 1, et rendu obsolète dans HTML5. Si on souhaite représente du contenu <em>supprimé</em>, on utilisera l'élément {{HTMLElement("del")}} ; dans les autres cas, on utilisera un élément {{HTMLElement("s")}}.</p>
-</div>
+> **Note :** Comme tous les éléments se limitant à la présentation, {{HTMLElement("strike")}} a été déprécié en HTML 4 et XHTML 1, et rendu obsolète dans HTML5. Si on souhaite représente du contenu _supprimé_, on utilisera l'élément {{HTMLElement("del")}} ; dans les autres cas, on utilisera un élément {{HTMLElement("s")}}.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément n'a aucun autre attribut en dehors <a href="/fr/docs/Web/HTML/Attributs_universels">des attributs universels</a>, communs à tous les éléments.</p>
+Cet élément n'a aucun autre attribut en dehors [des attributs universels](/fr/docs/Web/HTML/Attributs_universels), communs à tous les éléments.
 
-<h2 id="Interface_DOM">Interface DOM</h2>
+## Interface DOM
 
-<p>Cet élément implémente l'interface {{domxref("HTMLElement")}}.</p>
+Cet élément implémente l'interface {{domxref("HTMLElement")}}.
 
-<div class="note">
-<p><strong>Note :</strong> Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref("HTMLSpanElement")}} pour cet élément.</p>
-</div>
+> **Note :** Jusqu'à Gecko 1.9.2 inclus, Firefox implémente l'interface {{domxref("HTMLSpanElement")}} pour cet élément.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;strike&gt;
+```html
+<strike>
   Plat du jour : Saumon
-&lt;/strike&gt;
+</strike>
 ÉPUISÉ
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","140")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "obsolete.html#strike", "&lt;strike&gt;")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Rendu obsolète et remplacé par {{HTMLElement("del")}} et {{HTMLElement("s")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "obsolete.html#strike", "&lt;strike&gt;")}}</td>
-   <td>{{Spec2("HTML5 W3C")}}</td>
-   <td>Rendu obsolète et remplacé par {{HTMLElement("del")}} et {{HTMLElement("s")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML4.01", "/present/graphics.html#edef-STRIKE", "&lt;strike&gt;")}}</td>
-   <td>{{Spec2("HTML4.01")}}</td>
-   <td>Rendu déprécié pour être remplacé par {{HTMLElement("del")}} et {{HTMLElement("s")}}.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.elements.strike")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>L'élément {{HTMLElement("s")}}, proche de {{HTMLElement("strike")}}, également obsolète</li>
- <li>L'élément {{HTMLElement("del")}} qui doit être utilisé lorsque le contenu a été <em>supprimé</em></li>
- <li>La propriété CSS {{cssxref("text-decoration")}} qui permet d'obtenir le même effet visuel que l'élément {{HTMLElement("strike")}}</li>
-</ul>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","140")}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                             | Commentaires                                                                                        |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------- |
+| {{SpecName("HTML WHATWG", "obsolete.html#strike", "&lt;strike&gt;")}}                 | {{Spec2("HTML WHATWG")}} | Rendu obsolète et remplacé par {{HTMLElement("del")}} et {{HTMLElement("s")}}.        |
+| {{SpecName("HTML5 W3C", "obsolete.html#strike", "&lt;strike&gt;")}}                     | {{Spec2("HTML5 W3C")}}     | Rendu obsolète et remplacé par {{HTMLElement("del")}} et {{HTMLElement("s")}}.        |
+| {{SpecName("HTML4.01", "/present/graphics.html#edef-STRIKE", "&lt;strike&gt;")}} | {{Spec2("HTML4.01")}}     | Rendu déprécié pour être remplacé par {{HTMLElement("del")}} et {{HTMLElement("s")}}. |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.elements.strike")}}
+
+## Voir aussi
+
+- L'élément {{HTMLElement("s")}}, proche de {{HTMLElement("strike")}}, également obsolète
+- L'élément {{HTMLElement("del")}} qui doit être utilisé lorsque le contenu a été _supprimé_
+- La propriété CSS {{cssxref("text-decoration")}} qui permet d'obtenir le même effet visuel que l'élément {{HTMLElement("strike")}}
diff --git a/files/fr/web/html/element/strong/index.md b/files/fr/web/html/element/strong/index.md
index 7417f8927b..78ffce0b02 100644
--- a/files/fr/web/html/element/strong/index.md
+++ b/files/fr/web/html/element/strong/index.md
@@ -8,117 +8,136 @@ tags:
   - Web
 translation_of: Web/HTML/Element/strong
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;strong&gt;</code></strong> indique que le texte a une importance particulière ou un certain sérieux voire un caractère urgent. Cela se traduit généralement par un affichage en gras.</p>
+L'élément HTML **`<strong>`** indique que le texte a une importance particulière ou un certain sérieux voire un caractère urgent. Cela se traduit généralement par un affichage en gras.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/strong.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/strong.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>L'élément <code>&lt;strong&gt;</code> indique un contenu de haute importance, y compris lorsqu'il s'agit de choses graves ou urgentes (telles que des messages d'avertissement par exemple). Il peut s'agir d'une certaine phrase au sein d'une page ou bien de quelques mots d'une importance particulière par rapport au contenu environnant.</p>
+L'élément `<strong>` indique un contenu de haute importance, y compris lorsqu'il s'agit de choses graves ou urgentes (telles que des messages d'avertissement par exemple). Il peut s'agir d'une certaine phrase au sein d'une page ou bien de quelques mots d'une importance particulière par rapport au contenu environnant.
 
-<p>Cet élément se traduit généralement par l'affichage du texte en gras. Toutefois, il ne doit pas être utilisé à des fins stylistiques. Pour cela, on pourra utiliser la propriété CSS {{cssxref("font-weight")}}. De plus, on pourra utiliser l'élément {{HTMLElement("b")}} afin d'attirer l'attention sur une portion de texte qui ne possède pas un niveau d'importance particulier ou l'élément {{HTMLElement("em")}} si on souhaite marquer un texte avec de l'emphase.</p>
+Cet élément se traduit généralement par l'affichage du texte en gras. Toutefois, il ne doit pas être utilisé à des fins stylistiques. Pour cela, on pourra utiliser la propriété CSS {{cssxref("font-weight")}}. De plus, on pourra utiliser l'élément {{HTMLElement("b")}} afin d'attirer l'attention sur une portion de texte qui ne possède pas un niveau d'importance particulier ou l'élément {{HTMLElement("em")}} si on souhaite marquer un texte avec de l'emphase.
 
-<p>Il est également possible d'utiliser <code>&lt;strong&gt;</code> pour les en-têtes de paragraphes qui représentent des notes ou des avertissements au sein d'une page.</p>
+Il est également possible d'utiliser `<strong>` pour les en-têtes de paragraphes qui représentent des notes ou des avertissements au sein d'une page.
 
-<h3 id="&lt;b>_ou_&lt;strong>"><code>&lt;b&gt;</code> ou <code>&lt;strong&gt;</code> ?</h3>
+### `<b>` ou `<strong>` ?
 
-<p>Les développeurs qui débutent se demandent souvent pourquoi il y a autant de manières pour s'exprimer alors que cela aura le même rendu final. Les éléments bold (<code>&lt;b&gt;</code>) et <code>&lt;strong&gt;</code> sont peut-être les plus difficiles à distinguer. Il est vrai que taper <code>&lt;b&gt; &lt;/b&gt;</code> est beaucoup plus rapide et permet d'arriver exactement au même résultat…</p>
+Les développeurs qui débutent se demandent souvent pourquoi il y a autant de manières pour s'exprimer alors que cela aura le même rendu final. Les éléments bold (`<b>`) et `<strong>` sont peut-être les plus difficiles à distinguer. Il est vrai que taper `<b> </b>` est beaucoup plus rapide et permet d'arriver exactement au même résultat…
 
-<p>Sauf que ce n'est pas le même résultat ! <code>&lt;strong&gt;</code> représente une logique (apporte une différence sémantique), alors que <code>&lt;bold&gt;</code> ne représente qu'une mise en forme (l'apparence). Séparer la forme de la sémantique est important et permet éventuellement de représenter cette même sémantique d'une certaine manière, que ce soit en gras, en rouge, souligné ou encore avec une autre taille de police. Changer le style (la présentation) de <code>&lt;strong&gt;</code> est pertinent, contrairement à <code>&lt;b&gt;</code>. <code>&lt;b&gt;</code> représente un élément de présentation et représente du texte en gras, changer son style pour que le texte apparaisse en autre chose qu'en gras serait illogique et source de confusions.</p>
+Sauf que ce n'est pas le même résultat ! `<strong>` représente une logique (apporte une différence sémantique), alors que `<bold>` ne représente qu'une mise en forme (l'apparence). Séparer la forme de la sémantique est important et permet éventuellement de représenter cette même sémantique d'une certaine manière, que ce soit en gras, en rouge, souligné ou encore avec une autre taille de police. Changer le style (la présentation) de `<strong>` est pertinent, contrairement à `<b>`. `<b>` représente un élément de présentation et représente du texte en gras, changer son style pour que le texte apparaisse en autre chose qu'en gras serait illogique et source de confusions.
 
-<p>Il est important de savoir que <code>&lt;b&gt;&lt;/b&gt;</code> ne doit pas être utilisé, à part dans le cas où l'on souhaite attirer l'attention du lecteur sans pour autant augmenter l'importance du texte.</p>
+Il est important de savoir que `<b></b>` ne doit pas être utilisé, à part dans le cas où l'on souhaite attirer l'attention du lecteur sans pour autant augmenter l'importance du texte.
 
-<h3 id="&lt;em>_ou_&lt;strong>"><code>&lt;em&gt;</code> ou <code>&lt;strong&gt;</code> ?</h3>
+### `<em>` ou `<strong>` ?
 
-<p>En HTML 4, <code>&lt;strong&gt;</code> indiquait simplement une emphase plus forte. En HTML5, l'élément représente une « importance forte » de son contenu. Il est important de faire la différence. L'emphase (<code>&lt;em&gt;</code> étant l'élément HTML équivalent) permet de changer le sens d'une phrase : par exemple :  « J'<em>adore</em> les licornes » et « J'adore les <em>licornes</em> ». <code>&lt;strong&gt;</code> est utilisé pour augmenter l'importance de certaines portions de phrases : «<strong> Attention !</strong> C'est <strong>très dangereux</strong> ».  <code>&lt;strong&gt;</code> et <code>&lt;em&gt;</code> peuvent être imbriqués pour augmenter relativement l'importance ou l'emphase d'un texte.</p>
+En HTML 4, `<strong>` indiquait simplement une emphase plus forte. En HTML5, l'élément représente une « importance forte » de son contenu. Il est important de faire la différence. L'emphase (`<em>` étant l'élément HTML équivalent) permet de changer le sens d'une phrase : par exemple :  « J'_adore_ les licornes » et « J'adore les _licornes_ ». `<strong>` est utilisé pour augmenter l'importance de certaines portions de phrases : « **Attention !** C'est **très dangereux** ».  `<strong>` et `<em>` peuvent être imbriqués pour augmenter relativement l'importance ou l'emphase d'un texte.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Avant de faire le truc X il est
-  &lt;strong&gt;nécessaire&lt;/strong&gt; de
+  <strong>nécessaire</strong> de
   faire le truc Y avant.
-&lt;/p&gt;
-</pre>
+</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","150")}}
+
+## Résumé technique
 
-<p>{{EmbedLiveSample("Exemples","100%","150")}}</p>
-<h2 id="Résumé_technique">Résumé technique</h2>
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>Aucune, cet élément doit avoir une balise ouvrante et une balise fermante.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a> ou tout élément acceptant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}. Auparavant et jusqu'à Gecko 1.9.2 (Firefox 4) inclus, Firefox implémente l'interface {{domxref("HTMLSpanElement")}} pour cet élément</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        Aucune, cet élément doit avoir une balise ouvrante et une balise
+        fermante.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément acceptant du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >
+        ou tout élément acceptant du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>
+        {{domxref("HTMLElement")}}. Auparavant et jusqu'à Gecko 1.9.2
+        (Firefox 4) inclus, Firefox implémente l'interface
+        {{domxref("HTMLSpanElement")}} pour cet élément
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-strong-element', '&lt;strong&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '&lt;strong&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '&lt;strong&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-strong-element', '&lt;strong&gt;')}}             | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '&lt;strong&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '&lt;strong&gt;')}}                     | {{Spec2('HTML4.01')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.strong")}}</p>
+{{Compat("html.elements.strong")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("b")}}</li>
- <li>{{HTMLElement("em")}}</li>
- <li>La propriété {{cssxref("font-weight")}}</li>
-</ul>
+- {{HTMLElement("b")}}
+- {{HTMLElement("em")}}
+- La propriété {{cssxref("font-weight")}}
diff --git a/files/fr/web/html/element/style/index.md b/files/fr/web/html/element/style/index.md
index 711ca24e97..9f510d96d5 100644
--- a/files/fr/web/html/element/style/index.md
+++ b/files/fr/web/html/element/style/index.md
@@ -8,194 +8,191 @@ tags:
   - Web
 translation_of: Web/HTML/Element/style
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;style&gt;</code></strong> contient des informations de mise en forme pour un document ou une partie d'un document. Par défaut, les instructions de mise en forme écrites dans cet élément sont écrites en <a href="/fr/docs/Web/CSS">CSS</a>.</p>
+L'élément HTML **`<style>`** contient des informations de mise en forme pour un document ou une partie d'un document. Par défaut, les instructions de mise en forme écrites dans cet élément sont écrites en [CSS](/fr/docs/Web/CSS).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/style.html", "tabbed-standard")}}
 
-<p>L'élément <code>&lt;style&gt;</code> peut être inclus dans l'élément {{htmlelement("head")}} ou dans l'élément {{htmlelement("body")}} du document et les styles seront appliqués. Toutefois, il est recommandé de placer les styles dans l'élément<code> &lt;head&gt;</code> afin de clairement séparer la présentation du contenu autant que possible. La méthode idéale en ce sens consiste à utiliser des feuilles de style dans des fichiers externes et de les appliquer au document grâce à des éléments {{htmlelement("link")}}.</p>
+L'élément `<style>` peut être inclus dans l'élément {{htmlelement("head")}} ou dans l'élément {{htmlelement("body")}} du document et les styles seront appliqués. Toutefois, il est recommandé de placer les styles dans l'élément` <head>` afin de clairement séparer la présentation du contenu autant que possible. La méthode idéale en ce sens consiste à utiliser des feuilles de style dans des fichiers externes et de les appliquer au document grâce à des éléments {{htmlelement("link")}}.
 
-<p>Si plusieurs éléments <code>&lt;style&gt;</code> et <code>&lt;link&gt;</code> sont appliqués au document, ils seront appliqués dans l'ordre dans lequel ils sont inclus dans le document. Aussi, vérifiez l'ordre afin d'éviter tout problème de cascade.</p>
+Si plusieurs éléments `<style>` et `<link>` sont appliqués au document, ils seront appliqués dans l'ordre dans lequel ils sont inclus dans le document. Aussi, vérifiez l'ordre afin d'éviter tout problème de cascade.
 
-<p>À l'instar des éléments <code>&lt;link&gt;</code>, les éléments <code>&lt;style&gt;</code> peuvent inclure des attributs <code>media</code> qui décrivent des <a href="/fr/docs/Web/CSS/Requêtes_média">requêtes média</a> qui permettent d'appliquer des feuilles de styles selon certains critères provenant du média utilisé (la largeur de l'écran par exemple).</p>
+À l'instar des éléments `<link>`, les éléments `<style>` peuvent inclure des attributs `media` qui décrivent des [requêtes média](/fr/docs/Web/CSS/Requêtes_média) qui permettent d'appliquer des feuilles de styles selon certains critères provenant du média utilisé (la largeur de l'écran par exemple).
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("media")}}</dt>
- <dd>Cet attribut est <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">une requête média</a> qui indique le média auquel la mise en forme doit s'appliquer. Cet attribut est optionnel, la valeur par défaut est <code>all</code>.</dd>
- <dt>{{htmlattrdef("nonce")}}</dt>
- <dd>Un <em>nonce</em> cryptographique utilisé pour inscrire les styles en ligne sur une liste blanche pour la règle <code><a href="/fr/docs/Web/HTTP/Headers/Content-Security-Policy/style-src">style-src</a></code> de la CSP (<em>Content Security Policy</em>). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité.</dd>
- <dt>{{htmlattrdef("type")}}</dt>
- <dd>Cet attribut définit le langage de la feuille de style sous la forme d'un type MIME (le jeu de caractères ne doit pas être indiqué). Cet attribut est optionnel, la valeur par défaut est <code>text/css</code>.</dd>
- <dt>{{htmlattrdef("title")}}</dt>
- <dd>Cet attribut indique un ensemble <a href="/fr/docs/Web/CSS/Feuilles_de_style_alternatives">de feuilles de style alternatif</a>.</dd>
-</dl>
+- {{htmlattrdef("media")}}
+  - : Cet attribut est [une requête média](/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries) qui indique le média auquel la mise en forme doit s'appliquer. Cet attribut est optionnel, la valeur par défaut est `all`.
+- {{htmlattrdef("nonce")}}
+  - : Un _nonce_ cryptographique utilisé pour inscrire les styles en ligne sur une liste blanche pour la règle [`style-src`](/fr/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) de la CSP (_Content Security Policy_). Le serveur doit générer un nonce unique chaque fois qu'il transmet une règle de sécurité. Ce nonce ne doit pas pouvoir être deviné car sinon, il devient trivial d'outrepasser la règle de sécurité.
+- {{htmlattrdef("type")}}
+  - : Cet attribut définit le langage de la feuille de style sous la forme d'un type MIME (le jeu de caractères ne doit pas être indiqué). Cet attribut est optionnel, la valeur par défaut est `text/css`.
+- {{htmlattrdef("title")}}
+  - : Cet attribut indique un ensemble [de feuilles de style alternatif](/fr/docs/Web/CSS/Feuilles_de_style_alternatives).
 
-<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
+### Attributs dépréciés ou obsolètes
 
-<dl>
- <dt>{{htmlattrdef("scoped")}} {{non-standard_inline}} {{obsolete_inline}}</dt>
- <dd>Cet attribut indique que les règles de mises en forme ne s'appliquent qu'aux éléments ayant le même élément parent que l'élément courant.</dd>
-</dl>
+- {{htmlattrdef("scoped")}} {{non-standard_inline}} {{obsolete_inline}}
+  - : Cet attribut indique que les règles de mises en forme ne s'appliquent qu'aux éléments ayant le même élément parent que l'élément courant.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Une_feuille_de_style_simple">Une feuille de style simple</h3>
+### Une feuille de style simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush:html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;style&gt;
+```html
+<!doctype html>
+<html>
+<head>
+  <style>
     p {
       color: red;
     }
-  &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;p&gt;Voici un paragraphe.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+  </style>
+</head>
+<body>
+  <p>Voici un paragraphe.</p>
+</body>
+</html>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Une_feuille_de_style_simple', '100%', '60')}}</p>
+{{EmbedLiveSample('Une_feuille_de_style_simple', '100%', '60')}}
 
-<h3 id="Utiliser_plusieurs_éléments_&lt;style>">Utiliser plusieurs éléments <code>&lt;style&gt;</code></h3>
+### Utiliser plusieurs éléments `<style>`
 
-<p>Dans cet exemple, on utilise deux éléments <code>&lt;style&gt;</code>, on peut voir comment les déclarations en conflit sont gérées : c'est le deuxième élément qui a la priorité si les <a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité">spécificités</a> sont égales car les feuilles sont appliquées dans l'ordre.</p>
+Dans cet exemple, on utilise deux éléments `<style>`, on peut voir comment les déclarations en conflit sont gérées : c'est le deuxième élément qui a la priorité si les [spécificités](/fr/docs/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Spécificité) sont égales car les feuilles sont appliquées dans l'ordre.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush:html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;style&gt;
+```html
+<!doctype html>
+<html>
+<head>
+  <style>
     p {
       color: white;
       background-color: blue;
       padding: 5px;
       border: 1px solid black;
     }
-  &lt;/style&gt;
-  &lt;style&gt;
+  </style>
+  <style>
     p {
       color: blue;
       background-color: yellow;
     }
-  &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;p&gt;Voici un paragraphe.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+  </style>
+</head>
+<body>
+  <p>Voici un paragraphe.</p>
+</body>
+</html>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Utiliser_plusieurs_éléments_&lt;style&gt;', '100%', '60')}}</p>
+{{EmbedLiveSample('Utiliser_plusieurs_éléments_&lt;style&gt;', '100%', '60')}}
 
-<h3 id="Utiliser_une_requête_média">Utiliser une requête média</h3>
+### Utiliser une requête média
 
-<p>Dans cet exemple (basé sur le précédent), on ajoute un attribut <code>media</code> sur le deuxième élément <code>&lt;style&gt;</code> afin que les règles correspondantes ne soient appliquées que si la largeur de la zone d'affichage (<em>viewport</em>) est inférieure à 500 pixels.</p>
+Dans cet exemple (basé sur le précédent), on ajoute un attribut `media` sur le deuxième élément `<style>` afin que les règles correspondantes ne soient appliquées que si la largeur de la zone d'affichage (_viewport_) est inférieure à 500 pixels.
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush:html">&lt;!doctype html&gt;
-&lt;html&gt;
-&lt;head&gt;
-  &lt;style&gt;
+```html
+<!doctype html>
+<html>
+<head>
+  <style>
     p {
       color: white;
       background-color: blue;
       padding: 5px;
       border: 1px solid black;
     }
-  &lt;/style&gt;
-  &lt;style media="all and (max-width: 500px)"&gt;
+  </style>
+  <style media="all and (max-width: 500px)">
     p {
       color: blue;
       background-color: yellow;
     }
-  &lt;/style&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;p&gt;Voici un paragraphe.&lt;/p&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+  </style>
+</head>
+<body>
+  <p>Voici un paragraphe.</p>
+</body>
+</html>
+```
 
-<h4 id="Résultat_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Utiliser_une_requête_média', '100%', '60')}}</p>
+{{EmbedLiveSample('Utiliser_une_requête_média', '100%', '60')}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données">Contenu de métadonnées</a>.</td>
-  </tr>
-  <tr>
-   <th>Contenu autorisé</th>
-   <td>Du contenu textuel correspondant à l'attribut <code>type</code> (c'est-à-dire <code>text/css</code>).</td>
-  </tr>
-  <tr>
-   <th>Omission de balises</th>
-   <td>Les deux balises doivent être présentes.</td>
-  </tr>
-  <tr>
-   <th>Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données">contenu de métadonnées</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun</td>
-  </tr>
-  <tr>
-   <th>Interface DOM</th>
-   <td>{{domxref("HTMLStyleElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données"
+          >Contenu de métadonnées</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th>Contenu autorisé</th>
+      <td>
+        Du contenu textuel correspondant à l'attribut
+        <code>type</code> (c'est-à-dire <code>text/css</code>).
+      </td>
+    </tr>
+    <tr>
+      <th>Omission de balises</th>
+      <td>Les deux balises doivent être présentes.</td>
+    </tr>
+    <tr>
+      <th>Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données"
+          >contenu de métadonnées</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun</td>
+    </tr>
+    <tr>
+      <th>Interface DOM</th>
+      <td>{{domxref("HTMLStyleElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-style-element', 'style')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Ajout de l'attribut <code>nonce</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>L'attribut <code>type</code> devient optionnel.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires                         |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-style-element', 'style')}}         | {{Spec2('HTML WHATWG')}} | Ajout de l'attribut `nonce`.         |
+| {{SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style')}} | {{Spec2('HTML5 W3C')}}     | L'attribut `type` devient optionnel. |
+| {{SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style')}}                 | {{Spec2('HTML4.01')}}     |                                      |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.style")}}</p>
+{{Compat("html.elements.style")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément {{HTMLElement("link")}} qui permet d'utiliser des feuilles de style externes.</li>
-</ul>
+- L'élément {{HTMLElement("link")}} qui permet d'utiliser des feuilles de style externes.
diff --git a/files/fr/web/html/element/sub/index.md b/files/fr/web/html/element/sub/index.md
index 0ee9e2ed6d..013da8b555 100644
--- a/files/fr/web/html/element/sub/index.md
+++ b/files/fr/web/html/element/sub/index.md
@@ -8,125 +8,147 @@ tags:
   - Web
 translation_of: Web/HTML/Element/sub
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;sub&gt;</code></strong> est utilisé, pour des raisons typographiques, afin d'afficher du texte souscrit (ou en indice) (plus bas et généralement plus petit) par rapport au bloc de texte environnant.</p>
+L'élément HTML **`<sub>`** est utilisé, pour des raisons typographiques, afin d'afficher du texte souscrit (ou en indice) (plus bas et généralement plus petit) par rapport au bloc de texte environnant.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/sub.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/sub.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2>
+## **Notes d'utilisation**
 
-<p>L'élément <code>&lt;sub&gt;</code> devrait uniquement être utilisé à des fins typographiques (afin de modifier la position du texte en raison des conventions typographiques) et non pour obtenir des effets de mise en forme. Ainsi, on n'utilisera pas <code>&lt;sub&gt;</code> pour restituer l'effet visuel d'un logo mais plutôt la propriété CSS {{cssxref("vertical-align")}} avec la valeur <code>sub</code>).</p>
+L'élément `<sub>` devrait uniquement être utilisé à des fins typographiques (afin de modifier la position du texte en raison des conventions typographiques) et non pour obtenir des effets de mise en forme. Ainsi, on n'utilisera pas `<sub>` pour restituer l'effet visuel d'un logo mais plutôt la propriété CSS {{cssxref("vertical-align")}} avec la valeur `sub`).
 
-<p>Voici certains cas d'utilisation (non exhaustifs) pour <code>&lt;sub&gt;</code> :</p>
+Voici certains cas d'utilisation (non exhaustifs) pour `<sub>` :
 
-<ul>
- <li>L'écriture de certains éléments d'une formule mathématique
-  <ul>
-   <li>Dans le cadre de formules complexes, <a href="/fr/docs/Web/MathML">MathML</a> peut s'avérer plus pertinent que l'enchaînement d'éléments {{HTMLElement("sup")}} et <code>&lt;sub&gt;</code>.</li>
-  </ul>
- </li>
- <li>L'indication de renvois en bas de page</li>
- <li>L'écriture du nombre d'atomes dans un formule chimique (ex. C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>).</li>
-</ul>
+- L'écriture de certains éléments d'une formule mathématique
 
-<h2 id="Exemples">Exemples</h2>
+  - Dans le cadre de formules complexes, [MathML](/fr/docs/Web/MathML) peut s'avérer plus pertinent que l'enchaînement d'éléments {{HTMLElement("sup")}} et `<sub>`.
 
-<h3 id="Renvoi_vers_une_note_de_bas_de_page">Renvoi vers une note de bas de page</h3>
+- L'indication de renvois en bas de page
+- L'écriture du nombre d'atomes dans un formule chimique (ex. C
 
-<h4 id="HTML">HTML</h4>
+  <sub>8</sub>
 
-<pre class="brush: html">&lt;p&gt;
+  H
+
+  <sub>10</sub>
+
+  N
+
+  <sub>4</sub>
+
+  O
+
+  <sub>2</sub>
+
+  ).
+
+## Exemples
+
+### Renvoi vers une note de bas de page
+
+#### HTML
+
+```html
+<p>
   Selon les calculs effectués par Nakamura, Johnson et
-  Mason&lt;sub&gt;1&lt;/sub&gt;, cela causera l'annulation complète
+  Mason<sub>1</sub>, cela causera l'annulation complète
   des deux particules.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Renvoi_vers_une_note_de_bas_de_page", 650, 80)}}</p>
+{{EmbedLiveSample("Renvoi_vers_une_note_de_bas_de_page", 650, 80)}}
 
-<h3 id="Formule_chimique">Formule chimique</h3>
+### Formule chimique
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   La molécule d'eau est symbolisée
-  par H&lt;sub&gt;2&lt;/sub&gt;O.
-&lt;/p&gt;
-</pre>
+  par H<sub>2</sub>O.
+</p>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Formule_chimique","100%","120")}}</p>
+{{EmbedLiveSample("Formule_chimique","100%","120")}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément acceptant du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                                        | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;')}}             | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;;')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.sub")}}</p>
+{{Compat("html.elements.sub")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément HTML {{HTMLElement("sub")}} permet un effet de mise en exposant. Il est à noter que l'élément <code>&lt;sub&gt;</code> et l'élément <code>&lt;sup&gt;</code> ne peuvent pas être utilisés simultanément. Pour afficher le symbole chimique d'un élément, il faudra utiliser <a href="/fr/docs/Web/MathML">MathML</a> pour représenter à la fois le numéro atomique et le nombre de masse.</li>
- <li>Les éléments MathML {{MathMLElement("msub")}}, {{MathMLElement("msup")}} et {{MathMLElement("msubsup")}}.</li>
- <li>La propriété CSS {{cssxref("vertical-align")}}</li>
-</ul>
+- L'élément HTML {{HTMLElement("sub")}} permet un effet de mise en exposant. Il est à noter que l'élément `<sub>` et l'élément `<sup>` ne peuvent pas être utilisés simultanément. Pour afficher le symbole chimique d'un élément, il faudra utiliser [MathML](/fr/docs/Web/MathML) pour représenter à la fois le numéro atomique et le nombre de masse.
+- Les éléments MathML {{MathMLElement("msub")}}, {{MathMLElement("msup")}} et {{MathMLElement("msubsup")}}.
+- La propriété CSS {{cssxref("vertical-align")}}
diff --git a/files/fr/web/html/element/summary/index.md b/files/fr/web/html/element/summary/index.md
index 3097055b73..a28f35ae1b 100644
--- a/files/fr/web/html/element/summary/index.md
+++ b/files/fr/web/html/element/summary/index.md
@@ -8,143 +8,140 @@ tags:
   - Web
 translation_of: Web/HTML/Element/summary
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;summary&gt;</code></strong> représente une boîte permettant de révéler le contenu d'un résumé ou d'une légende pour le contenu d'un élément {{HTMLElement("details")}}. En cliquant sur l'élément <code>&lt;summary&gt;</code>, on passe de l'état affiché à l'état masqué (et vice versa) de l'élément <code>&lt;details&gt;</code> parent.</p>
+L'élément HTML **`<summary>`** représente une boîte permettant de révéler le contenu d'un résumé ou d'une légende pour le contenu d'un élément {{HTMLElement("details")}}. En cliquant sur l'élément `<summary>`, on passe de l'état affiché à l'état masqué (et vice versa) de l'élément `<details>` parent.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/summary.html","tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Un élément <code>&lt;summary&gt;</code> peut contenir des éléments de titre, du texte simple ou tout contenu HTML pouvant être placé au sein d'un paragraphe.</p>
+Un élément `<summary>` peut contenir des éléments de titre, du texte simple ou tout contenu HTML pouvant être placé au sein d'un paragraphe.
 
-<p>Un élément <code>&lt;summary&gt;</code> peut uniquement être utilisé comme le premier élément fils d'un élément <code>&lt;details&gt;</code>. Lorsque l'utilisateur clique sur le résumé, l'élément <code>&lt;details&gt;</code> parent change d'état (affiché ou masqué) et un évènement {{event("toggle")}} est envoyé à l'élément <code>&lt;details&gt;</code> (ce qui permet de détecter un changement d'état via un script).</p>
+Un élément `<summary>` peut uniquement être utilisé comme le premier élément fils d'un élément `<details>`. Lorsque l'utilisateur clique sur le résumé, l'élément `<details>` parent change d'état (affiché ou masqué) et un évènement {{event("toggle")}} est envoyé à l'élément `<details>` (ce qui permet de détecter un changement d'état via un script).
 
-<h3 id="Libellé_par_défaut">Libellé par défaut</h3>
+### Libellé par défaut
 
-<p>Si l'élément <code>&lt;summary&gt;</code> est absent au sein d'un élément <code>&lt;details&gt;</code>, c'est le titre contenu dans l'élément {{HTMLElement("details")}} qui sera utilisé.</p>
+Si l'élément `<summary>` est absent au sein d'un élément `<details>`, c'est le titre contenu dans l'élément {{HTMLElement("details")}} qui sera utilisé.
 
-<h3 id="Mise_en_forme_par_défaut">Mise en forme par défaut</h3>
+### Mise en forme par défaut
 
-<p>La mise en forme par défaut pour <code>&lt;summary&gt;</code> est <code>display: list-item</code>, tel qu'indiqué dans <a href="https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements">le standard HTML</a>. Cela permet de modifier ou de retirer l'icône affiché pour le contrôle d'affichage/masquage. Par défaut, cette icône est généralement un triangle.</p>
+La mise en forme par défaut pour `<summary>` est `display: list-item`, tel qu'indiqué dans [le standard HTML](https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements). Cela permet de modifier ou de retirer l'icône affiché pour le contrôle d'affichage/masquage. Par défaut, cette icône est généralement un triangle.
 
-<p>Si la mise en forme est surchargée avec <code>display: block</code>, l'icône triangulaire qui révèle le contenu sera masquée.</p>
+Si la mise en forme est surchargée avec `display: block`, l'icône triangulaire qui révèle le contenu sera masquée.
 
-<p>Voir la section ci-après sur la compatibilité des navigateurs à ce sujet car certains navigateurs ne prennent pas en charge tout ces aspects.</p>
+Voir la section ci-après sur la compatibilité des navigateurs à ce sujet car certains navigateurs ne prennent pas en charge tout ces aspects.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;details open&gt;
-  &lt;summary&gt;Détails produit&lt;/summary&gt;
-  &lt;p&gt;Ce produit a été fabriqué par
-  ACME et respecte les pandas.&lt;/p&gt;
-&lt;/details&gt;</pre>
+```html
+<details open>
+  <summary>Détails produit</summary>
+  <p>Ce produit a été fabriqué par
+  ACME et respecte les pandas.</p>
+</details>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_simple","100%","160")}}</p>
+{{EmbedLiveSample("Exemple_simple","100%","160")}}
 
-<h3 id="Utilisation_de_titres">Utilisation de titres</h3>
+### Utilisation de titres
 
-<p>Il est possible d'utiliser des titres au sein d'un résumé.</p>
+Il est possible d'utiliser des titres au sein d'un résumé.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;details open&gt;
-  &lt;summary&gt;&lt;h4&gt;Détails produit&lt;/h4&gt;&lt;/summary&gt;
-  &lt;ol&gt;
-    &lt;li&gt;Date de fabrication : 01 janvier 2018&lt;/li&gt;
-    &lt;li&gt;Numéro de lot : LMA2542501&lt;/li&gt;
-    &lt;li&gt;Date limite de consommation : 31 août 2018&lt;/li&gt;
-  &lt;/ol&gt;
-&lt;/details&gt;</pre>
+```html
+<details open>
+  <summary><h4>Détails produit</h4></summary>
+  <ol>
+    <li>Date de fabrication : 01 janvier 2018</li>
+    <li>Numéro de lot : LMA2542501</li>
+    <li>Date limite de consommation : 31 août 2018</li>
+  </ol>
+</details>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Utilisation_de_titres", 650, 120)}}</p>
+{{EmbedLiveSample("Utilisation_de_titres", 650, 120)}}
 
-<h3 id="Utiliser_avec_divers_éléments_HTML">Utiliser avec divers éléments HTML</h3>
+### Utiliser avec divers éléments HTML
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;details open&gt;
-  &lt;summary&gt;&lt;strong&gt;Détails&lt;/strong&gt;&lt;/summary&gt;
-  &lt;ol&gt;
-    &lt;li&gt;Date de fabrication : 01 janvier 2018&lt;/li&gt;
-    &lt;li&gt;Numéro de lot : LMA2542501&lt;/li&gt;
-    &lt;li&gt;Date limite de consommation : 31 août 2018&lt;/li&gt;
-  &lt;/ol&gt;
-&lt;/details&gt;</pre>
+```html
+<details open>
+  <summary><strong>Détails</strong></summary>
+  <ol>
+    <li>Date de fabrication : 01 janvier 2018</li>
+    <li>Numéro de lot : LMA2542501</li>
+    <li>Date limite de consommation : 31 août 2018</li>
+  </ol>
+</details>
+```
 
-<h4 id="Résultat_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Utiliser_avec_divers_éléments_HTML", 650, 120)}}</p>
+{{EmbedLiveSample("Utiliser_avec_divers_éléments_HTML", 650, 120)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a> ou un élément décrivant du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_titre">contenu de titre</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>Aucune, la balise ouvrante et la balise fermante sont obligatoires.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément {{HTMLElement("details")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>{{ARIARole("button")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >
+        ou un élément décrivant du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_titre"
+          >contenu de titre</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        Aucune, la balise ouvrante et la balise fermante sont obligatoires.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>Un élément {{HTMLElement("details")}}.</td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>{{ARIARole("button")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                                    | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}} | {{Spec2('HTML WHATWG')}} |                      |
+| {{SpecName('HTML5.1', 'interactive-elements.html#the-summary-element', '&lt;summary&gt;')}}         | {{Spec2('HTML5.1')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.summary")}}</p>
+{{Compat("html.elements.summary")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("details")}}</li>
-</ul>
+- {{HTMLElement("details")}}
diff --git a/files/fr/web/html/element/sup/index.md b/files/fr/web/html/element/sup/index.md
index d91282a561..e5479ece4f 100644
--- a/files/fr/web/html/element/sup/index.md
+++ b/files/fr/web/html/element/sup/index.md
@@ -8,145 +8,165 @@ tags:
   - Web
 translation_of: Web/HTML/Element/sup
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;sup&gt;</code></strong> est utilisé, pour des raisons typographiques, afin d'afficher du texte en exposant (plus haut et généralement plus petit) par rapport au bloc de texte environnant.</p>
+L'élément HTML **`<sup>`** est utilisé, pour des raisons typographiques, afin d'afficher du texte en exposant (plus haut et généralement plus petit) par rapport au bloc de texte environnant.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/sup.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/sup.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2>
+## **Notes d'utilisation**
 
-<p>Cet élément devrait uniquement être utilisé pour des raisons typographiques lorsque la position du texte est liée à la signification de ce texte (par exemple pour une formule mathématiques) ou aux règles typographiques (par exemple en français pour M<sup>lle</sup>, M<sup>me</sup> ou C<sup>ie</sup>).</p>
+Cet élément devrait uniquement être utilisé pour des raisons typographiques lorsque la position du texte est liée à la signification de ce texte (par exemple pour une formule mathématiques) ou aux règles typographiques (par exemple en français pour M<sup>lle</sup>, M<sup>me</sup> ou C<sup>ie</sup>).
 
-<p>Ainsi, on n'utilisera pas <code>&lt;sup&gt;</code> afin d'obtenir un effet visuel d'un logo par exemple. Pour un simple effet de mise en forme (hors typographie), on utilisera plutôt la propriété {{cssxref("vertical-align")}}, utilisée avec la valeur <code>super</code> (voire avec une valeur numérique si on souhaite être plus précis).</p>
+Ainsi, on n'utilisera pas `<sup>` afin d'obtenir un effet visuel d'un logo par exemple. Pour un simple effet de mise en forme (hors typographie), on utilisera plutôt la propriété {{cssxref("vertical-align")}}, utilisée avec la valeur `super` (voire avec une valeur numérique si on souhaite être plus précis).
 
-<p>Voici quelques cas d'utilisation (non exhaustifs) pour <code>&lt;sup&gt;</code> :</p>
+Voici quelques cas d'utilisation (non exhaustifs) pour `<sup>` :
 
-<ul>
- <li>L'utilisation d'exposants dans une formule mathématique : x<sup>2</sup>.
-
-  <ul>
-   <li>Dans le cadre de formules complexes, <a href="/fr/docs/Web/MathML">MathML</a> peut s'avérer plus pertinent que l'enchaînement d'éléments {{HTMLElement("sub")}} et <code>&lt;sup&gt;</code>.</li>
-  </ul>
- </li>
- <li>L'affichage de lettres supérieures pour respecter certaines conventions typographiques (ex. M<sup>lle</sup>).</li>
- <li>La représentation de nombres ordinaux : 7<sup>e</sup> art.</li>
-</ul>
+- L'utilisation d'exposants dans une formule mathématique : x
+
+  <sup>2</sup>
+
+  .
+
+  - Dans le cadre de formules complexes, [MathML](/fr/docs/Web/MathML) peut s'avérer plus pertinent que l'enchaînement d'éléments {{HTMLElement("sub")}} et `<sup>`.
+
+- L'affichage de lettres supérieures pour respecter certaines conventions typographiques (ex. M
+
+  <sup>lle</sup>
+
+  ).
+
+- La représentation de nombres ordinaux : 7
 
-<h2 id="Exemples">Exemples</h2>
+  <sup>e</sup>
 
-<h3 id="Puissance_mathématique">Puissance mathématique</h3>
+  art.
 
-<h4 id="HTML">HTML</h4>
+## Exemples
 
-<pre class="brush: html">&lt;p&gt;
+### Puissance mathématique
+
+#### HTML
+
+```html
+<p>
   Voici la fonction exponentielle :
-  e&lt;sup&gt;x&lt;/sup&gt;.
-&lt;/p&gt;
-</pre>
+  e<sup>x</sup>.
+</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Puissance_mathématique","100%","120")}}</p>
+{{EmbedLiveSample("Puissance_mathématique","100%","120")}}
 
-<h3 id="Lettres_supérieures">Lettres supérieures</h3>
+### Lettres supérieures
 
-<p>Bien que, techniquement, le lettrage supérieur ne corresponde pas à la mise en exposant, on voit souvent <code>&lt;sup&gt;</code> utilisé pour certaines abréviations.</p>
+Bien que, techniquement, le lettrage supérieur ne corresponde pas à la mise en exposant, on voit souvent `<sup>` utilisé pour certaines abréviations.
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
-  Robert a présenté son rapport à M&lt;sup&gt;lle&lt;/sup&gt; Bernard.
-&lt;/p&gt;</pre>
+```html
+<p>
+  Robert a présenté son rapport à M<sup>lle</sup> Bernard.
+</p>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Lettres_supérieures","650","80")}}</p>
+{{EmbedLiveSample("Lettres_supérieures","650","80")}}
 
-<h3 id="Nombres_ordinaux">Nombres ordinaux</h3>
+### Nombres ordinaux
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Voici comment le nombre ordinal cinquième est écrit dans
   différentes langues
-&lt;/p&gt;
-&lt;ul&gt;
-  &lt;li&gt;en français : 5&lt;sup&gt;e&lt;/sup&gt;&lt;/li&gt;
-  &lt;li&gt;en anglais : 5&lt;sup&gt;th&lt;/sup&gt;&lt;/li&gt;
-&lt;/ul&gt;</pre>
+</p>
+<ul>
+  <li>en français : 5<sup>e</sup></li>
+  <li>en anglais : 5<sup>th</sup></li>
+</ul>
+```
 
-<h4 id="Résultat_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Nombres_ordinaux", 650, 160)}}</p>
+{{EmbedLiveSample("Nombres_ordinaux", 650, 160)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément acceptant du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément acceptant du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+| Spécification                                                                                                                                        | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;')}}             | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '&lt;sub&gt; and &lt;sup&gt;;')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-<p>{{Compat("html.elements.sup")}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+{{Compat("html.elements.sup")}}
 
-<ul>
- <li>L'élément HTML {{HTMLElement("sub")}} permet un effet de mise en indice. Il est à noter que l'élément <code>&lt;sub&gt;</code> et l'élément <code>&lt;sup&gt;</code> ne peuvent pas être utilisés simultanément. Pour afficher le symbole chimique d'un élément, il faudra utiliser <a href="/fr/docs/Web/MathML">MathML</a> pour représenter à la fois le numéro atomique et le nombre de masse.</li>
- <li>Les éléments MathML {{MathMLElement("msub")}}, {{MathMLElement("msup")}} et {{MathMLElement("msubsup")}}.</li>
- <li>La propriété CSS {{cssxref("vertical-align")}}.</li>
-</ul>
+## Voir aussi
+
+- L'élément HTML {{HTMLElement("sub")}} permet un effet de mise en indice. Il est à noter que l'élément `<sub>` et l'élément `<sup>` ne peuvent pas être utilisés simultanément. Pour afficher le symbole chimique d'un élément, il faudra utiliser [MathML](/fr/docs/Web/MathML) pour représenter à la fois le numéro atomique et le nombre de masse.
+- Les éléments MathML {{MathMLElement("msub")}}, {{MathMLElement("msup")}} et {{MathMLElement("msubsup")}}.
+- La propriété CSS {{cssxref("vertical-align")}}.
diff --git a/files/fr/web/html/element/table/index.md b/files/fr/web/html/element/table/index.md
index a6fd16e72c..135c68ee52 100644
--- a/files/fr/web/html/element/table/index.md
+++ b/files/fr/web/html/element/table/index.md
@@ -9,374 +9,364 @@ tags:
   - Web
 translation_of: Web/HTML/Element/table
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;table&gt;</code></strong> permet de représenter un tableau de données, c'est-à-dire des informations exprimées sur un tableau en deux dimensions.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}</div>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>. Les attributs listés ci-après sont désormais tous dépréciés.</p>
-
-<h3 id="Attributs_dépréciés">Attributs dépréciés</h3>
-
-<dl>
- <dt>{{htmlattrdef("align")}} {{Deprecated_inline}}</dt>
- <dd>Cet attribut énumérée indique la manière dont la table doit être aligné en regard du document qui la contient. Ile peut prendre les valeurs suivantes :
- <ul>
-  <li><code>left</code>, signifiant que la table doit être affichée à la gauche du document ;</li>
-  <li><code>center</code>, signifiant que la table doit être affichée centrée dans le document ;</li>
-  <li><code>right</code>, signifiant que la table doit être affichée à droite du document.<br>
-    </li>
- </ul>
-
- <div class="note"><p><strong>Note :</strong></p>
-
- <ul>
-  <li><strong>Cet attribut ne doit pas être utilisé</strong> car il a été déprécié : l'élément {{HTMLElement("table")}} devrait être stylisé en utilisant <a href="/fr/docs/CSS">CSS</a>. Pour obtenir un effet similaire à celui réalisé par l'attribut align, les propriétés <a href="/fr/docs/CSS">CSS</a> {{cssxref("text-align")}} et {{cssxref("vertical-align")}} devraient être utilisées.</li>
-  <li>Avant Firefox 4, Firefox supportait également, en mode quirks uniquement, les valeurs <code>middle</code>, <code>absmiddle</code>, et <code>abscenter</code> comme synonymes de <code>center</code><em>.  </em></li>
- </ul>
- </div>
- </dd>
- <dt>{{htmlattrdef("bgcolor")}} {{Deprecated_inline}}</dt>
- <dd><p>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés préfédinis pour les couleurs</a> peut également être utilisé.</p>
- <div class="note">
-   <p><strong>Note :</strong> Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci a été déprécié. La mise en forme d'un tableau doit se faire en utilisant CSS. Il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} pour cet effet.</p>
- </div>
- </dd>
- <dt>{{htmlattrdef("border")}} {{Deprecated_inline}}</dt>
- <dd>Cet attribut entier définit, en pixels, la taille de la bordure entourant le tableau. S'il vaut 0, cela implique que l'attribut {{htmlattrxref("frame", "table")}} est vide.
- <div class="note"><p><strong>Note :</strong>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Les propriétés CSS {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} et {{cssxref("border-style")}} devraient être utilisées à la place.</p></div>
- </dd>
- <dt>{{htmlattrdef("cellpadding")}} {{Deprecated_inline}}</dt>
- <dd>Cet attribut définit la taille de l'espace entre le contenu d'une cellule et sa bordure, qu'lle soit affichée ou non. Si cet attribut est exprimé en pixels, le décalage sera appliqué sur les quatre côtés. S'il est exprimé en pourcents, le contenu sera centré verticalement et la somme des espaces en haut et en bas représentera le pourcentage, il en va de même pour l'espace horizontal (droite et gauche).
- <div class="note"><p><strong>Note :</strong> Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("padding")}} sur l'élément {{HTMLElement("td")}}.</p></div>
- </dd>
- <dt>{{htmlattrdef("cellspacing")}} {{Deprecated_inline}}</dt>
- <dd>Cet attribut définit la taille (en pourcents ou pixels) de l'espace (vertical et horizontal) entre deux cellules, entre la haut du tableau et les cellules de la première ligne, la gauche du tableau et les cellules de la première colonne, puis de la même manière pour le bas et le côté droit du tableau.
- <div class="note"><p><strong>Note :</strong> Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("margin")}} sur l'élément {{HTMLElement("td")}}.</p></div>
- </dd>
-</dl>
-
-<dl>
- <dt>{{htmlattrdef("frame")}} {{Deprecated_inline}}</dt>
- <dd>Cet attribut à valeurs multiples définit les côtés du tableau sur lesquels dessiner une bordure. Il peut prendre les valeurs suivantes : <code>above, hsides, lhs, border, void, below, vsides, rhs, box</code>.
- <div class="note"><p><strong>Note :</strong> Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, les propriétés {{cssxref("border-style")}} et {{cssxref("border-width")}} doivent être utilisées.</p></div>
- </dd>
-</dl>
-
-<dl>
- <dt>{{htmlattrdef("rules")}} {{Deprecated_inline}}</dt>
- <dd>Cet attribut à valeurs multiples définit la manière dont les traits doivent apparaître au sein du tableau. Il peut avoir les valeurs suivantes :
- <ul>
-  <li><code>none</code>, les traits ne doivent pas être affichés, c'est la valeur par défaut</li>
-  <li><code>groups</code>, les traits sont uniquement affichés entre les groupes de lignes du tableau (définis par les éléments {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} et {{HTMLElement("tfoot")}})  et entre les groupes de colonnes (définis par les éléments {{HTMLElement("col")}} et {{HTMLElement("colgroup")}})</li>
-  <li><code>rows</code>, les traits seront affichées entre les lignes du tableau</li>
-  <li><code>columns</code>, les lignes seront affichées entre les colonnes du tableau</li>
-  <li><code>all</code>, tous les traits seront affichés (entre les lignes et entre les colonnes).</li>
- </ul>
-
- <div class="note"><p><strong>Note :</strong></p>
-
- <ul>
-  <li>L'apparence de ces traits dépend du navigateur utilisé et ne peut être modifiée.</li>
-  <li>Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS {{cssxref("border")}} doit être appliquée sur les éléments {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} ou {{HTMLElement("colgroup")}} adéquats.</li>
- </ul>
- </div>
- </dd>
-</dl>
-
-<dl>
- <dt>{{htmlattrdef("summary")}} {{Deprecated_inline}}</dt>
- <dd>Cet attribut définit un texte alternatif à utiliser afin de décrire le tableau. Un tel texte peut être utilisé par un agent utilisateur qui ne pourrait pas afficher le tableau. Il est généralement utilisé pour les personnes souffrant d'une déficience visuelle, comme par exemple les aveugles qui navigueront sur des pages web en utilisant un écran Braille. Si l'information contenue dans cet attribut serait également utile aux autres utilisateurs, il faudra plutôt utiliser l'élément {{HTMLElement("caption")}}. L'attribut <code><strong>summary</strong></code> n'est pas obligatoire et peut être omis lorsqu'un élément {{HTMLElement("caption")}} remplit ce rôle.
- <div class="note"><p><strong>Note :</strong> Cet attribut ayant été déprécié, il ne doit pas être utilisé. Les façons suivantes peuvent être envisagées pour cette expression :</p>
- <ul>
-  <li>Grâce à un texte entourant le tableau, cette manière est la plus faible du point de vue de la sémantique</li>
-  <li>Grâce à l'élément {{HTMLElement("caption")}}</li>
-  <li>Dans un élément {{HTMLElement("details")}} inclus dans l'élément {{HTMLElement("caption")}} du tableau.</li>
-  <li>En insérant l'élément {{HTMLElement("table")}} dans un élément {{HTMLElement("figure")}} et en ajoutant la description textuelle à côté du tableau.</li>
-  <li>En insérant l'élément {{HTMLElement("table")}} dans un élément {{HTMLElement("figure")}} et en ajoutant la description textuelle dans un élément {{HTMLElement("figcaption")}}.</li>
-  <li>En modifiant le tableau afin qu'aucune description supplémentaire ne soit nécessaire : par exemple en utilisant des éléments {{HTMLElement("th")}} et {{HTMLElement("thead")}}.</li>
- </ul>
- </div>
- </dd>
-</dl>
-
-<dl>
- <dt>{{htmlattrdef("width")}} {{Deprecated_inline}}</dt>
- <dd>Cet attribut définit la largeur du tableau. Elle peut être exprimée en pixels ou en pourcent (représentant alors la fraction du conteneur que le tableau peut occuper).
- <div class="note"><p><strong>Note :</strong> Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS {{cssxref("width")}} doit être utilisée à la place.</p></div>
- </dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/table.html")}}</div>
-
-<h3 id="Tableau_simple">Tableau simple</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Jean&lt;/td&gt;
-    &lt;td&gt;Biche&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Jeanne&lt;/td&gt;
-    &lt;td&gt;Biche&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<h4 id="Résultat">Résultat</h4>
-
-<p>{{EmbedLiveSample("Tableau_simple","100%","140")}}</p>
-
-<h3 id="Autres_exemples">Autres exemples</h3>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">&lt;!-- Tableau simple avec en-tête --&gt;
-&lt;table&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Prénom&lt;/th&gt;
-    &lt;th&gt;Nom&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Jean&lt;/td&gt;
-    &lt;td&gt;Dupont&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Marion&lt;/td&gt;
-    &lt;td&gt;Duval&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-
-&lt;!-- Tableau utilisant thead, tfoot, et tbody --&gt;
-&lt;table&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th&gt;Contenu d'en-tête 1&lt;/th&gt;
-      &lt;th&gt;Contenu d'en-tête 2&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Contenu interne 1&lt;/td&gt;
-      &lt;td&gt;Contenu interne 2&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-  &lt;tfoot&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Pied de tableau 1&lt;/td&gt;
-      &lt;td&gt;Pied de tableau 2&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tfoot&gt;
-&lt;/table&gt;
-
-&lt;!-- Tableau utilisant colgroup --&gt;
-&lt;table&gt;
-  &lt;colgroup span="4" class="columns"&gt;&lt;/colgroup&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Pays&lt;/th&gt;
-    &lt;th&gt;Capitales&lt;/th&gt;
-    &lt;th&gt;Population&lt;/th&gt;
-    &lt;th&gt;Langue&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;USA&lt;/td&gt;
-    &lt;td&gt;Washington D.C.&lt;/td&gt;
-    &lt;td&gt;309 millions&lt;/td&gt;
-    &lt;td&gt;Anglais&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Suède&lt;/td&gt;
-    &lt;td&gt;Stockholm&lt;/td&gt;
-    &lt;td&gt;9 millions&lt;/td&gt;
-    &lt;td&gt;Suédois&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-
-&lt;!-- Tableau utilisant colgroup et col --&gt;
-&lt;table&gt;
-  &lt;colgroup&gt;
-    &lt;col class="column1"&gt;
-    &lt;col class="columns2plus3" span="2"&gt;
-  &lt;/colgroup&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Citron vert&lt;/th&gt;
-    &lt;th&gt;Citron&lt;/th&gt;
-    &lt;th&gt;Orange&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Vert&lt;/td&gt;
-    &lt;td&gt;Jaune&lt;/td&gt;
-    &lt;td&gt;Orange&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-
-&lt;!-- Tableau simple avec une légende --&gt;
-&lt;table&gt;
-  &lt;caption&gt;Super légende&lt;/caption&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Données géniales&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-</pre>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>{{EmbedLiveSample("Autres_exemples","100%","230")}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<h3 id="Légendes">Légendes</h3>
-
-<p>Fournir un élément {{HTMLElement("caption")}} pour légender le tableau avec une description claire et concise permet aux utilisateurs de décider s'ils doivent lire le contenu du tableau ou le passer.</p>
-
-<p>Une telle légende fournit une aide pour les personnes qui naviguent avec des outils d'assistance comme des lecteurs d'écran.</p>
-
-<ul>
- <li><a href="/fr/Apprendre/HTML/Tableaux/Advanced">Ajouter une légende à un tableau grâce à <code>&lt;caption&gt;</code></a></li>
- <li><a href="https://www.w3.org/WAI/tutorials/tables/caption-summary/">Légendes et résumés • Tableaux • Tutoriels d'accessibilité du W3C WAI (en anglais)</a></li>
-</ul>
-
-<h3 id="Portées_des_lignes_et_des_colonnes">Portées des lignes et des colonnes</h3>
-
-<p>L'attribut {{htmlattrxref("scope","th")}} peut être redondant dans certains contextes où la portée peut être déterminée avec les autres éléments. Toutefois de nombreux lecteurs d'écran utilisent cet attribut pour répliquer l'organisation générale du tableau. Dans les tableaux plus complexes, <code>scope</code> pourra être utilisé afin de fournir les informations nécessaires à l'organisation (tant au moteur HTML qu'aux outils d'assistance).</p>
-
-<h4 id="Exemple">Exemple</h4>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;caption&gt;Noms et valeurs des couleurs&lt;/caption&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;th scope="col"&gt;Nom&lt;/th&gt;
-      &lt;th scope="col"&gt;Hexadécimal&lt;/th&gt;
-      &lt;th scope="col"&gt;HSLa&lt;/th&gt;
-      &lt;th scope="col"&gt;RGBa&lt;/th&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;Turquoise&lt;/th&gt;
-      &lt;td&gt;&lt;code&gt;#51F6F6&lt;/code&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;code&gt;hsla(180, 90%, 64%, 1)&lt;/code&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;code&gt;rgba(81, 246, 246, 1)&lt;/code&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;Ocre&lt;/th&gt;
-      &lt;td&gt;&lt;code&gt;#F6BC57&lt;/code&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;code&gt;hsla(38, 90%, 65%, 1)&lt;/code&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;code&gt;rgba(246, 188, 87, 1)&lt;/code&gt;&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<p>Ajouter <code>scope="col"</code> sur un élément {{HTMLElement("th")}} permettra d'aider à décrire le fait que la cellule est en haut de la colonne. Indiquer <code>scope="row"</code> sur un élément {{HTMLElement("td")}} permettra d'indiquer que la cellule est la première de la ligne.</p>
-
-<ul>
- <li><a href="/fr/Apprendre/HTML/Tableaux/Advanced#Tableaux_pour_des_utisateurs_malvoyants">Utiliser les tableaux HTML pour les personnes souffrant de troubles de la vision</a></li>
- <li><a href="https://www.w3.org/WAI/tutorials/tables/two-headers/">Les tableaux avec deux en-têtes • Tutoriels d'accessibilité web W3C WAI (en anglais)</a></li>
- <li><a href="https://www.w3.org/WAI/tutorials/tables/irregular/">Les tableaux avec des en-têtes hétérogènes • Tutoriels d'accessibilité web W3C WAI (en anglais)</a></li>
- <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H63.html">H63 : Utiliser l'attribut <code>scope</code> afin d'associer les cellules de l'en-tête et celles des données dans les tableaux de données | Techniques W3C pour WCAG 2.0 (en anglais)</a></li>
-</ul>
-
-<h3 id="Tableaux_complexes">Tableaux complexes</h3>
-
-<p>Les technologies d'assistance telles que les lecteurs d'écran peuvent rencontrer des difficultés lors de l'analyse de tableaux complexes où les cellules d'en-tête ne sont pas associées aux données de façon clairement verticale ou horizontale. Généralement, cela se traduit par la présence des attributs {{htmlattrxref("colspan","td")}} et {{htmlattrxref("rowspan","td")}}.</p>
-
-<p>Si possible, on présentera le tableau différemment, en le divisant en plusieurs tableaux simples qui ne nécessitent pas l'utilisation des atttributs <code>colspan</code> et <code>rowspan</code>. En plus d'aider à la compréhension pour les personnes qui utilisent des outils d'assistance, cela pourra bénéficier aux personnes souffrant de troubles cognitifs.</p>
-
-<p>Si le tableau ne peut pas être subdivisé, on pourra utiliser les attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers","td")}} afin d'associer « informatiquement » les cellules du tableaux avec les en-têtes correspondantes.</p>
-
-<ul>
- <li><a href="/fr/Apprendre/HTML/Tableaux/Advanced#Tableaux_pour_des_utisateurs_malvoyants">Utiliser les tableaux HTML pour les personnes souffrant de troubles de la vision</a></li>
- <li><a href="https://www.w3.org/WAI/tutorials/tables/multi-level/">Les tableaux avec des en-têtes sur plusieurs niveaux • Tutoriels d'accesibilité web W3C WAI (en anglais)</a></li>
- <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H43.html">H43 : Utiliser les attributs <code>id</code> et <code>headers</code> afin d'associer les cellules de données et les cellules d'en-tête dans les tableaux | Techniques W3C pour  WCAG 2.0 (en anglais)</a></li>
-</ul>
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+{{HTMLRef}}
 
-<table class="properties">
- <tbody>
+L'élément HTML **`<table>`** permet de représenter un tableau de données, c'est-à-dire des informations exprimées sur un tableau en deux dimensions.
+
+{{EmbedInteractiveExample("pages/tabbed/table.html","tabbed-standard")}}
+
+## Attributs
+
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels). Les attributs listés ci-après sont désormais tous dépréciés.
+
+### Attributs dépréciés
+
+- {{htmlattrdef("align")}} {{Deprecated_inline}}
+
+  - : Cet attribut énumérée indique la manière dont la table doit être aligné en regard du document qui la contient. Ile peut prendre les valeurs suivantes :
+
+    - `left`, signifiant que la table doit être affichée à la gauche du document ;
+    - `center`, signifiant que la table doit être affichée centrée dans le document ;
+    - `right`, signifiant que la table doit être affichée à droite du document.
+
+    > **Note :**
+    >
+    > - **Cet attribut ne doit pas être utilisé** car il a été déprécié : l'élément {{HTMLElement("table")}} devrait être stylisé en utilisant [CSS](/fr/docs/CSS). Pour obtenir un effet similaire à celui réalisé par l'attribut align, les propriétés [CSS](/fr/docs/CSS) {{cssxref("text-align")}} et {{cssxref("vertical-align")}} devraient être utilisées.
+    > - Avant Firefox 4, Firefox supportait également, en mode quirks uniquement, les valeurs `middle`, `absmiddle`, et `abscenter` comme synonymes de `center`_._
+
+- {{htmlattrdef("bgcolor")}} {{Deprecated_inline}}
+
+  - : Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le [sRGB](https://www.w3.org/Graphics/Color/sRGB). Il est précédé d'un '#'. Un des [mots-clés préfédinis pour les couleurs](/fr/docs/Web/CSS/color_value#color_keywords) peut également être utilisé.
+
+    > **Note :** Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci a été déprécié. La mise en forme d'un tableau doit se faire en utilisant CSS. Il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} pour cet effet.
+
+- {{htmlattrdef("border")}} {{Deprecated_inline}}
+
+  - : Cet attribut entier définit, en pixels, la taille de la bordure entourant le tableau. S'il vaut 0, cela implique que l'attribut {{htmlattrxref("frame", "table")}} est vide.
+
+    > **Note :**Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Les propriétés CSS {{cssxref("border")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}} et {{cssxref("border-style")}} devraient être utilisées à la place.
+
+- {{htmlattrdef("cellpadding")}} {{Deprecated_inline}}
+
+  - : Cet attribut définit la taille de l'espace entre le contenu d'une cellule et sa bordure, qu'lle soit affichée ou non. Si cet attribut est exprimé en pixels, le décalage sera appliqué sur les quatre côtés. S'il est exprimé en pourcents, le contenu sera centré verticalement et la somme des espaces en haut et en bas représentera le pourcentage, il en va de même pour l'espace horizontal (droite et gauche).
+
+    > **Note :** Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("padding")}} sur l'élément {{HTMLElement("td")}}.
+
+- {{htmlattrdef("cellspacing")}} {{Deprecated_inline}}
+
+  - : Cet attribut définit la taille (en pourcents ou pixels) de l'espace (vertical et horizontal) entre deux cellules, entre la haut du tableau et les cellules de la première ligne, la gauche du tableau et les cellules de la première colonne, puis de la même manière pour le bas et le côté droit du tableau.
+
+    > **Note :** Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, la propriété {{cssxref("border-collapse")}} avec la valeur collapse doit être utilisée sur l'élément {{HTMLElement("table")}} et la propriété {{cssxref("margin")}} sur l'élément {{HTMLElement("td")}}.
+
+<!---->
+
+- {{htmlattrdef("frame")}} {{Deprecated_inline}}
+
+  - : Cet attribut à valeurs multiples définit les côtés du tableau sur lesquels dessiner une bordure. Il peut prendre les valeurs suivantes : `above, hsides, lhs, border, void, below, vsides, rhs, box`.
+
+    > **Note :** Cet attribut ayant été déprécié, il ne doit pas être utilisé. La mise en forme d'un tableau doit s'effectuer en utilisant CSS. Pour réaliser un effet similaire, les propriétés {{cssxref("border-style")}} et {{cssxref("border-width")}} doivent être utilisées.
+
+<!---->
+
+- {{htmlattrdef("rules")}} {{Deprecated_inline}}
+
+  - : Cet attribut à valeurs multiples définit la manière dont les traits doivent apparaître au sein du tableau. Il peut avoir les valeurs suivantes :
+
+    - `none`, les traits ne doivent pas être affichés, c'est la valeur par défaut
+    - `groups`, les traits sont uniquement affichés entre les groupes de lignes du tableau (définis par les éléments {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} et {{HTMLElement("tfoot")}})  et entre les groupes de colonnes (définis par les éléments {{HTMLElement("col")}} et {{HTMLElement("colgroup")}})
+    - `rows`, les traits seront affichées entre les lignes du tableau
+    - `columns`, les lignes seront affichées entre les colonnes du tableau
+    - `all`, tous les traits seront affichés (entre les lignes et entre les colonnes).
+
+    > **Note :**
+    >
+    > - L'apparence de ces traits dépend du navigateur utilisé et ne peut être modifiée.
+    > - Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS {{cssxref("border")}} doit être appliquée sur les éléments {{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("col")}} ou {{HTMLElement("colgroup")}} adéquats.
+
+<!---->
+
+- {{htmlattrdef("summary")}} {{Deprecated_inline}}
+
+  - : Cet attribut définit un texte alternatif à utiliser afin de décrire le tableau. Un tel texte peut être utilisé par un agent utilisateur qui ne pourrait pas afficher le tableau. Il est généralement utilisé pour les personnes souffrant d'une déficience visuelle, comme par exemple les aveugles qui navigueront sur des pages web en utilisant un écran Braille. Si l'information contenue dans cet attribut serait également utile aux autres utilisateurs, il faudra plutôt utiliser l'élément {{HTMLElement("caption")}}. L'attribut **`summary`** n'est pas obligatoire et peut être omis lorsqu'un élément {{HTMLElement("caption")}} remplit ce rôle.
+
+    > **Note :** Cet attribut ayant été déprécié, il ne doit pas être utilisé. Les façons suivantes peuvent être envisagées pour cette expression :
+    >
+    > - Grâce à un texte entourant le tableau, cette manière est la plus faible du point de vue de la sémantique
+    > - Grâce à l'élément {{HTMLElement("caption")}}
+    > - Dans un élément {{HTMLElement("details")}} inclus dans l'élément {{HTMLElement("caption")}} du tableau.
+    > - En insérant l'élément {{HTMLElement("table")}} dans un élément {{HTMLElement("figure")}} et en ajoutant la description textuelle à côté du tableau.
+    > - En insérant l'élément {{HTMLElement("table")}} dans un élément {{HTMLElement("figure")}} et en ajoutant la description textuelle dans un élément {{HTMLElement("figcaption")}}.
+    > - En modifiant le tableau afin qu'aucune description supplémentaire ne soit nécessaire : par exemple en utilisant des éléments {{HTMLElement("th")}} et {{HTMLElement("thead")}}.
+
+<!---->
+
+- {{htmlattrdef("width")}} {{Deprecated_inline}}
+
+  - : Cet attribut définit la largeur du tableau. Elle peut être exprimée en pixels ou en pourcent (représentant alors la fraction du conteneur que le tableau peut occuper).
+
+    > **Note :** Cet attribut ayant été déprécié, il ne doit pas être utilisé. La propriété CSS {{cssxref("width")}} doit être utilisée à la place.
+
+## Exemples
+
+{{EmbedInteractiveExample("pages/tabbed/table.html")}}
+
+### Tableau simple
+
+#### HTML
+
+```html
+<table>
   <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a></td>
+    <td>Jean</td>
+    <td>Biche</td>
   </tr>
   <tr>
-   <th scope="row"><dfn>Contenu autorisé</dfn></th>
-   <td>
-    <p>Dans cet ordre :</p>
-    <ul>
-     <li>Un élément facultatif {{HTMLElement("caption")}}</li>
-     <li>Zéro ou plusieurs éléments {{HTMLElement("colgroup")}}</li>
-     <li>Un élément {{HTMLElement("thead")}} facultatif</li>
-     <li>L'un ou l'autre de ces deux cas de figure :
-      <ul>
-       <li>zéro ou plusieurs éléments  {{HTMLElement("tbody")}}</li>
-       <li>un ou plusieurs éléments {{HTMLElement("tr")}}</li>
-      </ul>
-     </li>
-     <li>un élément {{HTMLElement("tfoot")}} optionnel</li>
-    </ul>
-   </td>
+    <td>Jeanne</td>
+    <td>Biche</td>
   </tr>
+</table>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Tableau_simple","100%","140")}}
+
+### Autres exemples
+
+#### HTML
+
+```html
+<!-- Tableau simple avec en-tête -->
+<table>
   <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
+    <th>Prénom</th>
+    <th>Nom</th>
   </tr>
   <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du contenu de flux.</td>
+    <td>Jean</td>
+    <td>Dupont</td>
+  </tr>
+  <tr>
+    <td>Marion</td>
+    <td>Duval</td>
+  </tr>
+</table>
+
+<!-- Tableau utilisant thead, tfoot, et tbody -->
+<table>
+  <thead>
+    <tr>
+      <th>Contenu d'en-tête 1</th>
+      <th>Contenu d'en-tête 2</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Contenu interne 1</td>
+      <td>Contenu interne 2</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td>Pied de tableau 1</td>
+      <td>Pied de tableau 2</td>
+    </tr>
+  </tfoot>
+</table>
+
+<!-- Tableau utilisant colgroup -->
+<table>
+  <colgroup span="4" class="columns"></colgroup>
+  <tr>
+    <th>Pays</th>
+    <th>Capitales</th>
+    <th>Population</th>
+    <th>Langue</th>
   </tr>
   <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
+    <td>USA</td>
+    <td>Washington D.C.</td>
+    <td>309 millions</td>
+    <td>Anglais</td>
   </tr>
   <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLTableElement")}}</td>
+    <td>Suède</td>
+    <td>Stockholm</td>
+    <td>9 millions</td>
+    <td>Suédois</td>
   </tr>
- </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
+<!-- Tableau utilisant colgroup et col -->
+<table>
+  <colgroup>
+    <col class="column1">
+    <col class="columns2plus3" span="2">
+  </colgroup>
   <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
+    <th>Citron vert</th>
+    <th>Citron</th>
+    <th>Orange</th>
   </tr>
   <tr>
-   <td>{{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
+    <td>Vert</td>
+    <td>Jaune</td>
+    <td>Orange</td>
   </tr>
+</table>
+
+<!-- Tableau simple avec une légende -->
+<table>
+  <caption>Super légende</caption>
   <tr>
-   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
+    <td>Données géniales</td>
   </tr>
- </tbody>
 </table>
+```
+
+#### Résultat
+
+{{EmbedLiveSample("Autres_exemples","100%","230")}}
+
+## Accessibilité
+
+### Légendes
+
+Fournir un élément {{HTMLElement("caption")}} pour légender le tableau avec une description claire et concise permet aux utilisateurs de décider s'ils doivent lire le contenu du tableau ou le passer.
+
+Une telle légende fournit une aide pour les personnes qui naviguent avec des outils d'assistance comme des lecteurs d'écran.
+
+- [Ajouter une légende à un tableau grâce à `<caption>`](/fr/Apprendre/HTML/Tableaux/Advanced)
+- [Légendes et résumés • Tableaux • Tutoriels d'accessibilité du W3C WAI (en anglais)](https://www.w3.org/WAI/tutorials/tables/caption-summary/)
+
+### Portées des lignes et des colonnes
+
+L'attribut {{htmlattrxref("scope","th")}} peut être redondant dans certains contextes où la portée peut être déterminée avec les autres éléments. Toutefois de nombreux lecteurs d'écran utilisent cet attribut pour répliquer l'organisation générale du tableau. Dans les tableaux plus complexes, `scope` pourra être utilisé afin de fournir les informations nécessaires à l'organisation (tant au moteur HTML qu'aux outils d'assistance).
+
+#### Exemple
+
+```html
+<table>
+  <caption>Noms et valeurs des couleurs</caption>
+  <tbody>
+    <tr>
+      <th scope="col">Nom</th>
+      <th scope="col">Hexadécimal</th>
+      <th scope="col">HSLa</th>
+      <th scope="col">RGBa</th>
+    </tr>
+    <tr>
+      <th scope="row">Turquoise</th>
+      <td><code>#51F6F6</code></td>
+      <td><code>hsla(180, 90%, 64%, 1)</code></td>
+      <td><code>rgba(81, 246, 246, 1)</code></td>
+    </tr>
+    <tr>
+      <th scope="row">Ocre</th>
+      <td><code>#F6BC57</code></td>
+      <td><code>hsla(38, 90%, 65%, 1)</code></td>
+      <td><code>rgba(246, 188, 87, 1)</code></td>
+    </tr>
+  </tbody>
+</table>
+```
+
+Ajouter `scope="col"` sur un élément {{HTMLElement("th")}} permettra d'aider à décrire le fait que la cellule est en haut de la colonne. Indiquer `scope="row"` sur un élément {{HTMLElement("td")}} permettra d'indiquer que la cellule est la première de la ligne.
+
+- [Utiliser les tableaux HTML pour les personnes souffrant de troubles de la vision](/fr/Apprendre/HTML/Tableaux/Advanced#Tableaux_pour_des_utisateurs_malvoyants)
+- [Les tableaux avec deux en-têtes • Tutoriels d'accessibilité web W3C WAI (en anglais)](https://www.w3.org/WAI/tutorials/tables/two-headers/)
+- [Les tableaux avec des en-têtes hétérogènes • Tutoriels d'accessibilité web W3C WAI (en anglais)](https://www.w3.org/WAI/tutorials/tables/irregular/)
+- [H63 : Utiliser l'attribut `scope` afin d'associer les cellules de l'en-tête et celles des données dans les tableaux de données | Techniques W3C pour WCAG 2.0 (en anglais)](https://www.w3.org/TR/WCAG20-TECHS/H63.html)
+
+### Tableaux complexes
+
+Les technologies d'assistance telles que les lecteurs d'écran peuvent rencontrer des difficultés lors de l'analyse de tableaux complexes où les cellules d'en-tête ne sont pas associées aux données de façon clairement verticale ou horizontale. Généralement, cela se traduit par la présence des attributs {{htmlattrxref("colspan","td")}} et {{htmlattrxref("rowspan","td")}}.
+
+Si possible, on présentera le tableau différemment, en le divisant en plusieurs tableaux simples qui ne nécessitent pas l'utilisation des atttributs `colspan` et `rowspan`. En plus d'aider à la compréhension pour les personnes qui utilisent des outils d'assistance, cela pourra bénéficier aux personnes souffrant de troubles cognitifs.
+
+Si le tableau ne peut pas être subdivisé, on pourra utiliser les attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers","td")}} afin d'associer « informatiquement » les cellules du tableaux avec les en-têtes correspondantes.
+
+- [Utiliser les tableaux HTML pour les personnes souffrant de troubles de la vision](/fr/Apprendre/HTML/Tableaux/Advanced#Tableaux_pour_des_utisateurs_malvoyants)
+- [Les tableaux avec des en-têtes sur plusieurs niveaux • Tutoriels d'accesibilité web W3C WAI (en anglais)](https://www.w3.org/WAI/tutorials/tables/multi-level/)
+- [H43 : Utiliser les attributs `id` et `headers` afin d'associer les cellules de données et les cellules d'en-tête dans les tableaux | Techniques W3C pour  WCAG 2.0 (en anglais)](https://www.w3.org/TR/WCAG20-TECHS/H43.html)
+
+## Résumé technique
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row"><dfn>Contenu autorisé</dfn></th>
+      <td>
+        <p>Dans cet ordre :</p>
+        <ul>
+          <li>Un élément facultatif {{HTMLElement("caption")}}</li>
+          <li>
+            Zéro ou plusieurs éléments {{HTMLElement("colgroup")}}
+          </li>
+          <li>Un élément {{HTMLElement("thead")}} facultatif</li>
+          <li>
+            L'un ou l'autre de ces deux cas de figure :
+            <ul>
+              <li>
+                zéro ou plusieurs éléments  {{HTMLElement("tbody")}}
+              </li>
+              <li>un ou plusieurs éléments {{HTMLElement("tr")}}</li>
+            </ul>
+          </li>
+          <li>un élément {{HTMLElement("tfoot")}} optionnel</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>Tout élément qui accepte du contenu de flux.</td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLTableElement")}}</td>
+    </tr>
+  </tbody>
+</table>
+
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}}     | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}} | {{Spec2('HTML5 W3C')}}     |              |
+
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("html.elements.table")}}
 
-<p>{{Compat("html.elements.table")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}
+- Les propriétés CSS qui peuvent être utilisées pour mettre en forme l'élément `<table>` :
 
-<ul>
- <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}</li>
- <li>Les propriétés CSS qui peuvent être utilisées pour mettre en forme l'élément <code>&lt;table&gt;</code> :
-  <ul>
-   <li>{{cssxref("width")}} qui permet de contrôler la largeur du tableau ;</li>
-   <li>{{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} qui permettent de contrôler l'aspect des bordures pour les cellules et le contour du tableau ;</li>
-   <li>{{cssxref("margin")}} et {{cssxref("padding")}} qui s'appliquent sur le contenu d'une cellule individuelle ;</li>
-   <li>{{cssxref("text-align")}} et {{cssxref("vertical-align")}} qui permettent de définir l'alignement du texte et du contenu de la cellule.</li>
-  </ul>
- </li>
-</ul>
+  - {{cssxref("width")}} qui permet de contrôler la largeur du tableau ;
+  - {{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-collapse")}}, {{cssxref("border-spacing")}} qui permettent de contrôler l'aspect des bordures pour les cellules et le contour du tableau ;
+  - {{cssxref("margin")}} et {{cssxref("padding")}} qui s'appliquent sur le contenu d'une cellule individuelle ;
+  - {{cssxref("text-align")}} et {{cssxref("vertical-align")}} qui permettent de définir l'alignement du texte et du contenu de la cellule.
diff --git a/files/fr/web/html/element/tbody/index.md b/files/fr/web/html/element/tbody/index.md
index cc5ebc205e..a404e4596c 100644
--- a/files/fr/web/html/element/tbody/index.md
+++ b/files/fr/web/html/element/tbody/index.md
@@ -9,185 +9,178 @@ tags:
   - Web
 translation_of: Web/HTML/Element/tbody
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;tbody&gt;</code></strong> permet de regrouper un ou plusieurs éléments {{HTMLElement("tr")}} afin de former le corps d'un tableau HTML ({{HTMLElement("table")}}).</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}}</div>
-
-<p>L'élément <code>&lt;tbody&gt;</code>, ainsi que les éléments {{HTMLElement("thead")}} et {{HTMLElement("tfoot")}}, fournit des informations sémantiques qui sont utilisées pour l'affichage à l'écran, l'impression et l'accessibilité.</p>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
-
-<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
-
-<dl>
- <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt>
- <dd><p>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :</p>
- <ul>
-  <li><code>left</code> : le contenu de la cellule est alligné à gauche de la cellule ;</li>
-  <li><code>center</code> : le contenu de la cellule est centré horizontalement ;</li>
-  <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule ;</li>
-  <li><code>justify</code> : ajuste la largeur des espaces du contenu texte afin que le contenu de la cellule soit justifié ;</li>
-  <li><code>char</code> : aligne le contenu texte de la cellule selon un caractère spécial avec un décalage minimum défini par les attributs {{htmlattrxref("char", "tbody")}} et {{htmlattrxref("charoff", "tbody")}} {{unimplemented_inline(2212)}}.</li>
- </ul>
-
- <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p>
-
- <div class="note">
-   <p><strong>Note :</strong>cet attribut est devenu obsolète dans le dernier standard.</p>
-
- <ul>
-  <li>Pour réaliser le même effet qu'avec les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.</li>
-  <li>Pour réaliser le même effet qu'avec <code>char</code>, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "tbody")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.</li>
- </ul>
- </div>
- </dd>
- <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
- <dd><p>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code hexadécimal à 6 chiffres comme défini par le <a class="external" href="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un <code>#</code>. Un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés préfédinis pour les couleurs</a> peut également être utilisé.</p>
- <div class="note"><p><strong>Note :</strong> il est fortement conseillé de ne pas utiliser cet attribut car il n'est pas standard et n'a été implémenté que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tbody")}} doit être mis en forme grâce aux propriétés <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui produit par l'attribut <strong><code>bgcolor</code></strong>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</p></div>
- </dd>
- <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt>
- <dd><p>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tbody")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</p>
- <div class="note"><p><strong>Note :</strong> cet attribut est obsolète et son utilisation est donc fortement déconseillé. De fait, il n'est pas pris en charge par la dernière recommandation. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tbody")}}, en utilisant CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</p></div>
- </dd>
- <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt>
- <dd><p>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</p></div>
- </dd>
- <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}</dt>
- <dd><p>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :</p>
- <ul>
-  <li><code>baseline</code> qui alignera le texte sur la ligne la plus basse possible en utilisant la <a class="external" href="http://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code> ;</li>
-  <li><code>bottom</code> qui placera le texte au plus bas de la cellule ;</li>
-  <li><code>middle</code> qui centrera verticalement le texte dans la cellule ;</li>
-  <li><code>top</code> qui placera le texte au plus haut de la cellule.</li>
- </ul>
-
- <div class="note"><p><strong>Note :</strong> cet attribut étant maintenant obsolète (et n'étant plus pris en charge), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</p></div>
- </dd>
-</dl>
-
-<h2 id="Notes_d'utilisation"><strong>Notes d'utilisation</strong></h2>
-
-<ul>
- <li>Lorsque le tableau contient un élément {{HTMLElement("thead")}} (qui identifie les lignes d'en-tête), l'élément <code>&lt;tbody&gt;</code> doit apparaître après.</li>
- <li>Si on utilise <code>&lt;tbody&gt;</code>, il faudra alors que celui-ci contienne toutes les lignes qui ne sont pas des lignes d'en-tête ou de pied de tableau. Autrement dit, il n'est pas possible d'avoir des éléments {{HTMLElement("tr")}} qui soient des éléments fils directs de {{HTMLElement("table")}} si on utilise <code>&lt;tbody&gt;</code>.</li>
- <li>Utilisé à la suite d'un élément {{HTMLElement("thead")}} et/ou {{HTMLElement("tfoot")}}, l'élément <code>&lt;tbody&gt;</code> fournit des informations sémantiques supplémentaires pour les appareils d'affichage ou d'impression.</li>
- <li>Lorsqu'il est imprimé, <code>&lt;tbody&gt;</code> représente le contenu qui, lorsqu'il est plus long qu'une page, sera différent sur chaque page. En revanche, {{HTMLElement("thead")}} et {{HTMLElement("tfoot")}} seront les mêmes ou seront semblables sur chacune des pages.</li>
- <li><code>&lt;tbody&gt;</code> permet d'obtenir un défilement séparé pour les éléments {{HTMLElement("thead")}}, {{HTMLElement("tfoot")}} et {{HTMLElement("caption")}} d'un même élément {{HTMLElement("table")}}.</li>
- <li>À la différence des éléments <code>&lt;thead&gt;</code>, <code>&lt;tfoot&gt;</code> et <code>&lt;caption&gt;</code>, on peut utiliser plusieurs éléments <code>&lt;tbody&gt;</code> (à la suite). Cela permet de répartir les lignes des grands tableaux en différentes sections, chacune pouvant être mise en forme distinctement.</li>
-</ul>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th&gt;Contenu d'en-tête 1&lt;/th&gt;
-      &lt;th&gt;Contenu d'en-tête 2&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tfoot&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Pied de tableau 1&lt;/td&gt;
-      &lt;td&gt;Pied de tableau 2&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tfoot&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Contenu interne 1&lt;/td&gt;
-      &lt;td&gt;Contenu interne 2&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="CSS">CSS</h3>
-
-<pre class="brush: css">table {
+{{HTMLRef}}
+
+L'élément HTML **`<tbody>`** permet de regrouper un ou plusieurs éléments {{HTMLElement("tr")}} afin de former le corps d'un tableau HTML ({{HTMLElement("table")}}).
+
+{{EmbedInteractiveExample("pages/tabbed/tbody.html","tabbed-taller")}}
+
+L'élément `<tbody>`, ainsi que les éléments {{HTMLElement("thead")}} et {{HTMLElement("tfoot")}}, fournit des informations sémantiques qui sont utilisées pour l'affichage à l'écran, l'impression et l'accessibilité.
+
+## Attributs
+
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
+
+### Attributs dépréciés ou obsolètes
+
+- {{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}
+
+  - : Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :
+
+    - `left` : le contenu de la cellule est alligné à gauche de la cellule ;
+    - `center` : le contenu de la cellule est centré horizontalement ;
+    - `right` : le contenu de la cellule est aligné à droite de la cellule ;
+    - `justify` : ajuste la largeur des espaces du contenu texte afin que le contenu de la cellule soit justifié ;
+    - `char` : aligne le contenu texte de la cellule selon un caractère spécial avec un décalage minimum défini par les attributs {{htmlattrxref("char", "tbody")}} et {{htmlattrxref("charoff", "tbody")}} {{unimplemented_inline(2212)}}.
+
+    Si cet attribut n'est pas renseigné, la valeur `left` est prise par défaut.
+
+    > **Note :**cet attribut est devenu obsolète dans le dernier standard.
+    >
+    > - Pour réaliser le même effet qu'avec les valeurs `left`, `center`, `right` ou `justify`, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.
+    > - Pour réaliser le même effet qu'avec `char`, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "tbody")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.
+
+- {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
+
+  - : Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code hexadécimal à 6 chiffres comme défini par le [sRGB](http://www.w3.org/Graphics/Color/sRGB). Il est précédé d'un `#`. Un des [mots-clés préfédinis pour les couleurs](/fr/docs/Web/CSS/color_value#color_keywords) peut également être utilisé.
+
+    > **Note :** il est fortement conseillé de ne pas utiliser cet attribut car il n'est pas standard et n'a été implémenté que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tbody")}} doit être mis en forme grâce aux propriétés [CSS](/fr/docs/CSS). Pour fournir un effet semblable à celui produit par l'attribut **`bgcolor`**, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.
+
+- {{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}
+
+  - : Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tbody")}} ne vaut pas `char`, l'attribut est ignoré.
+
+    > **Note :** cet attribut est obsolète et son utilisation est donc fortement déconseillé. De fait, il n'est pas pris en charge par la dernière recommandation. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tbody")}}, en utilisant CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.
+
+- {{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}
+
+  - : Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut **char** à appliquer au contenu des cellules.
+
+    > **Note :** Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.
+
+- {{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline(4.01)}}, {{obsolete_inline}} en {{HTMLVersionInline(5)}}
+
+  - : Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
+
+    - `baseline` qui alignera le texte sur la ligne la plus basse possible en utilisant la [ligne de base](http://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29) des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur `bottom` ;
+    - `bottom` qui placera le texte au plus bas de la cellule ;
+    - `middle` qui centrera verticalement le texte dans la cellule ;
+    - `top` qui placera le texte au plus haut de la cellule.
+
+    > **Note :** cet attribut étant maintenant obsolète (et n'étant plus pris en charge), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.
+
+## **Notes d'utilisation**
+
+- Lorsque le tableau contient un élément {{HTMLElement("thead")}} (qui identifie les lignes d'en-tête), l'élément `<tbody>` doit apparaître après.
+- Si on utilise `<tbody>`, il faudra alors que celui-ci contienne toutes les lignes qui ne sont pas des lignes d'en-tête ou de pied de tableau. Autrement dit, il n'est pas possible d'avoir des éléments {{HTMLElement("tr")}} qui soient des éléments fils directs de {{HTMLElement("table")}} si on utilise `<tbody>`.
+- Utilisé à la suite d'un élément {{HTMLElement("thead")}} et/ou {{HTMLElement("tfoot")}}, l'élément `<tbody>` fournit des informations sémantiques supplémentaires pour les appareils d'affichage ou d'impression.
+- Lorsqu'il est imprimé, `<tbody>` représente le contenu qui, lorsqu'il est plus long qu'une page, sera différent sur chaque page. En revanche, {{HTMLElement("thead")}} et {{HTMLElement("tfoot")}} seront les mêmes ou seront semblables sur chacune des pages.
+- `<tbody>` permet d'obtenir un défilement séparé pour les éléments {{HTMLElement("thead")}}, {{HTMLElement("tfoot")}} et {{HTMLElement("caption")}} d'un même élément {{HTMLElement("table")}}.
+- À la différence des éléments `<thead>`, `<tfoot>` et `<caption>`, on peut utiliser plusieurs éléments `<tbody>` (à la suite). Cela permet de répartir les lignes des grands tableaux en différentes sections, chacune pouvant être mise en forme distinctement.
+
+## Exemples
+
+### HTML
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>Contenu d'en-tête 1</th>
+      <th>Contenu d'en-tête 2</th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <td>Pied de tableau 1</td>
+      <td>Pied de tableau 2</td>
+    </tr>
+  </tfoot>
+  <tbody>
+    <tr>
+      <td>Contenu interne 1</td>
+      <td>Contenu interne 2</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+### CSS
+
+```css
+table {
   border: 2px solid #555;
   border-collapse: collapse;
-}</pre>
+}
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","150")}}</p>
+{{EmbedLiveSample("Exemples","100%","150")}}
 
-<div class="note">
-<p><strong>Note :</strong> Consulter la page {{HTMLElement("table")}} pour plus d'exemples sur <code>&lt;tbody&gt;</code>.</p>
-</div>
+> **Note :** Consulter la page {{HTMLElement("table")}} pour plus d'exemples sur `<tbody>`.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Zéro ou plusieurs éléments {{HTMLElement("tr")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>L'élément {{HTMLElement("tbody")}} n'est pas un élément fils obligatoire de {{HTMLElement("table")}}. Cependant, il ne doit pas être présent si l'élément parent {{HTMLElement("table")}} possède un élément {{HTMLElement("tr")}} comme élément fils.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>L'élément <code>&lt;tbody&gt;</code> doit être au sein d'un élément {{HTMLElement("table")}} et peut être ajouté après un élément {{HTMLElement("caption")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}} ou {{HTMLElement("tfoot")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLTableSectionElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Zéro ou plusieurs éléments {{HTMLElement("tr")}}.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        L'élément {{HTMLElement("tbody")}} n'est pas un élément fils
+        obligatoire de {{HTMLElement("table")}}. Cependant, il ne doit
+        pas être présent si l'élément parent {{HTMLElement("table")}}
+        possède un élément {{HTMLElement("tr")}} comme élément fils.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        L'élément <code>&#x3C;tbody></code> doit être au sein d'un élément
+        {{HTMLElement("table")}} et peut être ajouté après un élément
+        {{HTMLElement("caption")}},
+        {{HTMLElement("colgroup")}}, {{HTMLElement("thead")}}
+        ou {{HTMLElement("tfoot")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLTableSectionElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','tables.html#the-tbody-element','tbody element')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody element')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+| Spécification                                                                                            | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG','tables.html#the-tbody-element','tbody element')}}     | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C','tabular-data.html#the-tbody-element','tbody element')}} | {{Spec2('HTML5 W3C')}}     |              |
 
+## Compatibilité des navigateurs
 
+{{Compat("html.elements.tbody")}}
 
-<p>{{Compat("html.elements.tbody")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}} ;
+- Les propriétés et pseudo-classes CSS qui sont particulièrement utiles pour mettre en forme l'élément `<tbody>` :
 
-<ul>
- <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}} ;</li>
- <li>Les propriétés et pseudo-classes CSS qui sont particulièrement utiles pour mettre en forme l'élément <code>&lt;tbody&gt;</code> :
-  <ul>
-   <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de paramétrer l'alignement des cellules d'une colonne ;</li>
-   <li>La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu des cellules par rapport à un même caractère (par exemple « . »).</li>
-  </ul>
- </li>
-</ul>
+  - La pseudo-classe {{cssxref(":nth-child")}} qui permet de paramétrer l'alignement des cellules d'une colonne ;
+  - La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu des cellules par rapport à un même caractère (par exemple « . »).
diff --git a/files/fr/web/html/element/td/index.md b/files/fr/web/html/element/td/index.md
index 35df89f043..aac4e47a66 100644
--- a/files/fr/web/html/element/td/index.md
+++ b/files/fr/web/html/element/td/index.md
@@ -9,227 +9,227 @@ tags:
   - Web
 translation_of: Web/HTML/Element/td
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;td&gt;</code></strong> définit une cellule d'un tableau qui contient des données. Cet élément fait partie du<em> modèle de tableau</em>.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/td.html","tabbed-taller")}}</div>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
-
-<dl>
- <dt>{{htmlattrdef("colspan")}}</dt>
- <dd>Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1, si la valeur est 0, la cellule s'étend jusqu'à la fin du  {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront interprétées comme valant la valeur par défaut (1).
- <div class="note"><p><strong>Note :</strong> En {{HTMLVersionInline(5)}} cet attribut ne peut valoir qu'un nombre strictement positif car <a href="https://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan">il ne doit pas être utilisé pour faire chevaucher des cellules</a>. Par ailleurs, Firefox est le seul navigateur supportant la valeur 0 définie par la spécification {{HTMLVersionInline(4.01)}}.</p></div>
- </dd>
- <dt>{{htmlattrdef("headers")}}</dt>
- <dd>Cet attribut est une liste de chaînes de caractères séparées par des espace. Chacune correspond à l'attribut <strong>id</strong> de l'élément {{HTMLElement("th")}} qui s'applique à la cellule courante.</dd>
- <dt>{{htmlattrdef("rowspan")}}</dt>
- <dd>Cet attribut contient un entier positif indiquant sur combien de lignes s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin de la section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} du tableau à laquelle appartient la cellule même si cette section est définie implicitement. Les valeurs supérieures à 65534 sont ramenées à 65534.</dd>
-</dl>
-
-<h3 id="Attributs_obsolètes">Attributs obsolètes</h3>
-
-<dl>
- <dt>{{htmlattrdef("abbr")}} {{obsolete_inline("html5")}}</dt>
- <dd><p>Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. Il faut dans ces cas introduire la description au sein de la cellule comme un élément {{HTMLElement("abbr")}} indépendant ou utiliser l'attribut <code><strong>title</strong></code> de la cellule pour représenter le contenu et la cellule elle-même pour représenter le contenu abrégé.</p></div>
- </dd>
- <dt>{{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
- <dd><p>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :</p>
- <ul>
-  <li><code>left </code>: le contenu de la cellule est alligné à gauche de la cellule</li>
-  <li><code>center</code> : le contenu de la cellule est centré horizontalement</li>
-  <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li>
-  <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li>
-  <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "td")}} et {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}.</li>
- </ul>
-
- <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p>
-
- <div class="note"><p><strong>Note :</strong> Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.</p>
-
- <ul>
-  <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément</li>
-  <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "td")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li>
- </ul>
- </div>
- </dd>
- <dt>{{htmlattrdef("axis")}} {{obsolete_inline("html5")}}</dt>
- <dd><p>Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.</p></div>
- </dd>
- <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
- <dd><p>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.</p>
- <table>
-  <tbody>
-   <tr>
-    <td> </td>
-    <td><code>black</code> = "#000000"</td>
-    <td> </td>
-    <td><code>green</code> = "#008000"</td>
-   </tr>
-   <tr>
-    <td> </td>
-    <td><code>silver</code> = "#C0C0C0"</td>
-    <td> </td>
-    <td><code>lime</code> = "#00FF00"</td>
-   </tr>
-   <tr>
-    <td> </td>
-    <td><code>gray</code> = "#808080"</td>
-    <td> </td>
-    <td><code>olive</code> = "#808000"</td>
-   </tr>
-   <tr>
-    <td> </td>
-    <td><code>white</code> = "#FFFFFF"</td>
-    <td> </td>
-    <td><code>yellow</code> = "#FFFF00"</td>
-   </tr>
-   <tr>
-    <td> </td>
-    <td><code>maroon</code> = "#800000"</td>
-    <td> </td>
-    <td><code>navy</code> = "#000080"</td>
-   </tr>
-   <tr>
-    <td> </td>
-    <td><code>red</code> = "#FF0000"</td>
-    <td> </td>
-    <td><code>blue</code> = "#0000FF"</td>
-   </tr>
-   <tr>
-    <td> </td>
-    <td><code>purple</code> = "#800080"</td>
-    <td> </td>
-    <td><code>teal</code> = "#008080"</td>
-   </tr>
-   <tr>
-    <td> </td>
-    <td><code>fuchsia</code> = "#FF00FF"</td>
-    <td> </td>
-    <td>
-     <p><code>aqua</code> = "#00FFFF"</p>
-    </td>
-   </tr>
-  </tbody>
- </table>
-
- <div class="note"><p><strong>Note :</strong> Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("td")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.</p></div>
- </dd>
- <dt>{{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
- <dd><p>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "td")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "td")}}, il faut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</p></div>
- </dd>
- <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
- <dd><p>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</p></div>
- </dd>
- <dt>{{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
- <dd><p>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :</p>
- <ul>
-  <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li>
-  <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li>
-  <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li>
-  <li><code>top</code> qui placera le texte au plus haut de la cellule.</li>
- </ul>
-
- <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</p></div>
- </dd>
- <dt>{{htmlattrdef("width")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}</dt>
- <dd><p>Cet attribut est utilisé afin de définir la largeur recommandée pour une cellule. Les propriétés <code><a href="/fr/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a></code> et <code><a href="/fr/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a></code> peuvent être utilisées pour ajouter un espace supplémentaire et la largeur de l'élément {{HTMLElement("col")}} peut avoir un effet. En général, si la largeur d'une colonne est trop étroite pour afficher une cellule correctement, elle sera élargie lors de l'affichage.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("width")}} doit être utilisée à la place.</p></div>
- </dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Prénom&lt;/th&gt;&lt;th&gt;Nom&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Jean&lt;/td&gt; &lt;td&gt;Biche&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Marcel&lt;/td&gt; &lt;td&gt;Patulacci&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","200")}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Pour plus d'exemples, voir la page {{HTMLElement("table")}}.</p>
-</div>
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+{{HTMLRef}}
+
+L'élément HTML **`<td>`** définit une cellule d'un tableau qui contient des données. Cet élément fait partie du _modèle de tableau_.
+
+{{EmbedInteractiveExample("pages/tabbed/td.html","tabbed-taller")}}
+
+## Attributs
+
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
+
+- {{htmlattrdef("colspan")}}
+
+  - : Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1, si la valeur est 0, la cellule s'étend jusqu'à la fin du  {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront interprétées comme valant la valeur par défaut (1).
+
+    > **Note :** En {{HTMLVersionInline(5)}} cet attribut ne peut valoir qu'un nombre strictement positif car [il ne doit pas être utilisé pour faire chevaucher des cellules](https://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan). Par ailleurs, Firefox est le seul navigateur supportant la valeur 0 définie par la spécification {{HTMLVersionInline(4.01)}}.
+
+- {{htmlattrdef("headers")}}
+  - : Cet attribut est une liste de chaînes de caractères séparées par des espace. Chacune correspond à l'attribut **id** de l'élément {{HTMLElement("th")}} qui s'applique à la cellule courante.
+- {{htmlattrdef("rowspan")}}
+  - : Cet attribut contient un entier positif indiquant sur combien de lignes s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin de la section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} du tableau à laquelle appartient la cellule même si cette section est définie implicitement. Les valeurs supérieures à 65534 sont ramenées à 65534.
+
+### Attributs obsolètes
 
-<table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td>Racine de section.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément est immédiatement suivi par  un élément {{HTMLElement("th")}} ou un élément {{HTMLElement("td")}} ou s'il n'y a plus aucune donnée dans l'élément parent.</td>
-  </tr>
+- {{htmlattrdef("abbr")}} {{obsolete_inline("html5")}}
+
+  - : Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même.
+
+    > **Note :** Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. Il faut dans ces cas introduire la description au sein de la cellule comme un élément {{HTMLElement("abbr")}} indépendant ou utiliser l'attribut **`title`** de la cellule pour représenter le contenu et la cellule elle-même pour représenter le contenu abrégé.
+
+- {{htmlattrdef("align")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}
+
+  - : Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :
+
+    - `left `: le contenu de la cellule est alligné à gauche de la cellule
+    - `center` : le contenu de la cellule est centré horizontalement
+    - `right` : le contenu de la cellule est aligné à droite de la cellule
+    - `justify` : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié
+    - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "td")}} et {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}.
+
+    Si cet attribut n'est pas renseigné, la valeur `left` est prise par défaut.
+
+    > **Note :** Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.
+    >
+    > - Pour réaliser les mêmes effets que les valeurs `left`, `center`, `right` ou `justify`, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément
+    > - Pour réaliser le même effet qu'avec la valeur `char`. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "td")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.
+
+- {{htmlattrdef("axis")}} {{obsolete_inline("html5")}}
+
+  - : Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.
+
+    > **Note :** Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.
+
+- {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
+
+  - : Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le [sRGB](https://www.w3.org/Graphics/Color/sRGB). Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.
+
+    <table>
+      <tbody>
+        <tr>
+          <td> </td>
+          <td><code>black</code> = "#000000"</td>
+          <td> </td>
+          <td><code>green</code> = "#008000"</td>
+        </tr>
+        <tr>
+          <td> </td>
+          <td><code>silver</code> = "#C0C0C0"</td>
+          <td> </td>
+          <td><code>lime</code> = "#00FF00"</td>
+        </tr>
+        <tr>
+          <td> </td>
+          <td><code>gray</code> = "#808080"</td>
+          <td> </td>
+          <td><code>olive</code> = "#808000"</td>
+        </tr>
+        <tr>
+          <td> </td>
+          <td><code>white</code> = "#FFFFFF"</td>
+          <td> </td>
+          <td><code>yellow</code> = "#FFFF00"</td>
+        </tr>
+        <tr>
+          <td> </td>
+          <td><code>maroon</code> = "#800000"</td>
+          <td> </td>
+          <td><code>navy</code> = "#000080"</td>
+        </tr>
+        <tr>
+          <td> </td>
+          <td><code>red</code> = "#FF0000"</td>
+          <td> </td>
+          <td><code>blue</code> = "#0000FF"</td>
+        </tr>
+        <tr>
+          <td> </td>
+          <td><code>purple</code> = "#800080"</td>
+          <td> </td>
+          <td><code>teal</code> = "#008080"</td>
+        </tr>
+        <tr>
+          <td> </td>
+          <td><code>fuchsia</code> = "#FF00FF"</td>
+          <td> </td>
+          <td>
+            <p><code>aqua</code> = "#00FFFF"</p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    > **Note :** Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("td")}} doit être mis en forme grâce au [CSS](/fr/docs/CSS). Pour fournir un effet semblable à celui achevé par l'attribut **`bgcolor`**, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.
+
+- {{htmlattrdef("char")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}
+
+  - : Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "td")}} ne vaut pas `char`, l'attribut est ignoré.
+
+    > **Note :** Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "td")}}, il faut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.
+
+- {{htmlattrdef("charoff")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}
+
+  - : Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut **char** à appliquer au contenu des cellules.
+
+    > **Note :** Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.
+
+- {{htmlattrdef("valign")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}
+
+  - : Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
+
+    - `baseline` qui alignera le texte à la ligne la plus basse possible en utilisant la [ligne de base](https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29) des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur `bottom`.
+    - `bottom` qui placera le texte au plus bas de la cellule
+    - `middle` qui centrera verticalement le texte dans la cellule
+    - `top` qui placera le texte au plus haut de la cellule.
+
+    > **Note :** Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.
+
+- {{htmlattrdef("width")}} {{Deprecated_inline("html4.01")}}, {{obsolete_inline("html5")}}
+
+  - : Cet attribut est utilisé afin de définir la largeur recommandée pour une cellule. Les propriétés [`cellspacing`](/fr/docs/Web/API/HTMLTableElement/cellSpacing) et [`cellpadding`](/fr/docs/Web/API/HTMLTableElement/cellPadding) peuvent être utilisées pour ajouter un espace supplémentaire et la largeur de l'élément {{HTMLElement("col")}} peut avoir un effet. En général, si la largeur d'une colonne est trop étroite pour afficher une cellule correctement, elle sera élargie lors de l'affichage.
+
+    > **Note :** Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("width")}} doit être utilisée à la place.
+
+## Exemples
+
+### HTML
+
+```html
+<table>
   <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément {{HTMLElement("tr")}}.</td>
+    <th>Prénom</th><th>Nom</th>
   </tr>
   <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
+    <td>Jean</td> <td>Biche</td>
   </tr>
   <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLTableDataCellElement")}}</td>
+    <td>Marcel</td> <td>Patulacci</td>
   </tr>
- </tbody>
 </table>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+### Résultat
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
+{{EmbedLiveSample("Exemples","100%","200")}}
+
+> **Note :** Pour plus d'exemples, voir la page {{HTMLElement("table")}}.
+
+## Résumé technique
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Racine de section.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        La balise de début est obligatoire. La balise de fin peut être absente
+        si l'élément est immédiatement suivi par  un élément
+        {{HTMLElement("th")}} ou un élément {{HTMLElement("td")}}
+        ou s'il n'y a plus aucune donnée dans l'élément parent.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>Un élément {{HTMLElement("tr")}}.</td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLTableDataCellElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}}     | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}} | {{Spec2('HTML5 W3C')}}     |              |
+
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.td")}}</p>
+{{Compat("html.elements.td")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
-</ul>
+- Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.
diff --git a/files/fr/web/html/element/template/index.md b/files/fr/web/html/element/template/index.md
index de36c2e5ef..f91e5b71bf 100644
--- a/files/fr/web/html/element/template/index.md
+++ b/files/fr/web/html/element/template/index.md
@@ -8,47 +8,49 @@ tags:
   - Web
 translation_of: Web/HTML/Element/template
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;template&gt;</code></strong> (ou <em><strong>Template Content</strong></em> ou modèle de contenu) est un mécanisme utilisé pour stocker du contenu HTML (côté client) qui ne doit pas être affiché lors du chargement de la page mais qui peut être instancié et affiché par la suite grâce à un script JavaScript.</p>
+L'élément HTML **`<template>`** (ou **_Template Content_** ou modèle de contenu) est un mécanisme utilisé pour stocker du contenu HTML (côté client) qui ne doit pas être affiché lors du chargement de la page mais qui peut être instancié et affiché par la suite grâce à un script JavaScript.
 
-<p>Cet élément est un fragment de contenu mis de côté pour être utilisé par la suite dans le document. Lorsque le moteur traite le contenu de l'élément <code>&lt;template&gt;</code> lors du chargement de la page, il ne fait que vérifier la validité du contenu, ce dernier n'est pas affiché.</p>
+Cet élément est un fragment de contenu mis de côté pour être utilisé par la suite dans le document. Lorsque le moteur traite le contenu de l'élément `<template>` lors du chargement de la page, il ne fait que vérifier la validité du contenu, ce dernier n'est pas affiché.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;table id="producttable"&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;td&gt;UPC_Code&lt;/td&gt;
-      &lt;td&gt;Product_Name&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;!-- existing data could optionally be included here --&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
+```html
+<table id="producttable">
+  <thead>
+    <tr>
+      <td>UPC_Code</td>
+      <td>Product_Name</td>
+    </tr>
+  </thead>
+  <tbody>
+    <!-- existing data could optionally be included here -->
+  </tbody>
+</table>
 
-&lt;template id="productrow"&gt;
-  &lt;tr&gt;
-    &lt;td class="record"&gt;&lt;/td&gt;
-    &lt;td&gt;&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/template&gt;
-</pre>
+<template id="productrow">
+  <tr>
+    <td class="record"></td>
+    <td></td>
+  </tr>
+</template>
+```
 
-<p>Au début, on a un tableau HTML pour lequel on insèrera du contenu plus tard grâce à l'aide d'un script JavaScript. Ensuite, on a le <em>template</em> qui décrit la structure du fragment HTML représentant une ligne de tableau.</p>
+Au début, on a un tableau HTML pour lequel on insèrera du contenu plus tard grâce à l'aide d'un script JavaScript. Ensuite, on a le _template_ qui décrit la structure du fragment HTML représentant une ligne de tableau.
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<p>Avec le tableau créé et le template défini, on utilise JavaScript pour insérer des lignes dans le tableau dont chacune est construite à partir du <em>template</em>.</p>
+Avec le tableau créé et le template défini, on utilise JavaScript pour insérer des lignes dans le tableau dont chacune est construite à partir du _template_.
 
-<pre class="brush:js;">// On vérifie si le navigateur prend en charge
+```js
+// On vérifie si le navigateur prend en charge
 // l'élément HTML template en vérifiant la présence
 // de l'attribut content pour l'élément template.
 if ("content" in document.createElement("template")) {
@@ -78,84 +80,101 @@ if ("content" in document.createElement("template")) {
   // Une autre méthode pour ajouter les lignes
   // car l'élément HTML n'est pas pris en charge.
 }
-</pre>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>Le résultat correspond au tableau HTML original avec deux lignes supplémentaires qui ont été ajoutées grâce au code JavaScript :</p>
+Le résultat correspond au tableau HTML original avec deux lignes supplémentaires qui ont été ajoutées grâce au code JavaScript :
 
-<pre class="brush: css hidden">table {
+```css hidden
+table {
   background: #000;
 }
 table td {
   background: #fff;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("Exemples", 500, 120)}}</p>
+{{EmbedLiveSample("Exemples", 500, 120)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es">Contenu de méta-données</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Éléments_supports_de_script">élément destiné aux scripts</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Pas de restriction.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es">Contenu de méta-données</a>, du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>, ou <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Éléments_supports_de_script">des éléments destinés aux scripts</a>. L'élément {{HTMLElement("colgroup")}} est également autorisé s'il n'a pas l'attribut {{htmlattrxref("span", "colgroup")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLTemplateElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es"
+          >Contenu de méta-données</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >,
+        <a
+          href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Éléments_supports_de_script"
+          >élément destiné aux scripts</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Pas de restriction.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a
+          href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_de_m%C3%A9ta-donn%C3%A9es"
+          >Contenu de méta-données</a
+        >, du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >, ou
+        <a
+          href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Éléments_supports_de_script"
+          >des éléments destinés aux scripts</a
+        >. L'élément {{HTMLElement("colgroup")}} est également autorisé
+        s'il n'a pas l'attribut
+        {{htmlattrxref("span", "colgroup")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLTemplateElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','scripting.html#the-template-element','template element')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                             | Commentaires         |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG','scripting.html#the-template-element','template element')}} | {{Spec2('HTML WHATWG')}} |                      |
+| {{SpecName('HTML5 W3C','/scripting-1.html#the-template-element','template element')}} | {{Spec2('HTML5 W3C')}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.template")}}</p>
+{{Compat("html.elements.template")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("slot")}}</li>
- <li><a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Utiliser les gabarits et les emplacements (<em>templates and slots</em>)</a></li>
- <li>{{HTMLElement("shadow")}} {{obsolete_inline}}</li>
-</ul>
+- {{HTMLElement("slot")}}
+- [Utiliser les gabarits et les emplacements (_templates and slots_)](/fr/docs/Web/Web_Components/Using_templates_and_slots)
+- {{HTMLElement("shadow")}} {{obsolete_inline}}
diff --git a/files/fr/web/html/element/textarea/index.md b/files/fr/web/html/element/textarea/index.md
index 21de08f3c6..4c38da80da 100644
--- a/files/fr/web/html/element/textarea/index.md
+++ b/files/fr/web/html/element/textarea/index.md
@@ -9,232 +9,236 @@ tags:
   - Web
 translation_of: Web/HTML/Element/textarea
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;textarea&gt;</code></strong> représente un contrôle qui permet d'éditer du texte sur plusieurs lignes.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}</div>
-
-<p>Dans les exemples ci-avant, on peut voir plusieurs fonctionnalités de <code>&lt;textarea&gt;</code>. Le premier exemple illustre l'utilisation la plus simple avec seul un attribut <code>id</code> qui permet d'associer l'élément <code>&lt;textarea&gt;</code> avec un élément {{HTMLElement("label")}} à des fins d'accessibilité ainsi qu'un attribut <code>name</code> qui permet de nommer la donnée qui sera envoyée au serveur lors de l'envoi du formulaire.</p>
-
-<p>Le deuxième exemple détaille des fonctionnalités plus complexes :</p>
-
-<ul>
- <li>Les attributs <code>rows</code> et <code>cols</code> permettent de définir la taille exacte qui doit être occupée par l'élément <code>&lt;textarea&gt;</code>. Les navigateurs pouvant être différents, c'est une bonne idée que d'utiliser ces attributs pour garantir une certaine homogénéité.</li>
- <li><code>maxlength</code> définit le nombre maximal de caractères qui peuvent être saisis dans l'élément <code>&lt;textarea&gt;</code>. Il est également possible de définir une taile minimale avec l'attribut <code>minlength</code> et d'utiliser l'attribut <code>required</code> afin de bloquer l'envoi du formulaire si aucune valeur n'est saisie. Cela permet une validation basique (on ne peut pas utiliser ici d'expressions rationnelles comme le permet l'attribut <code>pattern</code> sur les éléments {{HTMLElement("input")}}).</li>
- <li><code>wrap</code> indique la gestion des retours à la ligne et la façon d'afficher le texte saisi lorsque celui-ci atteint le bord de la zone du <code>&lt;textarea&gt;</code></li>
- <li>Pour prévoir un contenu par défaut, il faut inscrire le texte entre les balises de l'élément. <code>&lt;textarea&gt;</code> ne prend pas en charge l'attribut <code>value</code>.</li>
-</ul>
-
-<p>L'élément <code>&lt;textarea&gt;</code> gère plusieurs attributs utilisés par les éléments <code>&lt;input&gt;</code> : <code>autocomplete</code>, <code>autofocus</code>, <code>disabled</code>, <code>placeholder</code>, <code>readonly</code> et <code>required</code>.</p>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>À l'instar des autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
-
-<dl>
- <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
- <dd>Cet attribut est non standard, pris en charge par WebKit sur iOS, et contrôle la façon dont le texte saisi doit automatiquement être mis en majuscules. Les valeurs disponibles spour iOS 5 et les versions supérieures sont :
- <ul>
-  <li><code>none</code> : la mise en majuscules est complètement désactivée</li>
-  <li><code>sentences</code> : la première lettre des phrases est automatiquement mise en majuscule</li>
-  <li><code>words</code> : la première lettre de chaque mot est automatiquement mise en majuscule</li>
-  <li><code>characters</code> : tous les caractères sont transformés en majuscules</li>
-  <li><code>on</code> : {{deprecated_inline}} valeur dépréciée depuis iOS 5 et qui permettait d'activer la mise en majuscule automatique.</li>
-  <li><code>off</code> : {{deprecated_inline}} valeur dépréciée depuis iOS 5 et qui permettait de désactiver la mise en majuscule automatique.</li>
- </ul>
- </dd>
- <dt>{{htmlattrdef("autocomplete")}}</dt>
- <dd>Cet attribut indique si la valeur saisie doit automatiquement être complétée par le navigateur. Cet attribut à valeur contrainte peut prendre l'une de ces deux valeurs :
- <ul>
-  <li><code>off</code> : l'utilisateur doit explicitement saisir une valeur dans ce champ à chaque fois qu'il l'utilise ou le document fournit son propre mécanisme d'auto-complétion. Le navigateur ne complète pas le texte saisi.</li>
-  <li><code>on</code> : le navigateur peut compléter la saisie de l'utilisateur en fonction de ce que l'utilisateur a déjà saisi précédemment sur ce champ.</li>
- </ul>
-
- <p>Si l'attribut <code>autocomplete</code> n'est pas indiqué à même l'élément <code>&lt;textarea&gt;</code>, alors le navigateur utilise la valeur d'<code>autocomplete</code> pour le formulaire rattaché à cet élément (c'est-à-dire son élément ancêtre <code>&lt;form&gt;</code> ou le formulaire correspond à l'identifiant fourni par l'attribut <code>form</code>). Pour plus d'informations, se référer à la documentation de l'attribut {{htmlattrxref("autocomplete", "form")}} de l'élément {{HTMLElement("form")}}.</p>
- </dd>
- <dt>{{htmlattrdef("autofocus")}}</dt>
- <dd>Cet attribut permet d'indiquer que ce contrôle doit recevoir le focus au chargement de la page. Seul un élément de formulaire au sein d'un document peut avoir cet attribut déclaré.</dd>
- <dt>{{htmlattrdef("cols")}}</dt>
- <dd>La largeur visible du contrôle de saisie, exprimée en largeur moyenne de caractères. La valeur utilisée doit être un entier positif. La valeur par défaut de cet attribut est 20.</dd>
- <dt>{{htmlattrdef("disabled")}}</dt>
- <dd>Cet attribut booléen indique que le contrôle est désactivé et que l'utilisateur ne peut pas interagir avec ce contrôle. Si cet attribut n'est pas utilisé, le contrôle héritera de l'état de son élément parent (par exemple de son éventuel élément parent {{HTMLElement("fieldset")}}). S'il n'existe pas d'élément englobant pour lequel l'attribut <code>disabled</code> est utilisé, le contrôle est alors actif.</dd>
- <dt>{{htmlattrdef("form")}}</dt>
- <dd>L'élément de formulaire auquel l'élément <code>&lt;textarea&gt;</code> est rattaché. La valeur de cet attribut doit être l'identifiant (la valeur de l'attribut <code>id</code>) d'un élément {{HTMLElement("form")}} du même document. Si cet attribut n'est pas défini, l'élément <code>&lt;textarea&gt;</code> doit être un descendant d'un élément <code>&lt;form&gt;</code>. Cet attribut permet notamment de placer des éléments <code>&lt;textarea&gt;</code> où qu'on le veuille dans le document et pas uniquement comme des descendants des éléments de formulaire.</dd>
- <dt>{{htmlattrdef("maxlength")}}</dt>
- <dd>Le nombre maximum de caractères, exprimé en codets Unicode, que l'utilisateur peut saisir. Si cet attribut n'est pas utilisé, l'utilisateur peut saisir un nombre illimité de caractères..</dd>
- <dt>{{htmlattrdef("minlength")}}</dt>
- <dd>Le nombre minimal que l'utilisateur doit saisir dans le champ, exprimé en codets Unicode.</dd>
- <dt>{{htmlattrdef("name")}}</dt>
- <dd>Le nom associé au contrôle.</dd>
- <dt>{{htmlattrdef("placeholder")}}</dt>
- <dd>Une indication fournie à l'utilisateur sur la valeur qui peut être saisie dans le contrôle. Les retours à la ligne contenus dans la valeur de l'attribut doivent être interprétés comme des sauts de ligne lorsque l'indication est affichée pour l'utilisateur. Attention, les indications servent uniquement à indiquer le type de donnée qui peut être saisi dans un champ, elles n'ont pas à remplacer un élément {{HTMLElement("label")}}. (cf. {{HTMLElement("input")}} pour plus d'explications).</dd>
- <dt>{{htmlattrdef("readonly")}}</dt>
- <dd>Cet attribut booléen indique que l'utilisateur ne peut pas modifier la valeur du contrôle. À la différence de l'attribut <code>disabled</code>, <code>readonly</code> n'empêche pas de cliquer ou de sélectionner le contrôle. La valeur d'un contrôle en lecture seule est tout de même envoyé avec les données du formulaire.</dd>
- <dt>{{htmlattrdef("required")}}</dt>
- <dd>Cet attribut indique que l'utilisateur doit nécessairement saisir une valeur afin de pouvoir envoyer le formulaire.</dd>
- <dt>{{htmlattrdef("rows")}}</dt>
- <dd>Le nombre de lignes de texte visibles pour le contrôle.</dd>
- <dt>{{htmlattrdef("spellcheck")}}</dt>
- <dd>Lorsque cet attribut vaut <code>true</code>, cela indique que la vérification orthographique et grammaticale doit être activée. La valeur <code>default</code> indique que l'élément doit suivre le comportement par défaut, éventuellement basé sur la valeur de l'attribut <code>spellcheck</code> de l'élément parent. Si cet attribut vaut <code>false</code>, le texte de l'élément ne doit pas être contrôlé.</dd>
- <dt>{{htmlattrdef("wrap")}}</dt>
- <dd>Cet attribut à valeur contrainte indique la façon dont les retours à la ligne automatiques sont utilisés. Les valeurs possibles pour cet attribut sont :
- <ul>
-  <li><code>hard</code> : le navigateur insère automatiquement des sauts de ligne (CR+LF) afin que chaque ligne ne soit pas plus longue que la largeur du contrôle. L'attribut <code>cols</code> doit alors être défini.</li>
-  <li><code>soft</code> : le navigateur s'assure que tous les sauts de lignes soient représentés par une paire CR+LF mais il n'ajoute pas de sauts de ligne supplémentaires. C'est la valeur par défaut pour cet attribut.</li>
-  <li><code>off</code> : {{non-standard_inline}}, proche de <code>soft</code> mais on a la règle CSS <code>white-space: pre</code> et les lignes qui dépassent <code>cols</code> ne sont pas ramenées à la ligne. Si elles dépassent, on peut faire défiler la zone d'édition horizontalement.</li>
- </ul>
- </dd>
-</dl>
-
-<h2 id="Interaction_avec_CSS">Interaction avec CSS</h2>
-
-<p>Pour CSS, un élément <code>&lt;textarea&gt;</code> est <a href="/fr/docs/Web/CSS/Élément_remplacé">un élément remplacé</a> qui possède des dimensions intrinsèques (comme une image matricielle). La valeur initiale de la propriété {{cssxref("display")}} pour cet élément est <code>block</code>.</p>
-
-<p><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Le guide sur la mise en forme des formulaires HTML</a> fournit différentes indications pour mettre en forme les éléments <code>&lt;textarea&gt;</code>.</p>
-
-<h3 id="Incohérences_quant_à_la_ligne_de_base">Incohérences quant à la ligne de base</h3>
-
-<p>La spécification HTML ne définit pas l'emplacement de la ligne de base pour un élément <code>&lt;textarea&gt;</code>. Aussi, les différents navigateurs utilisent différentes positions. Pour Gecko, la ligne de base d'un élément <code>&lt;textarea&gt;</code> est définie sur la ligne de base de la première ligne du texte de <code>&lt;textarea&gt;</code>. Pour un autre navigateur, elle pourrait être définie par rapport au bas de la boîte de l'élément <code>&lt;textarea&gt;</code>. Pour ces raisons, on évitera d'utiliser {{cssxref("vertical-align")}}<code>: baseline</code> sur cet élément car le comportement serait imprévisible.</p>
-
-<h3 id="Contrôler_le_caractère_redimensionnable">Contrôler le caractère redimensionnable</h3>
-
-<p>Dans la plupart des navigateurs, il est possible de redimensionner les éléments <code>&lt;textarea&gt;</code> grâce au coin inférieur droit. Pour désactiver ce redimensionnement, on peut utiliser la propriété CSS {{cssxref("resize")}} avec la valeur <code>none</code> :</p>
-
-<pre class="brush: html">textarea {
+{{HTMLRef}}
+
+L'élément HTML **`<textarea>`** représente un contrôle qui permet d'éditer du texte sur plusieurs lignes.
+
+{{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}
+
+Dans les exemples ci-avant, on peut voir plusieurs fonctionnalités de `<textarea>`. Le premier exemple illustre l'utilisation la plus simple avec seul un attribut `id` qui permet d'associer l'élément `<textarea>` avec un élément {{HTMLElement("label")}} à des fins d'accessibilité ainsi qu'un attribut `name` qui permet de nommer la donnée qui sera envoyée au serveur lors de l'envoi du formulaire.
+
+Le deuxième exemple détaille des fonctionnalités plus complexes :
+
+- Les attributs `rows` et `cols` permettent de définir la taille exacte qui doit être occupée par l'élément `<textarea>`. Les navigateurs pouvant être différents, c'est une bonne idée que d'utiliser ces attributs pour garantir une certaine homogénéité.
+- `maxlength` définit le nombre maximal de caractères qui peuvent être saisis dans l'élément `<textarea>`. Il est également possible de définir une taile minimale avec l'attribut `minlength` et d'utiliser l'attribut `required` afin de bloquer l'envoi du formulaire si aucune valeur n'est saisie. Cela permet une validation basique (on ne peut pas utiliser ici d'expressions rationnelles comme le permet l'attribut `pattern` sur les éléments {{HTMLElement("input")}}).
+- `wrap` indique la gestion des retours à la ligne et la façon d'afficher le texte saisi lorsque celui-ci atteint le bord de la zone du `<textarea>`
+- Pour prévoir un contenu par défaut, il faut inscrire le texte entre les balises de l'élément. `<textarea>` ne prend pas en charge l'attribut `value`.
+
+L'élément `<textarea>` gère plusieurs attributs utilisés par les éléments `<input>` : `autocomplete`, `autofocus`, `disabled`, `placeholder`, `readonly` et `required`.
+
+## Attributs
+
+À l'instar des autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
+
+- {{htmlattrdef("autocapitalize")}} {{non-standard_inline}}
+
+  - : Cet attribut est non standard, pris en charge par WebKit sur iOS, et contrôle la façon dont le texte saisi doit automatiquement être mis en majuscules. Les valeurs disponibles spour iOS 5 et les versions supérieures sont :
+
+    - `none` : la mise en majuscules est complètement désactivée
+    - `sentences` : la première lettre des phrases est automatiquement mise en majuscule
+    - `words` : la première lettre de chaque mot est automatiquement mise en majuscule
+    - `characters` : tous les caractères sont transformés en majuscules
+    - `on` : {{deprecated_inline}} valeur dépréciée depuis iOS 5 et qui permettait d'activer la mise en majuscule automatique.
+    - `off` : {{deprecated_inline}} valeur dépréciée depuis iOS 5 et qui permettait de désactiver la mise en majuscule automatique.
+
+- {{htmlattrdef("autocomplete")}}
+
+  - : Cet attribut indique si la valeur saisie doit automatiquement être complétée par le navigateur. Cet attribut à valeur contrainte peut prendre l'une de ces deux valeurs :
+
+    - `off` : l'utilisateur doit explicitement saisir une valeur dans ce champ à chaque fois qu'il l'utilise ou le document fournit son propre mécanisme d'auto-complétion. Le navigateur ne complète pas le texte saisi.
+    - `on` : le navigateur peut compléter la saisie de l'utilisateur en fonction de ce que l'utilisateur a déjà saisi précédemment sur ce champ.
+
+    Si l'attribut `autocomplete` n'est pas indiqué à même l'élément `<textarea>`, alors le navigateur utilise la valeur d'`autocomplete` pour le formulaire rattaché à cet élément (c'est-à-dire son élément ancêtre `<form>` ou le formulaire correspond à l'identifiant fourni par l'attribut `form`). Pour plus d'informations, se référer à la documentation de l'attribut {{htmlattrxref("autocomplete", "form")}} de l'élément {{HTMLElement("form")}}.
+
+- {{htmlattrdef("autofocus")}}
+  - : Cet attribut permet d'indiquer que ce contrôle doit recevoir le focus au chargement de la page. Seul un élément de formulaire au sein d'un document peut avoir cet attribut déclaré.
+- {{htmlattrdef("cols")}}
+  - : La largeur visible du contrôle de saisie, exprimée en largeur moyenne de caractères. La valeur utilisée doit être un entier positif. La valeur par défaut de cet attribut est 20.
+- {{htmlattrdef("disabled")}}
+  - : Cet attribut booléen indique que le contrôle est désactivé et que l'utilisateur ne peut pas interagir avec ce contrôle. Si cet attribut n'est pas utilisé, le contrôle héritera de l'état de son élément parent (par exemple de son éventuel élément parent {{HTMLElement("fieldset")}}). S'il n'existe pas d'élément englobant pour lequel l'attribut `disabled` est utilisé, le contrôle est alors actif.
+- {{htmlattrdef("form")}}
+  - : L'élément de formulaire auquel l'élément `<textarea>` est rattaché. La valeur de cet attribut doit être l'identifiant (la valeur de l'attribut `id`) d'un élément {{HTMLElement("form")}} du même document. Si cet attribut n'est pas défini, l'élément `<textarea>` doit être un descendant d'un élément `<form>`. Cet attribut permet notamment de placer des éléments `<textarea>` où qu'on le veuille dans le document et pas uniquement comme des descendants des éléments de formulaire.
+- {{htmlattrdef("maxlength")}}
+  - : Le nombre maximum de caractères, exprimé en codets Unicode, que l'utilisateur peut saisir. Si cet attribut n'est pas utilisé, l'utilisateur peut saisir un nombre illimité de caractères..
+- {{htmlattrdef("minlength")}}
+  - : Le nombre minimal que l'utilisateur doit saisir dans le champ, exprimé en codets Unicode.
+- {{htmlattrdef("name")}}
+  - : Le nom associé au contrôle.
+- {{htmlattrdef("placeholder")}}
+  - : Une indication fournie à l'utilisateur sur la valeur qui peut être saisie dans le contrôle. Les retours à la ligne contenus dans la valeur de l'attribut doivent être interprétés comme des sauts de ligne lorsque l'indication est affichée pour l'utilisateur. Attention, les indications servent uniquement à indiquer le type de donnée qui peut être saisi dans un champ, elles n'ont pas à remplacer un élément {{HTMLElement("label")}}. (cf. {{HTMLElement("input")}} pour plus d'explications).
+- {{htmlattrdef("readonly")}}
+  - : Cet attribut booléen indique que l'utilisateur ne peut pas modifier la valeur du contrôle. À la différence de l'attribut `disabled`, `readonly` n'empêche pas de cliquer ou de sélectionner le contrôle. La valeur d'un contrôle en lecture seule est tout de même envoyé avec les données du formulaire.
+- {{htmlattrdef("required")}}
+  - : Cet attribut indique que l'utilisateur doit nécessairement saisir une valeur afin de pouvoir envoyer le formulaire.
+- {{htmlattrdef("rows")}}
+  - : Le nombre de lignes de texte visibles pour le contrôle.
+- {{htmlattrdef("spellcheck")}}
+  - : Lorsque cet attribut vaut `true`, cela indique que la vérification orthographique et grammaticale doit être activée. La valeur `default` indique que l'élément doit suivre le comportement par défaut, éventuellement basé sur la valeur de l'attribut `spellcheck` de l'élément parent. Si cet attribut vaut `false`, le texte de l'élément ne doit pas être contrôlé.
+- {{htmlattrdef("wrap")}}
+
+  - : Cet attribut à valeur contrainte indique la façon dont les retours à la ligne automatiques sont utilisés. Les valeurs possibles pour cet attribut sont :
+
+    - `hard` : le navigateur insère automatiquement des sauts de ligne (CR+LF) afin que chaque ligne ne soit pas plus longue que la largeur du contrôle. L'attribut `cols` doit alors être défini.
+    - `soft` : le navigateur s'assure que tous les sauts de lignes soient représentés par une paire CR+LF mais il n'ajoute pas de sauts de ligne supplémentaires. C'est la valeur par défaut pour cet attribut.
+    - `off` : {{non-standard_inline}}, proche de `soft` mais on a la règle CSS `white-space: pre` et les lignes qui dépassent `cols` ne sont pas ramenées à la ligne. Si elles dépassent, on peut faire défiler la zone d'édition horizontalement.
+
+## Interaction avec CSS
+
+Pour CSS, un élément `<textarea>` est [un élément remplacé](/fr/docs/Web/CSS/Élément_remplacé) qui possède des dimensions intrinsèques (comme une image matricielle). La valeur initiale de la propriété {{cssxref("display")}} pour cet élément est `block`.
+
+[Le guide sur la mise en forme des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML) fournit différentes indications pour mettre en forme les éléments `<textarea>`.
+
+### Incohérences quant à la ligne de base
+
+La spécification HTML ne définit pas l'emplacement de la ligne de base pour un élément `<textarea>`. Aussi, les différents navigateurs utilisent différentes positions. Pour Gecko, la ligne de base d'un élément `<textarea>` est définie sur la ligne de base de la première ligne du texte de `<textarea>`. Pour un autre navigateur, elle pourrait être définie par rapport au bas de la boîte de l'élément `<textarea>`. Pour ces raisons, on évitera d'utiliser {{cssxref("vertical-align")}}`: baseline` sur cet élément car le comportement serait imprévisible.
+
+### Contrôler le caractère redimensionnable
+
+Dans la plupart des navigateurs, il est possible de redimensionner les éléments `<textarea>` grâce au coin inférieur droit. Pour désactiver ce redimensionnement, on peut utiliser la propriété CSS {{cssxref("resize")}} avec la valeur `none` :
+
+```html
+textarea {
   resize: none;
 }
-</pre>
+```
 
-<h3 id="Mettre_en_forme_les_valeurs_valides_et_invalides">Mettre en forme les valeurs valides et invalides</h3>
+### Mettre en forme les valeurs valides et invalides
 
-<p>Les valeurs valides et invalides saisies dans un élément <code>&lt;textarea&gt;</code> (par exemple celles qui ne respectent pas le nombre de caractères défini par <code>minlength</code> et <code>maxlength</code> ou quand la valeur est absente alors que l'attribut <code>required</code> est présent) peuvent être mise en forme grâce aux pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}}. Ainsi, on peut définir une bordure différente selon que la valeur saisie est valide ou invalide :</p>
+Les valeurs valides et invalides saisies dans un élément `<textarea>` (par exemple celles qui ne respectent pas le nombre de caractères défini par `minlength` et `maxlength` ou quand la valeur est absente alors que l'attribut `required` est présent) peuvent être mise en forme grâce aux pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}}. Ainsi, on peut définir une bordure différente selon que la valeur saisie est valide ou invalide :
 
-<pre class="brush: css">textarea:invalid {
+```css
+textarea:invalid {
   border: 2px dashed red;
 }
 
 textarea:valid {
   border: 2px solid lime;
-}</pre>
+}
+```
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<p>L'exemple qui suit illustre une configuration simple avec un nombre donné de lignes et de colonnes et affiche un contenu par défaut.</p>
+L'exemple qui suit illustre une configuration simple avec un nombre donné de lignes et de colonnes et affiche un contenu par défaut.
 
-<pre class="brush: html">&lt;textarea name="textarea"
-   rows="10" cols="50"&gt;Vous pouvez écrire ici.&lt;/textarea&gt;</pre>
+```html
+<textarea name="textarea"
+   rows="10" cols="50">Vous pouvez écrire ici.</textarea>
+```
 
-<p>{{EmbedLiveSample('Exemple_simple','600','150')}}</p>
+{{EmbedLiveSample('Exemple_simple','600','150')}}
 
-<h3 id="Longueur_minimale_et_longueur_maximale">Longueur minimale et longueur maximale</h3>
+### Longueur minimale et longueur maximale
 
-<p>Cet exemple fixe un nombre de caractère minimal et maximal. Vous pouvez essayer de saisir un texte de moins de 10 caractères ou de plus de 30 caractères.</p>
+Cet exemple fixe un nombre de caractère minimal et maximal. Vous pouvez essayer de saisir un texte de moins de 10 caractères ou de plus de 30 caractères.
 
-<pre class="brush: html">&lt;textarea name="textarea"
+```html
+<textarea name="textarea"
    rows="5" cols="30"
-   minlength="10" maxlength="30"&gt;Vous pouvez écrire ici.&lt;/textarea&gt;</pre>
+   minlength="10" maxlength="30">Vous pouvez écrire ici.</textarea>
+```
 
-<p>{{EmbedLiveSample('Longueur_minimale_et_longueur_maximale','600','80')}}</p>
+{{EmbedLiveSample('Longueur_minimale_et_longueur_maximale','600','80')}}
 
-<p>On notera que <code>minlength</code> n'empêche pas de retirer des caractères afin de réduire le texte en dessous de la longueur minimale. En revanche, cela rend la valeur <code>&lt;textarea&gt;</code> invalide. On notera aussi que, même lorsque <code>minlength</code> est défini, une valeur vide est considérée valide à moins que <code>required</code> soit présent.</p>
+On notera que `minlength` n'empêche pas de retirer des caractères afin de réduire le texte en dessous de la longueur minimale. En revanche, cela rend la valeur `<textarea>` invalide. On notera aussi que, même lorsque `minlength` est défini, une valeur vide est considérée valide à moins que `required` soit présent.
 
-<h3 id="Indication">Indication</h3>
+### Indication
 
-<p>Dans cet exemple, on utilise l'attribut <code>placeholder</code> afin d'afficher une indication qui disparaît dès qu'on saisit quelque chose dans la zone.</p>
+Dans cet exemple, on utilise l'attribut `placeholder` afin d'afficher une indication qui disparaît dès qu'on saisit quelque chose dans la zone.
 
-<pre class="brush: html">&lt;textarea name="textarea"
+```html
+<textarea name="textarea"
    rows="5" cols="30"
-   placeholder="Voici une indication."&gt;&lt;/textarea&gt;</pre>
+   placeholder="Voici une indication."></textarea>
+```
 
-<p>{{EmbedLiveSample('Indication','600','80')}}</p>
+{{EmbedLiveSample('Indication','600','80')}}
 
-<div class="note">
-<p><strong>Note :</strong> Les indications ne remplacent pas les élément {{HTMLElement("label")}}.</p>
-</div>
+> **Note :** Les indications ne remplacent pas les élément {{HTMLElement("label")}}.
 
-<h3 id="Lecutre_seule_et_contrôle_désactivé">Lecutre seule et contrôle désactivé</h3>
+### Lecutre seule et contrôle désactivé
 
-<p>Cet exemple affiche deux éléments <code>&lt;textarea&gt;</code> : le premier est désactivé avec <code>disabled</code> et le second est en lecture seule avec <code>readonly</code>. Vous pouvez les manipuler pour voir les différences : pour le premier, on ne peut pas sélectionné son contenu et la valeur n'est pas envoyée avec le formulaire ; pour le second, le contenu peut être sélectionné et la valeur est envoyée, il est uniquement impossible d'éditer le contenu.</p>
+Cet exemple affiche deux éléments `<textarea>` : le premier est désactivé avec `disabled` et le second est en lecture seule avec `readonly`. Vous pouvez les manipuler pour voir les différences : pour le premier, on ne peut pas sélectionné son contenu et la valeur n'est pas envoyée avec le formulaire ; pour le second, le contenu peut être sélectionné et la valeur est envoyée, il est uniquement impossible d'éditer le contenu.
 
-<pre class="brush: html">&lt;textarea name="textarea"
+```html
+<textarea name="textarea"
    rows="5" cols="30"
-   disabled&gt;Je suis désactivé&lt;/textarea&gt;
-&lt;textarea name="textarea"
+   disabled>Je suis désactivé</textarea>
+<textarea name="textarea"
    rows="5" cols="30"
-   readonly&gt;Je suis en lecture seule&lt;/textarea&gt;
-</pre>
+   readonly>Je suis en lecture seule</textarea>
+```
 
-<p>{{EmbedLiveSample('Lecture_seule_et_contrôle_désactivé','600','80')}}</p>
+{{EmbedLiveSample('Lecture_seule_et_contrôle_désactivé','600','80')}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires">contenu de formulaire (énuméré, étiquetable, réinitialisable, envoyable)</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Du texte.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLTextAreaElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif"
+          >contenu interactif</a
+        >,
+        <a
+          href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_associé_aux_formulaires"
+          >contenu de formulaire (énuméré, étiquetable, réinitialisable,
+          envoyable)</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Du texte.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLTextAreaElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'forms.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '&lt;textarea&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'forms.html#the-textarea-element', '&lt;textarea&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '&lt;textarea&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '&lt;textarea&gt;')}}         | {{Spec2('HTML4.01')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.textarea")}}</p>
+{{Compat("html.elements.textarea")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li>
-</ul>
+- Les autres éléments relatifs aux formulaires : {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.
diff --git a/files/fr/web/html/element/tfoot/index.md b/files/fr/web/html/element/tfoot/index.md
index 57d1c73ebe..81e5c887ca 100644
--- a/files/fr/web/html/element/tfoot/index.md
+++ b/files/fr/web/html/element/tfoot/index.md
@@ -9,201 +9,201 @@ tags:
   - Web
 translation_of: Web/HTML/Element/tfoot
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;tfoot&gt;</code></strong> permet de définir un ensemble de lignes qui résument les colonnes d'un tableau.</p>
+L'élément HTML **`<tfoot>`** permet de définir un ensemble de lignes qui résument les colonnes d'un tableau.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/tfoot.html","tabbed-taller")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/tfoot.html","tabbed-taller")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
+### Attributs dépréciés ou obsolètes
 
-<dl>
- <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
- <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :
- <ul>
-  <li><code>left </code>: le contenu de la cellule est alligné à gauche de la cellule</li>
-  <li><code>center</code> : le contenu de la cellule est centré horizontalement</li>
-  <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li>
-  <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li>
-  <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "tfoot")}} et {{htmlattrxref("charoff", "tfoot")}} {{unimplemented_inline(2212)}}.</li>
- </ul>
+- {{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
 
- <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p>
+  - : Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :
 
- <div class="note"><p><strong>Note :</strong> Cet attribut est devenu obsolète dans le dernier standard.</p>
+    - `left `: le contenu de la cellule est alligné à gauche de la cellule
+    - `center` : le contenu de la cellule est centré horizontalement
+    - `right` : le contenu de la cellule est aligné à droite de la cellule
+    - `justify` : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié
+    - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "tfoot")}} et {{htmlattrxref("charoff", "tfoot")}} {{unimplemented_inline(2212)}}.
 
- <ul>
-  <li>Pour réaliser le même effet qu'avec les valeurs left, center, right ou justify, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.</li>
-  <li>Pour réaliser le même effet qu'avec char, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "tfoot")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.</li>
- </ul>
- </div>
- </dd>
- <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
- <dd>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.
- <table>
+    Si cet attribut n'est pas renseigné, la valeur `left` est prise par défaut.
+
+    > **Note :** Cet attribut est devenu obsolète dans le dernier standard.
+    >
+    > - Pour réaliser le même effet qu'avec les valeurs left, center, right ou justify, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.
+    > - Pour réaliser le même effet qu'avec char, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "tfoot")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.
+
+- {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
+
+  - : Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le [sRGB](https://www.w3.org/Graphics/Color/sRGB). Il est précédé d'un '#'. Un de ces seize mot-clé peut également être utilisé.
+
+    <table>
+      <tbody>
+        <tr>
+          <td><code>black</code> = "#000000"</td>
+          <td><code>green</code> = "#008000"</td>
+        </tr>
+        <tr>
+          <td><code>silver</code> = "#C0C0C0"</td>
+          <td><code>lime</code> = "#00FF00"</td>
+        </tr>
+        <tr>
+          <td><code>gray</code> = "#808080"</td>
+          <td><code>olive</code> = "#808000"</td>
+        </tr>
+        <tr>
+          <td><code>white</code> = "#FFFFFF"</td>
+          <td><code>yellow</code> = "#FFFF00"</td>
+        </tr>
+        <tr>
+          <td><code>maroon</code> = "#800000"</td>
+          <td><code>navy</code> = "#000080"</td>
+        </tr>
+        <tr>
+          <td><code>red</code> = "#FF0000"</td>
+          <td><code>blue</code> = "#0000FF"</td>
+        </tr>
+        <tr>
+          <td><code>purple</code> = "#800080"</td>
+          <td><code>teal</code> = "#008080"</td>
+        </tr>
+        <tr>
+          <td><code>fuchsia</code> = "#FF00FF"</td>
+          <td><code>aqua</code> = "#00FFFF"</td>
+        </tr>
+      </tbody>
+    </table>
+
+    > **Note :** Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tfoot")}} doit être mis en forme grâce au [CSS](/fr/docs/CSS). Pour fournir un effet semblable à celui achevé par l'attribut **`bgcolor`**, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments  {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.
+
+- {{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
+
+  - : Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tfoot")}} ne vaut pas `char`, l'attribut est ignoré.
+
+    > **Note :** Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tfoot")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.
+
+- {{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
+
+  - : Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut **char** à appliquer au contenu des cellules.
+
+    > **Note :** Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.
+
+- {{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
+
+  - : Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
+
+    - `baseline` qui alignera le texte à la ligne la plus basse possible en utilisant la [ligne de base](https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29) des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur `bottom`.
+    - `bottom` qui placera le texte au plus bas de la cellule
+    - `middle` qui centrera verticalement le texte dans la cellule
+    - `top` qui placera le texte au plus haut de la cellule.
+
+    > **Note :** Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.
+
+## Exemples
+
+### HTML
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>Contenu d'en-tête 1</th>
+      <th>Contenu d'en-tête 2</th>
+    </tr>
+  </thead>
   <tbody>
-   <tr>
-    <td><code>black</code> = "#000000"</td>
-    <td><code>green</code> = "#008000"</td>
-   </tr>
-   <tr>
-    <td><code>silver</code> = "#C0C0C0"</td>
-    <td><code>lime</code> = "#00FF00"</td>
-   </tr>
-   <tr>
-    <td><code>gray</code> = "#808080"</td>
-    <td><code>olive</code> = "#808000"</td>
-   </tr>
-   <tr>
-    <td><code>white</code> = "#FFFFFF"</td>
-    <td><code>yellow</code> = "#FFFF00"</td>
-   </tr>
-   <tr>
-    <td><code>maroon</code> = "#800000"</td>
-    <td><code>navy</code> = "#000080"</td>
-   </tr>
-   <tr>
-    <td><code>red</code> = "#FF0000"</td>
-    <td><code>blue</code> = "#0000FF"</td>
-   </tr>
-   <tr>
-    <td><code>purple</code> = "#800080"</td>
-    <td><code>teal</code> = "#008080"</td>
-   </tr>
-   <tr>
-    <td><code>fuchsia</code> = "#FF00FF"</td>
-    <td><code>aqua</code> = "#00FFFF"</td>
-   </tr>
+    <tr>
+      <td>Contenu interne 1</td>
+      <td>Contenu interne 2</td>
+    </tr>
   </tbody>
- </table>
-
- <div class="note"><p><strong>Note :</strong> Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tfoot")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments  {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</p></div>
- </dd>
- <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
- <dd><p>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "tfoot")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "tfoot")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</p></div>
- </dd>
- <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
- <dd><p>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</p></div>
- </dd>
- <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
- <dd><p>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :</p>
- <ul>
-  <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li>
-  <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li>
-  <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li>
-  <li><code>top</code> qui placera le texte au plus haut de la cellule.</li>
- </ul>
-
- <div class="note"><p><strong>Note :</strong> Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</p></div>
- </dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th&gt;Contenu d'en-tête 1&lt;/th&gt;
-      &lt;th&gt;Contenu d'en-tête 2&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Contenu interne 1&lt;/td&gt;
-      &lt;td&gt;Contenu interne 2&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-  &lt;tfoot&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Pied de tableau 1&lt;/td&gt;
-      &lt;td&gt;Pied de tableau 2&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tfoot&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","150")}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Consulter la page {{HTMLElement("table")}} pour plus d'exemples sur <code>&lt;tfoot&gt;</code>.</p>
-</div>
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+  <tfoot>
+    <tr>
+      <td>Pied de tableau 1</td>
+      <td>Pied de tableau 2</td>
+    </tr>
+  </tfoot>
+</table>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","150")}}
+
+> **Note :** Consulter la page {{HTMLElement("table")}} pour plus d'exemples sur `<tfoot>`.
+
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Zéro ou plusieurs éléments {{HTMLElement("tr")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément {{HTMLElement("tbody")}} est immédiatement suivi par un élément {{HTMLElement("tbody")}} (même si celui-ci est défini implicitement) ou s'il n'y a plus de contenu au sein de l'élément parent {{HTMLElement("table")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément {{HTMLElement("table")}}. L'élément {{HTMLElement("tfoot")}} doit apparaître après l'élément {{HTMLElement("caption")}}, l'élément {{HTMLElement("colgroup")}} ou l'élément {{HTMLElement("thead")}}. Il peut être situé avant ou après tous les éléments {{HTMLElement("tbody")}} ou {{HTMLElement("tr")}} mais il ne peut pas être intercalés entre ces éléments. En HTML4, l'élément {{HTMLElement("tfoot")}} ne peut pas être placé après un élément {{HTMLElement("tbody")}} ou {{HTMLElement("tr")}} (restriction levée en HTML5).</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLTableSectionElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Zéro ou plusieurs éléments {{HTMLElement("tr")}}.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        La balise de début est obligatoire. La balise de fin peut être absente
+        si l'élément {{HTMLElement("tbody")}} est immédiatement suivi
+        par un élément {{HTMLElement("tbody")}} (même si celui-ci est
+        défini implicitement) ou s'il n'y a plus de contenu au sein de l'élément
+        parent {{HTMLElement("table")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Un élément {{HTMLElement("table")}}. L'élément
+        {{HTMLElement("tfoot")}} doit apparaître après l'élément
+        {{HTMLElement("caption")}}, l'élément
+        {{HTMLElement("colgroup")}} ou l'élément
+        {{HTMLElement("thead")}}. Il peut être situé avant ou après tous
+        les éléments {{HTMLElement("tbody")}} ou
+        {{HTMLElement("tr")}} mais il ne peut pas être intercalés entre
+        ces éléments. En HTML4, l'élément {{HTMLElement("tfoot")}} ne
+        peut pas être placé après un élément {{HTMLElement("tbody")}} ou
+        {{HTMLElement("tr")}} (restriction levée en HTML5).
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLTableSectionElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','tables.html#the-tfoot-element','tfoot element')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG','tables.html#the-tfoot-element','tfoot element')}}     | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}} | {{Spec2('HTML5 W3C')}}     |              |
+
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("html.elements.tfoot")}}
 
-<p>{{Compat("html.elements.tfoot")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("tbody")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};
+- Les propriétés et pseudo-classes CSS qui peuvent s'avérer utiles pour mettre en forme l'élément `<tfoot>` :
 
-<ul>
- <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("td")}}, {{HTMLElement("tbody")}}, {{HTMLElement("th")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}};</li>
- <li>Les propriétés et pseudo-classes CSS qui peuvent s'avérer utiles pour mettre en forme l'élément <code>&lt;tfoot&gt;</code> :
-  <ul>
-   <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement des cellules de la colonne</li>
-   <li>La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu des différentes cellules par rapport à un même caractère (comme le point ou la virgule).</li>
-  </ul>
- </li>
-</ul>
+  - La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement des cellules de la colonne
+  - La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu des différentes cellules par rapport à un même caractère (comme le point ou la virgule).
diff --git a/files/fr/web/html/element/th/index.md b/files/fr/web/html/element/th/index.md
index daa21a6309..c1d09c5aa5 100644
--- a/files/fr/web/html/element/th/index.md
+++ b/files/fr/web/html/element/th/index.md
@@ -9,184 +9,180 @@ tags:
   - Web
 translation_of: Web/HTML/Element/th
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;th&gt;</code></strong> définit une cellule d'un tableau comme une cellule d'en-tête pour un groupe de cellule. La nature de ce groupe est définie grâce aux attributs {{htmlattrxref("scope", "th")}} et {{htmlattrxref("headers", "th")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}}</div>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
-
-<dl>
- <dt>{{htmlattrdef("abbr")}}</dt>
- <dd>Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même.</dd>
- <dt>{{htmlattrdef("colspan")}}</dt>
- <dd>Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin du  {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront écrétées à 1000.</dd>
- <dt>{{htmlattrdef("headers")}}</dt>
- <dd>Cet attribut est une liste de chaînes de caractères séparées par des espace. Chacune correspond à l'attribut <code>id</code> de l'élément {{HTMLElement("th")}} qui s'applique à cet élément.</dd>
- <dt>{{htmlattrdef("rowspan")}}</dt>
- <dd>Cet attribut contient un entier positif indiquant sur combien de lignes s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin de la section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} du tableau à laquelle appartient la cellule même si cette section est définie implicitement. Les valeurs supérieures à 65534 seront ramenées à 65534.</dd>
- <dt>{{htmlattrdef("scope")}}</dt>
- <dd>Cet attribut référence les cellules auxquelles l'élément &lt;th&gt; est lié. Cet attribut est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :
- <ul>
-  <li><code>row</code>, ce qui signifie que l'en-tête s'applique à toutes les cellules de la ligne à laquelle appartient cet élément</li>
-  <li><code>col</code>, ce qui signifie que l'en-tête s'applique à toutes les cellules de la colonne à laquelle appartient cet élément</li>
-  <li><code>rowgroup</code>, ce qui signifie que l'en-tête s'applique à toutes les cellules restantes dans la ligne à laquelle appartient cet élément. Les cellules restants sont soit celles à droite de l'élément, soit celles à gauche selon la valeur de l'attribut {{htmlattrxref("dir", "table")}}</li>
-  <li><code>colgroup</code>, ce qui signifie que l'en-tête s'applique à toutes les cellules restantes dans la colonne à laquelle appartient cet élément.</li>
-  <li><em>auto</em></li>
- </ul>
- </dd>
-</dl>
-
-<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
-
-<dl>
- <dt>{{htmlattrdef("align")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}</dt>
- <dd>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :
- <ul>
-  <li><code>left </code>: le contenu de la cellule est alligné à gauche de la cellule (la valeur par défaut de cet attribut)</li>
-  <li><code>center</code> : le contenu de la cellule est centré horizontalement</li>
-  <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li>
-  <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li>
-  <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "th")}} et {{htmlattrxref("charoff", "th")}} {{unimplemented_inline(2212)}}.</li>
- </ul>
-
- <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p>
-
- <div class="note">
-   <p><strong>Note :</strong> Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.</p>
-
- <ul>
-  <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément</li>
-  <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "th")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.</li>
- </ul>
- </div>
- </dd>
- <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
- <dd><p>Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.</p></div>
- </dd>
- <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
- <dd><p>Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés préfédinis pour les couleurs</a> peut également être utilisé.</p>
- <div class="note"><p><strong>Note :</strong> Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("th")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code><strong>bgcolor</strong></code>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.</p></div>
- </dd>
- <dt>{{htmlattrdef("char")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}</dt>
- <dd><p>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "th")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "th")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</p></div>
- </dd>
- <dt>{{htmlattrdef("charoff")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}</dt>
- <dd><p>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</p></div>
- </dd>
- <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
- <dd>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
- <ul>
-  <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li>
-  <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li>
-  <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li>
-  <li><code>top</code> qui placera le texte au plus haut de la cellule.</li>
- </ul>
-
- <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</p></div>
- </dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table&gt;
- &lt;tbody&gt;
-  &lt;tr&gt;
-   &lt;th scope="col"&gt;Spécification&lt;/th&gt;
-   &lt;th scope="col"&gt;État&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-   &lt;td&gt;WHATWG&lt;/td&gt;
-   &lt;td&gt;Colorad&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-   &lt;td&gt;W3C&lt;/td&gt;
-   &lt;td&gt;Wisconsin&lt;/td&gt;
-  &lt;/tr&gt;
- &lt;/tbody&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","220")}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Voir la page {{HTMLElement("table")}} pour d'autres exemples.</p>
-</div>
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+{{HTMLRef}}
 
-<table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>
-    <div class="content-models">
-    <div><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_de_flux">Contenu de flux</a> sans titre, pied de page, contenu sectionnant ou descendants d'un élément de titre.</div>
-    </div>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément est immédiatement suivi par un élément {{HTMLElement("th")}} ou par un élément {{HTMLElement("td")}} ou s'il n'y a plus de contenu au sein de l'élément parent.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément {{HTMLElement("tr")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLTableHeaderCellElement")}}</td>
-  </tr>
- </tbody>
-</table>
+L'élément HTML **`<th>`** définit une cellule d'un tableau comme une cellule d'en-tête pour un groupe de cellule. La nature de ce groupe est définie grâce aux attributs {{htmlattrxref("scope", "th")}} et {{htmlattrxref("headers", "th")}}.
+
+{{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}}
+
+## Attributs
+
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
+
+- {{htmlattrdef("abbr")}}
+  - : Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même.
+- {{htmlattrdef("colspan")}}
+  - : Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin du  {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront écrétées à 1000.
+- {{htmlattrdef("headers")}}
+  - : Cet attribut est une liste de chaînes de caractères séparées par des espace. Chacune correspond à l'attribut `id` de l'élément {{HTMLElement("th")}} qui s'applique à cet élément.
+- {{htmlattrdef("rowspan")}}
+  - : Cet attribut contient un entier positif indiquant sur combien de lignes s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin de la section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} du tableau à laquelle appartient la cellule même si cette section est définie implicitement. Les valeurs supérieures à 65534 seront ramenées à 65534.
+- {{htmlattrdef("scope")}}
+
+  - : Cet attribut référence les cellules auxquelles l'élément \<th> est lié. Cet attribut est un attribut à valeur contrainte qui peut prendre les valeurs suivantes :
+
+    - `row`, ce qui signifie que l'en-tête s'applique à toutes les cellules de la ligne à laquelle appartient cet élément
+    - `col`, ce qui signifie que l'en-tête s'applique à toutes les cellules de la colonne à laquelle appartient cet élément
+    - `rowgroup`, ce qui signifie que l'en-tête s'applique à toutes les cellules restantes dans la ligne à laquelle appartient cet élément. Les cellules restants sont soit celles à droite de l'élément, soit celles à gauche selon la valeur de l'attribut {{htmlattrxref("dir", "table")}}
+    - `colgroup`, ce qui signifie que l'en-tête s'applique à toutes les cellules restantes dans la colonne à laquelle appartient cet élément.
+    - _auto_
+
+### Attributs dépréciés ou obsolètes
+
+- {{htmlattrdef("align")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}
+
+  - : Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule de la colonne. Les valeurs possibles sont :
+
+    - `left `: le contenu de la cellule est alligné à gauche de la cellule (la valeur par défaut de cet attribut)
+    - `center` : le contenu de la cellule est centré horizontalement
+    - `right` : le contenu de la cellule est aligné à droite de la cellule
+    - `justify` : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié
+    - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "th")}} et {{htmlattrxref("charoff", "th")}} {{unimplemented_inline(2212)}}.
+
+    Si cet attribut n'est pas renseigné, la valeur `left` est prise par défaut.
+
+    > **Note :** Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.
+    >
+    > - Pour réaliser les mêmes effets que les valeurs `left`, `center`, `right` ou `justify`, il faut utiliser la propriété CSS {{cssxref("text-align")}} sur l'élément
+    > - Pour réaliser le même effet qu'avec la valeur `char`. Il est possible, en CSS3, d'utiliser la valeur de l'attribut {{htmlattrxref("char", "th")}} comme valeur de la propriété {{cssxref("text-align")}}. {{unimplemented_inline}}.
 
-<h2 id="Spécifications">Spécifications</h2>
+- {{htmlattrdef("axis")}} {{obsolete_inline}} en {{HTMLVersionInline("5")}}
 
-<table class="standard-table">
- <thead>
+  - : Cet attribut contient une liste de chaîne de caractères (séparées par des espaces). Chaque chaîne de caractère est l'identifiant d'un groupe de cellule auquel cet en-tête s'applique.
+
+    > **Note :** Cet attribut est obsolète dans le dernier standard et ne doit donc plus être utilisé. L'attribut {{htmlattrxref("scope", "td")}} doit être utilisé pour le remplacer.
+
+- {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
+
+  - : Cet attribut définit la couleur d'arrière-plan de toutes les cellules de la colonne. C'est un code à 6 chiffres hexadécimaux comme défini par le [sRGB](https://www.w3.org/Graphics/Color/sRGB). Il est précédé d'un '#'. Un des [mots-clés préfédinis pour les couleurs](/fr/docs/Web/CSS/color_value#color_keywords) peut également être utilisé.
+
+    > **Note :** Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("th")}} doit être mis en forme grâce au [CSS](/fr/docs/CSS). Pour fournir un effet semblable à celui achevé par l'attribut **`bgcolor`**, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}}.
+
+- {{htmlattrdef("char")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}
+
+  - : Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "th")}} ne vaut pas `char`, l'attribut est ignoré.
+
+    > **Note :** Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "th")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.
+
+- {{htmlattrdef("charoff")}} {{obsolete_inline}} {{HTMLVersionInline("5")}}
+
+  - : Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut **char** à appliquer au contenu des cellules.
+
+    > **Note :** Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.
+
+- {{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
+
+  - : Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
+
+    - `baseline` qui alignera le texte à la ligne la plus basse possible en utilisant la [ligne de base](https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29) des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur `bottom`.
+    - `bottom` qui placera le texte au plus bas de la cellule
+    - `middle` qui centrera verticalement le texte dans la cellule
+    - `top` qui placera le texte au plus haut de la cellule.
+
+    > **Note :** Cet attribut est obsolète dans le dernier standard, la propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.
+
+## Exemples
+
+### HTML
+
+```html
+<table>
+ <tbody>
   <tr>
    <th scope="col">Spécification</th>
    <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
   </tr>
- </thead>
- <tbody>
   <tr>
-   <td>{{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
+   <td>WHATWG</td>
+   <td>Colorad</td>
   </tr>
   <tr>
-   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
+   <td>W3C</td>
+   <td>Wisconsin</td>
   </tr>
  </tbody>
 </table>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","220")}}
+
+> **Note :** Voir la page {{HTMLElement("table")}} pour d'autres exemples.
+
+## Résumé technique
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <div class="content-models">
+          <div>
+            <a
+              href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_de_flux"
+              >Contenu de flux</a
+            >
+            sans titre, pied de page, contenu sectionnant ou descendants d'un
+            élément de titre.
+          </div>
+        </div>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        La balise de début est obligatoire. La balise de fin peut être absente
+        si l'élément est immédiatement suivi par un élément
+        {{HTMLElement("th")}} ou par un élément
+        {{HTMLElement("td")}} ou s'il n'y a plus de contenu au sein de
+        l'élément parent.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>Un élément {{HTMLElement("tr")}}.</td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLTableHeaderCellElement")}}</td>
+    </tr>
+  </tbody>
+</table>
+
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}}     | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.th")}}</p>
+{{Compat("html.elements.th")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li>
-</ul>
+- Les autres éléments HTML relatifs aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.
diff --git a/files/fr/web/html/element/thead/index.md b/files/fr/web/html/element/thead/index.md
index fc81dbd4b4..0480fe8790 100644
--- a/files/fr/web/html/element/thead/index.md
+++ b/files/fr/web/html/element/thead/index.md
@@ -9,164 +9,160 @@ tags:
   - Web
 translation_of: Web/HTML/Element/thead
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément <strong><code>&lt;thead&gt;</code></strong> définit un ensemble de lignes qui définit l'en-tête des colonnes d'un tableau.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/thead.html","tabbed-taller")}}</div>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
-
-<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
-
-<dl>
- <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
- <dd><p>Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule. Les valeurs possibles sont :</p>
- <ul>
-  <li><code>left </code>: le contenu de la cellule est alligné à gauche de la cellule</li>
-  <li><code>center</code> : le contenu de la cellule est centré horizontalement</li>
-  <li><code>right</code> : le contenu de la cellule est aligné à droite de la cellule</li>
-  <li><code>justify</code> : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié</li>
-  <li><code>char</code> : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "thead")}} et {{htmlattrxref("charoff", "thead")}} {{unimplemented_inline(2212)}}.</li>
- </ul>
-
- <p>Si cet attribut n'est pas renseigné, la valeur <code>left</code> est prise par défaut.</p>
-
- <div class="note"><p><strong>Note :</strong> Cet attribut est devenu obsolète dans le dernier standard.</p>
-
- <ul>
-  <li>Pour réaliser le même effet qu'avec les valeurs left, center, right ou justify, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.</li>
-  <li>Pour réaliser le même effet qu'avec char, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "thead")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.</li>
- </ul>
- </div>
- </dd>
- <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt>
- <dd><p>Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le <a class="external" href="https://www.w3.org/Graphics/Color/sRGB">sRGB</a>. Il est précédé d'un '#'. Un des <a href="/fr/docs/Web/CSS/color_value#color_keywords">mots-clés préfédinis pour les couleurs</a> peut également être utilisé.</p>
- <div class="note"><p><strong>Note :</strong> Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("thead")}} doit être mis en forme grâce au <a href="/fr/docs/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <strong>bgcolor</strong>, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments  {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.</p></div>
- </dd>
- <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
- <dd><p>Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "thead")}} ne vaut pas <code>char</code>, l'attribut est ignoré.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "thead")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.</p></div>
- </dd>
- <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
- <dd><p>Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut<strong> char</strong> à appliquer au contenu des cellules.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.</p></div>
- </dd>
- <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}</dt>
- <dd><p>Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :</p>
- <ul>
-  <li><code>baseline</code> qui alignera le texte à la ligne la plus basse possible en utilisant la <a class="external" href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</li>
-  <li><code>bottom</code> qui placera le texte au plus bas de la cellule</li>
-  <li><code>middle</code> qui centrera verticalement le texte dans la cellule</li>
-  <li><code>top</code> qui placera le texte au plus haut de la cellule.</li>
- </ul>
-
- <div class="note"><p><strong>Note :</strong> Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.</p></div>
- </dd>
-</dl>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th&gt;Contenu d'en-tête 1&lt;/th&gt;
-      &lt;th&gt;Contenu d'en-tête 2&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tfoot&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Pied de tableau 1&lt;/td&gt;
-      &lt;td&gt;Pied de tableau 2&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tfoot&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;td&gt;Contenu interne 1&lt;/td&gt;
-      &lt;td&gt;Contenu interne 2&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","100%","150")}}</p>
-
-<div class="note">
-<p><strong>Note :</strong> Consulter la page {{HTMLElement("table")}} pour plus d'exemples sur <code>&lt;thead&gt;</code>.</p>
-</div>
-
-<h2 id="Résumé_technique">Résumé technique</h2>
+{{HTMLRef}}
 
-<table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Zéro ou plusieurs éléments {{HTMLElement("tr")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément {{HTMLElement("thead")}} est immédiatement suivi par un élément {{HTMLElement("tbody")}} ou par un élément {{HTMLElement("tfoot")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément {{HTMLElement("table")}}. L'élément {{HTMLElement("thead")}} doit apparaître après tout élément {{HTMLElement("caption")}} ou {{HTMLElement("colgroup")}} (même si ce dernier est défini implicitement), il doit apparaître avant tout élément {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} ou {{HTMLElement("tr")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLTableSectionElement")}}</td>
-  </tr>
- </tbody>
+L'élément **`<thead>`** définit un ensemble de lignes qui définit l'en-tête des colonnes d'un tableau.
+
+{{EmbedInteractiveExample("pages/tabbed/thead.html","tabbed-taller")}}
+
+## Attributs
+
+Comme tous les autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
+
+### Attributs dépréciés ou obsolètes
+
+- {{htmlattrdef("align")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
+
+  - : Cet attribut à valeurs définit l'alignement horizontal pour le contenu de chaque cellule. Les valeurs possibles sont :
+
+    - `left `: le contenu de la cellule est alligné à gauche de la cellule
+    - `center` : le contenu de la cellule est centré horizontalement
+    - `right` : le contenu de la cellule est aligné à droite de la cellule
+    - `justify` : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié
+    - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs  {{htmlattrxref("char", "thead")}} et {{htmlattrxref("charoff", "thead")}} {{unimplemented_inline(2212)}}.
+
+    Si cet attribut n'est pas renseigné, la valeur `left` est prise par défaut.
+
+    > **Note :** Cet attribut est devenu obsolète dans le dernier standard.
+    >
+    > - Pour réaliser le même effet qu'avec les valeurs left, center, right ou justify, utilisez la propriété CSS {{cssxref("text-align")}} sur cet élément.
+    > - Pour réaliser le même effet qu'avec char, vous pouvez, en CSS3, utiliser la valeur de {{htmlattrxref("char", "thead")}} comme valeur pour la propriété {{cssxref("text-align")}} {{unimplemented_inline}}.
+
+- {{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
+
+  - : Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le [sRGB](https://www.w3.org/Graphics/Color/sRGB). Il est précédé d'un '#'. Un des [mots-clés préfédinis pour les couleurs](/fr/docs/Web/CSS/color_value#color_keywords) peut également être utilisé.
+
+    > **Note :** Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("thead")}} doit être mis en forme grâce au [CSS](/fr/docs/CSS). Pour fournir un effet semblable à celui achevé par l'attribut **bgcolor**, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments  {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités.
+
+- {{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
+
+  - : Cet attribut est utilisé pour définir le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point (.) pour aligner des nombres ou des valeurs monétaires. Si l'attribut {{htmlattrxref("align", "thead")}} ne vaut pas `char`, l'attribut est ignoré.
+
+    > **Note :** Cet attribut est obsolète et il est donc fortement déconseillé de l'utiliser. De fait, il n'est pas supporté par le dernier standard. Pour réaliser le même effet qu'avec {{htmlattrxref("char", "thead")}}, on peut utiliser CSS3 en attribuant la même valeur à la propriété {{cssxref("text-align")}}.{{unimplemented_inline}}.
+
+- {{htmlattrdef("charoff")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
+
+  - : Cet attribut est utilisé pour indiquer le décalage, en nombre de caractères, depuis le caractère définit par l'attribut **char** à appliquer au contenu des cellules.
+
+    > **Note :** Cet attribut ne doit plus être utilisé car il est maintenant obsolète et n'est plus supporté dans le dernier standard.
+
+- {{htmlattrdef("valign")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}}
+
+  - : Cet attribut définit l'alignement vertical du texte des cellules de la colonne. Les valeurs possibles de cet attribut sont :
+
+    - `baseline` qui alignera le texte à la ligne la plus basse possible en utilisant la [ligne de base](https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29) des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur `bottom`.
+    - `bottom` qui placera le texte au plus bas de la cellule
+    - `middle` qui centrera verticalement le texte dans la cellule
+    - `top` qui placera le texte au plus haut de la cellule.
+
+    > **Note :** Cet attribut étant maintenant obsolète (et n'étant plus supporté), il est fortement déconseillé de l'utiliser. La propriété CSS {{cssxref("vertical-align")}} doit être utilisée à la place.
+
+## Exemples
+
+### HTML
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th>Contenu d'en-tête 1</th>
+      <th>Contenu d'en-tête 2</th>
+    </tr>
+  </thead>
+  <tfoot>
+    <tr>
+      <td>Pied de tableau 1</td>
+      <td>Pied de tableau 2</td>
+    </tr>
+  </tfoot>
+  <tbody>
+    <tr>
+      <td>Contenu interne 1</td>
+      <td>Contenu interne 2</td>
+    </tr>
+  </tbody>
 </table>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','tables.html#the-thead-element','thead element')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C','tabular-data.html#the-thead-element','thead element')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
+### Résultat
+
+{{EmbedLiveSample("Exemples","100%","150")}}
+
+> **Note :** Consulter la page {{HTMLElement("table")}} pour plus d'exemples sur `<thead>`.
+
+## Résumé technique
+
+<table class="properties">
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Zéro ou plusieurs éléments {{HTMLElement("tr")}}.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        La balise de début est obligatoire. La balise de fin peut être absente
+        si l'élément {{HTMLElement("thead")}} est immédiatement suivi
+        par un élément {{HTMLElement("tbody")}} ou par un élément
+        {{HTMLElement("tfoot")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Un élément {{HTMLElement("table")}}. L'élément
+        {{HTMLElement("thead")}} doit apparaître après tout élément
+        {{HTMLElement("caption")}} ou
+        {{HTMLElement("colgroup")}} (même si ce dernier est défini
+        implicitement), il doit apparaître avant tout élément
+        {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}} ou
+        {{HTMLElement("tr")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLTableSectionElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Spécifications
+
+| Spécification                                                                                            | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG','tables.html#the-thead-element','thead element')}}     | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C','tabular-data.html#the-thead-element','thead element')}} | {{Spec2('HTML5 W3C')}}     |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.elements.thead")}}
 
-<p>{{Compat("html.elements.thead")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- Les autres éléments HTML liés aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}}.
+- Les propriétés et pseudo-classes CSS particulièrement utiles pour mettre en forme l'élément `<thead>` :
 
-<ul>
- <li>Les autres éléments HTML liés aux tableaux : {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, {{HTMLElement("tr")}}.</li>
- <li>Les propriétés et pseudo-classes CSS particulièrement utiles pour mettre en forme l'élément <code>&lt;thead&gt;</code> :
-  <ul>
-   <li>La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement des cellules de la colonne</li>
-   <li>La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu des différentes cellules par rapport à un même caractère (par exemple le point ou la virgule).</li>
-  </ul>
- </li>
-</ul>
+  - La pseudo-classe {{cssxref(":nth-child")}} qui permet de définir l'alignement des cellules de la colonne
+  - La propriété {{cssxref("text-align")}} qui permet d'aligner le contenu des différentes cellules par rapport à un même caractère (par exemple le point ou la virgule).
diff --git a/files/fr/web/html/element/time/index.md b/files/fr/web/html/element/time/index.md
index 4716eb779a..d42afb16fc 100644
--- a/files/fr/web/html/element/time/index.md
+++ b/files/fr/web/html/element/time/index.md
@@ -8,151 +8,147 @@ tags:
   - Web
 translation_of: Web/HTML/Element/time
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;time&gt;</code></strong> permet de représenter une période donnée. Cet élément permet d'utiliser l'attribut <code>datetime</code> afin de traduire la date ou l'instant dans un format informatique (permettant aux moteurs de recherche d'exploiter ces données ou de créer des rappels).</p>
+L'élément HTML **`<time>`** permet de représenter une période donnée. Cet élément permet d'utiliser l'attribut `datetime` afin de traduire la date ou l'instant dans un format informatique (permettant aux moteurs de recherche d'exploiter ces données ou de créer des rappels).
 
-<p>Cet élément permet de représenter :</p>
+Cet élément permet de représenter :
 
-<ul>
- <li>une heure</li>
- <li>une date du <a href="https://fr.wikipedia.org/wiki/Calendrier_gr%C3%A9gorien">calendrier grégorien</a> (en précisant éventuellement l'heure et les informations de fuseau horaire).</li>
- <li><a href="https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html#valid-duration-string">une durée valide</a>.</li>
-</ul>
+- une heure
+- une date du [calendrier grégorien](https://fr.wikipedia.org/wiki/Calendrier_gr%C3%A9gorien) (en précisant éventuellement l'heure et les informations de fuseau horaire).
+- [une durée valide](https://www.w3.org/TR/2014/REC-html5-20141028/infrastructure.html#valid-duration-string).
 
-<div>{{EmbedInteractiveExample("pages/tabbed/time.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/time.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<dl>
- <dt>{{htmlattrdef("datetime")}}</dt>
- <dd>Cet attribut indique l'heure et la date associées à l'élément. La valeur de cet attribut doit être une chaîne de caractères décrivant <a class="external" href="https://www.w3.org/TR/html51/infrastructure.html#dates-and-times">une date valide avec un fragment optionnel pour décrire l'heure</a> (cf. ci-après). Si la valeur ne peut pas être analysée comme une date/heure, le contenu de l'élément n'aura pas d'indication temporelle associée.</dd>
-</dl>
+- {{htmlattrdef("datetime")}}
+  - : Cet attribut indique l'heure et la date associées à l'élément. La valeur de cet attribut doit être une chaîne de caractères décrivant [une date valide avec un fragment optionnel pour décrire l'heure](https://www.w3.org/TR/html51/infrastructure.html#dates-and-times) (cf. ci-après). Si la valeur ne peut pas être analysée comme une date/heure, le contenu de l'élément n'aura pas d'indication temporelle associée.
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Cet élément est conçu pour présenter des dates et des heures au sein d'un document. Elles sont écrites dans un format compréhensible par un programme, ce qui peut s'avérer utile pour les agents utilisateur qui offrent des fonctionnalités de gestion de calendrier/agenda.</p>
+Cet élément est conçu pour présenter des dates et des heures au sein d'un document. Elles sont écrites dans un format compréhensible par un programme, ce qui peut s'avérer utile pour les agents utilisateur qui offrent des fonctionnalités de gestion de calendrier/agenda.
 
-<p>Cet élément n'est pas approprié pour les dates antérieures à l'introduction du calendrier grégorien (en raison des complications de calcul pour ces dates).</p>
+Cet élément n'est pas approprié pour les dates antérieures à l'introduction du calendrier grégorien (en raison des complications de calcul pour ces dates).
 
-<p>La valeur exploitable informatiquement est la valeur de l'attribut <code>datetime</code> de l'élément. Cette valeur doit être dans un format correct pour être analysé. Si l'élément ne possède pas d'attribut <code>datetime</code>, il ne doit pas avoir d'éléments fils et la valeur de l'heure est le contenu (textuel) de l'élément.</p>
+La valeur exploitable informatiquement est la valeur de l'attribut `datetime` de l'élément. Cette valeur doit être dans un format correct pour être analysé. Si l'élément ne possède pas d'attribut `datetime`, il ne doit pas avoir d'éléments fils et la valeur de l'heure est le contenu (textuel) de l'élément.
 
-<h3 id="Valeurs_valides">Valeurs valides</h3>
+### Valeurs valides
 
-<dl>
- <dt>Une chaîne de caractères représentant une année</dt>
- <dd><code>2011</code> ou <code>0001</code></dd>
- <dt>Une chaîne de caractères représentant une année et un mois</dt>
- <dd><code>2011-11</code></dd>
- <dt>Une chaîne de caractères représentant une date</dt>
- <dd><code>2011-11-18</code></dd>
- <dt>Une chaîne de caractères représentant une date sans l'année</dt>
- <dd><code>11-18</code></dd>
- <dt>Une chaîne de caractères représentant une semaine</dt>
- <dd><code>2011-W47</code></dd>
- <dt>Une chaîne de caractères représentant une heure</dt>
- <dd><code>14:54</code> ou <code>14:54:39</code> ou <code>14:54:39.929</code></dd>
- <dt>Une chaîne de caractères représentant une date et une heure locale</dt>
- <dd><code>2011-11-18T14:54:39.929</code> ou <code>2011-11-18 14:54:39.929</code></dd>
- <dt>Une chaîne de caractères représentant une date et une heure universelle</dt>
- <dd><code>2011-11-18T14:54:39.929Z</code> ou <code>2011-11-18T14:54:39.929-0400</code> ou <code>2011-11-18T14:54:39.929-04:00</code> ou <code>2011-11-18 14:54:39.929Z</code> ou <code>2011-11-18 14:54:39.929-0400</code> ou <code>2011-11-18 14:54:39.929-04:00</code></dd>
- <dt>Une chaîne de caractères représentant une durée</dt>
- <dd><code>PT4H18M3S</code></dd>
-</dl>
+- Une chaîne de caractères représentant une année
+  - : `2011` ou `0001`
+- Une chaîne de caractères représentant une année et un mois
+  - : `2011-11`
+- Une chaîne de caractères représentant une date
+  - : `2011-11-18`
+- Une chaîne de caractères représentant une date sans l'année
+  - : `11-18`
+- Une chaîne de caractères représentant une semaine
+  - : `2011-W47`
+- Une chaîne de caractères représentant une heure
+  - : `14:54` ou `14:54:39` ou `14:54:39.929`
+- Une chaîne de caractères représentant une date et une heure locale
+  - : `2011-11-18T14:54:39.929` ou `2011-11-18 14:54:39.929`
+- Une chaîne de caractères représentant une date et une heure universelle
+  - : `2011-11-18T14:54:39.929Z` ou `2011-11-18T14:54:39.929-0400` ou `2011-11-18T14:54:39.929-04:00` ou `2011-11-18 14:54:39.929Z` ou `2011-11-18 14:54:39.929-0400` ou `2011-11-18 14:54:39.929-04:00`
+- Une chaîne de caractères représentant une durée
+  - : `PT4H18M3S`
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Le concert commence à &lt;time datetime="2018-07-07T20:00:00"&gt;20h00&lt;/time&gt;.&lt;/p&gt;
-</pre>
+```html
+<p>Le concert commence à <time datetime="2018-07-07T20:00:00">20h00</time>.</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Exemple_simple', 250, 60)}}</p>
+{{EmbedLiveSample('Exemple_simple', 250, 60)}}
 
-<h3 id="Exemple_avec_datetime">Exemple avec <code>datetime</code></h3>
+### Exemple avec `datetime`
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;Le concert a lieu &lt;time
-  datetime="2001-05-15T19:00"&gt;le 15 mai&lt;/time&gt;.&lt;/p&gt;
-</pre>
+```html
+<p>Le concert a lieu <time
+  datetime="2001-05-15T19:00">le 15 mai</time>.</p>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample('Exemple_avec_datetime', 250, 60)}}</p>
+{{EmbedLiveSample('Exemple_avec_datetime', 250, 60)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLTimeElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLTimeElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-time-element', '&lt;time&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '&lt;time&gt;')}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Aucune modification depuis {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-time-element', '&lt;time&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires                                                |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-time-element', '&lt;time&gt;')}} | {{Spec2('HTML WHATWG')}} | Aucune modification depuis {{SpecName('HTML5.1')}} |
+| {{SpecName('HTML5.1', 'grouping-content.html#the-time-element', '&lt;time&gt;')}}             | {{Spec2('HTML5.1')}}     | Aucune modification depuis {{SpecName('HTML5 W3C')}} |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-time-element', '&lt;time&gt;')}}     | {{Spec2('HTML5 W3C')}}     | Définition initiale.                                        |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.time")}}</p>
+{{Compat("html.elements.time")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>L'élément {{HTMLElement("data")}} qui permet de représenter des valeurs différentes.</li>
-</ul>
+- L'élément {{HTMLElement("data")}} qui permet de représenter des valeurs différentes.
diff --git a/files/fr/web/html/element/title/index.md b/files/fr/web/html/element/title/index.md
index 47d65ee940..a8262f98ef 100644
--- a/files/fr/web/html/element/title/index.md
+++ b/files/fr/web/html/element/title/index.md
@@ -8,122 +8,114 @@ tags:
   - Web
 translation_of: Web/HTML/Element/title
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément <strong><code>&lt;title&gt;</code></strong> définit le titre du document (qui est affiché dans la barre de titre du navigateur ou dans l'onglet de la page). Cet élément ne peut contenir que du texte, les balises qu'il contiendrait seraient ignorées.</p>
+L'élément **`<title>`** définit le titre du document (qui est affiché dans la barre de titre du navigateur ou dans l'onglet de la page). Cet élément ne peut contenir que du texte, les balises qu'il contiendrait seraient ignorées.
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>L'élément <code>&lt;title&gt;</code> est toujours utilisé au sein de l'élément {{HTMLElement("head")}} de la page.</p>
+L'élément `<title>` est toujours utilisé au sein de l'élément {{HTMLElement("head")}} de la page.
 
-<h3 id="Référencement_(SEO)">Référencement (SEO)</h3>
+### Référencement (SEO)
 
-<p>Le titre d'une page fait partie des éléments principaux qui sont scannés lors de l'indexation d'une page. C'est aussi le texte qui est affiché parmi les résultats du moteur de recherche, de façon proéminente et donc visible par les utilisateurs qui trouvent votre site grâce à un moteur de recherche.</p>
+Le titre d'une page fait partie des éléments principaux qui sont scannés lors de l'indexation d'une page. C'est aussi le texte qui est affiché parmi les résultats du moteur de recherche, de façon proéminente et donc visible par les utilisateurs qui trouvent votre site grâce à un moteur de recherche.
 
-<p>Aussi, mieux vaudra avoir des titres descriptifs plutôt que des titres trop courts ou vagues.</p>
+Aussi, mieux vaudra avoir des titres descriptifs plutôt que des titres trop courts ou vagues.
 
-<p>Quelques observations :</p>
+Quelques observations :
 
-<ul>
- <li>On pourra éviter les titres sur un ou deux mots.</li>
- <li>La longueur affichée pour les titres dans les résultats d'un moteur de recherche se situe entre 55 et 60 caractères. Si le titre est plus long, on veillera à ce que les concepts majeurs apparaissent avant cette longueur.</li>
- <li>Attention aux entités (les chevrons HTML pourront être affichés différemment entre les navigateurs).</li>
- <li>Le titre doit être intelligible et pas une simple concaténation de mots-clés.</li>
- <li>Le titre devra être unique pour un même site.</li>
-</ul>
+- On pourra éviter les titres sur un ou deux mots.
+- La longueur affichée pour les titres dans les résultats d'un moteur de recherche se situe entre 55 et 60 caractères. Si le titre est plus long, on veillera à ce que les concepts majeurs apparaissent avant cette longueur.
+- Attention aux entités (les chevrons HTML pourront être affichés différemment entre les navigateurs).
+- Le titre doit être intelligible et pas une simple concaténation de mots-clés.
+- Le titre devra être unique pour un même site.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<pre class="brush: html">&lt;title&gt;Et voici le titre de ma page !&lt;/title&gt;
-</pre>
+```html
+<title>Et voici le titre de ma page !</title>
+```
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Il est important de fournir une valeur pour l'attribut <code>title</code> qui décrit le but de la page de façon claire et concise.</p>
+Il est important de fournir une valeur pour l'attribut `title` qui décrit le but de la page de façon claire et concise.
 
-<p>Les personnes utilisant des outils d'assistance peuvent utiliser le titre de la page afin de déterminer rapidement ce qu'elle contient. Ainsi, il peut ne pas être nécessaire de naviguer « dans » la page, ce qui peut prendre du temps et être source de confusion si, ce faisant, on doit déterminer le but de la page.</p>
+Les personnes utilisant des outils d'assistance peuvent utiliser le titre de la page afin de déterminer rapidement ce qu'elle contient. Ainsi, il peut ne pas être nécessaire de naviguer « dans » la page, ce qui peut prendre du temps et être source de confusion si, ce faisant, on doit déterminer le but de la page.
 
-<h4 id="Exemple">Exemple</h4>
+#### Exemple
 
-<pre>&lt;title&gt;Menu - Restaurant chinois Maison bleue - Commande en ligne&lt;/title&gt;
-</pre>
+    <title>Menu - Restaurant chinois Maison bleue - Commande en ligne</title>
 
-<p>Mettre à jour la valeur de <code>title</code> afin de refléter un changement d'état important (un problème de validation d'un formulaire par exemple) peut également s'avérer utile :</p>
+Mettre à jour la valeur de `title` afin de refléter un changement d'état important (un problème de validation d'un formulaire par exemple) peut également s'avérer utile :
 
-<h4 id="Exemple_2">Exemple</h4>
+#### Exemple
 
-<pre>&lt;title&gt;2 erreurs sur votre commande - Restaurant chinois Maison bleue - Commande en ligne&lt;/title&gt;
-</pre>
+    <title>2 erreurs sur votre commande - Restaurant chinois Maison bleue - Commande en ligne</title>
 
-<ul>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">Comprendre les règles WCAG 2.4</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html"><em>Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
+- [Comprendre les règles WCAG 2.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_—_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are)
+- [_Understanding Success Criterion 2.4.2 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données">Contenu de méta-données</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Du texte qui n'est pas du blanc entre éléments (<em>inter-element whitespace</em>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>Les deux balises sont nécessaires. Si <code>&lt;/title&gt;</code> est absent, le navigateur peut ignorer le reste de la page.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément {{HTMLElement("head")}} qui ne contient pas d'autre élément {{HTMLElement("title")}}.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucun.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLTitleElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_méta-données"
+          >Contenu de méta-données</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        Du texte qui n'est pas du blanc entre éléments (<em
+          >inter-element whitespace</em
+        >).
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        Les deux balises sont nécessaires. Si <code>&#x3C;/title></code> est
+        absent, le navigateur peut ignorer le reste de la page.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Un élément {{HTMLElement("head")}} qui ne contient pas d'autre
+        élément {{HTMLElement("title")}}.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucun.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLTitleElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '&lt;title&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '&lt;title&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '&lt;title&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                        | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '&lt;title&gt;')}}         | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '&lt;title&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '&lt;title&gt;')}}                     | {{Spec2('HTML4.01')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.title")}}</p>
+{{Compat("html.elements.title")}}
diff --git a/files/fr/web/html/element/tr/index.md b/files/fr/web/html/element/tr/index.md
index e0bde5e355..14e4f60a96 100644
--- a/files/fr/web/html/element/tr/index.md
+++ b/files/fr/web/html/element/tr/index.md
@@ -4,104 +4,104 @@ slug: Web/HTML/Element/tr
 translation_of: Web/HTML/Element/tr
 browser-compat: html.elements.tr
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;tr&gt;</code></strong> définit une ligne de cellules dans un tableau. Une ligne peut être constituée d'éléments <a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a> (les données des cellules) et <a href="/fr/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a> (les cellules d'en-têtes).</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/tr.html","tabbed-taller")}}</div>
-
-<p>Si on veut qu'une cellule s'étende sur plusieurs lignes/colonnes, on pourra utiliser l'attribut <a href="/fr/docs/Web/HTML/Element/td#attr-colspan"><code>colspan</code></a> ou <a href="/fr/docs/Web/HTML/Element/td#attr-rowspan"><code>rowspan</code></a> qui indiquent respectivement le nombre de colonnes / lignes sur lequel s'étendre (la valeur par défaut étant 1).</p>
-
-<p>La construction de tableau peut parfois demander un peu de pratique. Au-delà des exemples présentés ci-après, vous pouvez consulter <a href="/fr/docs/Learn/HTML/Tables">les tutoriels sur les tableaux HTML</a> afin d'apprendre comment utiliser ces éléments et attributs HTML afin d'organiser vos données tabulaires.</p>
-
-<h2 id="attributes">Attributs</h2>
-
-<p>À l'instar de tous les éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Global_attributes">les attributs universels</a>. Il existe également plusieurs attributs dépréciés à éviter désormais, mais qui peuvent être utiles pour comprendre du code ancien.</p>
-
-<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
-
-<dl>
- <dt><strong><code>align</code></strong>{{deprecated_inline}}</dt>
- <dd><p>Une chaîne de caractère qui définit l'alignement horizontal pour le contenu de chaque cellule. C'est un raccourci pour définir l'alignement sur l'ensemble de la ligne plutôt que pour chaque cellule. Les valeurs possibles sont :</p>
- <dl>
-  <dt><code>left</code></dt>
-  <dd>Le contenu de la cellule est aligné à gauche de la cellule.</dd>
-  <dt><code>center</code></dt>
-  <dd>Le contenu de la cellule est centré horizontalement.</dd>
-  <dt><code>right</code></dt> 
-  <dd>Le contenu de la cellule est aligné à droite de la cellule.</dd>
-  <dt><code>justify</code></dt>
-  <dd>Insère des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié.</dd>
-  <dt><code>char</code></dt>
-  <dd>Aligne le contenu textuel de la cellule selon un caractère spécial défini par l'attribut <a href="#attr-char"><code>char</code></a> (par exemple un point ou une virgule quand on souhaite aligner des nombres) et le nombre de caractères <a href="#attr-charoff"><code>charoff</code></a> à afficher derrière ce caractère d'alignement. Ce mode d'alignement n'a jamais été pris en charge de façon conséquente.</dd>
- </dl>
-
- <p>Si cet attribut n'est pas renseigné, la valeur est héritée du nœud parent.</p>
-
- <div class="note">
-   <p><strong>Note :</strong> Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.</p>
- <ul>
-  <li>Pour réaliser les mêmes effets que les valeurs <code>left</code>, <code>center</code>, <code>right</code> ou <code>justify</code>, il faut utiliser la propriété CSS <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> sur l'élément</li>
-  <li>Pour réaliser le même effet qu'avec la valeur <code>char</code>. Il est possible d'utiliser la valeur de l'attribut <a href="#attr-char"><code>char</code></a> comme valeur de la propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>.</li>
- </ul>
- </div>
- </dd>
- <dt><strong><code>bgcolor</code></strong> {{deprecated_inline}}</dt>
- <dd><p>Une chaîne de caractères qui définit la couleur d'arrière-plan de toutes les cellules de la colonne. Il peut s'agit d'une <a href="/fr/docs/Web/CSS/color_value#rgb()">notation hexadécimale #RRGGGBB ou #RGB</a> ou bien d'un <a href="/fr/docs/Web/CSS/color_value#color_keywords">mot-clé</a> pour une couleur. L'absence de cet attribut (ou sa déclaration à <code>null</code> en JavaScript) fera que la couleur des cellules de la ligne sera héritée de la couleur d'arrière-plan de l'élément parent.</p>
- <div class="note"><p><strong>Note :</strong> L'élément <code>&lt;tr&gt;</code> doit être mis en forme grâce au <a href="/fr/docs/Web/CSS">CSS</a>. Pour fournir un effet semblable à celui achevé par l'attribut <code>bgcolor</code>, il est possible d'utiliser la propriété CSS <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a>.</p></div>
- </dd>
- <dt><strong><code>char</code></strong>{{deprecated_inline}}</dt>
- <dd><p>Une chaîne de caractère qui définit le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point ou une virgule pour aligner des nombres ou des valeurs monétaires. Si l'attribut <a href="#attr-align"><code>align</code></a> ne vaut pas <code>char</code>, l'attribut est ignoré.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète et peu implémenté : il est donc fortement déconseillé de l'utiliser. Pour réaliser le même effet qu'avec <a href="#attr-char"><code>char</code></a>, il faut utiliser la propriété CSS <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a>.</p></div>
- </dd>
- <dt><strong><code>charoff</code></strong> {{deprecated_inline}}</dt>
- <dd><p>Une chaîne de caractères utilisée pour indiquer le nombre de caractères à afficher après le caractère défini par l'attribut <code>char</code>. Cela peut par exemple servir à indiquer qu'on souhaite afficher deux chiffres après la virgule pour les valeurs monétaires afin d'indiquer les centimes.</p>
- <div class="note"><p><strong>Note :</strong> Cet attribut ne doit plus être utilisé, car il est maintenant obsolète et que sa compatibilité n'était pas répandue.</p></div>
- </dd>
- <dt><strong><code>valign</code></strong> {{deprecated_inline}}</dt>
- <dd><p>Une chaîne de caractères qui définit l'alignement vertical du texte des cellules de la ligne. Les valeurs possibles de cet attribut sont :</p>
- <dl>
-  <dt><code>baseline</code></dt>
-  <dd>Aligne le texte à la ligne la plus basse possible en utilisant la <a href="https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29">ligne de base</a> des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur <code>bottom</code>.</dd>
-  <dt><code>bottom</code></dt>
-  <dd>Place le texte au plus bas de la cellule.</dd>
-  <dt><code>middle</code></dt>
-  <dd>Centre verticalement le texte dans la cellule.</dd>
-  <dt><code>top</code></dt>
-  <dd>Place le texte au plus haut de la cellule.</dd>
- </dl>
-
- <div class="note"><p><strong>Note :</strong> Cet attribut est obsolète dans le dernier standard, la propriété CSS <a href="/fr/docs/Web/CSS/vertical-align"><code>vertical-align</code></a> doit être utilisée à la place.</p></div>
- </dd>
-</dl>
-
-<h2 id="examples">Exemples</h2>
-
-<p>Voir <a href="/fr/docs/Web/HTML/Element/table">la page sur <code>&lt;table&gt;</code></a> pour d'autres exemples sur <code>&lt;tr&gt;</code>.</p>
-
-<h3 id="basic_example">Exemple simple</h3>
-
-<h4 id="HTML">HTML</h4>
-
-<pre class="brush: html">
-&lt;table&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Prénom&lt;/th&gt;&lt;th&gt;Nom&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Jean&lt;/td&gt; &lt;td&gt;Biche&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Marcel&lt;/td&gt; &lt;td&gt;Patulacci&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<p>Ce fragment de CSS permet d'ajouter une bordure noire autour du tableau et des cellules, y compris pour celles définies avec <code>&lt;th&gt;</code> ou <code>&lt;td&gt;</code>. Cela marque clairement la zone de chaque cellule.</p>
-
-<pre class="brush: css">
+{{HTMLRef}}
+
+L'élément HTML **`<tr>`** définit une ligne de cellules dans un tableau. Une ligne peut être constituée d'éléments [`<td>`](/fr/docs/Web/HTML/Element/td) (les données des cellules) et [`<th>`](/fr/docs/Web/HTML/Element/th) (les cellules d'en-têtes).
+
+{{EmbedInteractiveExample("pages/tabbed/tr.html","tabbed-taller")}}
+
+Si on veut qu'une cellule s'étende sur plusieurs lignes/colonnes, on pourra utiliser l'attribut [`colspan`](/fr/docs/Web/HTML/Element/td#attr-colspan) ou [`rowspan`](/fr/docs/Web/HTML/Element/td#attr-rowspan) qui indiquent respectivement le nombre de colonnes / lignes sur lequel s'étendre (la valeur par défaut étant 1).
+
+La construction de tableau peut parfois demander un peu de pratique. Au-delà des exemples présentés ci-après, vous pouvez consulter [les tutoriels sur les tableaux HTML](/fr/docs/Learn/HTML/Tables) afin d'apprendre comment utiliser ces éléments et attributs HTML afin d'organiser vos données tabulaires.
+
+## Attributs
+
+À l'instar de tous les éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Global_attributes). Il existe également plusieurs attributs dépréciés à éviter désormais, mais qui peuvent être utiles pour comprendre du code ancien.
+
+### Attributs dépréciés ou obsolètes
+
+- **`align`**{{deprecated_inline}}
+
+  - : Une chaîne de caractère qui définit l'alignement horizontal pour le contenu de chaque cellule. C'est un raccourci pour définir l'alignement sur l'ensemble de la ligne plutôt que pour chaque cellule. Les valeurs possibles sont :
+
+    - `left`
+      - : Le contenu de la cellule est aligné à gauche de la cellule.
+    - `center`
+      - : Le contenu de la cellule est centré horizontalement.
+    - `right`
+      - : Le contenu de la cellule est aligné à droite de la cellule.
+    - `justify`
+      - : Insère des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié.
+    - `char`
+      - : Aligne le contenu textuel de la cellule selon un caractère spécial défini par l'attribut [`char`](#attr-char) (par exemple un point ou une virgule quand on souhaite aligner des nombres) et le nombre de caractères [`charoff`](#attr-charoff) à afficher derrière ce caractère d'alignement. Ce mode d'alignement n'a jamais été pris en charge de façon conséquente.
+
+    Si cet attribut n'est pas renseigné, la valeur est héritée du nœud parent.
+
+    > **Note :** Cet attribut est devenu obsolète dans le dernier standard et ne doit donc plus être utilisé.
+    >
+    > - Pour réaliser les mêmes effets que les valeurs `left`, `center`, `right` ou `justify`, il faut utiliser la propriété CSS [`text-align`](/fr/docs/Web/CSS/text-align) sur l'élément
+    > - Pour réaliser le même effet qu'avec la valeur `char`. Il est possible d'utiliser la valeur de l'attribut [`char`](#attr-char) comme valeur de la propriété [`text-align`](/fr/docs/Web/CSS/text-align).
+
+- **`bgcolor`** {{deprecated_inline}}
+
+  - : Une chaîne de caractères qui définit la couleur d'arrière-plan de toutes les cellules de la colonne. Il peut s'agit d'une [notation hexadécimale #RRGGGBB ou #RGB](</fr/docs/Web/CSS/color_value#rgb()>) ou bien d'un [mot-clé](/fr/docs/Web/CSS/color_value#color_keywords) pour une couleur. L'absence de cet attribut (ou sa déclaration à `null` en JavaScript) fera que la couleur des cellules de la ligne sera héritée de la couleur d'arrière-plan de l'élément parent.
+
+    > **Note :** L'élément `<tr>` doit être mis en forme grâce au [CSS](/fr/docs/Web/CSS). Pour fournir un effet semblable à celui achevé par l'attribut `bgcolor`, il est possible d'utiliser la propriété CSS [`background-color`](/fr/docs/Web/CSS/background-color).
+
+- **`char`**{{deprecated_inline}}
+
+  - : Une chaîne de caractère qui définit le caractère sur lequel aligner les cellules d'une colonne. Les valeurs de cet attribut contiennent généralement un point ou une virgule pour aligner des nombres ou des valeurs monétaires. Si l'attribut [`align`](#attr-align) ne vaut pas `char`, l'attribut est ignoré.
+
+    > **Note :** Cet attribut est obsolète et peu implémenté : il est donc fortement déconseillé de l'utiliser. Pour réaliser le même effet qu'avec [`char`](#attr-char), il faut utiliser la propriété CSS [`text-align`](/fr/docs/Web/CSS/text-align).
+
+- **`charoff`** {{deprecated_inline}}
+
+  - : Une chaîne de caractères utilisée pour indiquer le nombre de caractères à afficher après le caractère défini par l'attribut `char`. Cela peut par exemple servir à indiquer qu'on souhaite afficher deux chiffres après la virgule pour les valeurs monétaires afin d'indiquer les centimes.
+
+    > **Note :** Cet attribut ne doit plus être utilisé, car il est maintenant obsolète et que sa compatibilité n'était pas répandue.
+
+- **`valign`** {{deprecated_inline}}
+
+  - : Une chaîne de caractères qui définit l'alignement vertical du texte des cellules de la ligne. Les valeurs possibles de cet attribut sont :
+
+    - `baseline`
+      - : Aligne le texte à la ligne la plus basse possible en utilisant la [ligne de base](https://fr.wikipedia.org/wiki/Ligne_de_base_%28typographie%29) des caractères. Si les caractères ont tous la même taille, cela aura le même effet que la valeur `bottom`.
+    - `bottom`
+      - : Place le texte au plus bas de la cellule.
+    - `middle`
+      - : Centre verticalement le texte dans la cellule.
+    - `top`
+      - : Place le texte au plus haut de la cellule.
+
+    > **Note :** Cet attribut est obsolète dans le dernier standard, la propriété CSS [`vertical-align`](/fr/docs/Web/CSS/vertical-align) doit être utilisée à la place.
+
+## Exemples
+
+Voir [la page sur `<table>`](/fr/docs/Web/HTML/Element/table) pour d'autres exemples sur `<tr>`.
+
+### Exemple simple
+
+#### HTML
+
+```html
+<table>
+  <tr>
+    <th>Prénom</th><th>Nom</th>
+  </tr>
+  <tr>
+    <td>Jean</td> <td>Biche</td>
+  </tr>
+  <tr>
+    <td>Marcel</td> <td>Patulacci</td>
+  </tr>
+</table>
+```
+
+#### CSS
+
+Ce fragment de CSS permet d'ajouter une bordure noire autour du tableau et des cellules, y compris pour celles définies avec `<th>` ou `<td>`. Cela marque clairement la zone de chaque cellule.
+
+```css
 table {
   border: 1px solid black;
 }
@@ -109,71 +109,69 @@ table {
 th, td {
   border: 1px solid black;
 }
-</pre>
-
-<h4 id="result">Résultat</h4>
-
-<p>{{EmbedLiveSample("basic_example","100%","200")}}</p>
-
-<h3 id="row_and_column_spanning">Étendre sur plusieurs lignes ou colonnes</h3>
-
-<p>On utilise ici les attributs <code>rowspan</code> et <code>colspan</code> pour étendre des cellules sur plusieurs lignes et colonnes. On voit ainsi que l'en-tête occupe deux lignes pour les noms, l'identifiant et le solde tandis qu'il y a deux colonnes de dates pour l'inscription et la résiliation.</p>
-
-<h4 id="Résultat_2">Résultat</h4>
-
-<p>Une fois n'est pas coutume, commençons par regarder le résultat produit.</p>
-
-<p>{{EmbedLiveSample("row_and_column_spanning")}}</p>
-
-<p>On voit que la zone d'en-tête occupe deux lignes : la première avec le nom, l'identifiant, les dates et le solde du compte ; la seconde avec les dates d'inscription et de résiliation qui forment un sous-groupe de colonnes. Pour obtenir ceci, on a: </p>
-
-<ul>
-  <li>Utilisé l'attribut <code>rowspan</code> sur la ligne d'en-tête pour les éléments sur le nom, l'identifiant et le solde. Ces cellules occupent ainsi deux lignes.</li>
-  <li>Utilisé l'attribut <code>colspan</code> sur la cellule d'en-tête pour les dates. Cela permet à ce que cette cellule s'étende sur deux colonnes.</li>
-  <li>Défini une deuxième ligne d'éléments <code>th</code> qui contient uniquement les en-têtes pour l'inscription et la résiliation. Ces cellules viennent combler l'espace laissé par le fait que l'en-tête Dates n'occupe qu'une seule ligne.</li>
-</ul>
-
-<h4 id="HTML_2">HTML</h4>
-
-<pre class="brush: html">
-&lt;table&gt;
-  &lt;tr&gt;
-    &lt;th rowspan="2"&gt;Nom&lt;/th&gt;
-    &lt;th rowspan="2"&gt;ID&lt;/th&gt;
-    &lt;th colspan="2"&gt;Dates&lt;/th&gt;
-    &lt;th rowspan="2"&gt;Solde&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Inscription&lt;/th&gt;
-    &lt;th&gt;Résiliation&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Margaret Nguyen&lt;/th&gt;
-    &lt;td&gt;427311&lt;/td&gt;
-    &lt;td&gt;&lt;time datetime="2010-06-03"&gt;3 juin 2010&lt;/time&gt;&lt;/td&gt;
-    &lt;td&gt;n/a&lt;/td&gt;
-    &lt;td&gt;0&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Edvard Galinski&lt;/th&gt;
-    &lt;td&gt;533175&lt;/td&gt;
-    &lt;td&gt;&lt;time datetime="2011-01013"&gt;13 janvier 2011&lt;/time&gt;&lt;/td&gt;
-    &lt;td&gt;&lt;time datetime="2017-04008"&gt;8 avril 2017&lt;/time&gt;&lt;/td&gt;
-    &lt;td&gt;37&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Hoshi Nakamura&lt;/th&gt;
-    &lt;td&gt;601942&lt;/td&gt;
-    &lt;td&gt;&lt;time datetime="2012-07-23"&gt;23 juillet 2012&lt;/time&gt;&lt;/td&gt;
-    &lt;td&gt;n/a&lt;/td&gt;
-    &lt;td&gt;15&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;
-</pre>
-
-<h4 id="CSS">CSS</h4>
-
-<pre class="brush: css">
+```
+
+#### Résultat
+
+{{EmbedLiveSample("basic_example","100%","200")}}
+
+### Étendre sur plusieurs lignes ou colonnes
+
+On utilise ici les attributs `rowspan` et `colspan` pour étendre des cellules sur plusieurs lignes et colonnes. On voit ainsi que l'en-tête occupe deux lignes pour les noms, l'identifiant et le solde tandis qu'il y a deux colonnes de dates pour l'inscription et la résiliation.
+
+#### Résultat
+
+Une fois n'est pas coutume, commençons par regarder le résultat produit.
+
+{{EmbedLiveSample("row_and_column_spanning")}}
+
+On voit que la zone d'en-tête occupe deux lignes : la première avec le nom, l'identifiant, les dates et le solde du compte ; la seconde avec les dates d'inscription et de résiliation qui forment un sous-groupe de colonnes. Pour obtenir ceci, on a:
+
+- Utilisé l'attribut `rowspan` sur la ligne d'en-tête pour les éléments sur le nom, l'identifiant et le solde. Ces cellules occupent ainsi deux lignes.
+- Utilisé l'attribut `colspan` sur la cellule d'en-tête pour les dates. Cela permet à ce que cette cellule s'étende sur deux colonnes.
+- Défini une deuxième ligne d'éléments `th` qui contient uniquement les en-têtes pour l'inscription et la résiliation. Ces cellules viennent combler l'espace laissé par le fait que l'en-tête Dates n'occupe qu'une seule ligne.
+
+#### HTML
+
+```html
+<table>
+  <tr>
+    <th rowspan="2">Nom</th>
+    <th rowspan="2">ID</th>
+    <th colspan="2">Dates</th>
+    <th rowspan="2">Solde</th>
+  </tr>
+  <tr>
+    <th>Inscription</th>
+    <th>Résiliation</th>
+  </tr>
+  <tr>
+    <th>Margaret Nguyen</th>
+    <td>427311</td>
+    <td><time datetime="2010-06-03">3 juin 2010</time></td>
+    <td>n/a</td>
+    <td>0</td>
+  </tr>
+  <tr>
+    <th>Edvard Galinski</th>
+    <td>533175</td>
+    <td><time datetime="2011-01013">13 janvier 2011</time></td>
+    <td><time datetime="2017-04008">8 avril 2017</time></td>
+    <td>37</td>
+  </tr>
+  <tr>
+    <th>Hoshi Nakamura</th>
+    <td>601942</td>
+    <td><time datetime="2012-07-23">23 juillet 2012</time></td>
+    <td>n/a</td>
+    <td>15</td>
+  </tr>
+</table>
+```
+
+#### CSS
+
+```css
 table {
   border: 1px solid black;
 }
@@ -181,57 +179,57 @@ table {
 th, td {
   border: 1px solid black;
 }
-</pre>
-
-<h3 id="explicitly_specifying_table_content_groups">Distinguer en-tête et contenu</h3>
-
-<p>On utilise ici l'élément <a href="/fr/docs/Web/HTML/Element/thead"><code>&lt;thead&gt;</code></a> et l'élément <a href="/fr/docs/Web/HTML/Element/tbody"><code>&lt;tbody&gt;</code></a> pour distinguer l'en-tête du tableau et le contenu de celui-ci.</p>
-
-<h4 id="HTML_3">HTML</h4>
-
-<pre class="brush: html">
-&lt;table&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th rowspan="2"&gt;Nom&lt;/th&gt;
-      &lt;th rowspan="2"&gt;Identifiant&lt;/th&gt;
-      &lt;th colspan="2"&gt;Dates&lt;/th&gt;
-      &lt;th rowspan="2"&gt;Solde&lt;/th&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th&gt;Inscription&lt;/th&gt;
-      &lt;th&gt;Résiliation&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;Margaret Nguyen&lt;/th&gt;
-      &lt;td&gt;427311&lt;/td&gt;
-      &lt;td&gt;&lt;time datetime="2010-06-03"&gt;3 juin 2010&lt;/time&gt;&lt;/td&gt;
-      &lt;td&gt;n/a&lt;/td&gt;
-      &lt;td&gt;0&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;Edvard Galinski&lt;/th&gt;
-      &lt;td&gt;533175&lt;/td&gt;
-      &lt;td&gt;&lt;time datetime="2011-01013"&gt;13 janvier 2011&lt;/time&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;time datetime="2017-04008"&gt;8 avril 2017&lt;/time&gt;&lt;/td&gt;
-      &lt;td&gt;37&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;Hoshi Nakamura&lt;/th&gt;
-      &lt;td&gt;601942&lt;/td&gt;
-      &lt;td&gt;&lt;time datetime="2012-07-23"&gt;23 juillet 2012&lt;/time&gt;&lt;/td&gt;
-      &lt;td&gt;n/a&lt;/td&gt;
-      &lt;td&gt;15&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<h4 id="CSS_2">CSS</h4>
-
-<pre class="brush: css">
+```
+
+### Distinguer en-tête et contenu
+
+On utilise ici l'élément [`<thead>`](/fr/docs/Web/HTML/Element/thead) et l'élément [`<tbody>`](/fr/docs/Web/HTML/Element/tbody) pour distinguer l'en-tête du tableau et le contenu de celui-ci.
+
+#### HTML
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th rowspan="2">Nom</th>
+      <th rowspan="2">Identifiant</th>
+      <th colspan="2">Dates</th>
+      <th rowspan="2">Solde</th>
+    </tr>
+    <tr>
+      <th>Inscription</th>
+      <th>Résiliation</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Margaret Nguyen</th>
+      <td>427311</td>
+      <td><time datetime="2010-06-03">3 juin 2010</time></td>
+      <td>n/a</td>
+      <td>0</td>
+    </tr>
+    <tr>
+      <th scope="row">Edvard Galinski</th>
+      <td>533175</td>
+      <td><time datetime="2011-01013">13 janvier 2011</time></td>
+      <td><time datetime="2017-04008">8 avril 2017</time></td>
+      <td>37</td>
+    </tr>
+    <tr>
+      <th scope="row">Hoshi Nakamura</th>
+      <td>601942</td>
+      <td><time datetime="2012-07-23">23 juillet 2012</time></td>
+      <td>n/a</td>
+      <td>15</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+#### CSS
+
+```css
 table {
   border: 1px solid black;
 }
@@ -239,77 +237,77 @@ table {
 th, td {
   border: 1px solid black;
 }
-</pre>
-
-<h4 id="result_3">Résultat</h4>
-
-<p>Le résultat n'a pas changé visuellement mais la structure comporte des informations sémantiques complémentaires.</p>
-
-<p>{{EmbedLiveSample("explicitly_specifying_table_content_groups", 500, 200)}}</p>
-
-<h3 id="basic_styling">Mise en forme simple</h3>
-
-<p>Il est possible d'utiliser <a href="/fr/docs/Web/CSS">CSS</a> afin de modifier l'apparence d'une ligne d'un tableau. Tous les styles appliqués à un élément <code>&lt;tr&gt;</code> auront un impact sur les cellules de cette ligne (sauf si celles-ci indiquent un style par-dessus).</p>
-
-<p>Modifions ici la police et la couleur d'arrière-plan pour la ligne d'en-tête.</p>
-
-<h4 id="Résultat_4">Résultat</h4>
-
-<p>Là encore, regardons le résultat pour commencer.</p>
-
-<p>{{EmbedLiveSample("basic_styling", 500, 200)}}</p>
-
-<h4 id="HTML_4">HTML</h4>
-
-<pre class="brush: html">
-&lt;table&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th rowspan="2"&gt;Nom&lt;/th&gt;
-      &lt;th rowspan="2"&gt;ID&lt;/th&gt;
-      &lt;th colspan="2"&gt;Dates&lt;/th&gt;
-      &lt;th rowspan="2"&gt;Solde&lt;/th&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th&gt;Inscription&lt;/th&gt;
-      &lt;th&gt;Résiliation&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;Margaret Nguyen&lt;/th&gt;
-      &lt;td&gt;427311&lt;/td&gt;
-      &lt;td&gt;&lt;time datetime="2010-06-03"&gt;3 juin 2010&lt;/time&gt;&lt;/td&gt;
-      &lt;td&gt;n/a&lt;/td&gt;
-      &lt;td&gt;0&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;Edvard Galinski&lt;/th&gt;
-      &lt;td&gt;533175&lt;/td&gt;
-      &lt;td&gt;&lt;time datetime="2011-01013"&gt;13 janvier 2011&lt;/time&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;time datetime="2017-04008"&gt;8 avril 2017&lt;/time&gt;&lt;/td&gt;
-      &lt;td&gt;37&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;Hoshi Nakamura&lt;/th&gt;
-      &lt;td&gt;601942&lt;/td&gt;
-      &lt;td&gt;&lt;time datetime="2012-07-23"&gt;23 juillet 2012&lt;/time&gt;&lt;/td&gt;
-      &lt;td&gt;n/a&lt;/td&gt;
-      &lt;td&gt;15&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<h4 id="CSS_3">CSS</h4>
-
-<pre class="brush: css">
+```
+
+#### Résultat
+
+Le résultat n'a pas changé visuellement mais la structure comporte des informations sémantiques complémentaires.
+
+{{EmbedLiveSample("explicitly_specifying_table_content_groups", 500, 200)}}
+
+### Mise en forme simple
+
+Il est possible d'utiliser [CSS](/fr/docs/Web/CSS) afin de modifier l'apparence d'une ligne d'un tableau. Tous les styles appliqués à un élément `<tr>` auront un impact sur les cellules de cette ligne (sauf si celles-ci indiquent un style par-dessus).
+
+Modifions ici la police et la couleur d'arrière-plan pour la ligne d'en-tête.
+
+#### Résultat
+
+Là encore, regardons le résultat pour commencer.
+
+{{EmbedLiveSample("basic_styling", 500, 200)}}
+
+#### HTML
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th rowspan="2">Nom</th>
+      <th rowspan="2">ID</th>
+      <th colspan="2">Dates</th>
+      <th rowspan="2">Solde</th>
+    </tr>
+    <tr>
+      <th>Inscription</th>
+      <th>Résiliation</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Margaret Nguyen</th>
+      <td>427311</td>
+      <td><time datetime="2010-06-03">3 juin 2010</time></td>
+      <td>n/a</td>
+      <td>0</td>
+    </tr>
+    <tr>
+      <th scope="row">Edvard Galinski</th>
+      <td>533175</td>
+      <td><time datetime="2011-01013">13 janvier 2011</time></td>
+      <td><time datetime="2017-04008">8 avril 2017</time></td>
+      <td>37</td>
+    </tr>
+    <tr>
+      <th scope="row">Hoshi Nakamura</th>
+      <td>601942</td>
+      <td><time datetime="2012-07-23">23 juillet 2012</time></td>
+      <td>n/a</td>
+      <td>15</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+#### CSS
+
+```css
 table {
   border: 1px solid black;
   font: 16px "Open Sans", Helvetica, Arial, sans-serif;
 }
 
-thead &gt; tr {
+thead > tr {
   background-color: rgb(228, 240, 245);
 }
 
@@ -317,84 +315,84 @@ th, td {
   border: 1px solid black;
   padding:4px 6px;
 }
-</pre>
-
-<p>On utilise ici la propriété <a href="/fr/docs/Web/CSS/font"><code>font</code></a> sur l'élément <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a> afin d'avoir une police plus agréable. Ensuite, pour tous les éléments <code>&lt;tr&gt;</code> qui sont les fils de <a href="/fr/docs/Web/HTML/Element/thead"><code>&lt;thead&gt;</code></a> (c'est-à-dire pour les lignes de l'en-tête), on indique une couleur d'arrière-plan bleu clair. Cela se propagera à l'ensemble des cellules de l'en-tête.</p>
-
-<p>Cela ne modifie pas la mise en forme des éléments <a href="/fr/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a> de la première colonne où les noms des membres sont considérés comme des en-têtes de ligne.</p>
-
-<h3 id="advanced_styling">Mise en forme avancée</h3>
-
-<p>Allons encore plus loin dans la mise en forme avec des styles pour l'en-tête ainsi que le corps du tableau en alternant les couleurs des lignes et en utilisant différentes couleurs pour les cellules selon leur position, etc.</p>
-
-<h4 id="result_5">Résultat</h4>
-
-<p>Voici le résultat qui sera obtenu :</p>
-
-<p>{{EmbedLiveSample("advanced_styling", 500, 200)}}</p>
-
-<h4 id="HTML_4">HTML</h4>
-
-<p>Le HTML n'est pas modifié.</p>
-
-<pre class="brush: html">
-&lt;table&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th rowspan="2"&gt;Nom&lt;/th&gt;
-      &lt;th rowspan="2"&gt;ID&lt;/th&gt;
-      &lt;th colspan="2"&gt;Dates&lt;/th&gt;
-      &lt;th rowspan="2"&gt;Solde&lt;/th&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th&gt;Inscription&lt;/th&gt;
-      &lt;th&gt;Résiliation&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;Margaret Nguyen&lt;/th&gt;
-      &lt;td&gt;427311&lt;/td&gt;
-      &lt;td&gt;&lt;time datetime="2010-06-03"&gt;3 juin 2010&lt;/time&gt;&lt;/td&gt;
-      &lt;td&gt;n/a&lt;/td&gt;
-      &lt;td&gt;0&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;Edvard Galinski&lt;/th&gt;
-      &lt;td&gt;533175&lt;/td&gt;
-      &lt;td&gt;&lt;time datetime="2011-01013"&gt;13 janvier 2011&lt;/time&gt;&lt;/td&gt;
-      &lt;td&gt;&lt;time datetime="2017-04008"&gt;8 avril 2017&lt;/time&gt;&lt;/td&gt;
-      &lt;td&gt;37&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;Hoshi Nakamura&lt;/th&gt;
-      &lt;td&gt;601942&lt;/td&gt;
-      &lt;td&gt;&lt;time datetime="2012-07-23"&gt;23 juillet 2012&lt;/time&gt;&lt;/td&gt;
-      &lt;td&gt;n/a&lt;/td&gt;
-      &lt;td&gt;15&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-&lt;/table&gt;
-</pre>
-
-<h4 id="CSS_4">CSS</h4>
-
-<p>Ici, CSS est utilisé de façon plus marquée. Sans que ce soit compliqué, il y a beaucoup de choses à voir : autant les décomposer.</p>
-
-<h5 id="the_table_and_base_styles">Règles pour le tableau et les styles de base</h5>
-
-<pre class="brush: css">
+```
+
+On utilise ici la propriété [`font`](/fr/docs/Web/CSS/font) sur l'élément [`<table>`](/fr/docs/Web/HTML/Element/table) afin d'avoir une police plus agréable. Ensuite, pour tous les éléments `<tr>` qui sont les fils de [`<thead>`](/fr/docs/Web/HTML/Element/thead) (c'est-à-dire pour les lignes de l'en-tête), on indique une couleur d'arrière-plan bleu clair. Cela se propagera à l'ensemble des cellules de l'en-tête.
+
+Cela ne modifie pas la mise en forme des éléments [`<th>`](/fr/docs/Web/HTML/Element/th) de la première colonne où les noms des membres sont considérés comme des en-têtes de ligne.
+
+### Mise en forme avancée
+
+Allons encore plus loin dans la mise en forme avec des styles pour l'en-tête ainsi que le corps du tableau en alternant les couleurs des lignes et en utilisant différentes couleurs pour les cellules selon leur position, etc.
+
+#### Résultat
+
+Voici le résultat qui sera obtenu :
+
+{{EmbedLiveSample("advanced_styling", 500, 200)}}
+
+#### HTML
+
+Le HTML n'est pas modifié.
+
+```html
+<table>
+  <thead>
+    <tr>
+      <th rowspan="2">Nom</th>
+      <th rowspan="2">ID</th>
+      <th colspan="2">Dates</th>
+      <th rowspan="2">Solde</th>
+    </tr>
+    <tr>
+      <th>Inscription</th>
+      <th>Résiliation</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Margaret Nguyen</th>
+      <td>427311</td>
+      <td><time datetime="2010-06-03">3 juin 2010</time></td>
+      <td>n/a</td>
+      <td>0</td>
+    </tr>
+    <tr>
+      <th scope="row">Edvard Galinski</th>
+      <td>533175</td>
+      <td><time datetime="2011-01013">13 janvier 2011</time></td>
+      <td><time datetime="2017-04008">8 avril 2017</time></td>
+      <td>37</td>
+    </tr>
+    <tr>
+      <th scope="row">Hoshi Nakamura</th>
+      <td>601942</td>
+      <td><time datetime="2012-07-23">23 juillet 2012</time></td>
+      <td>n/a</td>
+      <td>15</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+#### CSS
+
+Ici, CSS est utilisé de façon plus marquée. Sans que ce soit compliqué, il y a beaucoup de choses à voir : autant les décomposer.
+
+##### Règles pour le tableau et les styles de base
+
+```css
 table {
   border: 1px solid black;
   font: 16px "Open Sans", Helvetica, Arial, sans-serif;
   border-spacing: 0;
   border-collapse: collapse;
 }
-</pre>
+```
 
-<p>Ici, on ajoute les propriétés <a href="/fr/docs/Web/CSS/border-spacing"><code>border-spacing</code></a> et <a href="/fr/docs/Web/CSS/border-collapse"><code>border-collapse</code></a> afin d'éliminer l'espace entre les cellules et afin de fusionner les bordures qui se touchent afin d'obtenir une seule bordure plutôt que des bordures doubles.</p>
+Ici, on ajoute les propriétés [`border-spacing`](/fr/docs/Web/CSS/border-spacing) et [`border-collapse`](/fr/docs/Web/CSS/border-collapse) afin d'éliminer l'espace entre les cellules et afin de fusionner les bordures qui se touchent afin d'obtenir une seule bordure plutôt que des bordures doubles.
 
-<pre class="brush: css">
+```css
 th, td {
   border: 1px solid black;
   padding:4px 6px;
@@ -403,130 +401,184 @@ th, td {
 th {
   vertical-align: bottom;
 }
-</pre>
+```
 
-<p>Voici le style par défaut pour l'ensemble des cellules. Ajoutons quelques personnalisations.</p>
+Voici le style par défaut pour l'ensemble des cellules. Ajoutons quelques personnalisations.
 
-<h5 id="the_top_header_overall">Ligne d'en-tête</h5>
+##### Ligne d'en-tête
 
-<p>Nous allons voir l'en-tête en deux parties. Pour commencer, mettons en forme l'en-tête de façon générale :</p>
+Nous allons voir l'en-tête en deux parties. Pour commencer, mettons en forme l'en-tête de façon générale :
 
-<pre class="brush: css">
-thead &gt; tr {
+```css
+thead > tr {
   background-color: rgb(228, 240, 245);
 }
 
-thead &gt; tr:nth-of-type(2) {
+thead > tr:nth-of-type(2) {
   border-bottom: 2px solid black;
 }
-</pre>
+```
 
-<p>On définit la couleur d'arrière-plan de tous les éléments <code>&lt;tr&gt;</code> dans la ligne d'en-tête du tableau (contenue dans <a href="/fr/docs/Web/HTML/Element/thead"><code>&lt;thead&gt;</code></a>). Ensuite, on définit la bordure basse pour que ce soit une ligne avec une épaisseur de deux pixels. On peut voir qu'on utilise le sélecteur <a href="/fr/docs/Web/CSS/:nth-of-type"><code>:nth-of-type</code></a> afin de cibler l'application de <a href="/fr/docs/Web/CSS/border-bottom"><code>border-bottom</code></a> sur la <em>deuxième</em> ligne de l'en-tête. Pourquoi ? Parce que l'en-tête se compose de deux lignes où on a des cellules fusionnées. Cela signifie qu'il y a effectivement deux lignes et appliquer ces règles à la première ligne ne fournirait pas le résultat attendu.</p>
+On définit la couleur d'arrière-plan de tous les éléments `<tr>` dans la ligne d'en-tête du tableau (contenue dans [`<thead>`](/fr/docs/Web/HTML/Element/thead)). Ensuite, on définit la bordure basse pour que ce soit une ligne avec une épaisseur de deux pixels. On peut voir qu'on utilise le sélecteur [`:nth-of-type`](/fr/docs/Web/CSS/:nth-of-type) afin de cibler l'application de [`border-bottom`](/fr/docs/Web/CSS/border-bottom) sur la _deuxième_ ligne de l'en-tête. Pourquoi ? Parce que l'en-tête se compose de deux lignes où on a des cellules fusionnées. Cela signifie qu'il y a effectivement deux lignes et appliquer ces règles à la première ligne ne fournirait pas le résultat attendu.
 
-<h5 id="the_joined_and_canceled_headers">Les en-têtes d'inscription et de résiliation</h5>
+##### Les en-têtes d'inscription et de résiliation
 
-<p>Mettons en forme ces deux cellules d'en-têtes en utilisant des teintes rouge / vert pour représenter l'aspect positif d'une inscription et l'aspect négatif d'une résiliation.</p>
+Mettons en forme ces deux cellules d'en-têtes en utilisant des teintes rouge / vert pour représenter l'aspect positif d'une inscription et l'aspect négatif d'une résiliation.
 
-<pre class="brush: css">
-thead &gt; tr:last-of-type &gt; th:nth-of-type(1) {
+```css
+thead > tr:last-of-type > th:nth-of-type(1) {
   background-color: rgb(225, 255, 225);
 }
 
-thead &gt; tr:last-of-type &gt; th:nth-of-type(2) {
+thead > tr:last-of-type > th:nth-of-type(2) {
   background-color: rgb(255, 225, 225);
 }
-</pre>
+```
 
-<p>Ici, on cible la dernière ligne de l'en-tête du tableau et on indique la couleur pour la première cellule d'en-tête (qui correspond à l'inscription) avec du vert et la seconde (qui correspond à la résiliation) avec du rouge.</p>
+Ici, on cible la dernière ligne de l'en-tête du tableau et on indique la couleur pour la première cellule d'en-tête (qui correspond à l'inscription) avec du vert et la seconde (qui correspond à la résiliation) avec du rouge.
 
-<h5 id="color_every_body_other_row_differently">Ajouter des couleurs pour les autres lignes</h5>
+##### Ajouter des couleurs pour les autres lignes
 
-<p>Pour améliorer la lisibilité d'un tableau, il est courant d'appliquer une alternance de couleur entre chaque ligne. Faisons cela en ciblant les lignes paires :</p>
+Pour améliorer la lisibilité d'un tableau, il est courant d'appliquer une alternance de couleur entre chaque ligne. Faisons cela en ciblant les lignes paires :
 
-<pre class="brush: css">
-tbody &gt; tr:nth-of-type(even) {
+```css
+tbody > tr:nth-of-type(even) {
   background-color: rgb(237, 238, 242);
 }
-</pre>
+```
 
-<h5 id="give_the_left-side_header_some_style">Mise en forme de la colonne d'en-tête gauche</h5>
+##### Mise en forme de la colonne d'en-tête gauche
 
-<p>On veut que la première colonne se démarque. Mettons la en forme également.</p>
+On veut que la première colonne se démarque. Mettons la en forme également.
 
-<pre class="brush: css">
-tbody &gt; tr &gt; th:first-of-type {
+```css
+tbody > tr > th:first-of-type {
   text-align: left;
   background-color: rgb(225, 229, 244);
 }
-</pre>
+```
 
-<p>Cela applique <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> à chaque première cellule de chaque ligne afin de justifier à gauche les noms des membres avec une couleur d'arrière-plan légèrement différentes.</p>
+Cela applique [`text-align`](/fr/docs/Web/CSS/text-align) à chaque première cellule de chaque ligne afin de justifier à gauche les noms des membres avec une couleur d'arrière-plan légèrement différentes.
 
-<h5 id="justify_the_balances">Justifier les soldes de compte</h5>
+##### Justifier les soldes de compte
 
-<p>Enfin, lorsqu'on affiche des valeurs monétaires, on les représente alignées à droite pour faciliter une lecture comparative entre les valeurs. Appliquons ceci à l'exemple.</p>
+Enfin, lorsqu'on affiche des valeurs monétaires, on les représente alignées à droite pour faciliter une lecture comparative entre les valeurs. Appliquons ceci à l'exemple.
 
-<pre class="brush: css">
-tbody &gt; tr &gt; td:last-of-type {
+```css
+tbody > tr > td:last-of-type {
   text-align:right;
 }
-</pre>
+```
 
-<p>Cette règle applique la propriété CSS <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> sur le dernier élément <a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a> de chaque ligne du corps du tableau avec la valeur <code>"right"</code>.</p>
+Cette règle applique la propriété CSS [`text-align`](/fr/docs/Web/CSS/text-align) sur le dernier élément [`<td>`](/fr/docs/Web/HTML/Element/td) de chaque ligne du corps du tableau avec la valeur `"right"`.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Zéro ou plusieurs éléments <a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a>, éventuellement mélangés. Les éléments de script (<a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/template"><code>&lt;template&gt;</code></a>) sont également utilisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>La balise de début est obligatoire. La balise de fin peut être absente si l'élément <code>&lt;tr&gt;</code> est immédiatement suivi par un élément <code>&lt;tr&gt;</code> ou si l'élément du groupe parent (<a href="/fr/docs/Web/HTML/Element/thead"><code>&lt;thead&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/tbody"><code>&lt;tbody&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/tfoot"><code>&lt;tfoot&gt;</code></a>) n'a plus d'autre contenu.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a> (uniquement si le tableau ne possède pas d'élément <a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a> et uniquement après un élément  <a href="/fr/docs/Web/HTML/Element/caption"><code>&lt;caption&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/thead"><code>&lt;thead&gt;</code></a>) , <a href="/fr/docs/Web/HTML/Element/thead"><code>&lt;thead&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/tbody"><code>&lt;tbody&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/tfoot"><code>&lt;tfoot&gt;</code></a>.</td>
-  </tr>
-  <tr>
-    <th scope="row">Rôle ARIA implicite</th>
-    <td><code><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></code></td>
-   </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td><a href="/fr/docs/Web/API/HTMLTableRowElement"><code>HTMLTableRowElement</code></a></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Content_categories"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        Zéro ou plusieurs éléments
+        <a href="/fr/docs/Web/HTML/Element/td"><code>&#x3C;td></code></a> ou
+        <a href="/fr/docs/Web/HTML/Element/th"><code>&#x3C;th></code></a
+        >, éventuellement mélangés. Les éléments de script (<a
+          href="/fr/docs/Web/HTML/Element/script"
+          ><code>&#x3C;script></code></a
+        >
+        et
+        <a href="/fr/docs/Web/HTML/Element/template"
+          ><code>&#x3C;template></code></a
+        >) sont également utilisés.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        La balise de début est obligatoire. La balise de fin peut être absente
+        si l'élément <code>&#x3C;tr></code> est immédiatement suivi par un
+        élément <code>&#x3C;tr></code> ou si l'élément du groupe parent (<a
+          href="/fr/docs/Web/HTML/Element/thead"
+          ><code>&#x3C;thead></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/tbody"><code>&#x3C;tbody></code></a>
+        ou
+        <a href="/fr/docs/Web/HTML/Element/tfoot"><code>&#x3C;tfoot></code></a
+        >) n'a plus d'autre contenu.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Un élément
+        <a href="/fr/docs/Web/HTML/Element/table"><code>&#x3C;table></code></a>
+        (uniquement si le tableau ne possède pas d'élément
+        <a href="/fr/docs/Web/HTML/Element/body"><code>&#x3C;body></code></a> et
+        uniquement après un élément
+        <a href="/fr/docs/Web/HTML/Element/caption"
+          ><code>&#x3C;caption></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/colgroup"
+          ><code>&#x3C;colgroup></code></a
+        >
+        ou
+        <a href="/fr/docs/Web/HTML/Element/thead"><code>&#x3C;thead></code></a
+        >) ,
+        <a href="/fr/docs/Web/HTML/Element/thead"><code>&#x3C;thead></code></a
+        >,
+        <a href="/fr/docs/Web/HTML/Element/tbody"><code>&#x3C;tbody></code></a>
+        ou
+        <a href="/fr/docs/Web/HTML/Element/tfoot"><code>&#x3C;tfoot></code></a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôle ARIA implicite</th>
+      <td>
+        <code
+          ><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Row_Role"
+            >row</a
+          ></code
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>
+        <a href="/fr/docs/Web/API/HTMLTableRowElement"
+          ><code>HTMLTableRowElement</code></a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
+
+{{Specifications}}
 
-<p>{{Specifications}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+{{Compat}}
 
-<p>{{Compat}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- [Apprendre : les tableaux HTML](/fr/docs/Learn/HTML/Tables) : une introduction à l'utilisation des tableaux qui aborde `<tr>`.
+- Les autres éléments HTML relatifs aux tableaux : [`<caption>`](/fr/docs/Web/HTML/Element/caption), [`<col>`](/fr/docs/Web/HTML/Element/col), [`<colgroup>`](/fr/docs/Web/HTML/Element/colgroup), [`<table>`](/fr/docs/Web/HTML/Element/table), [`<tbody>`](/fr/docs/Web/HTML/Element/tbody), [`<td>`](/fr/docs/Web/HTML/Element/td), [`<tfoot>`](/fr/docs/Web/HTML/Element/tfoot), [`<th>`](/fr/docs/Web/HTML/Element/th), [`<thead>`](/fr/docs/Web/HTML/Element/thead).
+- [`HTMLTableRowElement`](/fr/docs/Web/API/HTMLTableRowElement) : l'interface DOM sur laquelle `<tr>` est basé.
+- Les propriétés et pseudo-classes CSS qui sont particulièrement utiles pour mettre en forme l'élément `<tr>` :
 
-<ul>
-  <li><a href="/fr/docs/Learn/HTML/Tables">Apprendre : les tableaux HTML</a> : une introduction à l'utilisation des tableaux qui aborde <code>&lt;tr&gt;</code>.</li>
-  <li>Les autres éléments HTML relatifs aux tableaux : <a href="/fr/docs/Web/HTML/Element/caption"><code>&lt;caption&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/col"><code>&lt;col&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/colgroup"><code>&lt;colgroup&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/table"><code>&lt;table&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/tbody"><code>&lt;tbody&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/td"><code>&lt;td&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/tfoot"><code>&lt;tfoot&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/th"><code>&lt;th&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/thead"><code>&lt;thead&gt;</code></a>.</li>
-  <li><a href="/fr/docs/Web/API/HTMLTableRowElement"><code>HTMLTableRowElement</code></a> : l'interface DOM sur laquelle <code>&lt;tr&gt;</code> est basé.</li>
-  <li>Les propriétés et pseudo-classes CSS qui sont particulièrement utiles pour mettre en forme l'élément <code>&lt;tr&gt;</code> :
-  <ul>
-    <li>La pseudo-classe <a href="/fr/docs/Web/CSS/:nth-child"><code>:nth-child</code></a> qui permet de définir l'alignement des cellules dans la colonne ou sur une ligne</li>
-    <li>La propriété <a href="/fr/docs/Web/CSS/text-align"><code>text-align</code></a> qui permet d'aligner l'ensemble des cellules par rapport au même caractère (comme le point ou la virgule).</li>
-  </ul>
-  </li>
-</ul>
+  - La pseudo-classe [`:nth-child`](/fr/docs/Web/CSS/:nth-child) qui permet de définir l'alignement des cellules dans la colonne ou sur une ligne
+  - La propriété [`text-align`](/fr/docs/Web/CSS/text-align) qui permet d'aligner l'ensemble des cellules par rapport au même caractère (comme le point ou la virgule).
diff --git a/files/fr/web/html/element/track/index.md b/files/fr/web/html/element/track/index.md
index c70add3466..fabc4ea2a2 100644
--- a/files/fr/web/html/element/track/index.md
+++ b/files/fr/web/html/element/track/index.md
@@ -9,162 +9,148 @@ tags:
   - Web
 translation_of: Web/HTML/Element/track
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;track&gt;</code></strong> est utilisé comme élément fils d'un élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}} et permet de fournir une piste texte pour le média (par exemple afin de gérer automatiquement les sous-titres). Les pistes texte utilisées avec cet élément sont formatées selon <a href="/fr/docs/Web/API/WebVTT_API">le format WebVTT</a> (ce sont des fichiers <code>.vtt</code>) (WebVTT pour <em>Web Video Text Tracks</em>) ou selon <a href="https://w3c.github.io/ttml2/index.html">le format <em>Timed Text Markup Language</em> (TTML)</a>.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}</div>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>À l'instar des autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
-
-<dl>
- <dt>{{htmlattrdef("default")}}</dt>
- <dd>Cet attribut booléen indique que c'est cette piste qui doit être activée par défaut, sauf si les réglages de l'utilisateur indiquent qu'une autre piste est plus appropriée. Pour un élément média donné, il ne peut y avoir qu'une seule piste avec cet attribut.</dd>
- <dt>{{htmlattrdef("kind")}}</dt>
- <dd>La façon dont la piste texte doit être utilisée. La valeur par défaut est <code>subtitles</code> et si la valeur fournie est incorrecte, l'agent utilisateur doit utiliser la valeur <code>metadata</code>. Cet attribut est un attribut à valeur contrainte qui peut prendre l'une des valeurs suivantes :
- <ul>
-  <li><code>subtitles</code> (la valeur par défaut)
-   <ul>
-    <li>Les sous-titres fournissent une traduction du contenu lorsqu'il ne peut pas être compris par l'utilisateur. La piste peut, par exemple, contenir le texte espagnol d'un film joué en anglais.</li>
-    <li>Les sous-titres peuvent fournir du contenu supplémentaires, généralement des informations de contexte (par exemple, le texte qui défile au début d'un film Star Wars, la date ou le lieu d'une scène, etc.).</li>
-   </ul>
-  </li>
-  <li><code>captions</code>
-   <ul>
-    <li>La piste est une retransciption voire une traduction de la partie audio du média.</li>
-    <li>La piste peut contenir des informations non-verbales importantes comme des indications musicales ou des effets sonores. La piste peut également indiquer la source du bruit (musique, personnage, etc.).</li>
-    <li>Ce type de piste est adapté aux utilisateurs malentendants ou lorsque le son est désactivé.</li>
-   </ul>
-  </li>
-  <li><code>descriptions</code>
-   <ul>
-    <li>La piste est une description textuelle du contenu vidéo.</li>
-    <li>Ce type de piste est adapté aux personnes malvoyantes ou lorsque la vidéo ne peut pas être vue.</li>
-   </ul>
-  </li>
-  <li><code>chapters</code>
-   <ul>
-    <li>Les titres de chapitre utilisés lorsque l'utilisateur navigue au sein du média.</li>
-   </ul>
-  </li>
-  <li><code>metadata</code>
-   <ul>
-    <li>La piste est utilisé par des scripts, elle n'est pas visible pour l'utilisateur.</li>
-   </ul>
-  </li>
- </ul>
- </dd>
- <dt>{{htmlattrdef("label")}}</dt>
- <dd>Le titre associé à la piste et qui est affiché par le navigateur lorsque celui-ci liste les pistes disponibles.</dd>
- <dt>{{htmlattrdef("src")}}</dt>
- <dd>L'adresse du fichier pour la piste (celle du fichier<code>.vtt</code>). Cet attribut doit être une URL valide et doit nécessairement être présent dans l'élément. L'URL indiquée doit avoir la même origine à moins que l'élément parent {{HTMLElement("audio")}} ou {{HTMLElement("video")}} de l'élément <code>&lt;track&gt;</code> possède un attribut <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">crossorigin</a>.</dd>
- <dt>{{htmlattrdef("srclang")}}</dt>
- <dd>La langue dans laquelle est exprimée la piste textuelle. La valeur de cet attribut doit être une balise de langue <a href="https://r12a.github.io/app-subtags/">BCP 47</a>. Si l'attribut <code>kind</code> vaut <code>subtitles,</code> l'attribut <code>srclang</code> doit obligatoirement être défini.</dd>
-</dl>
-
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
-
-<h3 id="Types_de_piste">Types de piste</h3>
-
-<p>Le type de donnéefournit par un élément <code>track</code> est décrit par l'attribut <code>kind</code>. Cet attribut peut prendre une valeur parmi <code>subtitles</code>, <code>captions</code>, <code>descriptions</code>, <code>chapters</code> ou <code>metadata</code>. L'élément pointe vers un fichier source qui contient du texte avec des annotations temporelles que le navigateur affichera lorsque l'utilisateur en aura besoin.</p>
-
-<p>Un élément média ({{HTMLElement("audio")}} ou {{HTMLElement("video")}}) ne peut pas avoir plusieurs pistes partageant les mêmes valeurs pour les attributs <code>kind</code>, <code>srclang</code> et <code>label</code>.</p>
-
-<h3 id="Détecter_le_changement_de_texte">Détecter le changement de texte</h3>
-
-<p>{{page("/fr/docs/Web/API/TextTrack/cuechange_event", "On the track element")}}</p>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;video controls poster="/images/sample.gif"&gt;
-   &lt;source src="sample.mp4" type="video/mp4"&gt;
-   &lt;source src="sample.ogv" type="video/ogv"&gt;
-   &lt;track kind="captions" src="sampleCaptions.vtt" srclang="en"&gt;
-   &lt;track kind="descriptions"
-     src="sampleDescriptions.vtt" srclang="en"&gt;
-   &lt;track kind="chapters" src="chapitres.vtt" srclang="en"&gt;
-   &lt;track kind="subtitles" src="soustitres_de.vtt" srclang="de"&gt;
-   &lt;track kind="subtitles" src="soustitres_en.vtt" srclang="en"&gt;
-   &lt;track kind="subtitles" src="soustitres_ja.vtt" srclang="ja"&gt;
-   &lt;track kind="subtitles" src="soustitres_oz.vtt" srclang="oz"&gt;
-   &lt;track kind="metadata" src="keyStage1.vtt" srclang="en"
-     label="Key Stage 1"&gt;
-   &lt;track kind="metadata" src="keyStage2.vtt" srclang="en"
-     label="Key Stage 2"&gt;
-   &lt;track kind="metadata" src="keyStage3.vtt" srclang="en"
-     label="Key Stage 3"&gt;
-   &lt;!-- Contenu alternatif pour les navigateurs qui
-        ne prennent pas en charge video --&gt;
+{{HTMLRef}}
+
+L'élément HTML **`<track>`** est utilisé comme élément fils d'un élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}} et permet de fournir une piste texte pour le média (par exemple afin de gérer automatiquement les sous-titres). Les pistes texte utilisées avec cet élément sont formatées selon [le format WebVTT](/fr/docs/Web/API/WebVTT_API) (ce sont des fichiers `.vtt`) (WebVTT pour _Web Video Text Tracks_) ou selon [le format _Timed Text Markup Language_ (TTML)](https://w3c.github.io/ttml2/index.html).
+
+{{EmbedInteractiveExample("pages/tabbed/track.html", "tabbed-standard")}}
+
+## Attributs
+
+À l'instar des autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
+
+- {{htmlattrdef("default")}}
+  - : Cet attribut booléen indique que c'est cette piste qui doit être activée par défaut, sauf si les réglages de l'utilisateur indiquent qu'une autre piste est plus appropriée. Pour un élément média donné, il ne peut y avoir qu'une seule piste avec cet attribut.
+- {{htmlattrdef("kind")}}
+
+  - : La façon dont la piste texte doit être utilisée. La valeur par défaut est `subtitles` et si la valeur fournie est incorrecte, l'agent utilisateur doit utiliser la valeur `metadata`. Cet attribut est un attribut à valeur contrainte qui peut prendre l'une des valeurs suivantes :
+
+    - `subtitles` (la valeur par défaut)
+
+      - Les sous-titres fournissent une traduction du contenu lorsqu'il ne peut pas être compris par l'utilisateur. La piste peut, par exemple, contenir le texte espagnol d'un film joué en anglais.
+      - Les sous-titres peuvent fournir du contenu supplémentaires, généralement des informations de contexte (par exemple, le texte qui défile au début d'un film Star Wars, la date ou le lieu d'une scène, etc.).
+
+    - `captions`
+
+      - La piste est une retransciption voire une traduction de la partie audio du média.
+      - La piste peut contenir des informations non-verbales importantes comme des indications musicales ou des effets sonores. La piste peut également indiquer la source du bruit (musique, personnage, etc.).
+      - Ce type de piste est adapté aux utilisateurs malentendants ou lorsque le son est désactivé.
+
+    - `descriptions`
+
+      - La piste est une description textuelle du contenu vidéo.
+      - Ce type de piste est adapté aux personnes malvoyantes ou lorsque la vidéo ne peut pas être vue.
+
+    - `chapters`
+
+      - Les titres de chapitre utilisés lorsque l'utilisateur navigue au sein du média.
+
+    - `metadata`
+
+      - La piste est utilisé par des scripts, elle n'est pas visible pour l'utilisateur.
+
+- {{htmlattrdef("label")}}
+  - : Le titre associé à la piste et qui est affiché par le navigateur lorsque celui-ci liste les pistes disponibles.
+- {{htmlattrdef("src")}}
+  - : L'adresse du fichier pour la piste (celle du fichier`.vtt`). Cet attribut doit être une URL valide et doit nécessairement être présent dans l'élément. L'URL indiquée doit avoir la même origine à moins que l'élément parent {{HTMLElement("audio")}} ou {{HTMLElement("video")}} de l'élément `<track>` possède un attribut [crossorigin](/fr/docs/Web/HTML/Reglages_des_attributs_CORS).
+- {{htmlattrdef("srclang")}}
+  - : La langue dans laquelle est exprimée la piste textuelle. La valeur de cet attribut doit être une balise de langue [BCP 47](https://r12a.github.io/app-subtags/). Si l'attribut `kind` vaut `subtitles,` l'attribut `srclang` doit obligatoirement être défini.
+
+## Notes d'utilisation
+
+### Types de piste
+
+Le type de donnéefournit par un élément `track` est décrit par l'attribut `kind`. Cet attribut peut prendre une valeur parmi `subtitles`, `captions`, `descriptions`, `chapters` ou `metadata`. L'élément pointe vers un fichier source qui contient du texte avec des annotations temporelles que le navigateur affichera lorsque l'utilisateur en aura besoin.
+
+Un élément média ({{HTMLElement("audio")}} ou {{HTMLElement("video")}}) ne peut pas avoir plusieurs pistes partageant les mêmes valeurs pour les attributs `kind`, `srclang` et `label`.
+
+### Détecter le changement de texte
+
+{{page("/fr/docs/Web/API/TextTrack/cuechange_event", "On the track element")}}
+
+## Exemples
+
+### HTML
+
+```html
+<video controls poster="/images/sample.gif">
+   <source src="sample.mp4" type="video/mp4">
+   <source src="sample.ogv" type="video/ogv">
+   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
+   <track kind="descriptions"
+     src="sampleDescriptions.vtt" srclang="en">
+   <track kind="chapters" src="chapitres.vtt" srclang="en">
+   <track kind="subtitles" src="soustitres_de.vtt" srclang="de">
+   <track kind="subtitles" src="soustitres_en.vtt" srclang="en">
+   <track kind="subtitles" src="soustitres_ja.vtt" srclang="ja">
+   <track kind="subtitles" src="soustitres_oz.vtt" srclang="oz">
+   <track kind="metadata" src="keyStage1.vtt" srclang="en"
+     label="Key Stage 1">
+   <track kind="metadata" src="keyStage2.vtt" srclang="en"
+     label="Key Stage 2">
+   <track kind="metadata" src="keyStage3.vtt" srclang="en"
+     label="Key Stage 3">
+   <!-- Contenu alternatif pour les navigateurs qui
+        ne prennent pas en charge video -->
    ...
-&lt;/video&gt;
-</pre>
+</video>
+```
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu">Catégories de contenu</a></th>
-   <td>Aucune</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Aucun, cet élément est un élément vide.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>Étant un élément vide, la balise de début doit être présente et il ne doit pas y avoir de balise de fin.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Un élément média avant tout autre <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Aucune.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLTrackElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>Aucune</td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Aucun, cet élément est un élément vide.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>
+        Étant un élément vide, la balise de début doit être présente et il ne
+        doit pas y avoir de balise de fin.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Un élément média avant tout autre
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Aucune.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLTrackElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "embedded-content-0.html#the-track-element", "track element")}}</td>
-   <td>{{Spec2("HTML5 W3C")}}</td>
-   <td>Définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                        | État                             | Commentaires         |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- |
+| {{SpecName('HTML WHATWG','embedded-content.html#the-track-element','track element')}}     | {{Spec2('HTML WHATWG')}} |                      |
+| {{SpecName("HTML5 W3C", "embedded-content-0.html#the-track-element", "track element")}} | {{Spec2("HTML5 W3C")}}     | Définition initiale. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.track")}}</p>
+{{Compat("html.elements.track")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/WebVTT_API">Le format WebVTT</a></li>
- <li>{{domxref("HTMLMediaElement.textTracks")}}</li>
-</ul>
+- [Le format WebVTT](/fr/docs/Web/API/WebVTT_API)
+- {{domxref("HTMLMediaElement.textTracks")}}
diff --git a/files/fr/web/html/element/tt/index.md b/files/fr/web/html/element/tt/index.md
index f10fc657d2..6335c64a28 100644
--- a/files/fr/web/html/element/tt/index.md
+++ b/files/fr/web/html/element/tt/index.md
@@ -9,143 +9,143 @@ tags:
   - Web
 translation_of: Web/HTML/Element/tt
 ---
-<div>{{obsolete_header}}{{HTMLRef}}</div>
+{{obsolete_header}}{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;tt&gt;</code></strong> (pour <em>Teletype Text</em>) crée un élément en ligne, écrit dans la police à chasse fixe par défaut du navigateur. Cet élément a été conçu pour mettre en forme du texte comme s'il apparaissait sur un affichage à largeur fixe tel qu'un téléscripteur.</p>
+L'élément HTML **`<tt>`** (pour _Teletype Text_) crée un élément en ligne, écrit dans la police à chasse fixe par défaut du navigateur. Cet élément a été conçu pour mettre en forme du texte comme s'il apparaissait sur un affichage à largeur fixe tel qu'un téléscripteur.
 
-<p>Cet élément est désormais obsolète et un élément {{HTMLElement("code")}}, {{HTMLElement("kbd")}}, {{HTMLElement("samp")}} ou {{HTMLElement("var")}} pourra être utilisé à la place s'il faut afficher du texte en incise avec une police à chasse fixe. On pourra utiliser l'élément {{HTMLElement("pre")}} pour afficher un bloc de contenu préformaté (également généralement affiché dans une police à chasse fixe).</p>
+Cet élément est désormais obsolète et un élément {{HTMLElement("code")}}, {{HTMLElement("kbd")}}, {{HTMLElement("samp")}} ou {{HTMLElement("var")}} pourra être utilisé à la place s'il faut afficher du texte en incise avec une police à chasse fixe. On pourra utiliser l'élément {{HTMLElement("pre")}} pour afficher un bloc de contenu préformaté (également généralement affiché dans une police à chasse fixe).
 
-<div class="note">
-  <p><strong>Note :</strong> Si aucun de ces éléments ne correspond à la sémantique portée par votre contenu (lorsque, par exemple, il ne s'agit que d'un effet de mise en forme), vous pouvez utiliser un élément {{HTMLElement("span")}} mis en forme avec CSS (par exemple la propriété {{cssxref("font-family")}}).</p>
-</div>
+> **Note :** Si aucun de ces éléments ne correspond à la sémantique portée par votre contenu (lorsque, par exemple, il ne s'agit que d'un effet de mise en forme), vous pouvez utiliser un élément {{HTMLElement("span")}} mis en forme avec CSS (par exemple la propriété {{cssxref("font-family")}}).
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<p>Cet exemple utilise <code>&lt;tt&gt;</code> afin d'afficher le texte affiché et saisi dans un terminal.</p>
+Cet exemple utilise `<tt>` afin d'afficher le texte affiché et saisi dans un terminal.
 
-<pre class="brush:html">&lt;p&gt;
+```html
+<p>
   Veuillez saisir la commande telnet suivante :
-  &lt;code&gt;set localecho&lt;/code&gt;&lt;br /&gt;
+  <code>set localecho</code><br />
   Le client telnet devrait alors afficher :
-  &lt;tt&gt;Local Echo is on&lt;/tt&gt;
-&lt;/p&gt;
-</pre>
+  <tt>Local Echo is on</tt>
+</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_simple", 650, 80)}}</p>
+{{EmbedLiveSample("Exemple_simple", 650, 80)}}
 
-<h3 id="Surcharger_la_police_par_défaut">Surcharger la police par défaut</h3>
+### Surcharger la police par défaut
 
-<p>Il est possible de surcharger la police par défaut utilisée pour cet élément grâce à CSS :</p>
+Il est possible de surcharger la police par défaut utilisée pour cet élément grâce à CSS :
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">tt {
+```css
+tt {
   font-family: "Lucida Console", "Menlo", "Monaco", "Courier",
                monospace;
-}</pre>
+}
+```
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush:html">&lt;p&gt;
+```html
+<p>
   Veuillez saisir la commande telnet suivante :
-  &lt;code&gt;set localecho&lt;/code&gt;&lt;br /&gt;
+  <code>set localecho</code><br />
   Le client telnet devrait alors afficher :
-  &lt;tt&gt;Local Echo is on&lt;/tt&gt;
-&lt;/p&gt;
-</pre>
+  <tt>Local Echo is on</tt>
+</p>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Surcharger_la_police_par_défaut", 650, 80)}}</p>
+{{EmbedLiveSample("Surcharger_la_police_par_défaut", 650, 80)}}
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Par défaut, le contenu de l'élément <code>&lt;tt&gt;</code> est affiché avec la police à chasse fixe par défaut du navigateur. Comme vu dans l'exemple précédent, il est possible de surcharger cette police.</p>
+Par défaut, le contenu de l'élément `<tt>` est affiché avec la police à chasse fixe par défaut du navigateur. Comme vu dans l'exemple précédent, il est possible de surcharger cette police.
 
-<div class="note">
-<p><strong>Note :</strong> Les règles de style propres à l'utilisateur sont prioritaires par rapport aux feuilles de style d'un site ou d'une application web.</p>
-</div>
+> **Note :** Les règles de style propres à l'utilisateur sont prioritaires par rapport aux feuilles de style d'un site ou d'une application web.
 
-<p>Bien que cet élément n'ait pas été officiellement déprécié en HTML 4.01, son utilisation a été déconseillée pour privilégier d'autres éléments HTML ou une mise en forme via CSS. L'élément <code>&lt;tt&gt;</code> est désormais obsolète en HTML5.</p>
+Bien que cet élément n'ait pas été officiellement déprécié en HTML 4.01, son utilisation a été déconseillée pour privilégier d'autres éléments HTML ou une mise en forme via CSS. L'élément `<tt>` est désormais obsolète en HTML5.
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'obsolete.html#tt', '&lt;tt&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'obsolete.html#elementdef-tt', '&lt;tt&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;tt&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'obsolete.html#tt', '&lt;tt&gt;')}}                 | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'obsolete.html#elementdef-tt', '&lt;tt&gt;')}}     | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;tt&gt;')}} | {{Spec2('HTML4.01')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.tt")}}</p>
+{{Compat("html.elements.tt")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{HTMLElement("code")}}</li>
- <li>{{HTMLElement("var")}}</li>
- <li>{{HTMLElement("kbd")}}</li>
- <li>{{HTMLElement("samp")}}</li>
- <li>{{HTMLElement("pre")}}</li>
-</ul>
+- {{HTMLElement("code")}}
+- {{HTMLElement("var")}}
+- {{HTMLElement("kbd")}}
+- {{HTMLElement("samp")}}
+- {{HTMLElement("pre")}}
diff --git a/files/fr/web/html/element/u/index.md b/files/fr/web/html/element/u/index.md
index 169e81d6bb..1ed27bb44b 100644
--- a/files/fr/web/html/element/u/index.md
+++ b/files/fr/web/html/element/u/index.md
@@ -8,182 +8,186 @@ tags:
   - Web
 translation_of: Web/HTML/Element/u
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;u&gt;</code></strong> permet d'afficher un fragment de texte qui est annoté avec des éléments non textuels. Par défaut, le contenu de l'élément est souligné. Cela pourra par exemple être le cas pour marquer un texte comme étant un nom propre chinois, ou pour marquer un texte qui a été mal orthographié.</p>
+L'élément HTML **`<u>`** permet d'afficher un fragment de texte qui est annoté avec des éléments non textuels. Par défaut, le contenu de l'élément est souligné. Cela pourra par exemple être le cas pour marquer un texte comme étant un nom propre chinois, ou pour marquer un texte qui a été mal orthographié.
 
-<div class="warning">
-<p><strong>Attention :</strong> Cet élément était auparavant appelé <em>underline</em> pour les anciennes versions des spécifications HTML. Si on souhaite simplement souligner du texte, il ne faudra pas utiliser cet élément mais la propriété CSS {{cssxref("text-decoration")}} avec la valeur <code>"underline"</code>.</p>
-</div>
+> **Attention :** Cet élément était auparavant appelé _underline_ pour les anciennes versions des spécifications HTML. Si on souhaite simplement souligner du texte, il ne faudra pas utiliser cet élément mais la propriété CSS {{cssxref("text-decoration")}} avec la valeur `"underline"`.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/u.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut uniquement <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<p>Étant seulement un élément de mise en forme, l'élément {{HTMLElement("u")}} a été déprécié en HTML 4 et XHTML 1. Il a été ré-introduit en HTML5 avec une autre signification : le contenu de l'élément est annoté avec une annotation non-textuelle.</p>
+Étant seulement un élément de mise en forme, l'élément {{HTMLElement("u")}} a été déprécié en HTML 4 et XHTML 1. Il a été ré-introduit en HTML5 avec une autre signification : le contenu de l'élément est annoté avec une annotation non-textuelle.
 
-<p>La spécification rappelle que dans la majorité des cas, d'autres éléments que <code>&lt;u&gt;</code> doivent être utilisés.</p>
+La spécification rappelle que dans la majorité des cas, d'autres éléments que `<u>` doivent être utilisés.
 
-<div class="note">
-<p><strong>Note :</strong> Attention à la mise en forme par défaut d'un élément <code>&lt;u&gt;</code> qui le souligne. Cela peut être source de confusion entre un tel texte et un lien hypertexte (également souligné par défaut).</p>
-</div>
+> **Note :** Attention à la mise en forme par défaut d'un élément `<u>` qui le souligne. Cela peut être source de confusion entre un tel texte et un lien hypertexte (également souligné par défaut).
 
-<h3 id="Cas_d'utilisation">Cas d'utilisation</h3>
+### Cas d'utilisation
 
-<p>L'élément <code>&lt;u&gt;</code> peut être utilisé afin d'indiquer des erreurs d'orthographe ou de grammaire, afin d'indiquer des noms propres au sein d'un texte écrit en chinois ou afin d'annoter un texte de façon visuelle.</p>
+L'élément `<u>` peut être utilisé afin d'indiquer des erreurs d'orthographe ou de grammaire, afin d'indiquer des noms propres au sein d'un texte écrit en chinois ou afin d'annoter un texte de façon visuelle.
 
-<p>L'élément <code>&lt;u&gt;</code> ne doit pas être utilisé afin de simplement souligner un texte ou afin d'indiquer le titre d'une œuvre.</p>
+L'élément `<u>` ne doit pas être utilisé afin de simplement souligner un texte ou afin d'indiquer le titre d'une œuvre.
 
-<h3 id="Autres_éléments_pouvant_être_utilisés">Autres éléments pouvant être utilisés</h3>
+### Autres éléments pouvant être utilisés
 
-<p>Dans la plupart des cas, il faudra utiliser un autre élément que <code>&lt;u&gt;</code> :</p>
+Dans la plupart des cas, il faudra utiliser un autre élément que `<u>` :
 
-<ul>
- <li>{{HTMLElement("em")}} afin d'indiquer une emphase</li>
- <li>{{HTMLElement("b")}} afin d'indiquer une attention particulière</li>
- <li>{{HTMLElement("mark")}} afin de marquer certains mots-clés ou phrases</li>
- <li>{{HTMLElement("strong")}} afin d'indiquer que le texte a une importance particulière</li>
- <li>{{HTMLElement("cite")}} afin d'indiquer le titre d'une œuvre ou d'une publication</li>
- <li>{{HTMLElement("i")}} afin d'indiquer un terme technique, des noms de navires, des pensées ou des translitérations au sein d'un texte occidental.</li>
-</ul>
+- {{HTMLElement("em")}} afin d'indiquer une emphase
+- {{HTMLElement("b")}} afin d'indiquer une attention particulière
+- {{HTMLElement("mark")}} afin de marquer certains mots-clés ou phrases
+- {{HTMLElement("strong")}} afin d'indiquer que le texte a une importance particulière
+- {{HTMLElement("cite")}} afin d'indiquer le titre d'une œuvre ou d'une publication
+- {{HTMLElement("i")}} afin d'indiquer un terme technique, des noms de navires, des pensées ou des translitérations au sein d'un texte occidental.
 
-<p>Afin de fournir une annotation textuelle, on pourra utiliser l'élément {{HTMLElement("ruby")}}.</p>
+Afin de fournir une annotation textuelle, on pourra utiliser l'élément {{HTMLElement("ruby")}}.
 
-<p>Afin de modifier la mise en forme, sans apporter de modification sémantique, on utilisera la propriété {{cssxref("text-decoration")}} avec la valeur <code>"underline"</code>.</p>
+Afin de modifier la mise en forme, sans apporter de modification sémantique, on utilisera la propriété {{cssxref("text-decoration")}} avec la valeur `"underline"`.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Indiquer_une_erreur">Indiquer une erreur</h3>
+### Indiquer une erreur
 
-<p>Dans cet exemple, on utilise <code>&lt;u&gt;</code> et des règles CSS pour afficher un paragraphe qui contient une coquille. L'erreur est indiquée avec une ligne ondulée rouge sous le texte.</p>
+Dans cet exemple, on utilise `<u>` et des règles CSS pour afficher un paragraphe qui contient une coquille. L'erreur est indiquée avec une ligne ondulée rouge sous le texte.
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Ce paragraphe contient un mot mal
-  &lt;u class="spelling"&gt;rothografié&lt;/u&gt;.
-&lt;/p&gt;</pre>
+  <u class="spelling">rothografié</u>.
+</p>
+```
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">u.spelling {
+```css
+u.spelling {
   text-decoration: red wavy underline;
-}</pre>
+}
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Indiquer_une_erreur", 650, 80)}}</p>
+{{EmbedLiveSample("Indiquer_une_erreur", 650, 80)}}
 
-<h3 id="Éviter_&lt;u>">Éviter <code>&lt;u&gt;</code></h3>
+### Éviter `<u>`
 
-<p>La plupart du temps, ce n'est pas l'élément <code>&lt;u&gt;</code> qu'il faut utiliser. Voici quelques exemples de ces cas et les méthodes à privilégier.</p>
+La plupart du temps, ce n'est pas l'élément `<u>` qu'il faut utiliser. Voici quelques exemples de ces cas et les méthodes à privilégier.
 
-<h4 id="Souligner_pour_la_simple_mise_en_forme">Souligner pour la simple mise en forme</h4>
+#### Souligner pour la simple mise en forme
 
-<p>Pour souligner du texte sans que cela ait une quelconque portée sémantique, on utilisera un élément {{HTMLElement("span")}} qu'on mettra en forme avec la propriété CSS  {{cssxref("text-decoration")}} et la valeur <code>"underline"</code> :</p>
+Pour souligner du texte sans que cela ait une quelconque portée sémantique, on utilisera un élément {{HTMLElement("span")}} qu'on mettra en forme avec la propriété CSS  {{cssxref("text-decoration")}} et la valeur `"underline"` :
 
-<h5 id="HTML_2">HTML</h5>
+##### HTML
 
-<pre class="brush: html">&lt;span class="underline"&gt;Le plat du jour&lt;/span&gt;
-&lt;br&gt;
-Soupe de potiron avec un soupçon de noix de muscade</pre>
+```html
+<span class="underline">Le plat du jour</span>
+<br>
+Soupe de potiron avec un soupçon de noix de muscade
+```
 
-<h5 id="CSS_2">CSS</h5>
+##### CSS
 
-<pre class="brush: css">.underline {
+```css
+.underline {
   text-decoration: underline;
-}</pre>
+}
+```
 
-<h5 id="Résultat_2">Résultat</h5>
+##### Résultat
 
-<p>{{EmbedLiveSample("Souligner_pour_la_simple_mise_en_forme", 650, 80)}}</p>
+{{EmbedLiveSample("Souligner_pour_la_simple_mise_en_forme", 650, 80)}}
 
-<h4 id="Indiquer_le_titre_pour_un_livre">Indiquer le titre pour un livre</h4>
+#### Indiquer le titre pour un livre
 
-<p>Les titres de livres doivent être indiqués avec un élément {{HTMLElement("cite")}} et non avec <code>&lt;u&gt;</code> ou <code>&lt;i&gt;</code>.</p>
+Les titres de livres doivent être indiqués avec un élément {{HTMLElement("cite")}} et non avec `<u>` ou `<i>`.
 
-<h5 id="HTML_3">HTML</h5>
+##### HTML
 
-<pre class="brush: html">&lt;p&gt;
-  Nous avons lu &lt;cite&gt;La Horde du Contrevent&lt;/cite&gt;
+```html
+<p>
+  Nous avons lu <cite>La Horde du Contrevent</cite>
   au cours du premier trimestre.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h5 id="Résultat">Résultat</h5>
+##### Résultat
 
-<p>{{EmbedLiveSample("Indiquer_le_titre_pour_un_livre", 650, 80)}}</p>
+{{EmbedLiveSample("Indiquer_le_titre_pour_un_livre", 650, 80)}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phras.C3.A9"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-u-element', '&lt;u&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-u-element', '&lt;u&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                | État                             | Commentaires |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-u-element', '&lt;u&gt;')}}             | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-u-element', '&lt;u&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
+| {{SpecName('HTML4.01', 'present/graphics.html#h-15.2.1', '&lt;b&gt;')}}             | {{Spec2('HTML4.01')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.u")}}</p>
+{{Compat("html.elements.u")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les éléments {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}} et {{HTMLElement("cite")}} qui, selon les cas, peuvent être utilisés à la place de <code>&lt;u&gt;</code>.</li>
- <li>La propriété CSS {{cssxref("text-decoration")}} qui permet d'obtenir un effet stylistique semblable à la mise en forme par défaut d'un élément <code>&lt;u&gt;</code>.</li>
-</ul>
+- Les éléments {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}} et {{HTMLElement("cite")}} qui, selon les cas, peuvent être utilisés à la place de `<u>`.
+- La propriété CSS {{cssxref("text-decoration")}} qui permet d'obtenir un effet stylistique semblable à la mise en forme par défaut d'un élément `<u>`.
diff --git a/files/fr/web/html/element/ul/index.md b/files/fr/web/html/element/ul/index.md
index 41919488a2..b2cd998f98 100644
--- a/files/fr/web/html/element/ul/index.md
+++ b/files/fr/web/html/element/ul/index.md
@@ -8,184 +8,193 @@ tags:
   - Web
 translation_of: Web/HTML/Element/ul
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;ul&gt;</code></strong> représente une liste d'éléments sans ordre particulier. Il est souvent représenté par une liste à puces.</p>
+L'élément HTML **`<ul>`** représente une liste d'éléments sans ordre particulier. Il est souvent représenté par une liste à puces.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/ul.html", "tabbed-standard")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>À l'instar des différents éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+À l'instar des différents éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h3 id="Attributs_dépréciés_ou_obsolètes">Attributs dépréciés ou obsolètes</h3>
+### Attributs dépréciés ou obsolètes
 
-<dl>
- <dt>{{htmlattrdef("compact")}}{{Deprecated_inline}}</dt>
- <dd>Cet attribut booléen fournit une indication pour afficher la liste en mode compact. L'interprétation de cet attribut est laissée à la discrétion de l'agent utilisateur et ne fonctionne pas pour tous les navigateurs.
- <div class="warning">
-   <p><strong>Attention :</strong> Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété {{cssxref("line-height")}} avec la valeur <code>80%</code> pour l'élément <code>&lt;ul&gt;</code>.</p></div>
- </dd>
- <dt>{{htmlattrdef("type")}}{{Deprecated_inline}}</dt>
- <dd>Cet attribut permet de définir le style de puce utilisé pour la liste. Les valeurs définies au sein des spécifications pour HTML3.2 et HTML 4.0/4.01 sont :
- <ul>
-  <li><code>circle</code>,</li>
-  <li><code>disc</code>,</li>
-  <li>and <code>square</code>.</li>
- </ul>
+- {{htmlattrdef("compact")}}{{Deprecated_inline}}
 
- <p>Un quatrième type a été défini dans l'interface WebTV : <code>triangle</code> mais tous les navigateurs ne l'implémentent pas.</p>
+  - : Cet attribut booléen fournit une indication pour afficher la liste en mode compact. L'interprétation de cet attribut est laissée à la discrétion de l'agent utilisateur et ne fonctionne pas pour tous les navigateurs.
 
- <div class="warning">
-   <p><strong>Attention :</strong>Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété CSS {{cssxref("list-style-type")}} à la place.</p>
-  </div>
- </dd>
-</dl>
+    > **Attention :** Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété {{cssxref("line-height")}} avec la valeur `80%` pour l'élément `<ul>`.
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+- {{htmlattrdef("type")}}{{Deprecated_inline}}
 
-<ul>
- <li>L'élément <code>&lt;ul&gt;</code> doit être utilisé pour regrouper plusieurs éléments qui n'ont pas de relation d'ordre. Si on hésite entre {{HTMLElement("ol")}} et {{HTMLElement("ul")}}, on se demandera si changer l'ordre des éléments de la liste a un impact : si le déplacement d'un élément change la signification, cela signifie que l'ordre est important et qu'il faudra utiliser {{HTMLElement("ol")}}, sinon l'ordre n'importe pas et {{HTMLElement("ul")}} peut être utilisé.</li>
- <li>La propriété CSS {{cssxref("list-style-type")}} est utile pour choisir le type de puce utilisé.</li>
- <li>Il n'y a pas de limite pour l'imbrication des listes avec les éléments {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.</li>
-</ul>
+  - : Cet attribut permet de définir le style de puce utilisé pour la liste. Les valeurs définies au sein des spécifications pour HTML3.2 et HTML 4.0/4.01 sont :
+
+    - `circle`,
+    - `disc`,
+    - and `square`.
+
+    Un quatrième type a été défini dans l'interface WebTV : `triangle` mais tous les navigateurs ne l'implémentent pas.
+
+    > **Attention :**Cet attribut a été déprécié et ne doit pas être utilisé. Pour obtenir le même effet, on pourra utiliser la propriété CSS {{cssxref("list-style-type")}} à la place.
 
-<h2 id="Exemples">Exemples</h2>
+## Notes d'utilisation
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+- L'élément `<ul>` doit être utilisé pour regrouper plusieurs éléments qui n'ont pas de relation d'ordre. Si on hésite entre {{HTMLElement("ol")}} et {{HTMLElement("ul")}}, on se demandera si changer l'ordre des éléments de la liste a un impact : si le déplacement d'un élément change la signification, cela signifie que l'ordre est important et qu'il faudra utiliser {{HTMLElement("ol")}}, sinon l'ordre n'importe pas et {{HTMLElement("ul")}} peut être utilisé.
+- La propriété CSS {{cssxref("list-style-type")}} est utile pour choisir le type de puce utilisé.
+- Il n'y a pas de limite pour l'imbrication des listes avec les éléments {{HTMLElement("ol")}} et {{HTMLElement("ul")}}.
 
-<h4 id="HTML">HTML</h4>
+## Exemples
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;1 artichaut&lt;/li&gt;
-  &lt;li&gt;De l'essuie-tout&lt;/li&gt;
-  &lt;li&gt;200g de chocolat&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+### Exemple simple
+
+#### HTML
+
+```html
+<ul>
+  <li>1 artichaut</li>
+  <li>De l'essuie-tout</li>
+  <li>200g de chocolat</li>
+</ul>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_simple","100%","150")}}</p>
+{{EmbedLiveSample("Exemple_simple","100%","150")}}
 
-<h3 id="Liste_imbriquée">Liste imbriquée</h3>
+### Liste imbriquée
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;1 artichaut&lt;/li&gt;
-  &lt;li&gt;Les trucs pour le gateau
-  &lt;!-- On voit que &lt;/li&gt; n'est pas là --&gt;
-    &lt;ul&gt;
-      &lt;li&gt;3 oeufs&lt;/li&gt;
-      &lt;li&gt;La génoise
-      &lt;!-- Là on ouvre une autre liste --&gt;
-        &lt;ul&gt;
-          &lt;li&gt;100g de sucre&lt;/li&gt;
-          &lt;li&gt;1 oeuf&lt;/li&gt;
-          &lt;li&gt;150g de farine&lt;/li&gt;
-        &lt;/ul&gt;
-      &lt;/li&gt; &lt;!-- On ferme la liste la plus imbriquée --&gt;
-      &lt;li&gt;200g de chocolat&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;!-- On ferme la liste imbriquée avec &lt;/li&gt; --&gt;
-  &lt;/li&gt;
-  &lt;li&gt;De l'essuie-tout&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul>
+  <li>1 artichaut</li>
+  <li>Les trucs pour le gateau
+  <!-- On voit que </li> n'est pas là -->
+    <ul>
+      <li>3 oeufs</li>
+      <li>La génoise
+      <!-- Là on ouvre une autre liste -->
+        <ul>
+          <li>100g de sucre</li>
+          <li>1 oeuf</li>
+          <li>150g de farine</li>
+        </ul>
+      </li> <!-- On ferme la liste la plus imbriquée -->
+      <li>200g de chocolat</li>
+    </ul>
+  <!-- On ferme la liste imbriquée avec </li> -->
+  </li>
+  <li>De l'essuie-tout</li>
+</ul>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Liste_imbriquée","100%","230")}}</p>
+{{EmbedLiveSample("Liste_imbriquée","100%","230")}}
 
-<h3 id="&lt;ul>_et_&lt;ol>_imbriqués"><code>&lt;ul&gt;</code> et <code>&lt;ol&gt;</code> imbriqués</h3>
+### `<ul>` et `<ol>` imbriqués
 
-<h4 id="HTML_3">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;Lire un livre&lt;/li&gt;
-  &lt;li&gt;Préparer une soupe
-    &lt;ol&gt;
-      &lt;li&gt;Couper les légumes&lt;/li&gt;
-      &lt;li&gt;Mettre dans l'eau et cuire&lt;/li&gt;
-      &lt;li&gt;Mouliner&lt;/li&gt;
-    &lt;/ol&gt;
-  &lt;/li&gt;
-  &lt;li&gt;Relever le courrier&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
+```html
+<ul>
+  <li>Lire un livre</li>
+  <li>Préparer une soupe
+    <ol>
+      <li>Couper les légumes</li>
+      <li>Mettre dans l'eau et cuire</li>
+      <li>Mouliner</li>
+    </ol>
+  </li>
+  <li>Relever le courrier</li>
+</ul>
+```
 
-<h4 id="Résultat_3">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("&lt;ul&gt;_et_&lt;ol&gt;_imbriqués","100%","180")}}</p>
+{{EmbedLiveSample("&lt;ul&gt;_et_&lt;ol&gt;_imbriqués","100%","180")}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, et du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a> si les enfants de l'élément <code>&lt;ul&gt;</code> incluent au moins un élément {{HTMLElement("li")}}. <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">Contenu tangible.</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Zéro ou plusieurs éléments {{HTMLElement("li")}} qui peuvent éventuellement contenir à leur tour des éléments {{HTMLElement("ol")}} ou {{HTMLElement("ul")}} (listes imbriquées).</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLUListElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >, et du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >
+        si les enfants de l'élément <code>&#x3C;ul></code> incluent au moins un
+        élément {{HTMLElement("li")}}.
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >Contenu tangible.</a
+        >
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        Zéro ou plusieurs éléments {{HTMLElement("li")}} qui peuvent
+        éventuellement contenir à leur tour des éléments
+        {{HTMLElement("ol")}} ou {{HTMLElement("ul")}} (listes
+        imbriquées).
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >contenu de flux</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>
+        {{ARIARole("directory")}}, {{ARIARole("group")}},
+        {{ARIARole("listbox")}}, {{ARIARole("menu")}},
+        {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}},
+        {{ARIARole("tablist")}}, {{ARIARole("toolbar")}},
+        {{ARIARole("tree")}}, {{ARIARole("presentation")}}
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLUListElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-ul-element', '&lt;ul&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '&lt;ul&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+| Spécification                                                                                            | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-ul-element', '&lt;ul&gt;')}}     | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'grouping-content.html#the-ul-element', '&lt;ul&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-<p>{{Compat("html.elements.ul")}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+{{Compat("html.elements.ul")}}
 
-<ul>
- <li>Les autres éléments HTML relatifs aux listes : {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} (et l'élément obsolète {{HTMLElement("dir")}}).</li>
- <li>Les propriétés CSS particulièrement utiles pour mettre en forme l'élément <code>&lt;ul&gt;</code> :
-  <ul>
-   <li>La propriété {{cssxref("list-style")}} qui permet de choisir la façon dont l'indicateur ordinal est affiché,</li>
-   <li><a href="/fr/docs/Web/CSS/Compteurs_CSS">Les compteurs CSS</a>, qui permettent de gérer des listes imbriquées complexes,</li>
-   <li>La propriété {{cssxref("line-height")}} qui permet de simuler l'attribut {{htmlattrxref("compact", "ul")}} désormais déprécié,</li>
-   <li>La propriété {{cssxref("margin")}} peut être utilisée pour contrôler l'indentation de la liste.</li>
-  </ul>
- </li>
-</ul>
+## Voir aussi
+
+- Les autres éléments HTML relatifs aux listes : {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}} (et l'élément obsolète {{HTMLElement("dir")}}).
+- Les propriétés CSS particulièrement utiles pour mettre en forme l'élément `<ul>` :
+
+  - La propriété {{cssxref("list-style")}} qui permet de choisir la façon dont l'indicateur ordinal est affiché,
+  - [Les compteurs CSS](/fr/docs/Web/CSS/Compteurs_CSS), qui permettent de gérer des listes imbriquées complexes,
+  - La propriété {{cssxref("line-height")}} qui permet de simuler l'attribut {{htmlattrxref("compact", "ul")}} désormais déprécié,
+  - La propriété {{cssxref("margin")}} peut être utilisée pour contrôler l'indentation de la liste.
diff --git a/files/fr/web/html/element/var/index.md b/files/fr/web/html/element/var/index.md
index 7a06f26bf4..978481d992 100644
--- a/files/fr/web/html/element/var/index.md
+++ b/files/fr/web/html/element/var/index.md
@@ -8,129 +8,142 @@ tags:
   - Web
 translation_of: Web/HTML/Element/var
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;var&gt;</code></strong> représente une variable dans une expression mathématique ou un texte lié à la programmation. Son contenu est généralement représenté avec une version italique de la police environnante utilisée, toutefois, ce comportement peut dépendre du navigateur utilisé.</p>
+L'élément HTML **`<var>`** représente une variable dans une expression mathématique ou un texte lié à la programmation. Son contenu est généralement représenté avec une version italique de la police environnante utilisée, toutefois, ce comportement peut dépendre du navigateur utilisé.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/var.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/var.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>
+## Notes d'utilisation
 
-<h3 id="Éléments_associés">Éléments associés</h3>
+### Éléments associés
 
-<p>Voici d'autres éléments qui sont fréquemment utilisés dans les contextes où <code>&lt;var&gt;</code> est utilisé :</p>
+Voici d'autres éléments qui sont fréquemment utilisés dans les contextes où `<var>` est utilisé :
 
-<ul>
- <li>{{HTMLElement("code")}}</li>
- <li>{{HTMLElement("kbd")}}</li>
- <li>{{HTMLElement("samp")}}</li>
-</ul>
+- {{HTMLElement("code")}}
+- {{HTMLElement("kbd")}}
+- {{HTMLElement("samp")}}
 
-<p>Si vous trouvez un élément <code>&lt;var&gt;</code> utilisé uniquement pour la mise en forme, il est préférable de remplacer celui-ci par un élément {{HTMLElement("span")}} auquel on appliquera les règles CSS souhaitées.</p>
+Si vous trouvez un élément `<var>` utilisé uniquement pour la mise en forme, il est préférable de remplacer celui-ci par un élément {{HTMLElement("span")}} auquel on appliquera les règles CSS souhaitées.
 
-<h3 id="Mise_en_forme_par_défaut">Mise en forme par défaut</h3>
+### Mise en forme par défaut
 
-<p>La plupart des navigateurs appliquent la propriété {{cssxref("font-style")}} avec la valeur <code>"italic"</code> lors de l'affichage d'un élément <code>&lt;var&gt;</code>. Ce comportement peut être surchargé par la feuille de style CSS du site :</p>
+La plupart des navigateurs appliquent la propriété {{cssxref("font-style")}} avec la valeur `"italic"` lors de l'affichage d'un élément `<var>`. Ce comportement peut être surchargé par la feuille de style CSS du site :
 
-<pre class="brush: css">var {
+```css
+var {
   font: bold 15px "Courier", "Courier New", monospace;
-}</pre>
+}
+```
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush:html">&lt;p&gt;
+```html
+<p>
   Une équation simple :
-  &lt;var&gt;x&lt;/var&gt; = &lt;var&gt;y&lt;/var&gt; + 2
-&lt;/p&gt;
-</pre>
+  <var>x</var> = <var>y</var> + 2
+</p>
+```
 
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Exemple_simple","650","80")}}</p>
+{{EmbedLiveSample("Exemple_simple","650","80")}}
 
-<h3 id="Surcharger_la_mise_en_forme_par_défaut">Surcharger la mise en forme par défaut</h3>
+### Surcharger la mise en forme par défaut
 
-<h4 id="CSS">CSS</h4>
+#### CSS
 
-<pre class="brush: css">var {
+```css
+var {
   font: bold 15px "Courier", "Courier New", monospace;
-}</pre>
+}
+```
 
-<h4 id="HTML_2">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;p&gt;
-  Les variables &lt;var&gt;minSpeed&lt;/var&gt; et &lt;var&gt;maxSpeed&lt;/var&gt; contrôlent les
+```html
+<p>
+  Les variables <var>minSpeed</var> et <var>maxSpeed</var> contrôlent les
   vitesses minimale et maximale de l'appareil et sont exprimées en tours
   par minute.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
 
-<p>{{EmbedLiveSample("Surcharger_la_mise_en_forme_par_défaut","650","120")}}</p>
+{{EmbedLiveSample("Surcharger_la_mise_en_forme_par_défaut","650","120")}}
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><dfn><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></dfn></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">Contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <dfn
+          ><a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+            >Catégories de contenu</a
+          ></dfn
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >Contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-var-element', '&lt;var&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-var-element', '&lt;var&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                        | État                             | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-var-element', '&lt;var&gt;')}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-var-element', '&lt;var&gt;')}}     | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.var")}}</p>
+{{Compat("html.elements.var")}}
diff --git a/files/fr/web/html/element/video/index.md b/files/fr/web/html/element/video/index.md
index af53240556..43779ea612 100644
--- a/files/fr/web/html/element/video/index.md
+++ b/files/fr/web/html/element/video/index.md
@@ -11,222 +11,155 @@ tags:
   - Web
 translation_of: Web/HTML/Element/video
 ---
-<div>{{HTMLRef}}</div>
-
-<p>L'élément HTML <strong><code>&lt;video&gt;</code></strong> intègre un contenu vidéo dans un document.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}</div>
-
-<p>L'exemple précédent illustre comment utiliser l'élément <code>&lt;video&gt;</code> simplement, à la façon d'un élément {{htmlelement("img")}}. Le chemin vers le média à afficher est fourni via l'attribut <code>src</code> et on peut inclure d'autres attributs afin de spécifier la largeur et la hauteur, la lecture automatique et/ou en boucle, les contrôles affichés, etc.</p>
-
-<p>Le contenu fourni entre les balises <code>&lt;video&gt;&lt;/video&gt;</code> est affiché comme contenu alternatif par les navigateurs qui ne prennent pas en charge l'élément.</p>
-
-<p>Les navigateurs ne prennent pas en charge <a href="/fr/docs/Web/HTML/Formats_pour_audio_video">l'ensemble des formats vidéo</a> et il est possible de fournir plusieurs sources grâce à des éléments {{htmlelement("source")}}, le navigateur utilisera la première ressource dont il connaît le format :</p>
-
-<pre class="brush: html">&lt;video controls&gt;
-  &lt;source src="maVideo.mp4" type="video/mp4"&gt;
-  &lt;source src="maVideo.webm" type="video/webm"&gt;
-  &lt;p&gt;Votre navigateur ne prend pas en charge les vidéos HTML5.
-     Voici &lt;a href="myVideo.mp4"&gt;un lien pour télécharger la vidéo&lt;/a&gt;.&lt;/p&gt;
-&lt;/video&gt;</pre>
-
-<p>Quelques notes d'utilisation :</p>
-
-<ul>
- <li>Si l'attribut <code>controls</code> n'est pas indiqué, la vidéo n'incluera pas les contrôles par défaut du navigateurs et il est nécessaire de fournir ses propres contrôles en utilisant JavaScript et l'API {{domxref("HTMLMediaElement")}} API. Voir l'article <a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">créer un lecteur vidéo multi-navigateurs</a> pour plus de détails.</li>
- <li>L'API <code>HTMLMediaElement</code> déclenche de nombreux <a href="/fr/docs/Web/Guide/DOM/Events/evenement_medias">évènements</a> qui permettent d'avoir un contrôle précis sur l'audio et la vidéo.</li>
- <li>La propriété {{cssxref("object-position")}} permet d'ajuster la position de la vidéo dans le cadre du lecteur et la propriété {{cssxref("object-fit")}} permet de contrôler l'ajustement de la taille de la vidéo dans le cadre.</li>
- <li>Afin de fournir des sous-titres et légendes à la vidéo, on peut utiliser du code JavaScript ainsi que des éléments {{htmlelement("track")}} au format <a href="/fr/docs/Web/API/WebVTT_API">WebVTT</a>. Voir l'article <a href="/fr/docs/Web/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des sous-titres et légendes à une vidéo HTML5</a> pour plus d'informations.</li>
-</ul>
-
-<p>Pour apprendre les bases concernant <code>&lt;video&gt;</code>, nosu vous conseillons de consulter <a href="/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video">le tutoriel sur le contenu audio et video</a>.</p>
-
-<h2 id="Attributs">Attributs</h2>
-
-<p>À l'instar des autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
-
-<dl>
- <dt>{{htmlattrdef("autoplay")}}</dt>
- <dd><p>Un attribut booléen qui indique que la vidéo doit automatiquement être lancée dès qu'elle peut être jouée sans être arrêtée par le chargement des données.</p>
- <div class="note"><p><strong>Note :</strong> la lecture automatique peut être source de nuisance pour les utilisateurs. Mieux vaut l'éviter lorsque c'est possible ou proposer à l'utilisateur de choisir cette option. Cette valeur peut être utile lors de la création de vidéos dont la source sera définie <em>a posteriori</em>.</p></div>
- <div class="note"><p><strong>Note :</strong> Cet attribut est un attribut booléen et indiquer <code>autoplay="false"</code> ne suffira pas à retirer la lecture automatique. Pour ce faire, il faut complètement retirer l'attribut.</p></div>
- <div class="note"><p><strong>Note :</strong> Pour certains navigateurs (ex. Chrome 70), l'attribut <code>autoplay</code> ne fonctionne pas si aucun attribut <code>mute</code>n'est présent.</p></div>
- </dd>
- <dt>{{htmlattrdef("buffered")}}</dt>
- <dd>Un attribut qui peut être lu afin de déterminer l'intervalle temporel mis en mémoire tampon. Cet attribut contient un objet {{domxref("TimeRanges")}}.</dd>
- <dt>{{htmlattrdef("controls")}}</dt>
- <dd>Si cet attribut est présent, le navigateur affichera des contrôles pour permettre à l'utilisateur de contrôler la lecture de la vidéo, le volume et la mise sur pause.</dd>
- <dt>{{htmlattrdef("controlslist")}} {{experimental_inline}}</dt>
- <dd><p>L'attribut <code>controlslist</code>, lorsqu'il est indiqué, aide le navigateur à choisir les contrôles à afficher pour la manipulation du média lorsque l'attribut <code>controls</code> est utilisé.</p>
- <p>Les valeurs autorisées pour cet attribut sont <code>nodownload</code>, <code>nofullscreen</code> et <code>noremoteplayback</code>.</p>
- <p>On utilisera l'attribut <code>disablePictureInPicture</code> afin de désactiver ce mode et les contrôles associés.</p></dd>
- <dt>{{htmlattrdef("crossorigin")}}</dt>
- <dd><p>Cet attribut à valeur contrainte permet d'indiquer si le CORS doit être utilisé pour récupérer la vidéo. <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP">Les ressources avec le CORS activé</a> peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans le <em>corrompre</em>. Les valeurs autorisées sont :</p>
- <ul>
-  <li><code>anonymous</code> : une requête <em>cross-origine</em> est envoyée sans information d'authentification. Autrement dit, un en-tête HTTP {{HTTPHeader("Origin")}} est envoyé, sans cookie, certificat X.509 ou sans authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}), la vidéo sera corrompue et son utilisation sera restreinte.</li>
-  <li><code>use-credentials</code> : une requête <em>cross-origine</em> est envoyée avec une information d'authentification. Autrement dit, un en-tête HTTP <code>Header</code> est envoyé, avec un cookie, une certification ou une authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}), la vidéo sera corrompue et son utilisation sera restreinte.</li>
- </ul>
- <p>Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS (l'en-tête HTTP {{HTTPHeader("Origin")}}) n'est pas envoyé) et elle ne peut pas être utilisée dans un élément {{HTMLElement('canvas')}}. Si la valeur est invalide, elle sera gérée comme si le mot-clé <code>anonymous</code> était utilisé. Pour plus d'informations, consulter l'article sur <a href="/fr/docs/Web/HTML/Reglages_des_attributs_CORS">les attributs de paramétrage du CORS</a>.</p></dd>
- <dt>{{htmlattrdef("height")}}</dt>
- <dd>La hauteur de la zone où afficher la vidéo, exprimée en pixels CSS (en valeur absolue uniquement).</dd>
- <dt>{{htmlattrdef("intrinsicsize")}} {{experimental_inline}}</dt>
- <dd>Cet attribut indique au navigateur d'ignorer la taille intrinsèque de la vidéo et de la dimensionner avec la taille définie par cet attribut. La vidéo aura les dimensions indiquées et le rapport <code>naturalWidth</code>/<code>naturalHeight</code> renverra les valeurs fournies par cet attribut. <a href="https://github.com/ojanvafai/intrinsicsize-attribute">Explications</a>, <a href="https://googlechrome.github.io/samples/intrinsic-size/index.html">exemples</a></dd>
- <dt>{{htmlattrdef("loop")}}</dt>
- <dd>Un attribut booléen, qui, lorsqu'il est présent, indique que la vidéo doit être jouée en boucle.</dd>
- <dt>{{htmlattrdef("muted")}}</dt>
- <dd>Un attribut booléen qui indique s'il faut couper le son contenu dans la vidéo. Si cet attribut est utilisé, le son sera coupé au lancement de la vidéo. Par défaut, quand l'attribut est absent, le son sera utilisé lors de la lecture de la vidéo.</dd>
- <dt><code><a href="https://wicg.github.io/picture-in-picture/#disable-pip">disablePictureInPicture</a></code> {{experimental_inline}}</dt>
- <dd>Empêche le navigateur de suggérer un menu contextuel pour la superposition d'une image/vidéo ("<em>Picture-in-picture</em>") ou de demander l'activation automatique pour la superposition du média.</dd>
- <dt>{{htmlattrdef("playsinline")}}</dt>
- <dd>Un attribut booléen qui indique que la vidéo doit être jouée en incise, c'est-à-dire au sein de la zone de lecture de l'élément. À noter : l'absence de cet attribut n'implique pas que la vidéo sera lancée en plein écran.</dd>
- <dt>{{htmlattrdef("preload")}}</dt>
- <dd><p>Cet attribut à valeur contrainte est une indication destinée au navigateur sur la meilleure façon de charger la vidéo (selon l'auteur de la page). Il peut prendre l'une des valeurs suivantes :</p>
- <ul>
-  <li><code>none</code> : la vidéo ne doit pas être préchargée.</li>
-  <li><code>metadata</code> : seules les métadonnées de la vidéo (sa durée par exemple) sont récupérées.</li>
-  <li><code>auto</code> : le fichier entier peut être téléchargé, même si l'utilisateur ne s'en sert pas.</li>
-  <li>la chaîne de caractères vide (<code>""</code>) : synonyme de la valeur <code>auto</code>.</li>
- </ul>
-
- <p>La valeur par défaut peut être différente selon le navigateur. La spécification conseille d'utiliser la valeur <code>metadata</code>.</p>
-
- <div class="note"><p><strong>Note :</strong></p>
-
- <ul>
-  <li>L'attribut <code>autoplay</code> a la priorité sur <code>preload</code>. Si <code>autoplay</code> est défini, le navigateur doit nécessairement télécharger la vidéo pour la lancer.</li>
-  <li>Cet attribut est simplement une indication, la spécification ne force pas le navigateur à respecter la valeur de cet attribut.</li>
- </ul>
- </div>
- </dd>
- <dt>{{htmlattrdef("poster")}}</dt>
- <dd>Une URL qui contient une vignette à afficher tant que la vidéo est en cours de téléchargement. Si cet attribut n'est pas utilisé, rien n'est affiché jusqu'à ce que la première image de la vidéo soit disponible, ensuite, c'est cette image qui est affichée comme vignette sur la vidéo.</dd>
- <dt>{{htmlattrdef("src")}}</dt>
- <dd>L'URL de la vidéo à intégrer. Cet attribut est optionnel, l'élément {{HTMLElement("source")}} peut également être utilisé dans l'élément <code>&lt;video&gt;</code> afin d'indiquer la vidéo à intégrer.</dd>
- <dt>{{htmlattrdef("width")}}</dt>
- <dd>La largeur de la zone où afficher la vidéo, exprimée en pixels CSS (en valeur absolue uniquement).</dd>
-</dl>
-
-<h2 id="Évènements">Évènements</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Nom</th>
-   <th scope="col">Condition de déclenchement</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{domxref("ScriptProcessorNode.audioprocess_event","audioprocess")}}{{Deprecated_Inline}}</td>
-   <td>La mémoire tampon en entrée d'un {{DOMxRef("ScriptProcessorNode")}} peut désormais être traité.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.canplay_event", 'canplay')}}</td>
-   <td>Le navigateur peut lire le média mais estime que trop peu de données ont été chargées pour lire le média jusqu'à sa fin (il faudra vraisemblablement un arrêt pour un chargement en mémoire tampon).</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}</td>
-   <td>Le navigateur estime qu'il peut lire le média jusqu'à sa fin, sans avoir à interrompre la lecture par du chargement en mémoire tampon.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("OfflineAudioContext.complete_event", "complete")}}</td>
-   <td>Le rendu d'un {{DOMxRef("OfflineAudioContext")}} est terminé.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}</td>
-   <td>L'attribut <code>duration</code> a été mis à jour.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.emptied_event", 'emptied')}}</td>
-   <td>Le média est devenu vide. Cela peut par exemple se produire lorsque le média a déjà été (partiellement ou complètement) chargé et que la méthode <a href="/fr/docs/Web/API/HTMLMediaElement/load" rel="internal"><code>load()</code></a> est invoquée pour le recharger.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.ended_event", 'ended')}}</td>
-   <td>La lecture a été interrompue car la fin du média est atteinte.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}</td>
-   <td>La première <em>frame</em> du média a été chargée.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}</td>
-   <td>Les métadonnées ont été chargées.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.pause_event", 'pause')}}</td>
-   <td>La lecture a été mise en pause.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.play_event", 'play')}}</td>
-   <td>La lecture a démarré.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.playing_event", 'playing ')}}</td>
-   <td>La lecture est prête à être lancée après avoir été mise en pause ou interrompue pour un chargement en mémoire de données.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.progress_event", 'progress')}}</td>
-   <td>Évènement déclenché périodiquement lorsque le navigateur charge une ressource.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}</td>
-   <td>La vitesse de lecture a changé.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.seeked_event", 'seeked')}}</td>
-   <td>Une opération de déplacement du curseur de lecture (<em>seek</em>) est terminée.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.seeking_event", 'seeking')}}</td>
-   <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.stalled_event", 'stalled')}}</td>
-   <td>L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.suspend_event", 'suspend')}}</td>
-   <td>Le chargement des données du média ont été suspendues.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}</td>
-   <td>Le temps décrit par l'attribut <code>currentTime</code> a été mis à jour.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}</td>
-   <td>Le volume a été modifié.</td>
-  </tr>
-  <tr>
-   <td>{{domxref("HTMLMediaElement.waiting_event", 'waiting')}}</td>
-   <td>La lecture a été interrompue en raison d'un manque temporaire de données.</td>
-  </tr>
- </tbody>
-</table>
+{{HTMLRef}}
+
+L'élément HTML **`<video>`** intègre un contenu vidéo dans un document.
+
+{{EmbedInteractiveExample("pages/tabbed/video.html", "tabbed-standard")}}
+
+L'exemple précédent illustre comment utiliser l'élément `<video>` simplement, à la façon d'un élément {{htmlelement("img")}}. Le chemin vers le média à afficher est fourni via l'attribut `src` et on peut inclure d'autres attributs afin de spécifier la largeur et la hauteur, la lecture automatique et/ou en boucle, les contrôles affichés, etc.
+
+Le contenu fourni entre les balises `<video></video>` est affiché comme contenu alternatif par les navigateurs qui ne prennent pas en charge l'élément.
+
+Les navigateurs ne prennent pas en charge [l'ensemble des formats vidéo](/fr/docs/Web/HTML/Formats_pour_audio_video) et il est possible de fournir plusieurs sources grâce à des éléments {{htmlelement("source")}}, le navigateur utilisera la première ressource dont il connaît le format :
+
+```html
+<video controls>
+  <source src="maVideo.mp4" type="video/mp4">
+  <source src="maVideo.webm" type="video/webm">
+  <p>Votre navigateur ne prend pas en charge les vidéos HTML5.
+     Voici <a href="myVideo.mp4">un lien pour télécharger la vidéo</a>.</p>
+</video>
+```
+
+Quelques notes d'utilisation :
+
+- Si l'attribut `controls` n'est pas indiqué, la vidéo n'incluera pas les contrôles par défaut du navigateurs et il est nécessaire de fournir ses propres contrôles en utilisant JavaScript et l'API {{domxref("HTMLMediaElement")}} API. Voir l'article [créer un lecteur vidéo multi-navigateurs](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player) pour plus de détails.
+- L'API `HTMLMediaElement` déclenche de nombreux [évènements](/fr/docs/Web/Guide/DOM/Events/evenement_medias) qui permettent d'avoir un contrôle précis sur l'audio et la vidéo.
+- La propriété {{cssxref("object-position")}} permet d'ajuster la position de la vidéo dans le cadre du lecteur et la propriété {{cssxref("object-fit")}} permet de contrôler l'ajustement de la taille de la vidéo dans le cadre.
+- Afin de fournir des sous-titres et légendes à la vidéo, on peut utiliser du code JavaScript ainsi que des éléments {{htmlelement("track")}} au format [WebVTT](/fr/docs/Web/API/WebVTT_API). Voir l'article [Ajouter des sous-titres et légendes à une vidéo HTML5](/fr/docs/Web/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video) pour plus d'informations.
+
+Pour apprendre les bases concernant `<video>`, nosu vous conseillons de consulter [le tutoriel sur le contenu audio et video](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video).
+
+## Attributs
+
+À l'instar des autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
+
+- {{htmlattrdef("autoplay")}}
+
+  - : Un attribut booléen qui indique que la vidéo doit automatiquement être lancée dès qu'elle peut être jouée sans être arrêtée par le chargement des données.
+
+    > **Note :** la lecture automatique peut être source de nuisance pour les utilisateurs. Mieux vaut l'éviter lorsque c'est possible ou proposer à l'utilisateur de choisir cette option. Cette valeur peut être utile lors de la création de vidéos dont la source sera définie _a posteriori_.
+
+    > **Note :** Cet attribut est un attribut booléen et indiquer `autoplay="false"` ne suffira pas à retirer la lecture automatique. Pour ce faire, il faut complètement retirer l'attribut.
+
+    > **Note :** Pour certains navigateurs (ex. Chrome 70), l'attribut `autoplay` ne fonctionne pas si aucun attribut `mute`n'est présent.
 
-<h2 id="Notes_dutilisation">Notes d'utilisation</h2>
+- {{htmlattrdef("buffered")}}
+  - : Un attribut qui peut être lu afin de déterminer l'intervalle temporel mis en mémoire tampon. Cet attribut contient un objet {{domxref("TimeRanges")}}.
+- {{htmlattrdef("controls")}}
+  - : Si cet attribut est présent, le navigateur affichera des contrôles pour permettre à l'utilisateur de contrôler la lecture de la vidéo, le volume et la mise sur pause.
+- {{htmlattrdef("controlslist")}} {{experimental_inline}}
 
-<h3 id="Mise_en_forme_avec_CSS">Mise en forme avec CSS</h3>
+  - : L'attribut `controlslist`, lorsqu'il est indiqué, aide le navigateur à choisir les contrôles à afficher pour la manipulation du média lorsque l'attribut `controls` est utilisé.
 
-<p>L'élément <code>&lt;video&gt;</code> est un élément remplacé et, pour cet élément, la valeur initiale de {{cssxref("display")}} est <code>inline</code> mais la hauteur et la largeur du cadre sont définies par les caractéristiques de la vidéo embarquée.</p>
+    Les valeurs autorisées pour cet attribut sont `nodownload`, `nofullscreen` et `noremoteplayback`.
 
-<p>On peut changer la valeur de <code>display</code> en <code>block</code> afin de simplifier le positionnement et le dimensionnement. L'article <a href="/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Bases de la mise en forme d'un lecteur vidéo</a> fournit différentes techniques de mise en forme.</p>
+    On utilisera l'attribut `disablePictureInPicture` afin de désactiver ce mode et les contrôles associés.
 
-<h3 id="Détecter_lajout_et_la_suppression_de_pistes">Détecter l'ajout et la suppression de pistes</h3>
+- {{htmlattrdef("crossorigin")}}
 
-<p>Il est possible de détecter l'ajout et la suppression de pistes d'un élément <code>&lt;video&gt;</code> grâce aux évènements {{event("addtrack")}} et {{event("removetrack")}}. Toutefois, ces évènements ne sont pas déclenchés à même l'élément <code>&lt;video&gt;</code> mais sur l'objet représentant la liste des pistes associées à l'élément <code>&lt;video&gt;</code> grâce à l'objet {{domxref("HTMLMediaElement")}} qui possède un type différent selon le type de piste manipulé :</p>
+  - : Cet attribut à valeur contrainte permet d'indiquer si le CORS doit être utilisé pour récupérer la vidéo. [Les ressources avec le CORS activé](https://developer.mozilla.org/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP) peuvent être réutilisées dans un élément {{HTMLElement("canvas")}} sans le _corrompre_. Les valeurs autorisées sont :
 
-<dl>
- <dt>{{domxref("HTMLMediaElement.audioTracks")}}</dt>
- <dd>Un objet {{domxref("AudioTrackList")}} qui contient l'ensemble des pistes audio associées au média. Il est possible d'ajouter un écouteur sur l'évènement <code>addtrack</code> sur cet objet afin d'être alerté lorsque de nouvelles pistes audio sont ajoutées à l'élément.</dd>
- <dt>{{domxref("HTMLMediaElement.videoTracks")}}</dt>
- <dd>On peut ajouter un écouteur d'évènement <code>addtrack</code> à cet objet {{domxref("VideoTrackList")}} afin d'être alerté lorsque des pistes vidéos sont ajoutées à l'élément.</dd>
- <dt>{{domxref("HTMLMediaElement.textTracks")}}</dt>
- <dd>On peut ajouter un écouteur d'évènement <code>addtrack</code> à cet objet {{domxref("TextTrackList")}} afin d'être alerté lorsque des pistes textuelles sont ajoutées à l'élément.</dd>
-</dl>
+    - `anonymous` : une requête _cross-origine_ est envoyée sans information d'authentification. Autrement dit, un en-tête HTTP {{HTTPHeader("Origin")}} est envoyé, sans cookie, certificat X.509 ou sans authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}), la vidéo sera corrompue et son utilisation sera restreinte.
+    - `use-credentials` : une requête _cross-origine_ est envoyée avec une information d'authentification. Autrement dit, un en-tête HTTP `Header` est envoyé, avec un cookie, une certification ou une authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP {{HTTPHeader("Access-Control-Allow-Origin")}}), la vidéo sera corrompue et son utilisation sera restreinte.
 
-<p>Le fragment de code qui suit, par exemple, permettra d'appeler une fonction donnée lorsque des pistes audio sont ajoutées ou supprimées d'un élément <code>&lt;video&gt;</code> :</p>
+    Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS (l'en-tête HTTP {{HTTPHeader("Origin")}}) n'est pas envoyé) et elle ne peut pas être utilisée dans un élément {{HTMLElement('canvas')}}. Si la valeur est invalide, elle sera gérée comme si le mot-clé `anonymous` était utilisé. Pour plus d'informations, consulter l'article sur [les attributs de paramétrage du CORS](/fr/docs/Web/HTML/Reglages_des_attributs_CORS).
 
-<pre class="brush: js">var elem = document.querySelector("video");
+- {{htmlattrdef("height")}}
+  - : La hauteur de la zone où afficher la vidéo, exprimée en pixels CSS (en valeur absolue uniquement).
+- {{htmlattrdef("intrinsicsize")}} {{experimental_inline}}
+  - : Cet attribut indique au navigateur d'ignorer la taille intrinsèque de la vidéo et de la dimensionner avec la taille définie par cet attribut. La vidéo aura les dimensions indiquées et le rapport `naturalWidth`/`naturalHeight` renverra les valeurs fournies par cet attribut. [Explications](https://github.com/ojanvafai/intrinsicsize-attribute), [exemples](https://googlechrome.github.io/samples/intrinsic-size/index.html)
+- {{htmlattrdef("loop")}}
+  - : Un attribut booléen, qui, lorsqu'il est présent, indique que la vidéo doit être jouée en boucle.
+- {{htmlattrdef("muted")}}
+  - : Un attribut booléen qui indique s'il faut couper le son contenu dans la vidéo. Si cet attribut est utilisé, le son sera coupé au lancement de la vidéo. Par défaut, quand l'attribut est absent, le son sera utilisé lors de la lecture de la vidéo.
+- [`disablePictureInPicture`](https://wicg.github.io/picture-in-picture/#disable-pip) {{experimental_inline}}
+  - : Empêche le navigateur de suggérer un menu contextuel pour la superposition d'une image/vidéo ("_Picture-in-picture_") ou de demander l'activation automatique pour la superposition du média.
+- {{htmlattrdef("playsinline")}}
+  - : Un attribut booléen qui indique que la vidéo doit être jouée en incise, c'est-à-dire au sein de la zone de lecture de l'élément. À noter : l'absence de cet attribut n'implique pas que la vidéo sera lancée en plein écran.
+- {{htmlattrdef("preload")}}
+
+  - : Cet attribut à valeur contrainte est une indication destinée au navigateur sur la meilleure façon de charger la vidéo (selon l'auteur de la page). Il peut prendre l'une des valeurs suivantes :
+
+    - `none` : la vidéo ne doit pas être préchargée.
+    - `metadata` : seules les métadonnées de la vidéo (sa durée par exemple) sont récupérées.
+    - `auto` : le fichier entier peut être téléchargé, même si l'utilisateur ne s'en sert pas.
+    - la chaîne de caractères vide (`""`) : synonyme de la valeur `auto`.
+
+    La valeur par défaut peut être différente selon le navigateur. La spécification conseille d'utiliser la valeur `metadata`.
+
+    > **Note :**
+    >
+    > - L'attribut `autoplay` a la priorité sur `preload`. Si `autoplay` est défini, le navigateur doit nécessairement télécharger la vidéo pour la lancer.
+    > - Cet attribut est simplement une indication, la spécification ne force pas le navigateur à respecter la valeur de cet attribut.
+
+- {{htmlattrdef("poster")}}
+  - : Une URL qui contient une vignette à afficher tant que la vidéo est en cours de téléchargement. Si cet attribut n'est pas utilisé, rien n'est affiché jusqu'à ce que la première image de la vidéo soit disponible, ensuite, c'est cette image qui est affichée comme vignette sur la vidéo.
+- {{htmlattrdef("src")}}
+  - : L'URL de la vidéo à intégrer. Cet attribut est optionnel, l'élément {{HTMLElement("source")}} peut également être utilisé dans l'élément `<video>` afin d'indiquer la vidéo à intégrer.
+- {{htmlattrdef("width")}}
+  - : La largeur de la zone où afficher la vidéo, exprimée en pixels CSS (en valeur absolue uniquement).
+
+## Évènements
+
+| Nom                                                                                                                      | Condition de déclenchement                                                                                                                                                                                                          |
+| ------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{domxref("ScriptProcessorNode.audioprocess_event","audioprocess")}}{{Deprecated_Inline}} | La mémoire tampon en entrée d'un {{DOMxRef("ScriptProcessorNode")}} peut désormais être traité.                                                                                                                           |
+| {{domxref("HTMLMediaElement.canplay_event", 'canplay')}}                                             | Le navigateur peut lire le média mais estime que trop peu de données ont été chargées pour lire le média jusqu'à sa fin (il faudra vraisemblablement un arrêt pour un chargement en mémoire tampon).                                |
+| {{domxref("HTMLMediaElement.canplaythrough_event", 'canplaythrough')}}                             | Le navigateur estime qu'il peut lire le média jusqu'à sa fin, sans avoir à interrompre la lecture par du chargement en mémoire tampon.                                                                                              |
+| {{domxref("OfflineAudioContext.complete_event", "complete")}}                                         | Le rendu d'un {{DOMxRef("OfflineAudioContext")}} est terminé.                                                                                                                                                             |
+| {{domxref("HTMLMediaElement.durationchange_event", 'durationchange')}}                             | L'attribut `duration` a été mis à jour.                                                                                                                                                                                             |
+| {{domxref("HTMLMediaElement.emptied_event", 'emptied')}}                                             | Le média est devenu vide. Cela peut par exemple se produire lorsque le média a déjà été (partiellement ou complètement) chargé et que la méthode [`load()`](/fr/docs/Web/API/HTMLMediaElement/load) est invoquée pour le recharger. |
+| {{domxref("HTMLMediaElement.ended_event", 'ended')}}                                                     | La lecture a été interrompue car la fin du média est atteinte.                                                                                                                                                                      |
+| {{domxref("HTMLMediaElement.loadeddata_event", 'loadeddata')}}                                     | La première _frame_ du média a été chargée.                                                                                                                                                                                         |
+| {{domxref("HTMLMediaElement.loadedmetadata_event", 'loadedmetadata')}}                             | Les métadonnées ont été chargées.                                                                                                                                                                                                   |
+| {{domxref("HTMLMediaElement.pause_event", 'pause')}}                                                     | La lecture a été mise en pause.                                                                                                                                                                                                     |
+| {{domxref("HTMLMediaElement.play_event", 'play')}}                                                     | La lecture a démarré.                                                                                                                                                                                                               |
+| {{domxref("HTMLMediaElement.playing_event", 'playing ')}}                                             | La lecture est prête à être lancée après avoir été mise en pause ou interrompue pour un chargement en mémoire de données.                                                                                                           |
+| {{domxref("HTMLMediaElement.progress_event", 'progress')}}                                             | Évènement déclenché périodiquement lorsque le navigateur charge une ressource.                                                                                                                                                      |
+| {{domxref("HTMLMediaElement.ratechange_event", 'ratechange')}}                                     | La vitesse de lecture a changé.                                                                                                                                                                                                     |
+| {{domxref("HTMLMediaElement.seeked_event", 'seeked')}}                                                 | Une opération de déplacement du curseur de lecture (_seek_) est terminée.                                                                                                                                                           |
+| {{domxref("HTMLMediaElement.seeking_event", 'seeking')}}                                             | L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.                                                                                                                          |
+| {{domxref("HTMLMediaElement.stalled_event", 'stalled')}}                                             | L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas.                                                                                                                          |
+| {{domxref("HTMLMediaElement.suspend_event", 'suspend')}}                                             | Le chargement des données du média ont été suspendues.                                                                                                                                                                              |
+| {{domxref("HTMLMediaElement.timeupdate_event", 'timeupdate')}}                                     | Le temps décrit par l'attribut `currentTime` a été mis à jour.                                                                                                                                                                      |
+| {{domxref("HTMLMediaElement.volumechange_event", 'volumechange')}}                                 | Le volume a été modifié.                                                                                                                                                                                                            |
+| {{domxref("HTMLMediaElement.waiting_event", 'waiting')}}                                             | La lecture a été interrompue en raison d'un manque temporaire de données.                                                                                                                                                           |
+
+## Notes d'utilisation
+
+### Mise en forme avec CSS
+
+L'élément `<video>` est un élément remplacé et, pour cet élément, la valeur initiale de {{cssxref("display")}} est `inline` mais la hauteur et la largeur du cadre sont définies par les caractéristiques de la vidéo embarquée.
+
+On peut changer la valeur de `display` en `block` afin de simplifier le positionnement et le dimensionnement. L'article [Bases de la mise en forme d'un lecteur vidéo](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics) fournit différentes techniques de mise en forme.
+
+### Détecter l'ajout et la suppression de pistes
+
+Il est possible de détecter l'ajout et la suppression de pistes d'un élément `<video>` grâce aux évènements {{event("addtrack")}} et {{event("removetrack")}}. Toutefois, ces évènements ne sont pas déclenchés à même l'élément `<video>` mais sur l'objet représentant la liste des pistes associées à l'élément `<video>` grâce à l'objet {{domxref("HTMLMediaElement")}} qui possède un type différent selon le type de piste manipulé :
+
+- {{domxref("HTMLMediaElement.audioTracks")}}
+  - : Un objet {{domxref("AudioTrackList")}} qui contient l'ensemble des pistes audio associées au média. Il est possible d'ajouter un écouteur sur l'évènement `addtrack` sur cet objet afin d'être alerté lorsque de nouvelles pistes audio sont ajoutées à l'élément.
+- {{domxref("HTMLMediaElement.videoTracks")}}
+  - : On peut ajouter un écouteur d'évènement `addtrack` à cet objet {{domxref("VideoTrackList")}} afin d'être alerté lorsque des pistes vidéos sont ajoutées à l'élément.
+- {{domxref("HTMLMediaElement.textTracks")}}
+  - : On peut ajouter un écouteur d'évènement `addtrack` à cet objet {{domxref("TextTrackList")}} afin d'être alerté lorsque des pistes textuelles sont ajoutées à l'élément.
+
+Le fragment de code qui suit, par exemple, permettra d'appeler une fonction donnée lorsque des pistes audio sont ajoutées ou supprimées d'un élément `<video>` :
+
+```js
+var elem = document.querySelector("video");
 
 elem.audioTrackList.onaddtrack = function(event) {
   trackEditor.addTrack(event.track);
@@ -235,167 +168,188 @@ elem.audioTrackList.onaddtrack = function(event) {
 elem.audioTrackList.onremovetrack = function(event) {
   trackEditor.removeTrack(event.track);
 };
-</pre>
+```
 
-<p>On peut aussi utiliser la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour gérer les évènements {{event("addtrack")}} et {{event("removetrack")}}.</p>
+On peut aussi utiliser la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour gérer les évènements {{event("addtrack")}} et {{event("removetrack")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="Exemples_simples">Exemples simples</h3>
+### Exemples simples
 
-<pre class="brush: html">&lt;!-- Un exemple simple --&gt;
-&lt;video src="fichiervideo.webm" autoplay poster="vignette.jpg"&gt;
+```html
+<!-- Un exemple simple -->
+<video src="fichiervideo.webm" autoplay poster="vignette.jpg">
   Votre navigateur ne permet pas de lire les vidéos.
   Mais vous pouvez toujours
-  &lt;a href="fichiervideo.webm"&gt;la télécharger&lt;/a&gt; !
-&lt;/video&gt;
+  <a href="fichiervideo.webm">la télécharger</a> !
+</video>
 
-&lt;!-- Une vidéo avec des sous-titres --&gt;
-&lt;video src="toto.webm"&gt;
-  &lt;track kind="subtitles" src="toto.en.vtt" srclang="en"
-    label="Anglais"&gt;
-  &lt;track kind="subtitles" src="toto.sv.vtt" srclang="sv"
-    label="Suédois"&gt;
-&lt;/video&gt;
-</pre>
+<!-- Une vidéo avec des sous-titres -->
+<video src="toto.webm">
+  <track kind="subtitles" src="toto.en.vtt" srclang="en"
+    label="Anglais">
+  <track kind="subtitles" src="toto.sv.vtt" srclang="sv"
+    label="Suédois">
+</video>
+```
 
-<p>Dans le premier exemple, la vidéo est lancée dès que possible. Avant que la vidéo ne soit lancée, la vignette utilisée sera le fichier <code>"vignette.jpg"</code>.</p>
+Dans le premier exemple, la vidéo est lancée dès que possible. Avant que la vidéo ne soit lancée, la vignette utilisée sera le fichier `"vignette.jpg"`.
 
-<p>Dans le deuxième exemple, l'utilisateur peut choisir parmi deux pistes de sous-titres.</p>
+Dans le deuxième exemple, l'utilisateur peut choisir parmi deux pistes de sous-titres.
 
-<h3 id="Utiliser_plusieurs_sources">Utiliser plusieurs sources</h3>
+### Utiliser plusieurs sources
 
-<p>Dans cet exemple, trois sources différentes pour la vidéo sont fournies. La première source utilisée est WebM, si son format n'est pas lisible pour le navigateur, c'est le fichier MP4 qui sera utilisé et si celui-ci n'est pas lisible non plus, ce sera le fichier OGG qui sera exploité.</p>
+Dans cet exemple, trois sources différentes pour la vidéo sont fournies. La première source utilisée est WebM, si son format n'est pas lisible pour le navigateur, c'est le fichier MP4 qui sera utilisé et si celui-ci n'est pas lisible non plus, ce sera le fichier OGG qui sera exploité.
 
-<pre class="brush: html">&lt;video width="480" controls
-  poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" &gt;
-  &lt;source
+```html
+<video width="480" controls
+  poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif" >
+  <source
     src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm"
-    type="video/webm"&gt;
-  &lt;source
+    type="video/webm">
+  <source
     src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"
-    type="video/mp4"&gt;
-  &lt;source
+    type="video/mp4">
+  <source
     src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv"
-    type="video/ogg"&gt;
+    type="video/ogg">
   Votre navigateur ne permet pas de lire les vidéos HTML5.
-&lt;/video&gt;</pre>
+</video>
+```
 
-<h2 id="Utilisation_côté_serveur">Utilisation côté serveur</h2>
+## Utilisation côté serveur
 
-<p>Si le type MIME de la vidéo n'est pas indiqué correctement sur le serveur, la vidéo peut ne pas s'afficher, le navigateur peut afficher un boîte grise avec une croix si JavaScript est activé.</p>
+Si le type MIME de la vidéo n'est pas indiqué correctement sur le serveur, la vidéo peut ne pas s'afficher, le navigateur peut afficher un boîte grise avec une croix si JavaScript est activé.
 
-<p>Si vous utilisez Apache pour servir des vidéos Ogg Theora, vous pouvez ajouter les extensions utilisées pour les fichiers en face du type MIME. Pour cela, il faut éditer le fichier de configuration <code>mime.types</code> (situé dans le dossier <code>/etc/apache</code> ) ou utiliser la directive de configuration <code>AddType</code> dans le fichier <code>httpd.conf</code>.</p>
+Si vous utilisez Apache pour servir des vidéos Ogg Theora, vous pouvez ajouter les extensions utilisées pour les fichiers en face du type MIME. Pour cela, il faut éditer le fichier de configuration `mime.types` (situé dans le dossier `/etc/apache` ) ou utiliser la directive de configuration `AddType` dans le fichier `httpd.conf`.
 
-<pre class="eval">AddType video/ogg .ogm
-AddType video/ogg .ogv
-AddType video/ogg .ogg
-</pre>
+    AddType video/ogg .ogm
+    AddType video/ogg .ogv
+    AddType video/ogg .ogg
 
-<p>Pour les vidéos WebM, le problème peut également être réglé en modifiant le fichier <code>mime.types</code> situé dans <code>/etc/apache</code> ou en ajoutant une directive <code>AddType</code> au fichier <code>httpd.conf</code>.</p>
+Pour les vidéos WebM, le problème peut également être réglé en modifiant le fichier `mime.types` situé dans `/etc/apache` ou en ajoutant une directive `AddType` au fichier `httpd.conf`.
 
-<pre class="eval">AddType video/webm .webm
-</pre>
+    AddType video/webm .webm
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Les vidéos doivent fournir des sous-titres et retranscription qui décrivent précisément le contenu. Les sous-titres doivent permettre au visiteur malentendant de comprendre le contenu audio lorsque la vidéo est lancée. Les retranscriptions sont utilisées par les personnes qui souhaitent relire le contenu audio à un rythme différent.</p>
+Les vidéos doivent fournir des sous-titres et retranscription qui décrivent précisément le contenu. Les sous-titres doivent permettre au visiteur malentendant de comprendre le contenu audio lorsque la vidéo est lancée. Les retranscriptions sont utilisées par les personnes qui souhaitent relire le contenu audio à un rythme différent.
 
-<p>Si on utilise un service de sous-titrage automatique est utilisé, il est nécessaire de vérifier que le contenu généré correspond bien au contenu audio de la vidéo.</p>
+Si on utilise un service de sous-titrage automatique est utilisé, il est nécessaire de vérifier que le contenu généré correspond bien au contenu audio de la vidéo.
 
-<p>En plus des dialogues, les sous-titres et retranscription doivent également inclure les informations permettant d'identifier la musique et les effets sonores qui communiquent des informations importantes (l'émotion et le ton entre autres) :</p>
+En plus des dialogues, les sous-titres et retranscription doivent également inclure les informations permettant d'identifier la musique et les effets sonores qui communiquent des informations importantes (l'émotion et le ton entre autres) :
 
-<pre class="eval">14
-00:03:14 --&gt; 00:03:18
-[Musique rock théâtrale]
+    14
+    00:03:14 --> 00:03:18
+    [Musique rock théâtrale]
 
-15
-00:03:19 --&gt; 00:03:21
-[Murmure] Qu'est-ce que c'est au loin ?
+    15
+    00:03:19 --> 00:03:21
+    [Murmure] Qu'est-ce que c'est au loin ?
 
-16
-00:03:22 --&gt; 00:03:24
-C'est… C'est un…
+    16
+    00:03:22 --> 00:03:24
+    C'est… C'est un…
 
-16 00:03:25 --&gt; 00:03:32
-[Bruit de choc]
-[La vaisselle se brise]
-</pre>
+    16 00:03:25 --> 00:03:32
+    [Bruit de choc]
+    [La vaisselle se brise]
 
-<p>Les sous-titres ne doivent pas masquer le sujet principal de la vidéo. Ils peuvent être positionnés grâce à <a href="/fr/docs/Web/API/WebVTT_API#Cue_settings">l'indication <code>align</code></a>.</p>
+Les sous-titres ne doivent pas masquer le sujet principal de la vidéo. Ils peuvent être positionnés grâce à [l'indication `align`](/fr/docs/Web/API/WebVTT_API#Cue_settings).
 
-<ul>
- <li><a href="/fr/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions">Sous-titres et légendes - <em>Plugins</em></a></li>
- <li><a href="/fr/docs/Web/API/WebVTT_API">API Web Video Text Tracks Format (WebVTT)</a></li>
- <li><a href="https://webaim.org/techniques/captions/">WebAIM : <em>Captions, Transcripts, and Audio Descriptions</em> (en anglais)</a></li>
- <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Comprendre les règles WCAG 1.2</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html"><em>Understanding Success Criterion 1.2.1 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
- <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html"><em>Understanding Success Criterion 1.2.2 - W3C Understanding WCAG 2.0</em> (en anglais)</a></li>
-</ul>
+- [Sous-titres et légendes - _Plugins_](/fr/docs/Plugins/Flash_to_HTML5/Video/Subtitles_captions)
+- [API Web Video Text Tracks Format (WebVTT)](/fr/docs/Web/API/WebVTT_API)
+- [WebAIM : _Captions, Transcripts, and Audio Descriptions_ (en anglais)](https://webaim.org/techniques/captions/)
+- [Comprendre les règles WCAG 1.2](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.2_—_Providing_text_alternatives_for_time-based_media)
+- [_Understanding Success Criterion 1.2.1 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html)
+- [_Understanding Success Criterion 1.2.2 - W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html)
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_intégré">contenu intégré</a>. Si l'élément a un attribut {{htmlattrxref("controls", "video")}} : <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif">contenu interactif</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">contenu tangible</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>
-    <p>Si l'élément a un attribut {{htmlattrxref("src", "video")}} : zéro ou plusieurs éléments {{HTMLElement("track")}} suivi par du contenu transparent qui ne contient pas d'élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}</p>
-
-    <p>Sinon, zéro ou plusieurs éléments {{HTMLElement("source")}} suivi par zéro ou plusieurs éléments {{HTMLElement("track")}}, suivi par du contenu transparent qui ne contient pas d'élément {{HTMLElement("audio")}} ou {{HTMLElement("video")}}.</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balises</th>
-   <td>{{no_tag_omission}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_intégré">contenu intégré</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>{{ARIARole("application")}}</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLVideoElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_intégré"
+          >contenu intégré</a
+        >. Si l'élément a un attribut
+        {{htmlattrxref("controls", "video")}} :
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_interactif"
+          >contenu interactif</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible"
+          >contenu tangible</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>
+        <p>
+          Si l'élément a un attribut
+          {{htmlattrxref("src", "video")}} : zéro ou plusieurs
+          éléments {{HTMLElement("track")}} suivi par du contenu
+          transparent qui ne contient pas d'élément
+          {{HTMLElement("audio")}} ou {{HTMLElement("video")}}
+        </p>
+        <p>
+          Sinon, zéro ou plusieurs éléments {{HTMLElement("source")}}
+          suivi par zéro ou plusieurs éléments {{HTMLElement("track")}},
+          suivi par du contenu transparent qui ne contient pas d'élément
+          {{HTMLElement("audio")}} ou {{HTMLElement("video")}}.
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balises</th>
+      <td>{{no_tag_omission}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_intégré"
+          >contenu intégré</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>{{ARIARole("application")}}</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLVideoElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">Retours</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-video-element', '&lt;video&gt;')}}</td>
-   <td><a href="https://github.com/whatwg/html/issues">Issues GitHub pour WHATWG HTML (en anglais)</a></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                        | Retours                                                                              |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', 'embedded-content.html#the-video-element', '&lt;video&gt;')}} | [Issues GitHub pour WHATWG HTML (en anglais)](https://github.com/whatwg/html/issues) |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.video")}}</p>
+{{Compat("html.elements.video")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Formats_pour_audio_video">Les formats pris en charge par <code>&lt;audio&gt;</code> et <code>&lt;video&gt;</code></a></li>
- <li>{{htmlelement("audio")}}</li>
- <li>Les propriétés CSS permettant de positionner/redimensionner le contenu : {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li>
- <li><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Utiliser les éléments <code>&lt;audio&gt;</code> et <code>&lt;video&gt;</code></a></li>
- <li><a href="/fr/docs/HTML/Manipulating_video_using_canvas">Manipuler l'élément <code>&lt;video&gt;</code> avec <code>&lt;canvas&gt;</code></a></li>
- <li><a href="/fr/docs/Web/HTTP/Configuring_servers_for_Ogg_media">Configuration côté serveur pour les média Ogg</a></li>
-</ul>
+- [Les formats pris en charge par `<audio>` et `<video>`](/fr/docs/Web/HTML/Formats_pour_audio_video)
+- {{htmlelement("audio")}}
+- Les propriétés CSS permettant de positionner/redimensionner le contenu : {{cssxref("object-position")}} and {{cssxref("object-fit")}}
+- [Utiliser les éléments `<audio>` et `<video>`](/fr/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [Manipuler l'élément `<video>` avec `<canvas>`](/fr/docs/HTML/Manipulating_video_using_canvas)
+- [Configuration côté serveur pour les média Ogg](/fr/docs/Web/HTTP/Configuring_servers_for_Ogg_media)
diff --git a/files/fr/web/html/element/wbr/index.md b/files/fr/web/html/element/wbr/index.md
index 84cf91e56c..e335a3f667 100644
--- a/files/fr/web/html/element/wbr/index.md
+++ b/files/fr/web/html/element/wbr/index.md
@@ -8,102 +8,99 @@ tags:
   - Web
 translation_of: Web/HTML/Element/wbr
 ---
-<div>{{HTMLRef}}</div>
+{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;wbr&gt;</code></strong> permet de représenter un emplacement où casser la ligne si nécessaire. Le navigateur pourra alors utiliser cet emplacement pour effectuer un saut de ligne si le texte est trop long et qu'en temps normal, une règle empêche le saut de ligne.</p>
+L'élément HTML **`<wbr>`** permet de représenter un emplacement où casser la ligne si nécessaire. Le navigateur pourra alors utiliser cet emplacement pour effectuer un saut de ligne si le texte est trop long et qu'en temps normal, une règle empêche le saut de ligne.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/wbr.html", "tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/wbr.html", "tabbed-shorter")}}
 
-<h2 id="Attributs">Attributs</h2>
+## Attributs
 
-<p>Comme tous les autres éléments HTML, cet élément inclut <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>
+Comme tous les autres éléments HTML, cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_universels).
 
-<h2 id="Notes">Notes</h2>
+## Notes
 
-<ul>
- <li>Sur les pages encodées en UTF-8, <code>&lt;wbr&gt;</code> se comporte comme le point de code <code>U+200B</code><code> ZERO-WIDTH SPACE</code>, il se comporte notamment comme un point de code Unicode bidi BN, ce qui signifie qu'il n'a aucun effet sur l'ordre bidirectionnel (cf. {{Glossary("BiDi")}}. Autrement dit : <code>&lt;div dir=rtl&gt;123,&lt;wbr&gt;456&lt;/div&gt;</code> sera affiché comme <code>123,456</code> et non comme <code>456,123</code> lorsqu'il n'y a pas de saut de ligne.</li>
- <li>Pour la même raison, l'élément <code>&lt;wbr&gt;</code> n'introduit pas de trait d'union à la fin de ligne. Pour avoir ce caractère, il faudra utiliser l'entité (<code>&amp;shy;</code>) (<em>soft-hyphen</em>).</li>
- <li>Cet élément a été initialement implémenté par Internet Explorer 5.5 et est défini officiellement dans la spécification HTML5.</li>
-</ul>
+- Sur les pages encodées en UTF-8, `<wbr>` se comporte comme le point de code ` U+200B`` ZERO-WIDTH SPACE  `, il se comporte notamment comme un point de code Unicode bidi BN, ce qui signifie qu'il n'a aucun effet sur l'ordre bidirectionnel (cf. {{Glossary("BiDi")}}. Autrement dit : `<div dir=rtl>123,<wbr>456</div>` sera affiché comme `123,456` et non comme `456,123` lorsqu'il n'y a pas de saut de ligne.
+- Pour la même raison, l'élément `< wbr >` n'introduit pas de trait d'union à la fin de ligne. Pour avoir ce caractère, il faudra utiliser l'entité (`& shy;`) (_soft-hyphen_).
+- Cet élément a été initialement implémenté par Internet Explorer 5.5 et est défini officiellement dans la spécification HTML5.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;http://voici&lt;wbr&gt;.une&lt;wbr&gt;.très&lt;wbr&gt;.très&lt;wbr&gt;.longue&lt;wbr&gt;.URL&lt;wbr&gt;.com/avec&lt;wbr&gt;/pleins&lt;wbr&gt;/de&lt;wbr&gt;/niveaux&lt;wbr&gt;/de&lt;wbr&gt;/pages&lt;/p&gt;
-</pre>
+```html
+<p>http://voici<wbr>.une<wbr>.très<wbr>.très<wbr>.longue<wbr>.URL<wbr>.com/avec<wbr>/pleins<wbr>/de<wbr>/niveaux<wbr>/de<wbr>/pages</p>
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","100%","120")}}</p>
+{{EmbedLiveSample("Exemples","100%","120")}}
 
-<div class="note">
-<p><strong>Note :</strong> <em><a class="external" href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/">Le guide stylistique de Yahoo</a></em> recommande de <a class="external" href="https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses">casser une URL avant la ponctuation</a> afin d'éviter toute ambiguïté sur la fin de l'URL (l'utilisateur pourrait croire que l'URL se finit en fin de ligne alors qu'elle se poursuit plus loin).</p>
-</div>
+> **Note :** _[Le guide stylistique de Yahoo](https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/)_ recommande de [casser une URL avant la ponctuation](https://web.archive.org/web/20121105171040/http://styleguide.yahoo.com/editing/treat-abbreviations-capitalization-and-titles-consistently/website-names-and-addresses) afin d'éviter toute ambiguïté sur la fin de l'URL (l'utilisateur pourrait croire que l'URL se finit en fin de ligne alors qu'elle se poursuit plus loin).
 
-<h2 id="Résumé_technique">Résumé technique</h2>
+## Résumé technique
 
 <table class="properties">
- <tbody>
-  <tr>
-   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
-   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Contenu autorisé</th>
-   <td>Aucun, cet élément est un élément vide.</td>
-  </tr>
-  <tr>
-   <th scope="row">Omission de balise</th>
-   <td>Cet élément est un élément vide, il doit avoir une balise de début et ne doit pas avoir de balise de fin.</td>
-  </tr>
-  <tr>
-   <th scope="row">Parents autorisés</th>
-   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Rôles ARIA autorisés</th>
-   <td>Tous les rôles sont autorisés.</td>
-  </tr>
-  <tr>
-   <th scope="row">Interface DOM</th>
-   <td>{{domxref("HTMLElement")}}</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu"
+          >Catégories de contenu</a
+        >
+      </th>
+      <td>
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux"
+          >Contenu de flux</a
+        >,
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Contenu autorisé</th>
+      <td>Aucun, cet élément est un élément vide.</td>
+    </tr>
+    <tr>
+      <th scope="row">Omission de balise</th>
+      <td>
+        Cet élément est un élément vide, il doit avoir une balise de début et ne
+        doit pas avoir de balise de fin.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Parents autorisés</th>
+      <td>
+        Tout élément qui accepte du
+        <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé"
+          >contenu phrasé</a
+        >.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">Rôles ARIA autorisés</th>
+      <td>Tous les rôles sont autorisés.</td>
+    </tr>
+    <tr>
+      <th scope="row">Interface DOM</th>
+      <td>{{domxref("HTMLElement")}}</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-wbr-element', '&lt;wbr&gt;')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-wbr-element', '&lt;wbr&gt;')}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+## Spécifications
+
+| Spécification                                                                                                    | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', 'semantics.html#the-wbr-element', '&lt;wbr&gt;')}}             | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-wbr-element', '&lt;wbr&gt;')}} | {{Spec2('HTML5 W3C')}}     |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.wbr")}}</p>
+{{Compat("html.elements.wbr")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{cssxref("overflow-wrap")}}</li>
- <li>{{cssxref("word-break")}}</li>
- <li>{{cssxref("hyphens")}}</li>
-</ul>
+- {{cssxref("overflow-wrap")}}
+- {{cssxref("word-break")}}
+- {{cssxref("hyphens")}}
diff --git a/files/fr/web/html/element/xmp/index.md b/files/fr/web/html/element/xmp/index.md
index d210e8b57b..999e5d24df 100644
--- a/files/fr/web/html/element/xmp/index.md
+++ b/files/fr/web/html/element/xmp/index.md
@@ -9,39 +9,31 @@ tags:
   - Web
 translation_of: Web/HTML/Element/xmp
 ---
-<div>{{Obsolete_header}}{{HTMLRef}}</div>
+{{Obsolete_header}}{{HTMLRef}}
 
-<p>L'élément HTML <strong><code>&lt;xmp&gt;</code></strong> (pour <em>example</em>) affiche le texte entre les balises d'ouverture et de fermeture sans interpréter le HTML qu'il contient et en utilisant une police à chasse fixe. La spécification HTML 2 recommande un affichage suffisamment large pour contenir 80 caractères par ligne.</p>
+L'élément HTML **`<xmp>`** (pour _example_) affiche le texte entre les balises d'ouverture et de fermeture sans interpréter le HTML qu'il contient et en utilisant une police à chasse fixe. La spécification HTML 2 recommande un affichage suffisamment large pour contenir 80 caractères par ligne.
 
-<div class="note">
-  <p><strong>Note :</strong> Ne pas utiliser cet élément.</p>
+> **Note :** Ne pas utiliser cet élément.
+>
+> - Il a été déprécié depuis HTML3.2 et n'a pas été implémenté d'une manière cohérente. Il a été complètement retiré du langage dans HTML5.
+> - Utilisez l'élément {{HTMLElement("pre")}} ou, si sémantiquement approprié, l'élément {{HTMLElement("code")}}. Notez qu'il vous faudra échapper les caractères '`<`' et '`>`' pour qu'ils ne soient pas interprétés.
+> - Une police à chasse fixe peut être obtenu sur n'importe quel élément en utilisant des règles [CSS](/fr/docs/CSS), par la valeur `monospace` avec la propriété {{cssxref("font-family")}}.
 
-<ul>
- <li>Il a été déprécié depuis HTML3.2 et n'a pas été implémenté d'une manière cohérente. Il a été complètement retiré du langage dans HTML5.</li>
- <li>Utilisez l'élément {{HTMLElement("pre")}} ou, si sémantiquement approprié, l'élément {{HTMLElement("code")}}. Notez qu'il vous faudra échapper les caractères '<code>&lt;</code>' et '<code>&gt;</code>' pour qu'ils ne soient pas interprétés.</li>
- <li>Une police à chasse fixe peut être obtenu sur n'importe quel élément en utilisant des règles <a href="/fr/docs/CSS">CSS</a>, par la valeur <code>monospace</code> avec la propriété {{cssxref("font-family")}}.</li>
-</ul>
-</div>
+## Attributs
 
-<h2 id="Attributs">Attributs</h2>
+Cet élément n'a aucun autre attribut en dehors [des attributs universels](/fr/docs/Web/HTML/Attributs_universels), communs à tous les éléments.
 
-<p>Cet élément n'a aucun autre attribut en dehors <a href="/fr/docs/Web/HTML/Attributs_universels">des attributs universels</a>, communs à tous les éléments.</p>
+## Interface DOM
 
-<h2 id="Interface_DOM">Interface DOM</h2>
+Cet élément implémente l'interface {{domxref('HTMLElement')}}.
 
-<p>Cet élément implémente l'interface {{domxref('HTMLElement')}}.</p>
+> **Note :** Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.
 
-<div class="note">
-<p><strong>Note :</strong> Jusqu'à Gecko 1.9.2 inclus, Firefox implémentait l'interface {{domxref('HTMLSpanElement')}} pour cet élément.</p>
-</div>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("html.elements.xmp")}}
 
-<p>{{Compat("html.elements.xmp")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les éléments {{HTMLElement("pre")}} et {{HTMLElement("code")}} qui doivent être utilisés à la place.</li>
- <li>Les éléments {{HTMLElement("plaintext")}} et {{HTMLElement("listing")}}, similaires à {{HTMLElement("xmp")}} mais également obsolètes.</li>
-</ul>
+- Les éléments {{HTMLElement("pre")}} et {{HTMLElement("code")}} qui doivent être utilisés à la place.
+- Les éléments {{HTMLElement("plaintext")}} et {{HTMLElement("listing")}}, similaires à {{HTMLElement("xmp")}} mais également obsolètes.
diff --git a/files/fr/web/html/global_attributes/accesskey/index.md b/files/fr/web/html/global_attributes/accesskey/index.md
index 498b67629a..87f3ac99d6 100644
--- a/files/fr/web/html/global_attributes/accesskey/index.md
+++ b/files/fr/web/html/global_attributes/accesskey/index.md
@@ -9,132 +9,121 @@ tags:
 translation_of: Web/HTML/Global_attributes/accesskey
 original_slug: Web/HTML/Attributs_universels/accesskey
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`accesskey`** fournit une indication afin de générer un raccourci clavier pour l'élément courant. La valeur de cet attribut est une liste de caractères (un caractère étant ici un seul point de code Unicode) séparés par des espaces. Le navigateur utilisera le premier caractère qui est disponible selon la disposition du clavier utilisée.{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}
 
-<div>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>accesskey</strong></code> fournit une indication afin de générer un raccourci clavier pour l'élément courant. La valeur de cet attribut est une liste de caractères (un caractère étant ici un seul point de code Unicode) séparés par des espaces. Le navigateur utilisera le premier caractère qui est disponible selon la disposition du clavier utilisée.</div>
+La combinaison de touches utilisée pour le raccourci clavier dépend du navigateur et du système d'exploitation utilisés.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/attribute-accesskey.html","tabbed-shorter")}}</div>
-
-<p>La combinaison de touches utilisée pour le raccourci clavier dépend du navigateur et du système d'exploitation utilisés.</p>
-
-<div class="note">
-<p><strong>Note :</strong> La spécification WHATWG indique qu'il est possible d'indiquer des caractères séparés par plusieurs espaces, auquel cas le navigateur considèrera le premier qu'il prend en charge. Toutefois, cela ne fonctionne pas dans la plupart des navigateurs. Pour IE/Edge, c'est la première valeur prise en charge qui sera utilisée si celle-ci n'entre pas en conflit avec d'autres commandes.</p>
-</div>
+> **Note :** La spécification WHATWG indique qu'il est possible d'indiquer des caractères séparés par plusieurs espaces, auquel cas le navigateur considèrera le premier qu'il prend en charge. Toutefois, cela ne fonctionne pas dans la plupart des navigateurs. Pour IE/Edge, c'est la première valeur prise en charge qui sera utilisée si celle-ci n'entre pas en conflit avec d'autres commandes.
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th></th>
-   <th>Windows</th>
-   <th>Linux</th>
-   <th>Mac</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th>Firefox</th>
-   <td colspan="2"><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>touche</em></kbd></td>
-   <td>
-    <p>Pour Firefox 57 et les versions ultérieures : <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd><em>touche</em></kbd> ou <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd><br>
-     Pour Firefox 14 et les versions ultérieures : <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd><br>
-     Pour Firefox 13 et les versions antérieures : <kbd>Control</kbd> + <kbd><em>touche</em></kbd></p>
-   </td>
-  </tr>
-  <tr>
-   <th>Edge</th>
-   <td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
-   <td colspan="2">N/A</td>
-  </tr>
-  <tr>
-   <th>Internet Explorer</th>
-   <td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
-   <td colspan="2">N/A</td>
-  </tr>
-  <tr>
-   <th>Google Chrome</th>
-   <td colspan="2"><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
-   <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
-  </tr>
-  <tr>
-   <th>Safari</th>
-   <td><kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
-   <td>N/A</td>
-   <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd></td>
-  </tr>
-  <tr>
-   <th>Opera 15+</th>
-   <td colspan="2"><kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
-   <td><kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd></td>
-  </tr>
-  <tr>
-   <th>Opera 12</th>
-   <td colspan="3"><kbd>Shift</kbd> + <kbd>Esc</kbd> ouvre une liste de contenu accessible via la touche <code>accesskey</code>, on peut alors ensuite choisir l'élément voulu grâce la touche <kbd><em>touche</em></kbd></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th></th>
+      <th>Windows</th>
+      <th>Linux</th>
+      <th>Mac</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>Firefox</th>
+      <td colspan="2">
+        <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd><em>touche</em></kbd>
+      </td>
+      <td>
+        <p>
+          Pour Firefox 57 et les versions ultérieures : <kbd>Control</kbd> +
+          <kbd>Option</kbd> + <kbd><em>touche</em></kbd> ou <kbd>Control</kbd> +
+          <kbd>Alt</kbd> + <kbd><em>touche</em></kbd
+          ><br />Pour Firefox 14 et les versions ultérieures :
+          <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd
+          ><br />Pour Firefox 13 et les versions antérieures :
+          <kbd>Control</kbd> + <kbd><em>touche</em></kbd>
+        </p>
+      </td>
+    </tr>
+    <tr>
+      <th>Edge</th>
+      <td>
+        <kbd>Alt</kbd> + <kbd><em>touche</em></kbd>
+      </td>
+      <td colspan="2">N/A</td>
+    </tr>
+    <tr>
+      <th>Internet Explorer</th>
+      <td>
+        <kbd>Alt</kbd> + <kbd><em>touche</em></kbd>
+      </td>
+      <td colspan="2">N/A</td>
+    </tr>
+    <tr>
+      <th>Google Chrome</th>
+      <td colspan="2">
+        <kbd>Alt</kbd> + <kbd><em>touche</em></kbd>
+      </td>
+      <td>
+        <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd>
+      </td>
+    </tr>
+    <tr>
+      <th>Safari</th>
+      <td>
+        <kbd>Alt</kbd> + <kbd><em>touche</em></kbd>
+      </td>
+      <td>N/A</td>
+      <td>
+        <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>touche</em></kbd>
+      </td>
+    </tr>
+    <tr>
+      <th>Opera 15+</th>
+      <td colspan="2">
+        <kbd>Alt</kbd> + <kbd><em>key</em></kbd>
+      </td>
+      <td>
+        <kbd>Control</kbd> + <kbd>Alt</kbd> + <kbd><em>key</em></kbd>
+      </td>
+    </tr>
+    <tr>
+      <th>Opera 12</th>
+      <td colspan="3">
+        <kbd>Shift</kbd> + <kbd>Esc</kbd> ouvre une liste de contenu accessible
+        via la touche <code>accesskey</code>, on peut alors ensuite choisir
+        l'élément voulu grâce la touche <kbd><em>touche</em></kbd>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Accessibilité">Accessibilité</h2>
+## Accessibilité
 
-<p>Au-delà de la prise en charge limitée des navigateurs, <code>accesskey</code> pose plusieurs problèmes :</p>
+Au-delà de la prise en charge limitée des navigateurs, `accesskey` pose plusieurs problèmes :
 
-<ul>
- <li>Un raccourci défini avec <code>accesskey</code> peut rentrer en conflit avec un raccourci du système ou du navigateur, voire avec un raccourci d'un outil d'assistance. Les raccourcis pouvant être différents entre les navigateurs, systèmes d'exploitation et les outils, il n'est pas certain qu'une combinaison qui fonctionne dans un cas puisse fonctionner partout.</li>
- <li>Certains raccourcis définis avec <code>accesskey</code> peuvent ne pas être utilisés avec certains claviers, notamment lorsqu'on doit prendre en compte l'internationalisation.</li>
- <li>Les raccourcis définis avec <code>accesskey</code> qui utilisent un nombre peuvent être source de confusion pour les personnes souffrant de problèmes cognitifs si le nombre n'a pas d'association logique avec la fonctionnalité déclenchée par le raccourci.</li>
- <li>Il est nécessaire d'informer l'utilisateur qu'un raccourci est présent afin que celui-ci puisse être conscient de cette fonctionnalité. Sans méthode d'information, l'utilisateur pourra accidentellement déclencher les raccourcis définis avec <code>accesskey</code>.</li>
-</ul>
+- Un raccourci défini avec `accesskey` peut rentrer en conflit avec un raccourci du système ou du navigateur, voire avec un raccourci d'un outil d'assistance. Les raccourcis pouvant être différents entre les navigateurs, systèmes d'exploitation et les outils, il n'est pas certain qu'une combinaison qui fonctionne dans un cas puisse fonctionner partout.
+- Certains raccourcis définis avec `accesskey` peuvent ne pas être utilisés avec certains claviers, notamment lorsqu'on doit prendre en compte l'internationalisation.
+- Les raccourcis définis avec `accesskey` qui utilisent un nombre peuvent être source de confusion pour les personnes souffrant de problèmes cognitifs si le nombre n'a pas d'association logique avec la fonctionnalité déclenchée par le raccourci.
+- Il est nécessaire d'informer l'utilisateur qu'un raccourci est présent afin que celui-ci puisse être conscient de cette fonctionnalité. Sans méthode d'information, l'utilisateur pourra accidentellement déclencher les raccourcis définis avec `accesskey`.
 
-<p>Étant donné ces raisons, il est généralement conseillé de ne pas utiliser <code>accesskey</code> pour les sites web et applications généralistes.</p>
+Étant donné ces raisons, il est généralement conseillé de ne pas utiliser `accesskey` pour les sites web et applications généralistes.
 
-<ul>
- <li><a href="https://webaim.org/techniques/keyboard/accesskey#spec">WebAIM : accessibilité au clavier - <code>accesskey</code> (en anglais)</a></li>
-</ul>
+- [WebAIM : accessibilité au clavier - `accesskey` (en anglais)](https://webaim.org/techniques/keyboard/accesskey#spec)
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
-   <td>{{Spec2('HTML5.2')}}</td>
-   <td>Un comportement plus réaliste est défini et correspond à ce qui est réellement implémenté.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Aucune modification depuis {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Plusieurs caractères peuvent être définis via cet attribut depuis {{SpecName('HTML4.01')}}. Cet attribut peut désormais être défini sur n'importe quel élément.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>L'attribut est uniquement pris en charge par {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                             | Commentaires                                                                                                                                                                                                                                                                                 |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML5.2', "editing.html#the-accesskey-attribute", "accesskey")}}             | {{Spec2('HTML5.2')}}     | Un comportement plus réaliste est défini et correspond à ce qui est réellement implémenté.                                                                                                                                                                                                   |
+| {{SpecName('HTML WHATWG', "interaction.html#the-accesskey-attribute", "accesskey")}} | {{Spec2('HTML WHATWG')}} | Aucune modification depuis {{SpecName('HTML5.1')}}                                                                                                                                                                                                                                  |
+| {{SpecName('HTML5.1', "editing.html#the-accesskey-attribute", "accesskey")}}             | {{Spec2('HTML5.1')}}     | Aucune modification depuis {{SpecName('HTML5 W3C')}}                                                                                                                                                                                                                                  |
+| {{SpecName('HTML5 W3C', "editing.html#the-accesskey-attribute", "accesskey")}}         | {{Spec2('HTML5 W3C')}}     | Plusieurs caractères peuvent être définis via cet attribut depuis {{SpecName('HTML4.01')}}. Cet attribut peut désormais être défini sur n'importe quel élément.                                                                                                                      |
+| {{SpecName('HTML4.01', "interact/forms.html#h-17.11.2", "accesskey")}}                     | {{Spec2('HTML4.01')}}     | L'attribut est uniquement pris en charge par {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.global_attributes.accesskey")}}</p>
+{{Compat("html.global_attributes.accesskey")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Element.accessKey")}}</li>
- <li>{{domxref("HTMLElement.accessKeyLabel")}}</li>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
-</ul>
+- {{domxref("Element.accessKey")}}
+- {{domxref("HTMLElement.accessKeyLabel")}}
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
diff --git a/files/fr/web/html/global_attributes/autocapitalize/index.md b/files/fr/web/html/global_attributes/autocapitalize/index.md
index a5325253d7..d562b10ce6 100644
--- a/files/fr/web/html/global_attributes/autocapitalize/index.md
+++ b/files/fr/web/html/global_attributes/autocapitalize/index.md
@@ -9,40 +9,25 @@ tags:
 translation_of: Web/HTML/Global_attributes/autocapitalize
 original_slug: Web/HTML/Attributs_universels/autocapitalize
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
-
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>autocapitalize</strong></code> est un attribut à valeurs contraintes qui contrôle la façon dont le texte saisi est automatiquement converti en majuscules ou non. Voici les valeurs autorisées pour cet attribut :</p>
-
-<ul>
- <li><code>off</code> ou <code>none</code> : aucune transformation automatique n'est appliquée (par défaut, les lettres sont écrites en minuscules)</li>
- <li><code>on</code> ou <code>sentences</code> : la première lettre de chaque phrase est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)</li>
- <li><code>words</code> : la première lettre de chaque mot est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)</li>
- <li><code>characters</code> : toutes les lettres sont converties en majuscules.</li>
-</ul>
-
-<p>L'attribut <code>autocapitalize</code> n'a aucun impact lorsqu'on utilise un clavier physique. Il modifie la saisie pour les autres moyens de saisie tels que les claviers virtuels ou les moyens de saisie orale. Le but de cet attribut est d'aider de tels moyens à faciliter la saisie de l'utilisateur. Par défaut, un tel moyen de saisie utilisera une majuscule pour chaque début de phrase, modifier l'attribut <code>autocapitalize</code> permet aux auteurs de modifier ce comportement selon les différents éléments.</p>
-
-<p>L'attribut <code>autocapitalize</code> n'entraînera pas de mise en majuscule automatique pour un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut <code>url</code>, <code>email</code> ou <code>password</code>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.global_attributes.autocapitalize")}}</p>
+{{HTMLSidebar("Global_attributes")}}
+
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`autocapitalize`** est un attribut à valeurs contraintes qui contrôle la façon dont le texte saisi est automatiquement converti en majuscules ou non. Voici les valeurs autorisées pour cet attribut :
+
+- `off` ou `none` : aucune transformation automatique n'est appliquée (par défaut, les lettres sont écrites en minuscules)
+- `on` ou `sentences` : la première lettre de chaque phrase est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)
+- `words` : la première lettre de chaque mot est automatiquement écrite en majuscule, les autres lettres ne sont pas transformées (elles sont par défaut en minuscules)
+- `characters` : toutes les lettres sont converties en majuscules.
+
+L'attribut `autocapitalize` n'a aucun impact lorsqu'on utilise un clavier physique. Il modifie la saisie pour les autres moyens de saisie tels que les claviers virtuels ou les moyens de saisie orale. Le but de cet attribut est d'aider de tels moyens à faciliter la saisie de l'utilisateur. Par défaut, un tel moyen de saisie utilisera une majuscule pour chaque début de phrase, modifier l'attribut `autocapitalize` permet aux auteurs de modifier ce comportement selon les différents éléments.
+
+L'attribut `autocapitalize` n'entraînera pas de mise en majuscule automatique pour un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} vaut `url`, `email` ou `password`.
+
+## Spécifications
+
+| Spécification                                                                                                    | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}} | {{Spec2('HTML WHATWG')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.global_attributes.autocapitalize")}}
diff --git a/files/fr/web/html/global_attributes/autofocus/index.md b/files/fr/web/html/global_attributes/autofocus/index.md
index 8b087d74e5..9e0e3dd4a6 100644
--- a/files/fr/web/html/global_attributes/autofocus/index.md
+++ b/files/fr/web/html/global_attributes/autofocus/index.md
@@ -1,32 +1,31 @@
 ---
 title: autofocus
 slug: Web/HTML/Global_attributes/autofocus
+translation_of: Web/HTML/Global_attributes/autofocus
 browser-compat: html.global_attributes.autofocus
-translation_of: 'Web/HTML/Global_attributes/autofocus'
 ---
-<p>{{HTMLSidebar("Global_attributes")}}</p>
+{{HTMLSidebar("Global_attributes")}}
 
-<p><a href="/fr/docs/Web/HTML/Global_attributes">L'attribut global</a> <strong><code>autofocus</code></strong> est un attribut booléen indiquant qu'un élément devrait recevoir le focus au chargement de la page ou lorsque l'élément {{HTMLElement("dialog")}} dont il fait éventuellement partie est affiché.</p>
+[L'attribut global](/fr/docs/Web/HTML/Global_attributes) **`autofocus`** est un attribut booléen indiquant qu'un élément devrait recevoir le focus au chargement de la page ou lorsque l'élément {{HTMLElement("dialog")}} dont il fait éventuellement partie est affiché.
 
-<pre class="brush: html">&lt;input name="q" autofocus&gt;</pre>
+```html
+<input name="q" autofocus>
+```
 
-<p>L'attribut <code>autofocus</code> ne devrait pas être placé sur plus d'un élément au sein du document. S'il est placé sur plusieurs éléments, c'est le premier qui recevra le focus.</p>
+L'attribut `autofocus` ne devrait pas être placé sur plus d'un élément au sein du document. S'il est placé sur plusieurs éléments, c'est le premier qui recevra le focus.
 
-<div class="note">
-  <p><strong>Note :</strong> L'attribut <code>autofocus</code> s'applique à tous les éléments, et pas seulement aux contrôles de formulaires. Par exemple, il peut être utilisé sur une zone <a href="/fr/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a>.</p>
-</div>
+> **Note :** L'attribut `autofocus` s'applique à tous les éléments, et pas seulement aux contrôles de formulaires. Par exemple, il peut être utilisé sur une zone [contenteditable](/fr/docs/Web/HTML/Global_attributes/contenteditable).
 
-<h2 id="accessibility_considerations">Remarques sur l'accessibilité de la fonctionnalité</h2>
+## Remarques sur l'accessibilité de la fonctionnalité
 
-<p>Le fait de placer automatiquement le focus sur un élément de formulaire peut poser des difficultés aux personnes utilisant des technologies d'assistance telles que les lecteurs d'écrans et les personnes portant un handicap cognitif. Lorsque l'attribut <code>autofocus</code> est assigné, les lecteurs d'écrans vont « téléporter » le visiteur sur l'élément de formulaire sans pouvoir l'avertir au préalable.</p>
+Le fait de placer automatiquement le focus sur un élément de formulaire peut poser des difficultés aux personnes utilisant des technologies d'assistance telles que les lecteurs d'écrans et les personnes portant un handicap cognitif. Lorsque l'attribut `autofocus` est assigné, les lecteurs d'écrans vont « téléporter » le visiteur sur l'élément de formulaire sans pouvoir l'avertir au préalable.
 
-<p>Concernant l'accessibilité, l'attribut <code>autofocus</code> doit être utilisé avec précaution. Placer automatiquement le focus sur un élément de formulaire peut déclencher un défilement intempestif de la page lors de son chargement. Le focus peut aussi déclencher l'ouverture intempestive du clavier virtuel sur les appareils tactiles. Enfin, il faut noter que comme les lecteurs d'écrans annoncent le libellé d'un élément de formulaire recevant le focus, aucun autre élément placé avant le libellé ne sera lu par l'outil d'assistance. D'ailleurs, les personnes utilisant un appareil disposant d'un petit écran perdront également le contexte fourni par les éléments situés au-dessus de l'élément de formulaire recevant le focus.</p>
+Concernant l'accessibilité, l'attribut `autofocus` doit être utilisé avec précaution. Placer automatiquement le focus sur un élément de formulaire peut déclencher un défilement intempestif de la page lors de son chargement. Le focus peut aussi déclencher l'ouverture intempestive du clavier virtuel sur les appareils tactiles. Enfin, il faut noter que comme les lecteurs d'écrans annoncent le libellé d'un élément de formulaire recevant le focus, aucun autre élément placé avant le libellé ne sera lu par l'outil d'assistance. D'ailleurs, les personnes utilisant un appareil disposant d'un petit écran perdront également le contexte fourni par les éléments situés au-dessus de l'élément de formulaire recevant le focus.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
-
-<p>{{Compat}}</p>
+## Compatibilité des navigateurs
 
+{{Compat}}
diff --git a/files/fr/web/html/global_attributes/class/index.md b/files/fr/web/html/global_attributes/class/index.md
index e4aa07e5e9..cd398b7af3 100644
--- a/files/fr/web/html/global_attributes/class/index.md
+++ b/files/fr/web/html/global_attributes/class/index.md
@@ -9,52 +9,27 @@ tags:
 translation_of: Web/HTML/Global_attributes/class
 original_slug: Web/HTML/Attributs_universels/class
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
-
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>class</strong></code> indique une liste de classes associées à l'élément courant. Les classes permettent de manipuler les éléments, via CSS ou JavaScript en utilisant <a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">les sélecteurs de classe</a> ou des fonctions telles que {{domxref("document.getElementsByClassName")}}.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}</div>
-
-<p>Bien que la spécification ne précise aucune contrainte quant aux noms utilisés pour les classes, une bonne pratique consiste à utiliser des noms qui traduisent la sémantique de l'élément plutôt que la mise en forme. Ainsi, les noms sémantiques restent pertinents même lorsque la présentation de la page évolue.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "dom.html#classes", "class")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification depuis {{SpecName('HTML5.1')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "dom.html#element-attrdef-global-class", "class")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>État selon {{SpecName('HTML WHATWG')}}. Aucune modification depuis {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "dom.html#classes", "class")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>État selon {{SpecName('HTML WHATWG')}}. <code>class</code> est désormas sun attribut universel depuis {{SpecName('HTML4.01')}},.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Cet attribut est pris en charge sur tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.global_attributes.class")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Tous les attributs universels</a></li>
-</ul>
+{{HTMLSidebar("Global_attributes")}}
+
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`class`** indique une liste de classes associées à l'élément courant. Les classes permettent de manipuler les éléments, via CSS ou JavaScript en utilisant [les sélecteurs de classe](/fr/docs/Web/CSS/Sélecteurs_de_classe) ou des fonctions telles que {{domxref("document.getElementsByClassName")}}.
+
+{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}
+
+Bien que la spécification ne précise aucune contrainte quant aux noms utilisés pour les classes, une bonne pratique consiste à utiliser des noms qui traduisent la sémantique de l'élément plutôt que la mise en forme. Ainsi, les noms sémantiques restent pertinents même lorsque la présentation de la page évolue.
+
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires                                                                                                                                                                                                                                                                                                                                                                                   |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "dom.html#classes", "class")}}                     | {{Spec2('HTML WHATWG')}} | Aucune modification depuis {{SpecName('HTML5.1')}}.                                                                                                                                                                                                                                                                                                                                   |
+| {{SpecName('HTML5.1', "dom.html#element-attrdef-global-class", "class")}} | {{Spec2('HTML5.1')}}     | État selon {{SpecName('HTML WHATWG')}}. Aucune modification depuis {{SpecName('HTML5 W3C')}}                                                                                                                                                                                                                                                                                   |
+| {{SpecName('HTML5 W3C', "dom.html#classes", "class")}}                         | {{Spec2('HTML5 W3C')}}     | État selon {{SpecName('HTML WHATWG')}}. `class` est désormas sun attribut universel depuis {{SpecName('HTML4.01')}},.                                                                                                                                                                                                                                                         |
+| {{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}             | {{Spec2('HTML4.01')}}     | Cet attribut est pris en charge sur tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}. |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.global_attributes.class")}}
+
+## Voir aussi
+
+- [Tous les attributs universels](/fr/docs/Web/HTML/Attributs_universels)
diff --git a/files/fr/web/html/global_attributes/contenteditable/index.md b/files/fr/web/html/global_attributes/contenteditable/index.md
index be68b5e9b3..0e5eb994b5 100644
--- a/files/fr/web/html/global_attributes/contenteditable/index.md
+++ b/files/fr/web/html/global_attributes/contenteditable/index.md
@@ -9,74 +9,41 @@ tags:
 translation_of: Web/HTML/Global_attributes/contenteditable
 original_slug: Web/HTML/Attributs_universels/contenteditable
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>contenteditable</strong></code> est un attribut à valeur contrainte qui indique si l'élément courant doit pouvoir être édité par l'utilisateur ou non. Lorsque c'est le cas, des éléments de l'interface du navigateur (ou de l'agent utilisateur) sont modifiés afin de permettre l'édition.</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`contenteditable`** est un attribut à valeur contrainte qui indique si l'élément courant doit pouvoir être édité par l'utilisateur ou non. Lorsque c'est le cas, des éléments de l'interface du navigateur (ou de l'agent utilisateur) sont modifiés afin de permettre l'édition.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/attribute-contenteditable.html","tabbed-shorter")}}
 
-<p>Les valeurs autorisées pour cet attribut sont :</p>
+Les valeurs autorisées pour cet attribut sont :
 
-<ul>
- <li><code>true</code> ou la chaîne de caractères vide qui indiquent que l'élément est éditable</li>
- <li><code>false</code> qui indique que l'élément ne peut pas être édité.</li>
-</ul>
+- `true` ou la chaîne de caractères vide qui indiquent que l'élément est éditable
+- `false` qui indique que l'élément ne peut pas être édité.
 
-<p>Si cet attribut n'est pas défini, sa valeur est héritée depuis son élément parent.</p>
+Si cet attribut n'est pas défini, sa valeur est héritée depuis son élément parent.
 
-<p>Cet attribut n'est pas un attribut booléen ! Cela signifie qu'une valeur explicite est nécessaire pour son fonctionnement. Toute forme telle que <code>&lt;label contenteditable&gt;Exemple&lt;/label&gt;</code> n'est pas autorisée. La version correcte sera <code>&lt;label contenteditable="true"&gt;Exemple&lt;/label&gt;</code>.</p>
+Cet attribut n'est pas un attribut booléen ! Cela signifie qu'une valeur explicite est nécessaire pour son fonctionnement. Toute forme telle que `<label contenteditable>Exemple</label>` n'est pas autorisée. La version correcte sera `<label contenteditable="true">Exemple</label>`.
 
-<p>Il est possible de modifier la couleur du symbole d'insertion grâce à la propriété CSS {{cssxref("caret-color")}}.</p>
+Il est possible de modifier la couleur du symbole d'insertion grâce à la propriété CSS {{cssxref("caret-color")}}.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("HTML Editing", "contentEditable.html#contenteditable", "contenteditable")}}</td>
-   <td>{{Spec2("HTML Editing")}}</td>
-   <td>Ajout de <code>"events"</code>, <code>"caret"</code>, <code>"typing"</code>, <code>"plaintext-only"</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Aucune modification depuis la dernière dérivation, {{SpecName("HTML5.2")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td>
-   <td>{{Spec2("HTML5.2")}}</td>
-   <td>Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5.1")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}}</td>
-   <td>{{Spec2("HTML5.1")}}</td>
-   <td>Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5 W3C")}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}</td>
-   <td>{{Spec2("HTML5 W3C")}}</td>
-   <td>Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                                                | État                             | Commentaires                                                                                                    |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| {{SpecName("HTML Editing", "contentEditable.html#contenteditable", "contenteditable")}}                                                         | {{Spec2("HTML Editing")}} | Ajout de `"events"`, `"caret"`, `"typing"`, `"plaintext-only"`.                                                 |
+| {{SpecName("HTML WHATWG", "editing.html#attr-contenteditable", "contenteditable")}}                                                             | {{Spec2("HTML WHATWG")}} | Aucune modification depuis la dernière dérivation, {{SpecName("HTML5.2")}}                             |
+| {{SpecName("HTML5.2", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}} | {{Spec2("HTML5.2")}}     | Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5.1")}} |
+| {{SpecName("HTML5.1", "editing.html#making-document-regions-editable-the-contenteditable-content-attribute", "contenteditable")}} | {{Spec2("HTML5.1")}}     | Dérivation de {{SpecName("HTML WHATWG")}}, aucune modification depuis {{SpecName("HTML5 W3C")}} |
+| {{SpecName("HTML5 W3C", "editing.html#attr-contenteditable", "contenteditable")}}                                                                 | {{Spec2("HTML5 W3C")}}     | Dérivation de {{SpecName("HTML WHATWG")}}, définition initiale.                                        |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.global_attributes.contenteditable")}}</p>
+{{Compat("html.global_attributes.contenteditable")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Contenu_editable">Rendre le contenu éditable</a></li>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Tous les attributs universels</a></li>
- <li>{{domxref("HTMLElement.contentEditable")}} et {{domxref("HTMLElement.isContentEditable")}}</li>
- <li>{{cssxref("caret-color")}}</li>
- <li><a href="/fr/docs/Web/API/HTMLElement/input_event">L'évènement <code>input</code> pour l'objet DOM <code>HTMLElement</code></a></li>
-</ul>
+- [Rendre le contenu éditable](/fr/docs/Web/HTML/Contenu_editable)
+- [Tous les attributs universels](/fr/docs/Web/HTML/Attributs_universels)
+- {{domxref("HTMLElement.contentEditable")}} et {{domxref("HTMLElement.isContentEditable")}}
+- {{cssxref("caret-color")}}
+- [L'évènement `input` pour l'objet DOM `HTMLElement`](/fr/docs/Web/API/HTMLElement/input_event)
diff --git a/files/fr/web/html/global_attributes/contextmenu/index.md b/files/fr/web/html/global_attributes/contextmenu/index.md
index ef40b4361f..5dc068c1cf 100644
--- a/files/fr/web/html/global_attributes/contextmenu/index.md
+++ b/files/fr/web/html/global_attributes/contextmenu/index.md
@@ -9,53 +9,53 @@ tags:
 translation_of: Web/HTML/Global_attributes/contextmenu
 original_slug: Web/HTML/Attributs_universels/contextmenu
 ---
-<div>{{HTMLSidebar("Global_attributes")}}{{obsolete_header}}</div>
+{{HTMLSidebar("Global_attributes")}}{{obsolete_header}}
 
-<div class="warning">
-<p><strong>Attention :</strong> Cet attribut est <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu">obsolète</a> et sera retiré de l'ensemble des navigateurs.</p>
-</div>
+> **Attention :** Cet attribut est [obsolète](https://html.spec.whatwg.org/multipage/obsolete.html#attr-contextmenu) et sera retiré de l'ensemble des navigateurs.
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>contextmenu</strong></code> correspond à l'{{htmlattrxref("id","","identifiant",1)}} d'un élément {{HTMLElement("menu")}} qu'on souhaite utiliser comme menu contextuel pour l'élément courant.</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`contextmenu`** correspond à l'{{htmlattrxref("id","","identifiant",1)}} d'un élément {{HTMLElement("menu")}} qu'on souhaite utiliser comme menu contextuel pour l'élément courant.
 
-<p>Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.</p>
+Un menu contextuel est un menu qui apparaît suite à une action utilisateur (par exemple un clic-droit). HTML5 permet désormais de personnaliser ce menu.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :</p>
+Voici quelques exemples de personnalisations de menus. Le code HTML pourra être :
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush:html">&lt;body contextmenu="share"&gt;
-  &lt;menu type="context" id="share"&gt;
-    &lt;menu label="Partager"&gt;
-      &lt;menuitem label="Twitter" onclick="shareViaTwitter()"&gt;&lt;/menuitem&gt;
-      &lt;menuitem label="Facebook" onclick="shareViaFacebook()"&gt;&lt;/menuitem&gt;
-    &lt;/menu&gt;
-  &lt;/menu&gt;
-  &lt;ol&gt;
-    &lt;li&gt;
+```html
+<body contextmenu="share">
+  <menu type="context" id="share">
+    <menu label="Partager">
+      <menuitem label="Twitter" onclick="shareViaTwitter()"></menuitem>
+      <menuitem label="Facebook" onclick="shareViaFacebook()"></menuitem>
+    </menu>
+  </menu>
+  <ol>
+    <li>
       Dans cet exemple, vous pouvez partager un lien vers
       cette page sur Facebook et/ou Twitter via le groupe Partager
       du menu contextuel
-    &lt;/li&gt;
-    &lt;li&gt;Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.&lt;/li&gt;
-    &lt;li&gt;&lt;pre contextmenu="changeFont" id="fontSizing"&gt;Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel&lt;/pre&gt;&lt;/li&gt;
-    &lt;menu type="context" id="changeFont"&gt;
-      &lt;menuitem label="Augmenter la taille de la police" onclick="incFont()"&gt;&lt;/menuitem&gt;
-      &lt;menuitem label="Réduire la taille de la police" onclick="decFont()"&gt;&lt;/menuitem&gt;
-    &lt;/menu&gt;
-    &lt;li contextmenu="ChangeImage" id="changeImage"&gt;Sur cette ligne : on peut  utiliser l'option "Changer l'image" du menu.&lt;/li&gt;&lt;br /&gt;
-    &lt;img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" /&gt;
-    &lt;menu type="context" id="ChangeImage"&gt;
-      &lt;menuitem label="Changer l'image" onclick="changeImage()"&gt;&lt;/menuitem&gt;
-    &lt;/menu&gt;
-  &lt;/ol&gt;
-&lt;/body&gt;
-</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush:js">function shareViaTwitter() {
+    </li>
+    <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li>
+    <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li>
+    <menu type="context" id="changeFont">
+      <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem>
+      <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem>
+    </menu>
+    <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut  utiliser l'option "Changer l'image" du menu.</li><br />
+    <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" />
+    <menu type="context" id="ChangeImage">
+      <menuitem label="Changer l'image" onclick="changeImage()"></menuitem>
+    </menu>
+  </ol>
+</body>
+```
+
+### JavaScript
+
+```js
+function shareViaTwitter() {
   window.open("https://twitter.com/intent/tweet?text=" +
       "Je découvre ContextMenu avec MDN.");
 }
@@ -75,41 +75,25 @@ function decFont(){
 function changeImage(){
   var j = Math.ceil((Math.random()*39)+1);
   document.images[0].src="https://developer.mozilla.org/media/img/promote/promobutton_mdn" + j + ".png";
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<div>{{EmbedLiveSample("Exemples",600,500)}}</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "obsolete.html#attr-contextmenu", "contextmenu")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Rendu obsolète</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.global_attributes.contextmenu")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
- <li>{{domxref("HTMLElement.contextMenu")}}</li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples",600,500)}}
+
+## Spécifications
+
+| Spécification                                                                                                | État                             | Commentaires                                                             |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------ |
+| {{SpecName("HTML WHATWG", "obsolete.html#attr-contextmenu", "contextmenu")}}         | {{Spec2('HTML WHATWG')}} | Rendu obsolète                                                           |
+| {{SpecName('HTML5.1', "interactive-elements.html#context-menus", "contextmenu")}} | {{Spec2('HTML5.1')}}     | Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.global_attributes.contextmenu")}}
+
+## Voir aussi
+
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
+- {{domxref("HTMLElement.contextMenu")}}
diff --git a/files/fr/web/html/global_attributes/data-_star_/index.md b/files/fr/web/html/global_attributes/data-_star_/index.md
index 0c0e955533..21a6c69ff2 100644
--- a/files/fr/web/html/global_attributes/data-_star_/index.md
+++ b/files/fr/web/html/global_attributes/data-_star_/index.md
@@ -9,72 +9,48 @@ tags:
 translation_of: Web/HTML/Global_attributes/data-*
 original_slug: Web/HTML/Attributs_universels/data-*
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>Les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a> <code><strong>data-*</strong></code> forment une classe d'attributs, appelés attributs de données (<em>data attributes</em>). Ils permettent d'échanger des données propriétaire entre le <a href="/fr/docs/Web/HTML">HTML</a> et la représentation du <a href="/fr/docs/Web/API/Référence_du_DOM_Gecko">DOM</a>, qu'on peut manipuler avec des scripts.</p>
+Les [attributs universels](/fr/docs/Web/HTML/Attributs_universels) **`data-*`** forment une classe d'attributs, appelés attributs de données (_data attributes_). Ils permettent d'échanger des données propriétaire entre le [HTML](/fr/docs/Web/HTML) et la représentation du [DOM](/fr/docs/Web/API/Référence_du_DOM_Gecko), qu'on peut manipuler avec des scripts.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/attribute-data.html","tabbed-standard")}}
 
-<p>De tels attributs sont disponibles via l'interface {{domxref("HTMLElement")}} de l'élément pour lequel l'attribut est utilisé. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'attribut.<br>
- Ici, l'astérisque (<code>*</code>) peut être remplacée par n'importe quel nom valide selon <a class="external" href="https://www.w3.org/TR/REC-xml/#NT-Name">les règles appliquées aux noms XML</a> et en respectant les contraintes suivantes :</p>
+De tels attributs sont disponibles via l'interface {{domxref("HTMLElement")}} de l'élément pour lequel l'attribut est utilisé. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'attribut.
+Ici, l'astérisque (`*`) peut être remplacée par n'importe quel nom valide selon [les règles appliquées aux noms XML](https://www.w3.org/TR/REC-xml/#NT-Name) et en respectant les contraintes suivantes :
 
-<ul>
- <li>Le nom ne peut pas commencer par <code>xml</code>, quelle que soit la casse utilisée pour les différentes lettres</li>
- <li>Le nom ne doit pas contenir de point-virgule (<code>U+003A</code>)</li>
- <li>Le nom ne doit pas contenir de lettres majuscules de l'alphabet latin (<code>A</code> à <code>Z</code>).</li>
-</ul>
+- Le nom ne peut pas commencer par `xml`, quelle que soit la casse utilisée pour les différentes lettres
+- Le nom ne doit pas contenir de point-virgule (`U+003A`)
+- Le nom ne doit pas contenir de lettres majuscules de l'alphabet latin (`A` à `Z`).
 
-<p>La propriété {{domxref("HTMLElement.dataset")}} est un objet {{domxref("StringMap")}} et la valeur d'un attribut de donnée nommé <code>data-test-valeur</code> sera accessible via <code>HTMLElement.dataset.testValeur</code> car les tirets (<code>U+002D</code>) sont remplacés par la majuscule de la lettre suivante (<a href="https://fr.wikipedia.org/wiki/CamelCase">CamelCase</a>).</p>
+La propriété {{domxref("HTMLElement.dataset")}} est un objet {{domxref("StringMap")}} et la valeur d'un attribut de donnée nommé `data-test-valeur` sera accessible via `HTMLElement.dataset.testValeur` car les tirets (`U+002D`) sont remplacés par la majuscule de la lettre suivante ([CamelCase](https://fr.wikipedia.org/wiki/CamelCase)).
 
-<h3 id="Utilisation">Utilisation</h3>
+### Utilisation
 
-<p>Lorsqu'on ajoute des attributs de données <code>data-*</code>, on peut utiliser les éléments HTML classiques afin d'en faire des objets complexes et puissants. Ainsi, un <em>sprite</em> d'un vaisseau spatial dans un jeu peut être modélisé via un élément {{HTMLElement("img")}} auquel on associe un attribut <code>class</code> et plusieurs attributs de données sous la forme <code>data-*</code>.</p>
+Lorsqu'on ajoute des attributs de données `data-*`, on peut utiliser les éléments HTML classiques afin d'en faire des objets complexes et puissants. Ainsi, un _sprite_ d'un vaisseau spatial dans un jeu peut être modélisé via un élément {{HTMLElement("img")}} auquel on associe un attribut `class` et plusieurs attributs de données sous la forme `data-*`.
 
-<pre class="brush: html">&lt;img class="spaceship cruiserX3" src="shipX3.png"
+```html
+<img class="spaceship cruiserX3" src="shipX3.png"
      data-ship-id="324" data-weapons="laserI laserII"
      data-x="414354" data-y="85160" data-z="31940"
-     onclick="spaceships[this.dataset.shipId].blasted()"&gt;
-&lt;/img&gt;
-</pre>
+     onclick="spaceships[this.dataset.shipId].blasted()">
+</img>
+```
 
-<p>Pour un tutoriel plus avancé à propos des attributs de données HTML, lire l'article <a href="/fr/Apprendre/HTML/Comment/Utiliser_attributs_donnes">Manipuler les attributs de données</a>.</p>
+Pour un tutoriel plus avancé à propos des attributs de données HTML, lire l'article [Manipuler les attributs de données](/fr/Apprendre/HTML/Comment/Utiliser_attributs_donnes).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                                        | État                             | Commentaires                                                                                               |
+| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}} | {{Spec2('HTML WHATWG')}} | Pas de modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}                        |
+| {{SpecName('HTML5.1', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}         | {{Spec2('HTML5.1')}}     | Dérivée de {{SpecName('HTML WHATWG')}}, pas de changement depuis {{SpecName('HTML5 W3C')}} |
+| {{SpecName('HTML5 W3C', "dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes", "data-*")}}     | {{Spec2('HTML5 W3C')}}     | Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.                                      |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.global_attributes.data_attributes")}}</p>
+{{Compat("html.global_attributes.data_attributes")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
- <li>La propriété {{domxref("HTMLElement.dataset")}} qui permet d'accéder à ces valeurs et de les modifier.</li>
-</ul>
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
+- La propriété {{domxref("HTMLElement.dataset")}} qui permet d'accéder à ces valeurs et de les modifier.
diff --git a/files/fr/web/html/global_attributes/dir/index.md b/files/fr/web/html/global_attributes/dir/index.md
index d3a9537cef..837f86e7da 100644
--- a/files/fr/web/html/global_attributes/dir/index.md
+++ b/files/fr/web/html/global_attributes/dir/index.md
@@ -9,78 +9,39 @@ tags:
 translation_of: Web/HTML/Global_attributes/dir
 original_slug: Web/HTML/Attributs_universels/dir
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>dir</strong></code> est un attribut à valeur contrainte qui indique la direction du texte contenu dans l'élément.</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`dir`** est un attribut à valeur contrainte qui indique la direction du texte contenu dans l'élément.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/attribute-dir.html","tabbed-standard")}}
 
-<p>Les valeurs autorisées pour cet attribut sont :</p>
+Les valeurs autorisées pour cet attribut sont :
 
-<ul>
- <li><code>ltr</code> : qui signifie <em>left to right </em>(gauche à droite), utilisé pour les langages écrits de gauche à droite (comme le français ou l'anglais par exemple)</li>
- <li><code>rtl</code> : qui signifie <em>right to left</em> (droite à gauche), utilisé pour les langages écrits de droite à gauche (comme l'arabe par exemple)</li>
- <li><code>auto</code> : qui délègue la décision à l'agent utilisateur. L'algorithme utilisé est relativement simple : le contenu textuel est analysé et lorsque le premier caractère possédant une direction « forte » est rencontré, cette direction est prise pour l'ensemble de l'élément.</li>
-</ul>
+- `ltr` : qui signifie _left to right_ (gauche à droite), utilisé pour les langages écrits de gauche à droite (comme le français ou l'anglais par exemple)
+- `rtl` : qui signifie _right to left_ (droite à gauche), utilisé pour les langages écrits de droite à gauche (comme l'arabe par exemple)
+- `auto` : qui délègue la décision à l'agent utilisateur. L'algorithme utilisé est relativement simple : le contenu textuel est analysé et lorsque le premier caractère possédant une direction « forte » est rencontré, cette direction est prise pour l'ensemble de l'élément.
 
-<div class="note">
-<p><strong>Note :</strong> Cet attribut est obligatoire pour l'élément {{HTMLElement("bdo")}}, pour lequel l'attribut a une sémantique différente.</p>
+> **Note :** Cet attribut est obligatoire pour l'élément {{HTMLElement("bdo")}}, pour lequel l'attribut a une sémantique différente.
+>
+> - La valeur de l'attribut n'est pas héritée par l'élément {{HTMLElement("bdi")}}. S'il n'est pas défini, la valeur par défaut sera `auto`.
+> - Cet attribut peut être surchargé par les propriétés CSS {{cssxref("direction")}} et {{cssxref("unicode-bidi")}}, (qui sont appliquées si une page CSS est active et que l'élément courant prend en charge ces propriétés).
+> - La direction du texte est généralement liée à la sémantique du contenu et non à sa présentation. Il est donc recommandé d'utiliser cet attribut plutôt que des propriétés CSS quand la direction n'est pas lié à une quelconque mise en forme. Ainsi, le texte sera affiché correctement, y compris si le navigateur ne supporte pas ces propriétés CSS ou si CSS est désactivé.
+> - La valeur `auto` doit être utilisée pour des données dont la direction est inconnue (comme par exemple des données provenant d'une saisie utilisateur).
 
-<ul>
- <li>
-  <p>La valeur de l'attribut n'est pas héritée par l'élément {{HTMLElement("bdi")}}. S'il n'est pas défini, la valeur par défaut sera <code>auto</code>.</p>
- </li>
- <li>
-  <p>Cet attribut peut être surchargé par les propriétés CSS {{cssxref("direction")}} et {{cssxref("unicode-bidi")}}, (qui sont appliquées si une page CSS est active et que l'élément courant prend en charge ces propriétés).</p>
- </li>
- <li>
-  <p>La direction du texte est généralement liée à la sémantique du contenu et non à sa présentation. Il est donc recommandé d'utiliser cet attribut plutôt que des propriétés CSS quand la direction n'est pas lié à une quelconque mise en forme. Ainsi, le texte sera affiché correctement, y compris si le navigateur ne supporte pas ces propriétés CSS ou si CSS est désactivé.</p>
- </li>
- <li>
-  <p>La valeur <code>auto</code> doit être utilisée pour des données dont la direction est inconnue (comme par exemple des données provenant d'une saisie utilisateur).</p>
- </li>
-</ul>
-</div>
+## Spécifications
 
-<h2 id="Spécifications">Spécifications</h2>
+| Spécification                                                                        | État                             | Commentaires                                                                                                                                                                                                                                                                                                                                                                                                        |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}} | {{Spec2('HTML WHATWG')}} | Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}                                                                                                                                                                                                                                                                                                                                    |
+| {{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}     | {{Spec2('HTML5.1')}}     | Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}                                                                                                                                                                                                                                                                                                               |
+| {{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}} | {{Spec2('HTML5 W3C')}}     | Dérivée de {{SpecName('HTML WHATWG')}}, à partir de {{SpecName('HTML4.01')}} la valeur `auto` a été ajoutée et l'attribut est un attribut global à part entière.                                                                                                                                                                                                                                   |
+| {{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}             | {{Spec2('HTML4.01')}}     | Attribut pris en charge pour tous les éléments à l'exception {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}. |
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "dom.html#the-dir-attribute", "dir")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "dom.html#the-dir-attribute", "dir")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "dom.html#the-dir-attribute", "dir")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}, à partir de {{SpecName('HTML4.01')}} la valeur <code>auto</code> a été ajoutée et l'attribut est un attribut global à part entière.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', "dirlang.html#h-8.2", "dir")}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Attribut pris en charge pour tous les éléments à l'exception {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.</td>
-  </tr>
- </tbody>
-</table>
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("html.global_attributes.dir")}}
 
-<p>{{Compat("html.global_attributes.dir")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
- <li>La propriété {{domxref("HTMLElement.dir")}} qui reflète cet attribut</li>
-</ul>
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
+- La propriété {{domxref("HTMLElement.dir")}} qui reflète cet attribut
diff --git a/files/fr/web/html/global_attributes/draggable/index.md b/files/fr/web/html/global_attributes/draggable/index.md
index 6e85028b88..da6e7cb41a 100644
--- a/files/fr/web/html/global_attributes/draggable/index.md
+++ b/files/fr/web/html/global_attributes/draggable/index.md
@@ -9,62 +9,41 @@ tags:
 translation_of: Web/HTML/Global_attributes/draggable
 original_slug: Web/HTML/Attributs_universels/draggable
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>draggable</strong></code> est un attribut à valeur contrainte qui indique si l'élément peut être déplacé avec la souris dans un geste de glisser-déposer lorsqu'on utilise l'API <em><a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">Drag &amp; Drop</a></em> ou les fonctionnalités natives du navigateur. Les valeurs autorisées pour cet attribut sont les suivantes :</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`draggable`** est un attribut à valeur contrainte qui indique si l'élément peut être déplacé avec la souris dans un geste de glisser-déposer lorsqu'on utilise l'API _[Drag & Drop](/fr/docs/Web/API/API_HTML_Drag_and_Drop)_ ou les fonctionnalités natives du navigateur. Les valeurs autorisées pour cet attribut sont les suivantes :
 
-<ul>
- <li><code>true</code> : qui indique que l'élément peut être déplacé à la souris</li>
- <li><code>false</code> : qui indique que l'élément ne peut pas être déplacé à la souris</li>
-</ul>
+- `true` : qui indique que l'élément peut être déplacé à la souris
+- `false` : qui indique que l'élément ne peut pas être déplacé à la souris
 
-<p>Si l'attribut n'est pas défini, la valeur par défaut sera <code>auto</code> : le comportement de l'élément sera celui spécifié par défaut par le navigateur.</p>
+Si l'attribut n'est pas défini, la valeur par défaut sera `auto` : le comportement de l'élément sera celui spécifié par défaut par le navigateur.
 
-<p>Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser une valeur explicite <code>true</code> ou <code>false</code>. La notation raccourcie <code>&lt;img draggable&gt;</code>(utilisant uniquement le nom de l'attribut) ne fonctionnera pas :</p>
+Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser une valeur explicite `true` ou `false`. La notation raccourcie `<img draggable>`(utilisant uniquement le nom de l'attribut) ne fonctionnera pas :
 
-<pre class="example-bad brush: html">&lt;label draggable&gt;Label exemple&lt;/label&gt;</pre>
+```html example-bad
+<label draggable>Label exemple</label>
+```
 
-<p>En revanche, on pourra correctement utiliser :</p>
+En revanche, on pourra correctement utiliser :
 
-<pre class="example-good brush: html">&lt;label draggable="true"&gt;Label exemple&lt;/label&gt;</pre>
+```html example-good
+<label draggable="true">Label exemple</label>
+```
 
-<p>Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré <a href="/fr/docs/Glisser_et_déposer/Opérations_de_glissement">dans cet exemple</a>.</p>
+Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré [dans cet exemple](/fr/docs/Glisser_et_déposer/Opérations_de_glissement).
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td>Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}</td>
-   <td>{{Spec2("HTML5.2")}}</td>
-   <td>Aucune modification</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}</td>
-   <td>{{Spec2("HTML5.1")}}</td>
-   <td>Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                    | État                             | Commentaires                                                                          |
+| ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------- |
+| {{SpecName("HTML WHATWG", "interaction.html#the-draggable-attribute", "draggable")}} | {{Spec2("HTML WHATWG")}} | Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}} |
+| {{SpecName("HTML5.2", "interaction.html#the-draggable-attribute", "draggable")}}     | {{Spec2("HTML5.2")}}     | Aucune modification                                                                   |
+| {{SpecName("HTML5.1", "editing.html#the-draggable-attribute", "draggable")}}             | {{Spec2("HTML5.1")}}     | Dérivation de {{SpecName('HTML WHATWG')}}, définition initiale.              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.global_attributes.draggable")}}</p>
+{{Compat("html.global_attributes.draggable")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
-</ul>
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
diff --git a/files/fr/web/html/global_attributes/enterkeyhint/index.md b/files/fr/web/html/global_attributes/enterkeyhint/index.md
index 6179687a19..364247dab8 100644
--- a/files/fr/web/html/global_attributes/enterkeyhint/index.md
+++ b/files/fr/web/html/global_attributes/enterkeyhint/index.md
@@ -1,96 +1,53 @@
 ---
 title: enterkeyhint
 slug: Web/HTML/Global_attributes/enterkeyhint
+translation_of: Web/HTML/Global_attributes/enterkeyhint
 browser-compat: html.global_attributes.enterkeyhint
-translation_of: 'Web/HTML/Global_attributes/enterkeyhint'
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p><a href="/fr/docs/Web/HTML/Global_attributes">L'attribut universel</a> <strong><code>enterkeyhint</code></strong> 
-est un attribut à valeur contrainte définissant le libellé d'action (ou l'icône) à présenter pour la touche entrée sur le clavier virtuel.</p>
+[L'attribut universel](/fr/docs/Web/HTML/Global_attributes) **`enterkeyhint`**
+est un attribut à valeur contrainte définissant le libellé d'action (ou l'icône) à présenter pour la touche entrée sur le clavier virtuel.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/attribute-enterkeyhint.html","tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/attribute-enterkeyhint.html","tabbed-shorter")}}
 
-<h2 id="description">Description</h2>
-<p>Les <a href="/fr/docs/Learn/Forms">contrôles de formulaires</a> (tels que les éléments <a href="/fr/docs/Web/HTML/Element/textarea"><code>&lt;textarea&gt;</code></a>
-ou <a href="/fr/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a>) ou les éléments utilisant l'attribut
-<a href="/fr/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a> peuvent spécifier un attribut
-<a href="/fr/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a> pour contrôler le type de clavier virtuel qui sera utilisé. Pour améliorer davantage l'expérience du visiteur, la touche à entrer peut être personnalisée spécifiquement en fournissant un attribut <code>enterkeyhint</code> indiquant comment la clé de saisie doit être libellée (ou quelle icône doit être affichée). La clé de saisie représente généralement ce que la personne va devoir faire par la suite. Les actions consistent généralement en l'envoi d'un texte, l'insertion d'une nouvelle ligne, le lancement d'une recherche, etc.</p>
+## Description
 
-<p>Si aucun attribut <code>enterkeyhint</code> n'est fourni, l'agent utilisateur pourrait utiliser une information contextuelle à partir des attributs
-<a href="/fr/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a>,
-<a href="/fr/docs/Web/HTML/Element/input#input_types"><code>type</code></a>,
-ou <a href="/fr/docs/Web/HTML/Element/input#htmlattrdefpattern"><code>pattern</code></a> pour afficher une clé de saisie (ou une icône) adaptée.</p>
+Les [contrôles de formulaires](/fr/docs/Learn/Forms) (tels que les éléments [`<textarea>`](/fr/docs/Web/HTML/Element/textarea)
+ou [`<input>`](/fr/docs/Web/HTML/Element/input)) ou les éléments utilisant l'attribut
+[`contenteditable`](/fr/docs/Web/HTML/Global_attributes/contenteditable) peuvent spécifier un attribut
+[`inputmode`](/fr/docs/Web/HTML/Global_attributes/inputmode) pour contrôler le type de clavier virtuel qui sera utilisé. Pour améliorer davantage l'expérience du visiteur, la touche à entrer peut être personnalisée spécifiquement en fournissant un attribut `enterkeyhint` indiquant comment la clé de saisie doit être libellée (ou quelle icône doit être affichée). La clé de saisie représente généralement ce que la personne va devoir faire par la suite. Les actions consistent généralement en l'envoi d'un texte, l'insertion d'une nouvelle ligne, le lancement d'une recherche, etc.
 
-<h3 id="values">Valeurs</h3>
+Si aucun attribut `enterkeyhint` n'est fourni, l'agent utilisateur pourrait utiliser une information contextuelle à partir des attributs
+[`inputmode`](/fr/docs/Web/HTML/Global_attributes/inputmode),
+[`type`](/fr/docs/Web/HTML/Element/input#input_types),
+ou [`pattern`](/fr/docs/Web/HTML/Element/input#htmlattrdefpattern) pour afficher une clé de saisie (ou une icône) adaptée.
 
-<p>L'attribut <code>enterkeyhint</code> est un attribut à valeur contrainte et accepte uniquement les valeurs suivantes&nbsp;:</p>
+### Valeurs
 
-<table class="standard-table">
-  <colgroup>
-    <col style="width: 30%;">
-    <col style="width: 50%;">
-    <col style="width: 20%;">
-   </colgroup>
-  <thead>
-   <tr>
-    <th>Valeur</th>
-    <th>Description</th>
-    <th>Libellé de l'exemple<br><small> (dépend de l'agent utilisateur et de la langue)</small></th>
-   </tr>
-  </thead>
-  <tbody>
-   <tr>
-    <td><code>enterkeyhint="enter"</code></td>
-    <td>Généralement utilisé pour insérer une nouvelle ligne de texte.</td>
-    <td><kbd>↵</kbd></td>
-   </tr>
-   <tr>
-    <td><code>enterkeyhint="done"</code></td>
-    <td>Signifie généralement qu'il n'y a rien de plus à saisir et que la méthode de saisie de l'éditeur (IME) est fermée.</td>
-    <td><kbd>Done</kbd></td>
-   </tr>
-   <tr>
-    <td><code>enterkeyhint="go"</code></td>
-    <td>Généralement utilisé pour envoyer le visiteur à la cible correspondant au texte saisi.</td>
-    <td><kbd>Open</kbd></td>
-   </tr>
-   <tr>
-    <td><code>enterkeyhint="next"</code></td>
-    <td>Cela envoie généralement la personne visitant le site vers le prochain champ qui accepte une saisie de texte.</td>
-    <td><kbd>Next</kbd></td>
-   </tr>
-   <tr>
-    <td><code>enterkeyhint="previous"</code></td>
-    <td>Cela envoie généralement la personne visitant le site vers le champ précédent acceptant une saisie de texte.</td>
-    <td><kbd>Prev</kbd></td>
-   </tr>
-   <tr>
-    <td><code>enterkeyhint="search"</code></td>
-    <td>Cela envoie généralement la personne visitant le site aux résultats de la recherche pour le texte qui a été saisi.</td>
-    <td><kbd>Search</kbd></td>
-   </tr>
-   <tr>
-    <td><code>enterkeyhint="send"</code></td>
-    <td>Cela envoie généralement le texte sur une cible donnée.</td>
-    <td><kbd>Send</kbd></td>
-   </tr>
-  </tbody>
-</table>
+L'attribut `enterkeyhint` est un attribut à valeur contrainte et accepte uniquement les valeurs suivantes :
 
-<h2 id="specifications">Spécifications</h2>
+| Valeur                    | Description                                                                                                        | Libellé de l'exemple (dépend de l'agent utilisateur et de la langue) |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------- |
+| `enterkeyhint="enter"`    | Généralement utilisé pour insérer une nouvelle ligne de texte.                                                     | <kbd>↵</kbd>                                                         |
+| `enterkeyhint="done"`     | Signifie généralement qu'il n'y a rien de plus à saisir et que la méthode de saisie de l'éditeur (IME) est fermée. | <kbd>Done</kbd>                                                      |
+| `enterkeyhint="go"`       | Généralement utilisé pour envoyer le visiteur à la cible correspondant au texte saisi.                             | <kbd>Open</kbd>                                                      |
+| `enterkeyhint="next"`     | Cela envoie généralement la personne visitant le site vers le prochain champ qui accepte une saisie de texte.      | <kbd>Next</kbd>                                                      |
+| `enterkeyhint="previous"` | Cela envoie généralement la personne visitant le site vers le champ précédent acceptant une saisie de texte.       | <kbd>Prev</kbd>                                                      |
+| `enterkeyhint="search"`   | Cela envoie généralement la personne visitant le site aux résultats de la recherche pour le texte qui a été saisi. | <kbd>Search</kbd>                                                    |
+| `enterkeyhint="send"`     | Cela envoie généralement le texte sur une cible donnée.                                                            | <kbd>Send</kbd>                                                      |
 
-<p>{{Specifications}}</p>
+## Spécifications
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+{{Specifications}}
 
-<p>{{Compat}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="see_also">Voir aussi</h2>
+{{Compat}}
 
-<ul>
-  <li>La propriété <a href="/fr/docs/Web/API/HTMLElement/enterkeyhint"><code>HTMLElement.enterkeyhint</code></a> reflétant cet attribut</li>
-  <li>L'attribut universel <a href="/fr/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a></li>
-  <li>L'attribut universel <a href="/fr/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code></a></li>
-  <li>Les attributs <a href="/fr/docs/Web/HTML/Element/input#input_types"><code>type</code></a> et <a href="/fr/docs/Web/HTML/Element/input#htmlattrdefpattern"><code>pattern</code></a> sur les éléments <a href="/fr/docs/Web/HTML/Element/input"><code>&lt;input&gt;</code></a></li>
-</ul>
+## Voir aussi
+
+- La propriété [`HTMLElement.enterkeyhint`](/fr/docs/Web/API/HTMLElement/enterkeyhint) reflétant cet attribut
+- L'attribut universel [`inputmode`](/fr/docs/Web/HTML/Global_attributes/inputmode)
+- L'attribut universel [`contenteditable`](/fr/docs/Web/HTML/Global_attributes/contenteditable)
+- Les attributs [`type`](/fr/docs/Web/HTML/Element/input#input_types) et [`pattern`](/fr/docs/Web/HTML/Element/input#htmlattrdefpattern) sur les éléments [`<input>`](/fr/docs/Web/HTML/Element/input)
diff --git a/files/fr/web/html/global_attributes/hidden/index.md b/files/fr/web/html/global_attributes/hidden/index.md
index 78965d4351..ab06f8c69f 100644
--- a/files/fr/web/html/global_attributes/hidden/index.md
+++ b/files/fr/web/html/global_attributes/hidden/index.md
@@ -9,58 +9,33 @@ tags:
 translation_of: Web/HTML/Global_attributes/hidden
 original_slug: Web/HTML/Attributs_universels/hidden
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>hidden</strong></code> est un attribut booléen qui indique s'il n'est pas encore ou s'il n'est plus pertinent d'afficher l'élément courant. Cet attribut peut, par exemple, être utilisé afin de masquer des éléments tant que l'utilisateur ne s'est pas connecté. Le navigateur n'affichera pas les éléments masqués via cet attribut.</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`hidden`** est un attribut booléen qui indique s'il n'est pas encore ou s'il n'est plus pertinent d'afficher l'élément courant. Cet attribut peut, par exemple, être utilisé afin de masquer des éléments tant que l'utilisateur ne s'est pas connecté. Le navigateur n'affichera pas les éléments masqués via cet attribut.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/attribute-hidden.html","tabbed-shorter")}}
 
-<p>Cet attribut ne doit pas être utilisé pour masquer du contenu qui devrait pouvoir être vu sous une autre présentation. Si un contenu est marqué comme masqué, il sera masqué pour l'ensemble des présentations, y compris pour les lecteurs d'écran et autres outils d'assistance.</p>
+Cet attribut ne doit pas être utilisé pour masquer du contenu qui devrait pouvoir être vu sous une autre présentation. Si un contenu est marqué comme masqué, il sera masqué pour l'ensemble des présentations, y compris pour les lecteurs d'écran et autres outils d'assistance.
 
-<p>Les éléments cachés avec <code>hidden</code> ne devraient pas avoir de lien qui pointent vers eux depuis des éléments visibles. De plus, les éléments fils de l'élément caché sont toujours actifs : cela signifie qu'ils peuvent être utilisés par les scripts et que les formulaires peuvent envoyer des données. Dans certains autres contextes, il est possible d'avoir des relations avec les éléments cachés via <code>hidden</code>.</p>
+Les éléments cachés avec `hidden` ne devraient pas avoir de lien qui pointent vers eux depuis des éléments visibles. De plus, les éléments fils de l'élément caché sont toujours actifs : cela signifie qu'ils peuvent être utilisés par les scripts et que les formulaires peuvent envoyer des données. Dans certains autres contextes, il est possible d'avoir des relations avec les éléments cachés via `hidden`.
 
-<p>Par exemple, on peut utiliser l'attribut ARIA <code>aria-describedby</code> pour faire référence à une description qui serait cachée (si cette dernière n'est pas pertinente seule). De même un élément {{HTMLElement("canvas")}} caché peut être utilisé comme un <em>buffer</em> hors champ par moteur graphique scripté.</p>
+Par exemple, on peut utiliser l'attribut ARIA `aria-describedby` pour faire référence à une description qui serait cachée (si cette dernière n'est pas pertinente seule). De même un élément {{HTMLElement("canvas")}} caché peut être utilisé comme un _buffer_ hors champ par moteur graphique scripté.
 
-<div class="note">
-<p><strong>Note :</strong> Cet attribut sera surchargé par la propriété CSS {{cssxref("display")}}. Ainsi, un élément dont le style a <code>display: flex</code> sera affiché à l'écran, même si l'attribut <code>hidden</code> est présent.</p>
-</div>
+> **Note :** Cet attribut sera surchargé par la propriété CSS {{cssxref("display")}}. Ainsi, un élément dont le style a `display: flex` sera affiché à l'écran, même si l'attribut `hidden` est présent.
 
+## Spécifications
 
+| Spécification                                                                                            | État                             | Commentaires                                                                        |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}} | {{Spec2('HTML WHATWG')}} | Aucune modification depuis {{SpecName('HTML5.1')}}                         |
+| {{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}     | {{Spec2('HTML WHATWG')}} | Définit le rendu par défaut suggéré en CSS lorsque l'attribut `hidden` est utilisé. |
+| {{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}             | {{Spec2('HTML5.1')}}     | Dérivée de {{SpecName('HTML WHATWG')}}. La définition initiale.            |
 
-<h2 id="Spécifications">Spécifications</h2>
+## Compatibilité des navigateurs
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "interaction.html#the-hidden-attribute", "hidden")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "rendering.html#hiddenCSS", "Hidden elements")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Définit le rendu par défaut suggéré en CSS lorsque l'attribut <code>hidden</code> est utilisé.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "editing.html#the-hidden-attribute", "hidden")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}. La définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+{{Compat("html.global_attributes.hidden")}}
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Voir aussi
 
-<p>{{Compat("html.global_attributes.hidden")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
- <li><a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute">Utiliser l'attribut <code>aria-hidden</code></a></li>
-</ul>
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
+- [Utiliser l'attribut `aria-hidden`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute)
diff --git a/files/fr/web/html/global_attributes/id/index.md b/files/fr/web/html/global_attributes/id/index.md
index efaedba85f..6452b685b5 100644
--- a/files/fr/web/html/global_attributes/id/index.md
+++ b/files/fr/web/html/global_attributes/id/index.md
@@ -9,61 +9,32 @@ tags:
 translation_of: Web/HTML/Global_attributes/id
 original_slug: Web/HTML/Attributs_universels/id
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>id</strong></code> définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, <a href="/fr/docs/Web/HTTP/Basics_of_HTTP/Identifier_des_ressources_sur_le_Web#Fragment">avec un fragment</a> et qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`id`** définit un identifiant qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, [avec un fragment](/fr/docs/Web/HTTP/Basics_of_HTTP/Identifier_des_ressources_sur_le_Web#Fragment) et qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/attribute-id.html","tabbed-shorter")}}
 
-<div class="warning">
-<p><strong>Attention :</strong> La valeur de cet attribut est une chaîne de caractère « opaque ». Cela signifie que cet attribut ne doit pas être utilisé pour transporter de l'information. Les informations sur la signification de l'élément dans le document ne doivent pas être portées par la valeur de cet attribut.</p>
-</div>
+> **Attention :** La valeur de cet attribut est une chaîne de caractère « opaque ». Cela signifie que cet attribut ne doit pas être utilisé pour transporter de l'information. Les informations sur la signification de l'élément dans le document ne doivent pas être portées par la valeur de cet attribut.
 
-<p>La valeur de cet attribut ne doit pas contenir de blancs (espaces, tabulation, etc.). Les navigateurs interprèteront les identifiants avec des espaces comme si l'espace faisait partie de l'identifiant. Ce comportement est différent de celui de l'attribut {{htmlattrxref("class")}} qui permet d'avoir des valeurs séparées par des espaces. Les éléments ne peuvent avoir qu'un seul identifiant défini via l'attribut <code><strong>id</strong></code>.</p>
+La valeur de cet attribut ne doit pas contenir de blancs (espaces, tabulation, etc.). Les navigateurs interprèteront les identifiants avec des espaces comme si l'espace faisait partie de l'identifiant. Ce comportement est différent de celui de l'attribut {{htmlattrxref("class")}} qui permet d'avoir des valeurs séparées par des espaces. Les éléments ne peuvent avoir qu'un seul identifiant défini via l'attribut **`id`**.
 
-<div class="note">
-<p><strong>Note :</strong> L'utilisation de caractères non-ASCII ou qui ne sont pas des chiffres latins ou<code>'_'</code>, <code>'-'</code> et <code>'.'</code> peut entraîner des problèmes de compatibilité car ils n'étaient pas autorisé avec HTML 4. Bien que cette restriction n'existe plus avec HTML 5, un identifiant devrait toujours commencer par une lettre pour une meilleure compatibilité.</p>
-</div>
+> **Note :** L'utilisation de caractères non-ASCII ou qui ne sont pas des chiffres latins ou`'_'`, `'-'` et `'.'` peut entraîner des problèmes de compatibilité car ils n'étaient pas autorisé avec HTML 4. Bien que cette restriction n'existe plus avec HTML 5, un identifiant devrait toujours commencer par une lettre pour une meilleure compatibilité.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement depuis {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}, les caractères <code>'_'</code>, <code>'-'</code> et <code>'.'</code> sont désormais acceptés s'ils ne sont pas utilisés au début de l'identifiant. Cet attribut devient un attribut global à part entière.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Pris en charge par tous les éléments sauf {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                        | État                             | Commentaires                                                                                                                                                                                                                                                                               |
+| ------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName('HTML WHATWG', "dom.html#the-id-attribute", "id")}} | {{Spec2('HTML WHATWG')}} | Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}                                                                                                                                                                                                           |
+| {{SpecName('HTML5.1', "dom.html#the-id-attribute", "id")}}         | {{Spec2('HTML5.1')}}     | Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement depuis {{SpecName('HTML5 W3C')}}                                                                                                                                                                                  |
+| {{SpecName('HTML5 W3C', "dom.html#the-id-attribute", "id")}}     | {{Spec2('HTML5 W3C')}}     | Dérivée de {{SpecName('HTML WHATWG')}}, les caractères `'_'`, `'-'` et `'.'` sont désormais acceptés s'ils ne sont pas utilisés au début de l'identifiant. Cet attribut devient un attribut global à part entière.                                                                |
+| {{SpecName('HTML4.01', 'struct/global.html#adef-id', 'id')}}     | {{Spec2('HTML4.01')}}     | Pris en charge par tous les éléments sauf {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.global_attributes.id")}}</p>
+{{Compat("html.global_attributes.id")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>{{domxref("Element.id")}} qui reflète cet attribut</li>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
-</ul>
+- {{domxref("Element.id")}} qui reflète cet attribut
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
diff --git a/files/fr/web/html/global_attributes/index.md b/files/fr/web/html/global_attributes/index.md
index 29656a207e..bc41e64456 100644
--- a/files/fr/web/html/global_attributes/index.md
+++ b/files/fr/web/html/global_attributes/index.md
@@ -10,186 +10,135 @@ tags:
 translation_of: Web/HTML/Global_attributes
 original_slug: Web/HTML/Attributs_universels
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
-
-<p>Les <strong>attributs universels</strong> sont des attributs communs à l'ensemble des éléments HTML. Ces attributs peuvent donc être ajoutés sur tous les éléments (dans certains cas, les attributs n'auront aucun effet).</p>
-
-<p>Les attributs universels peuvent être définis sur tous <a href="/fr/docs/Web/HTML/Element">les éléments HTML</a>, <em>y compris pour les éléments non définis dans le standard</em>. Autrement dit, les éléments non-standards doivent pouvoir accepter ces attributs. Cela permettra au navigateur de les gérer selon certains des aspects de la spécification. Par exemple, pour un navigateur conforme, un élément <code>&lt;toto hidden&gt;...&lt;/toto&gt;</code> sera masqué bien que <code>&lt;toto&gt;</code> ne soit pas un élément HTML valide.</p>
-
-<p>En plus des attributs universels HTML, il existe également les attributs universels suivants :</p>
-
-<ul>
- <li>{{htmlattrdef("xml:lang")}} et {{htmlattrdef("xml:base")}} : ces attributs proviennent des spécifications XHTML. Ils sont désormais dépréciés mais conservés pour des raisons de compatibilité.</li>
- <li>Les nombreux attributs <a href="/fr/docs/Accessibilité/ARIA"><code>aria-*</code></a> utilisés afin d'améliorer l'accessibilité.</li>
- <li>Les attributs utilisés pour <a href="/fr/docs/Web/Guide/DOM/Events/Event_handlers">les gestionnaires d'événements</a> déclarés directement sur les éléments : <code><strong>onabort</strong></code>, <code><strong>onautocomplete</strong></code>, <code><strong>onautocompleteerror</strong></code>, <code><strong>onblur</strong></code>, <code><strong>oncancel</strong></code>, <code><strong>oncanplay</strong></code>, <code><strong>oncanplaythrough</strong></code>, <code><strong>onchange</strong></code>, <code><strong>onclick</strong></code>, <code><strong>onclose</strong></code>, <code><strong>oncontextmenu</strong></code>, <code><strong>oncuechange</strong></code>, <code><strong>ondblclick</strong></code>, <code><strong>ondrag</strong></code>, <code><strong>ondragend</strong></code>, <code><strong>ondragenter</strong></code>, <code><strong>ondragexit</strong></code>, <code><strong>ondragleave</strong></code>, <code><strong>ondragover</strong></code>, <code><strong>ondragstart</strong></code>, <code><strong>ondrop</strong></code>, <code><strong>ondurationchange</strong></code>, <code><strong>onemptied</strong></code>, <code><strong>onended</strong></code>, <code><strong>onerror</strong></code>, <code><strong>onfocus</strong></code>, <code><strong>oninput</strong></code>, <code><strong>oninvalid</strong></code>, <code><strong>onkeydown</strong></code>, <code><strong>onkeypress</strong></code>, <code><strong>onkeyup</strong></code>, <code><strong>onload</strong></code>, <code><strong>onloadeddata</strong></code>, <code><strong>onloadedmetadata</strong></code>, <code><strong>onloadstart</strong></code>, <code><strong>onmousedown</strong></code>, <code><strong>onmouseenter</strong></code>, <code><strong>onmouseleave</strong></code>, <code><strong>onmousemove</strong></code>, <code><strong>onmouseout</strong></code>, <code><strong>onmouseover</strong></code>, <code><strong>onmouseup</strong></code>, <code><strong>onmousewheel</strong></code>, <code><strong>onpause</strong></code>, <code><strong>onplay</strong></code>, <code><strong>onplaying</strong></code>, <code><strong>onprogress</strong></code>, <code><strong>onratechange</strong></code>, <code><strong>onreset</strong></code>, <code><strong>onresize</strong></code>, <code><strong>onscroll</strong></code>, <code><strong>onseeked</strong></code>, <code><strong>onseeking</strong></code>, <code><strong>onselect</strong></code>, <code><strong>onshow</strong></code>, <code><strong>onsort</strong></code>, <code><strong>onstalled</strong></code>, <code><strong>onsubmit</strong></code>, <code><strong>onsuspend</strong></code>, <code><strong>ontimeupdate</strong></code>, <code><strong>ontoggle</strong></code>, <code><strong>onvolumechange</strong></code>, <code><strong>onwaiting</strong></code>.</li>
-</ul>
-
-<h2 id="Liste_des_attributs_universels">Liste des attributs universels</h2>
-
-<dl>
- <dt>{{htmlattrdef("accesskey")}}</dt>
- <dd>Cet attribut fournit une indication permettant de générer un raccourci clavier pour l'élément courant. Cet attribut se compose d'une liste de caractères séparés par des espaces. Le navigateur doit utiliser le premier caractère qui existe selon la disposition du clavier utilisée.</dd>
- <dt>{{htmlattrdef("autocapitalize")}}</dt>
- <dd>Cet attribut contrôle la façon dont le texte saisi est automatiquement converti en majuscules. Les valeurs autorisées pour cet attribut sont :
- <ul>
-  <li><code>off</code> ou <code>none</code> : il n'y pas de convertion en majuscules réalisée.</li>
-  <li><code>on</code> ou <code>sentences</code> : la première lettre de chaque phrase est écrite en majuscule par défaut. Les autres lettres sont en minuscules par défaut.</li>
-  <li><code>words</code> : la première lettre de chaque mot est écrite en majuscule par défaut, les autres lettres sont en minuscules par défaut.</li>
-  <li><code>characters</code> : toutes les lettres sont écrites en majuscules par défaut</li>
- </ul>
- </dd>
- <dt>{{htmlattrdef("class")}}</dt>
- <dd>Une liste de classes, séparées par des espaces, qui permettent de catégoriser l'élément. Les classes permettent au CSS et à JavaScript de manipuler des éléments spécifiques grâce à <a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">des sélecteurs de classe</a> (pour CSS) ou grâce à des fonctions telles que {{domxref("Document.getElementsByClassName()")}} (pour JavaScript).</dd>
- <dt>{{htmlattrdef("contenteditable")}}</dt>
- <dd>Un attribut à valeur contrainte qui indique si l'élément peut être édité par l'utilisateur. Si c'est le cas, le navigateur modifie l'interface utilisateur afin de permettre l'édition. Les valeur autorisées pour cet attribut sont :
- <ul>
-  <li><code>true</code> ou la chaîne vide : ces valeurs indiquent que l'élément doit pouvoir être édité</li>
-  <li><code>false</code> qui indique que l'élément ne doit pas pouvoir être édité.</li>
- </ul>
- </dd>
- <dt>{{htmlattrdef("contextmenu")}}{{obsolete_inline}}</dt>
- <dd>La valeur de cet attribut correspond à la valeur de l'attribut {{htmlattrxref("id","menu")}} d'un élément {{HTMLElement("menu")}} qui doit être utilisé comme menu contextuel par cet élément.</dd>
- <dt>{{htmlattrdef("data-*")}}</dt>
- <dd>Cette classe d'attribut, appelée « attributs de données personnalisés », permet d'échanger des informations dans un format propriétaire entre le HTML et le DOM afin de pouvoir les manipuler via des langage de scripts. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'ensemble des attribut définis de cette façon.</dd>
- <dt>{{htmlattrdef("dir")}}</dt>
- <dd>Un attribut à valeur contrainte qui indique la directionnalité du texte de l'élément. Les valeurs autorisées pour cet attribut sont :
- <ul>
-  <li><code>ltr</code> (l'abbréviation anglaise pour <em>Left To Right</em>) indique que le contenu est écrit de gauche à droite (comme le français par exemple)</li>
-  <li><code>rtl</code> (l'abbréviation anglaise pour <em>Right To Left</em>) indique que le contenu est écrit de droite à gauche (comme l'arabe par exemple)</li>
-  <li><code>auto</code> : c'est l'agent utilisateur qui décide. Il utilise un algortihme qui analyse les caractères du contenu de l'élément jusqu'à trouver un caractère avec une forte directionnalité qu'il applique alors à l'ensemble de l'élément.</li>
- </ul>
- </dd>
- <dt>{{htmlattrdef("draggable")}}</dt>
- <dd>Un attribut à valeur contrainte qui indique qu'un élément peut être glissé/déposé grâce à l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API <em>Drag &amp; Drop</em></a>. Les valeurs autorisées pour cet attribut sont :
- <ul>
-  <li><code>true</code> : l'élément peut être glissé/déposé</li>
-  <li><code>false</code> : l'élément ne peut pas être glissé/déposé.</li>
- </ul>
- </dd>
- <dt>{{htmlattrdef("dropzone")}} {{experimental_inline}}</dt>
- <dd>Un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément grâce à l'<a href="/fr/docs/Web/API/API_HTML_Drag_and_Drop">API <em>Drag &amp; Drop</em></a>. Les valeurs autorisées pour cet attribut sont :
- <ul>
-  <li><code>copy</code> : lorsque l'élément est déposé, une copie de l'élément est créée</li>
-  <li><code>move</code> : lorsque l'élément est déposé, il est déplacé vers ce nouvel emplacement</li>
-  <li><code>link</code> : un lien est créé vers les données qui sont déplacée.</li>
- </ul>
- </dd>
- <dt>{{htmlattrdef("exportparts")}} {{experimental_inline}}</dt>
- <dd>Utilisé pour exporter de façon transitive certaines parties d'un arbre <em>shadow</em> sur un arbre réel.</dd>
- <dt>{{htmlattrdef("hidden")}}</dt>
- <dd>Un attribut booléen dont la valeur indique que l'élément n'est pas encore, ou n'est plus <em>pertinent</em>. Cet attribut peut ainsi être utilisé pour masquer les éléments d'une page qui ne peuvent pas être utilisés tant que la procédure de connexion n'est pas terminée. Le navigateur n'affichera pas les éléments pour lesquels cet attribut est utilisé. Cet attribut ne doit pas être utilisé afin de masquer du contenu qui aurait pu être affiché de façon pertinente.</dd>
- <dt>{{htmlattrdef("id")}}</dt>
- <dd>Cet attribut définit un identifiant, unique au sein de tout le document, ,pour un élément. Il doit permettre d'identifier un élément lorsqu'on crée un lien vers lui et/ou lorsque le manipule avec des scripts ou avec CSS.</dd>
- <dt>{{htmlattrdef("inputmode")}}</dt>
- <dd>Cet attribut fournit une indication au navigateur quant au type de contenu qui sera saisi dans le champ et qui aide à déterminer la configuration du clavier virtuel qui peut être affiché pour la saisie. Ce type est principalement utilisé pour les éléments {{HTMLElement("input")}} mais peut tout à fait être utilisé sur n'importe quel élément avec le mode {{htmlattrxref("contenteditable")}}.</dd>
- <dt>{{htmlattrdef("is")}}</dt>
- <dd>Cet attribut indique qu'un élément HTML standard devrait se comporter comme un élément personnalisé natif (voir <a href="/fr/docs/Web/Web_Components/Using_custom_elements">Manipuler les custom elements</a> pour plus d'informations).</dd>
- <dt>{{htmlattrdef("itemid")}}</dt>
- <dd>L'identifiant unique, global, d'un objet. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd>
- <dt>{{htmlattrdef("itemprop")}}</dt>
- <dd>Cet attribut permet d'ajouter des propriétés à un objet. Cet attribut est une paire entre un nom et une valeur. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd>
- <dt>{{htmlattrdef("itemref")}}</dt>
- <dd>Les propriétés d'un objet qui ne sont pas les éléments descendants de l'élément courant peuvent être associée via l'attribut <code>itemscope</code> contenant une référence vers un <code>itemref</code>. <code>itemref</code> fournit une liste d'identifiants d'éléments qui correspondent aux propriétés supplémentaires définies autre part dans le document. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd>
- <dt>{{htmlattrdef("itemscope")}}</dt>
- <dd><code>itemscope</code> fonctionne généralement avec <code>itemtype</code> afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. <code>itemscope</code> crée l'objet et définit la portée de l'<code>itemtype</code> associée. <code>itemtype</code> est une URL valide construite à partir d'un vocabulaire (par exemple <a href="https://schema.org/">schema.org</a>) qui décrit les objets et leurs propriétés. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd>
- <dt>{{htmlattrdef("itemtype")}}</dt>
- <dd>Cet attribut indique l'URL du vocabulaire utilisé pour définir les propriétés d'un objet. Cet attribut est lié <a href="https://html.spec.whatwg.org/multipage/#toc-microdata">aux microdonnées</a>.</dd>
- <dt>{{htmlattrdef("lang")}}</dt>
- <dd>Cet attribut aide à définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits et pour les éléments éditables, c'est la langue dans laquelle ils devraient être écrits. Cet attribut contient une seule valeur telle que définie dans le document IETF <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Tags for Identifying Languages (BCP47)</em></a>. L'attribut <code><strong>xml:lang</strong></code> est prioritaire par rapport à cet attribut lorsqu'il s'agit de déterminer la langue d'un élément.</dd>
- <dt>{{htmlattrdef("part")}} {{experimental_inline}}</dt>
- <dd>Une liste séparée par des espaces avec les noms des parties (<em>parts</em>) de l'élément. Les noms des parties permettent au CSS de cibler et de mettre en forme certains éléments d'un arbre <em>shadow</em> via le pseudo-élément {{cssxref("::part")}}.</dd>
- <dt>{{htmlattrdef("slot")}}</dt>
- <dd>Cet attribut affecte un créneau de l'arbre du <em><a href="/fr/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a></em> pour un élément. L'élément ayant l'attribut <code>slot</code> est affecté au créneau créé par l'élément {{HTMLElement("slot")}} pour lequel l'attribut {{htmlattrxref("name", "slot")}} correspond à la valeur de l'attribut <code>slot</code>.</dd>
- <dt>{{htmlattrdef("spellcheck")}} {{experimental_inline}}</dt>
- <dd>Un attribut à valeur contrainte qui définit s'il faut détecter les fautes d'orthographe/grammaire dans le texte de l'élément. Les valeurs autorisées pour cet attribut sont :
- <ul>
-  <li><code>true</code> qui indique que, si possible, il faut vérifier les erreurs d'orthographe</li>
-  <li><code>false</code> qui indique qu'il ne faut pas vérifier les erreurs.</li>
- </ul>
- </dd>
- <dt>{{htmlattrdef("style")}}</dt>
- <dd>Cet attribut contient les déclarations <a href="/fr/docs/Web/CSS/">CSS</a> utilisées pour mettre en forme l'élément. Note : il est recommandé d'utiliser un ou plusieurs fichiers séparés, plutôt que cet attribut, pour définir les règles de mise en forme. Le rôle de l'élément {{HTMLElement("style")}} consiste à permettre une mise en forme rapide, notamment pour des tests.</dd>
- <dt>{{htmlattrdef("tabindex")}}</dt>
- <dd>Cet attribut à valeur entière indique l'ordre dans lequel l'élément participe à la navigation au clavier via la tabulation. Il peut prendre différente valeur :
- <ul>
-  <li>une valeur négative indiquera que l'élément peut recevoir le focus mais n'est pas accessible via la navigation séquentielle au clavier</li>
-  <li><code>0</code> indiquera que l'élément peut recevoir le focus et être accessible via la navigation au clavier mais l'ordre est relatif et déterminé par l'agent utilisateur</li>
-  <li>une valeur positive indiquera que l'élément peut recevoir le focus et qu'il est accessible via la navigation au clavier. La valeur utilisée indique l'ordre relatif de l'élément dans la navigation. Autrement dit, la navigation au clavier ira dans le sens croissant des éléments selon leurs valeurs respectives de <code>tabindex</code>. Si plusieurs éléments ont la même valeur, ce sera leur ordre relatif dans le document qui sera utilisé.</li>
- </ul>
- </dd>
- <dt>{{htmlattrdef("title")}}</dt>
- <dd>Cet attribut contient une représentation textuelle de l'information auquel il est lié. Une telle information est généralement, mais pas nécessairement, affichée sous la forme d'une bulle d'informations.</dd>
- <dt>{{htmlattrdef("translate")}} {{experimental_inline}}</dt>
- <dd>Un attribut à valeur contrainte qui est utilisé pour définir si les valeurs des attributs et des éléments fils de type {{domxref("Text")}} doivent être traduits lorsque la page est localisée. Les valeurs autorisées pour cet attribut sont :
- <ul>
-  <li>La chaîne vide ou <code>yes</code> qui indiquent que l'élément doit être traduit</li>
-  <li><code>no</code> qui indique que l'élément ne sera pas traduit.</li>
- </ul>
- </dd>
-</dl>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS Shadow Parts", "#exposing")}}</td>
-   <td>{{Spec2("CSS Shadow parts")}}</td>
-   <td>Ajout des attributs universels <code>part</code> et <code>exportparts</code>.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}</td>
-   <td>{{Spec2("HTML5.3")}}</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td>{{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}</td>
-   <td>{{Spec2("HTML5.2")}}</td>
-   <td>Dérivation de {{SpecName("HTML WHATWG")}}. Depuis, {{SpecName("HTML5.1")}}, les attributs <code>itemid</code>, <code>itemprop</code>, <code>itemref</code>, <code>itemscope</code> et <code>itemtype</code> ont été ajoutés.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Les attributs <code>contextmenu</code>, <code>spellcheck</code>, <code>draggable</code>, et <code>dropzone</code> ont été ajoutés depuis {{SpecName('HTML5 W3C')}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Le concept d'attribut universel est introduit et les attributs <code>dir</code>, <code>lang</code>, <code>style</code>, <code>id</code>, <code>class</code>, <code>tabindex</code>, <code>accesskey</code>, <code>title</code> sont désormais des attributs universels.<br>
-    <code>xml:lang</code> qui faisait initialement partie de XHTML est inclus dans HTML. Les attributs<br>
-    <code>hidden</code>, <code>data-*</code>, <code>contenteditable</code> et <code>translate</code> sont ajoutés.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Aucun attribut universel n'est défini. Plusieurs attributs, devenus universels par la suite, sont définis sur un sous-ensemble d'élément.<br>
-    <code>class</code> et <code>style</code> sont pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.<br>
-    <code>dir</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.<br>
-    <code>id</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}.<br>
-    <code>lang</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}.<br>
-    <code>tabindex</code> est uniquement pris en charge pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}.<br>
-    <code>accesskey</code> est uniquement pris en charge pour {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}.<br>
-    <code>title</code> est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.global_attributes")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>Les interfaces {{domxref("Element")}} et {{domxref("GlobalEventHandlers")}} qui permettent de manipuler la plupart des attributs globaux.</li>
-</ul>
+{{HTMLSidebar("Global_attributes")}}
+
+Les **attributs universels** sont des attributs communs à l'ensemble des éléments HTML. Ces attributs peuvent donc être ajoutés sur tous les éléments (dans certains cas, les attributs n'auront aucun effet).
+
+Les attributs universels peuvent être définis sur tous [les éléments HTML](/fr/docs/Web/HTML/Element), _y compris pour les éléments non définis dans le standard_. Autrement dit, les éléments non-standards doivent pouvoir accepter ces attributs. Cela permettra au navigateur de les gérer selon certains des aspects de la spécification. Par exemple, pour un navigateur conforme, un élément `<toto hidden>...</toto>` sera masqué bien que `<toto>` ne soit pas un élément HTML valide.
+
+En plus des attributs universels HTML, il existe également les attributs universels suivants :
+
+- {{htmlattrdef("xml:lang")}} et {{htmlattrdef("xml:base")}} : ces attributs proviennent des spécifications XHTML. Ils sont désormais dépréciés mais conservés pour des raisons de compatibilité.
+- Les nombreux attributs [`aria-*`](/fr/docs/Accessibilité/ARIA) utilisés afin d'améliorer l'accessibilité.
+- Les attributs utilisés pour [les gestionnaires d'événements](/fr/docs/Web/Guide/DOM/Events/Event_handlers) déclarés directement sur les éléments : **`onabort`**, **`onautocomplete`**, **`onautocompleteerror`**, **`onblur`**, **`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncontextmenu`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragexit`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onsort`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`**.
+
+## Liste des attributs universels
+
+- {{htmlattrdef("accesskey")}}
+  - : Cet attribut fournit une indication permettant de générer un raccourci clavier pour l'élément courant. Cet attribut se compose d'une liste de caractères séparés par des espaces. Le navigateur doit utiliser le premier caractère qui existe selon la disposition du clavier utilisée.
+- {{htmlattrdef("autocapitalize")}}
+
+  - : Cet attribut contrôle la façon dont le texte saisi est automatiquement converti en majuscules. Les valeurs autorisées pour cet attribut sont :
+
+    - `off` ou `none` : il n'y pas de convertion en majuscules réalisée.
+    - `on` ou `sentences` : la première lettre de chaque phrase est écrite en majuscule par défaut. Les autres lettres sont en minuscules par défaut.
+    - `words` : la première lettre de chaque mot est écrite en majuscule par défaut, les autres lettres sont en minuscules par défaut.
+    - `characters` : toutes les lettres sont écrites en majuscules par défaut
+
+- {{htmlattrdef("class")}}
+  - : Une liste de classes, séparées par des espaces, qui permettent de catégoriser l'élément. Les classes permettent au CSS et à JavaScript de manipuler des éléments spécifiques grâce à [des sélecteurs de classe](/fr/docs/Web/CSS/Sélecteurs_de_classe) (pour CSS) ou grâce à des fonctions telles que {{domxref("Document.getElementsByClassName()")}} (pour JavaScript).
+- {{htmlattrdef("contenteditable")}}
+
+  - : Un attribut à valeur contrainte qui indique si l'élément peut être édité par l'utilisateur. Si c'est le cas, le navigateur modifie l'interface utilisateur afin de permettre l'édition. Les valeur autorisées pour cet attribut sont :
+
+    - `true` ou la chaîne vide : ces valeurs indiquent que l'élément doit pouvoir être édité
+    - `false` qui indique que l'élément ne doit pas pouvoir être édité.
+
+- {{htmlattrdef("contextmenu")}}{{obsolete_inline}}
+  - : La valeur de cet attribut correspond à la valeur de l'attribut {{htmlattrxref("id","menu")}} d'un élément {{HTMLElement("menu")}} qui doit être utilisé comme menu contextuel par cet élément.
+- {{htmlattrdef("data-*")}}
+  - : Cette classe d'attribut, appelée « attributs de données personnalisés », permet d'échanger des informations dans un format propriétaire entre le HTML et le DOM afin de pouvoir les manipuler via des langage de scripts. La propriété {{domxref("HTMLElement.dataset")}} permet d'accéder à l'ensemble des attribut définis de cette façon.
+- {{htmlattrdef("dir")}}
+
+  - : Un attribut à valeur contrainte qui indique la directionnalité du texte de l'élément. Les valeurs autorisées pour cet attribut sont :
+
+    - `ltr` (l'abbréviation anglaise pour _Left To Right_) indique que le contenu est écrit de gauche à droite (comme le français par exemple)
+    - `rtl` (l'abbréviation anglaise pour _Right To Left_) indique que le contenu est écrit de droite à gauche (comme l'arabe par exemple)
+    - `auto` : c'est l'agent utilisateur qui décide. Il utilise un algortihme qui analyse les caractères du contenu de l'élément jusqu'à trouver un caractère avec une forte directionnalité qu'il applique alors à l'ensemble de l'élément.
+
+- {{htmlattrdef("draggable")}}
+
+  - : Un attribut à valeur contrainte qui indique qu'un élément peut être glissé/déposé grâce à l'[API _Drag & Drop_](/fr/docs/Web/API/API_HTML_Drag_and_Drop). Les valeurs autorisées pour cet attribut sont :
+
+    - `true` : l'élément peut être glissé/déposé
+    - `false` : l'élément ne peut pas être glissé/déposé.
+
+- {{htmlattrdef("dropzone")}} {{experimental_inline}}
+
+  - : Un attribut à valeur contrainte qui indique le type de contenu qui peut être déposé sur un élément grâce à l'[API _Drag & Drop_](/fr/docs/Web/API/API_HTML_Drag_and_Drop). Les valeurs autorisées pour cet attribut sont :
+
+    - `copy` : lorsque l'élément est déposé, une copie de l'élément est créée
+    - `move` : lorsque l'élément est déposé, il est déplacé vers ce nouvel emplacement
+    - `link` : un lien est créé vers les données qui sont déplacée.
+
+- {{htmlattrdef("exportparts")}} {{experimental_inline}}
+  - : Utilisé pour exporter de façon transitive certaines parties d'un arbre _shadow_ sur un arbre réel.
+- {{htmlattrdef("hidden")}}
+  - : Un attribut booléen dont la valeur indique que l'élément n'est pas encore, ou n'est plus _pertinent_. Cet attribut peut ainsi être utilisé pour masquer les éléments d'une page qui ne peuvent pas être utilisés tant que la procédure de connexion n'est pas terminée. Le navigateur n'affichera pas les éléments pour lesquels cet attribut est utilisé. Cet attribut ne doit pas être utilisé afin de masquer du contenu qui aurait pu être affiché de façon pertinente.
+- {{htmlattrdef("id")}}
+  - : Cet attribut définit un identifiant, unique au sein de tout le document, ,pour un élément. Il doit permettre d'identifier un élément lorsqu'on crée un lien vers lui et/ou lorsque le manipule avec des scripts ou avec CSS.
+- {{htmlattrdef("inputmode")}}
+  - : Cet attribut fournit une indication au navigateur quant au type de contenu qui sera saisi dans le champ et qui aide à déterminer la configuration du clavier virtuel qui peut être affiché pour la saisie. Ce type est principalement utilisé pour les éléments {{HTMLElement("input")}} mais peut tout à fait être utilisé sur n'importe quel élément avec le mode {{htmlattrxref("contenteditable")}}.
+- {{htmlattrdef("is")}}
+  - : Cet attribut indique qu'un élément HTML standard devrait se comporter comme un élément personnalisé natif (voir [Manipuler les custom elements](/fr/docs/Web/Web_Components/Using_custom_elements) pour plus d'informations).
+- {{htmlattrdef("itemid")}}
+  - : L'identifiant unique, global, d'un objet. Cet attribut est lié [aux microdonnées](https://html.spec.whatwg.org/multipage/#toc-microdata).
+- {{htmlattrdef("itemprop")}}
+  - : Cet attribut permet d'ajouter des propriétés à un objet. Cet attribut est une paire entre un nom et une valeur. Cet attribut est lié [aux microdonnées](https://html.spec.whatwg.org/multipage/#toc-microdata).
+- {{htmlattrdef("itemref")}}
+  - : Les propriétés d'un objet qui ne sont pas les éléments descendants de l'élément courant peuvent être associée via l'attribut `itemscope` contenant une référence vers un `itemref`. `itemref` fournit une liste d'identifiants d'éléments qui correspondent aux propriétés supplémentaires définies autre part dans le document. Cet attribut est lié [aux microdonnées](https://html.spec.whatwg.org/multipage/#toc-microdata).
+- {{htmlattrdef("itemscope")}}
+  - : `itemscope` fonctionne généralement avec `itemtype` afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. `itemscope` crée l'objet et définit la portée de l'`itemtype` associée. `itemtype` est une URL valide construite à partir d'un vocabulaire (par exemple [schema.org](https://schema.org/)) qui décrit les objets et leurs propriétés. Cet attribut est lié [aux microdonnées](https://html.spec.whatwg.org/multipage/#toc-microdata).
+- {{htmlattrdef("itemtype")}}
+  - : Cet attribut indique l'URL du vocabulaire utilisé pour définir les propriétés d'un objet. Cet attribut est lié [aux microdonnées](https://html.spec.whatwg.org/multipage/#toc-microdata).
+- {{htmlattrdef("lang")}}
+  - : Cet attribut aide à définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits et pour les éléments éditables, c'est la langue dans laquelle ils devraient être écrits. Cet attribut contient une seule valeur telle que définie dans le document IETF [_Tags for Identifying Languages (BCP47)_](https://www.ietf.org/rfc/bcp/bcp47.txt). L'attribut **`xml:lang`** est prioritaire par rapport à cet attribut lorsqu'il s'agit de déterminer la langue d'un élément.
+- {{htmlattrdef("part")}} {{experimental_inline}}
+  - : Une liste séparée par des espaces avec les noms des parties (_parts_) de l'élément. Les noms des parties permettent au CSS de cibler et de mettre en forme certains éléments d'un arbre _shadow_ via le pseudo-élément {{cssxref("::part")}}.
+- {{htmlattrdef("slot")}}
+  - : Cet attribut affecte un créneau de l'arbre du _[shadow DOM](/fr/docs/Web/Web_Components/Shadow_DOM)_ pour un élément. L'élément ayant l'attribut `slot` est affecté au créneau créé par l'élément {{HTMLElement("slot")}} pour lequel l'attribut {{htmlattrxref("name", "slot")}} correspond à la valeur de l'attribut `slot`.
+- {{htmlattrdef("spellcheck")}} {{experimental_inline}}
+
+  - : Un attribut à valeur contrainte qui définit s'il faut détecter les fautes d'orthographe/grammaire dans le texte de l'élément. Les valeurs autorisées pour cet attribut sont :
+
+    - `true` qui indique que, si possible, il faut vérifier les erreurs d'orthographe
+    - `false` qui indique qu'il ne faut pas vérifier les erreurs.
+
+- {{htmlattrdef("style")}}
+  - : Cet attribut contient les déclarations [CSS](/fr/docs/Web/CSS/) utilisées pour mettre en forme l'élément. Note : il est recommandé d'utiliser un ou plusieurs fichiers séparés, plutôt que cet attribut, pour définir les règles de mise en forme. Le rôle de l'élément {{HTMLElement("style")}} consiste à permettre une mise en forme rapide, notamment pour des tests.
+- {{htmlattrdef("tabindex")}}
+
+  - : Cet attribut à valeur entière indique l'ordre dans lequel l'élément participe à la navigation au clavier via la tabulation. Il peut prendre différente valeur :
+
+    - une valeur négative indiquera que l'élément peut recevoir le focus mais n'est pas accessible via la navigation séquentielle au clavier
+    - `0` indiquera que l'élément peut recevoir le focus et être accessible via la navigation au clavier mais l'ordre est relatif et déterminé par l'agent utilisateur
+    - une valeur positive indiquera que l'élément peut recevoir le focus et qu'il est accessible via la navigation au clavier. La valeur utilisée indique l'ordre relatif de l'élément dans la navigation. Autrement dit, la navigation au clavier ira dans le sens croissant des éléments selon leurs valeurs respectives de `tabindex`. Si plusieurs éléments ont la même valeur, ce sera leur ordre relatif dans le document qui sera utilisé.
+
+- {{htmlattrdef("title")}}
+  - : Cet attribut contient une représentation textuelle de l'information auquel il est lié. Une telle information est généralement, mais pas nécessairement, affichée sous la forme d'une bulle d'informations.
+- {{htmlattrdef("translate")}} {{experimental_inline}}
+
+  - : Un attribut à valeur contrainte qui est utilisé pour définir si les valeurs des attributs et des éléments fils de type {{domxref("Text")}} doivent être traduits lorsque la page est localisée. Les valeurs autorisées pour cet attribut sont :
+
+    - La chaîne vide ou `yes` qui indiquent que l'élément doit être traduit
+    - `no` qui indique que l'élément ne sera pas traduit.
+
+## Spécifications
+
+| Spécification                                                                                            | État                                     | Commentaires                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{SpecName("HTML WHATWG", "dom.html#global-attributes", "Global attributes")}} | {{Spec2("HTML WHATWG")}}         |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| {{SpecName("CSS Shadow Parts", "#exposing")}}                                             | {{Spec2("CSS Shadow parts")}} | Ajout des attributs universels `part` et `exportparts`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| {{SpecName("HTML5.3", "dom.html#global-attributes", "Global attributes")}}     | {{Spec2("HTML5.3")}}             |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| {{SpecName("HTML5.2", "dom.html#global-attributes", "Global attributes")}}     | {{Spec2("HTML5.2")}}             | Dérivation de {{SpecName("HTML WHATWG")}}. Depuis, {{SpecName("HTML5.1")}}, les attributs `itemid`, `itemprop`, `itemref`, `itemscope` et `itemtype` ont été ajoutés.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| {{SpecName('HTML5.1', "dom.html#global-attributes", "Global attributes")}}     | {{Spec2('HTML5.1')}}             | Les attributs `contextmenu`, `spellcheck`, `draggable`, et `dropzone` ont été ajoutés depuis {{SpecName('HTML5 W3C')}}.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| {{SpecName('HTML5 W3C', "dom.html#global-attributes", "Global attributes")}}     | {{Spec2('HTML5 W3C')}}             | Le concept d'attribut universel est introduit et les attributs `dir`, `lang`, `style`, `id`, `class`, `tabindex`, `accesskey`, `title` sont désormais des attributs universels. `xml:lang` qui faisait initialement partie de XHTML est inclus dans HTML. Les attributs `hidden`, `data-*`, `contenteditable` et `translate` sont ajoutés.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
+| {{SpecName('HTML4.01')}}                                                                         | {{Spec2('HTML4.01')}}             | Aucun attribut universel n'est défini. Plusieurs attributs, devenus universels par la suite, sont définis sur un sous-ensemble d'élément. `class` et `style` sont pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}. `dir` est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}. `id` est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}. `lang` est pris en charge pour tous les éléments à l'exception de {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}} et {{HTMLElement("script")}}. `tabindex` est uniquement pris en charge pour les éléments {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}. `accesskey` est uniquement pris en charge pour {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}} et {{HTMLElement("textarea")}}. `title` est pris en charge pour tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}. |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.global_attributes")}}
+
+## Voir aussi
+
+- Les interfaces {{domxref("Element")}} et {{domxref("GlobalEventHandlers")}} qui permettent de manipuler la plupart des attributs globaux.
diff --git a/files/fr/web/html/global_attributes/inputmode/index.md b/files/fr/web/html/global_attributes/inputmode/index.md
index 6574f06ffd..1fc1ace3d7 100644
--- a/files/fr/web/html/global_attributes/inputmode/index.md
+++ b/files/fr/web/html/global_attributes/inputmode/index.md
@@ -9,56 +9,39 @@ tags:
 translation_of: Web/HTML/Global_attributes/inputmode
 original_slug: Web/HTML/Attributs_universels/inputmode
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>inputmode</code></strong> est un attribut à valeur contrainte qui fournit une indication au navigateur quant au type de donnée qui peut être saisi par l'utilisateur lors de l'édition de l'élément ou de son contenu. Les valeurs autorisées sont les suivantes :</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`inputmode`** est un attribut à valeur contrainte qui fournit une indication au navigateur quant au type de donnée qui peut être saisi par l'utilisateur lors de l'édition de l'élément ou de son contenu. Les valeurs autorisées sont les suivantes :
 
-<dl>
- <dt><code>none</code></dt>
- <dd>Aucun clavier virtuel ne doit être affiché. Cette valeur s'avère utile lorsque l'application ou le site web implémente son propre outil de saisie.</dd>
- <dt><code>text</code></dt>
- <dd>C'est du texte qui sera saisi et un clavier dans la locale de l'utilisateur pourra être affiché.</dd>
- <dt><code>decimal</code></dt>
- <dd>C'est un nombre décimal qui sera saisi. Le clavier affiché peut contenir des chiffres et le séparateur décimal de la locale de l'utilisateur. Attention, selon les appareils, le signe moins (<code>-</code>) peut ne pas être présent.</dd>
- <dt><code>numeric</code></dt>
- <dd>C'est un nombre entier qui sera saisi. Le clavier affiché peut contenir les chiffres de 0 à 9. Attention, selon les appareils, le signe moins (<code>-</code>) peut ne pas être présent.</dd>
- <dt><code>tel</code></dt>
- <dd>C'est un numéro de téléphone qui sera saisi. Le clavier affiché pourra être celui d'un téléphone avec les chiffres allant de 0 à 9, l'astérisque et le dièse. Pour les champs de formulaire où il faut saisir un numéro de téléphone, on utilisera plutôt <code><a href="/fr/docs/Web/HTML/Element/Input/tel">&lt;input type="tel"&gt;</a></code>.</dd>
- <dt><code>search</code></dt>
- <dd>L'élément éditable sert à la recherche. Le clavier affiché sera optimisé pour une recherche (par exemple, la touche Entrée pourra être indiquée avec le mot-clé « Rechercher »).</dd>
- <dt><code>email</code></dt>
- <dd>C'est une adresse électronique qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'adresses email (généralement, on aura le caractère @ et d'autres éléments). Pour les champs de formulaire où il faut saisir une adresse électronique, on utilisera plutôt <code><a href="/fr/docs/Web/HTML/Element/Input/email">&lt;input type="email"&gt;</a></code>.</dd>
- <dt><code>url</code></dt>
- <dd>C'est une URL qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'URL. Ainsi, la touche pour la barre oblique pourra être plus accessible, le clavier pourra proposer un accès à l'historique des URL utilisées, etc. Pour les champs de formulaire où il faut saisir une URL, on utilisera plutôt <code><a href="/fr/docs/Web/HTML/Element/Input/url">&lt;input type="url"&gt;</a></code>.</dd>
-</dl>
+- `none`
+  - : Aucun clavier virtuel ne doit être affiché. Cette valeur s'avère utile lorsque l'application ou le site web implémente son propre outil de saisie.
+- `text`
+  - : C'est du texte qui sera saisi et un clavier dans la locale de l'utilisateur pourra être affiché.
+- `decimal`
+  - : C'est un nombre décimal qui sera saisi. Le clavier affiché peut contenir des chiffres et le séparateur décimal de la locale de l'utilisateur. Attention, selon les appareils, le signe moins (`-`) peut ne pas être présent.
+- `numeric`
+  - : C'est un nombre entier qui sera saisi. Le clavier affiché peut contenir les chiffres de 0 à 9. Attention, selon les appareils, le signe moins (`-`) peut ne pas être présent.
+- `tel`
+  - : C'est un numéro de téléphone qui sera saisi. Le clavier affiché pourra être celui d'un téléphone avec les chiffres allant de 0 à 9, l'astérisque et le dièse. Pour les champs de formulaire où il faut saisir un numéro de téléphone, on utilisera plutôt [`<input type="tel">`](/fr/docs/Web/HTML/Element/Input/tel).
+- `search`
+  - : L'élément éditable sert à la recherche. Le clavier affiché sera optimisé pour une recherche (par exemple, la touche Entrée pourra être indiquée avec le mot-clé « Rechercher »).
+- `email`
+  - : C'est une adresse électronique qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'adresses email (généralement, on aura le caractère @ et d'autres éléments). Pour les champs de formulaire où il faut saisir une adresse électronique, on utilisera plutôt [`<input type="email">`](/fr/docs/Web/HTML/Element/Input/email).
+- `url`
+  - : C'est une URL qui sera saisie. Le clavier affiché pourra être optimisé pour la saisie d'URL. Ainsi, la touche pour la barre oblique pourra être plus accessible, le clavier pourra proposer un accès à l'historique des URL utilisées, etc. Pour les champs de formulaire où il faut saisir une URL, on utilisera plutôt [`<input type="url">`](/fr/docs/Web/HTML/Element/Input/url).
 
-<p>Lorsque cet attribut n'est pas explicitement défini, sa valeur par défaut est <code>"text"</code>, ce qui indique que c'est du texte qui sera saisi et qu'un clavier standard devrait être utilisé.</p>
+Lorsque cet attribut n'est pas explicitement défini, sa valeur par défaut est `"text"`, ce qui indique que c'est du texte qui sera saisi et qu'un clavier standard devrait être utilisé.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}}</td>
-   <td>{{Spec2("HTML WHATWG")}}</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                                            | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName("HTML WHATWG", "interaction.html#input-modalities:-the-inputmode-attribute", "inputmode")}} | {{Spec2("HTML WHATWG")}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.global_attributes.inputmode")}}</p>
+{{Compat("html.global_attributes.inputmode")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">L'ensemble des attributs universels</a></li>
-</ul>
+- [L'ensemble des attributs universels](/fr/docs/Web/HTML/Attributs_universels)
diff --git a/files/fr/web/html/global_attributes/is/index.md b/files/fr/web/html/global_attributes/is/index.md
index 5f9e0acd07..9df0b63838 100644
--- a/files/fr/web/html/global_attributes/is/index.md
+++ b/files/fr/web/html/global_attributes/is/index.md
@@ -8,17 +8,18 @@ tags:
 translation_of: Web/HTML/Global_attributes/is
 original_slug: Web/HTML/Attributs_universels/is
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'attribut <code><strong>is</strong></code> est un <a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> qui indique qu'un élément HTML standard devrait se comporter comme un élément natif personnalisé (<em>custom element</em>) défini (voir <a href="/fr/docs/Web/Web_Components/Using_custom_elements">Manipuler les <em>custom elements</em></a> pour plus de détails).</p>
+L'attribut **`is`** est un [attribut universel](/fr/docs/Web/HTML/Attributs_universels) qui indique qu'un élément HTML standard devrait se comporter comme un élément natif personnalisé (_custom element_) défini (voir [Manipuler les _custom elements_](/fr/docs/Web/Web_Components/Using_custom_elements) pour plus de détails).
 
-<p>Cet attribut peut uniquement être utilisé si l'élément personnalisé indiqué a été correctement <a href="/fr/docs/Web/API/CustomElementRegistry/define">défini</a> dans le document courant et qu'il étend le type d'élément sur lequel il est appliqué.</p>
+Cet attribut peut uniquement être utilisé si l'élément personnalisé indiqué a été correctement [défini](/fr/docs/Web/API/CustomElementRegistry/define) dans le document courant et qu'il étend le type d'élément sur lequel il est appliqué.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Cet exemple est tiré de l'exemple <code><a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a></code> (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">voir le résultat en <em>live</em></a>).</p>
+Cet exemple est tiré de l'exemple [`word-count-web-component`](https://github.com/mdn/web-components-examples/tree/master/word-count-web-component) ([voir le résultat en _live_](https://mdn.github.io/web-components-examples/word-count-web-component/)).
 
-<pre class="brush: js">// On crée une classe pour l'élément
+```js
+// On crée une classe pour l'élément
 class WordCount extends HTMLParagraphElement {
   constructor() {
     // On appelle super() pour récupérer l'initialisation
@@ -32,35 +33,23 @@ class WordCount extends HTMLParagraphElement {
 }
 
 // On définit le nouvel élément.
-customElements.define('word-count', WordCount, { extends: 'p' });</pre>
+customElements.define('word-count', WordCount, { extends: 'p' });
+```
 
-<pre class="brush: html">&lt;p is="word-count"&gt;&lt;/p&gt;</pre>
+```html
+<p is="word-count"></p>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}} | {{Spec2('HTML WHATWG')}} |              |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.global_attributes.is")}}</p>
+{{Compat("html.global_attributes.is")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Les différents <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a></li>
-</ul>
+- Les différents [attributs universels](/fr/docs/Web/HTML/Attributs_universels)
diff --git a/files/fr/web/html/global_attributes/itemid/index.md b/files/fr/web/html/global_attributes/itemid/index.md
index bb31c1e8c8..38c6c95ba4 100644
--- a/files/fr/web/html/global_attributes/itemid/index.md
+++ b/files/fr/web/html/global_attributes/itemid/index.md
@@ -11,107 +11,83 @@ tags:
 translation_of: Web/HTML/Global_attributes/itemid
 original_slug: Web/HTML/Attributs_universels/itemid
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemid</code></strong> permet d'identifier un objet, au sens des microdonnées, de façon unique et globale. L'attribut <code>itemid</code> peut uniquement être défini sur les éléments qui ont un attribut {{htmlattrxref("itemscope")}} et un attribut {{htmlattrxref("itemtype")}}. De plus, un <code>itemid</code> ne peut pas être défini sur des éléments dont l'attribut <code>itemscope</code> possède un attribut <code>itemtype</code> qui définit un vocabulaire qui ne prend pas en charge les identifiants globaux tels que défini dans la spécification du vocabulaire.</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`itemid`** permet d'identifier un objet, au sens des microdonnées, de façon unique et globale. L'attribut `itemid` peut uniquement être défini sur les éléments qui ont un attribut {{htmlattrxref("itemscope")}} et un attribut {{htmlattrxref("itemtype")}}. De plus, un `itemid` ne peut pas être défini sur des éléments dont l'attribut `itemscope` possède un attribut `itemtype` qui définit un vocabulaire qui ne prend pas en charge les identifiants globaux tels que défini dans la spécification du vocabulaire.
 
-<p>La signification exacte d'un identifiant global est déterminée par la spécification du vocabulaire. C'est le rôle de cette spécification d'autoriser ou non la présence de plusieurs éléments avec le même identifiant (sur une ou plusieurs pages) et de définir les règles de gestion associées.</p>
+La signification exacte d'un identifiant global est déterminée par la spécification du vocabulaire. C'est le rôle de cette spécification d'autoriser ou non la présence de plusieurs éléments avec le même identifiant (sur une ou plusieurs pages) et de définir les règles de gestion associées.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
-<pre class="syntaxbox">itemid="URN"</pre>
+    itemid="URN"
 
-<div class="note">
-  <p><strong>Note :</strong> Selon la définition du WHATWG, un <code>itemid</code> doit être une URL. Dans l'exemple qui suit, on utilise plutôt une URN, plus appropriée pour définir un identifiant unique comme <code>itemid</code>. Cette incohérence reflète l'état actuellement incomplet de la spécification sur les microdonnées.</p>
-</div>
+> **Note :** Selon la définition du WHATWG, un `itemid` doit être une URL. Dans l'exemple qui suit, on utilise plutôt une URN, plus appropriée pour définir un identifiant unique comme `itemid`. Cette incohérence reflète l'état actuellement incomplet de la spécification sur les microdonnées.
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<p>Un élément qui décrit un livre :</p>
+Un élément qui décrit un livre :
 
-<pre class="brush: html">&lt;dl itemscope
+```html
+<dl itemscope
     itemtype="http://vocab.example.net/book"
-    <mark>itemid="urn:isbn:0-330-34032-8"</mark>&gt;
- &lt;dt&gt;Title &lt;dd itemprop="title"&gt;The Reality Dysfunction
- &lt;dt&gt;Author &lt;dd itemprop="author"&gt;Peter F. Hamilton
- &lt;dt&gt;Publication date
- &lt;dd&gt;&lt;time itemprop="pubdate" datetime="1996-01-26"&gt;26 January 1996&lt;/time&gt; &lt;/dl&gt;
-</pre>
+    itemid="urn:isbn:0-330-34032-8">
+ <dt>Title <dd itemprop="title">The Reality Dysfunction
+ <dt>Author <dd itemprop="author">Peter F. Hamilton
+ <dt>Publication date
+ <dd><time itemprop="pubdate" datetime="1996-01-26">26 January 1996</time> </dl>
+```
 
-<h3 id="Données_structurées_correspondantes">Données structurées correspondantes</h3>
+### Données structurées correspondantes
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td colspan="1" rowspan="14">itemscope</td>
-   <td>itemtype: itemid</td>
-   <td colspan="2" rowspan="1">
-    http://vocab.example.net/book: urn:isbn:0-330-34032-8
-   </td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>title</td>
-   <td>The Reality Dysfunction</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>author</td>
-   <td>
-    Peter F. Hamilton
-   </td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>pubdate</td>
-   <td>1996-01-26</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td colspan="1" rowspan="14">itemscope</td>
+      <td>itemtype: itemid</td>
+      <td colspan="2" rowspan="1">
+        http://vocab.example.net/book: urn:isbn:0-330-34032-8
+      </td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>title</td>
+      <td>The Reality Dysfunction</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>author</td>
+      <td>Peter F. Hamilton</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>pubdate</td>
+      <td>1996-01-26</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML Microdata', "#items", "itemid")}}</td>
-   <td>{{Spec2('HTML Microdata')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                            | État                                 | Commentaires |
+| ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------ |
+| {{SpecName('HTML Microdata', "#items", "itemid")}}                     | {{Spec2('HTML Microdata')}} |              |
+| {{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}} | {{Spec2('HTML WHATWG')}}     |              |
+
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("html.global_attributes.itemid")}}
 
-<p>{{Compat("html.global_attributes.itemid")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
+- Les autres attributs universels relatifs aux microdonnées :
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
- <li>Les autres attributs universels relatifs aux microdonnées :
-  <ul>
-   <li>{{htmlattrxref("itemid")}}</li>
-   <li>{{htmlattrxref("itemprop")}}</li>
-   <li>{{htmlattrxref("itemref")}}</li>
-   <li>{{htmlattrxref("itemscope")}}</li>
-   <li>{{htmlattrxref("itemtype")}}</li>
-  </ul>
- </li>
-</ul>
+  - {{htmlattrxref("itemid")}}
+  - {{htmlattrxref("itemprop")}}
+  - {{htmlattrxref("itemref")}}
+  - {{htmlattrxref("itemscope")}}
+  - {{htmlattrxref("itemtype")}}
diff --git a/files/fr/web/html/global_attributes/itemprop/index.md b/files/fr/web/html/global_attributes/itemprop/index.md
index 0511713043..b42ef9904e 100644
--- a/files/fr/web/html/global_attributes/itemprop/index.md
+++ b/files/fr/web/html/global_attributes/itemprop/index.md
@@ -10,428 +10,418 @@ tags:
 translation_of: Web/HTML/Global_attributes/itemprop
 original_slug: Web/HTML/Attributs_universels/itemprop
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemprop</code></strong> est utilisé afin d'ajouter des propriétés à un objet. C'est un attribut universel et chaque élément HTML peut donc avoir un attribut <code>itemprop</code> qui permettra de former un couple de nom (la valeur de l'attribut) et de valeur (la valeur de l'élément). Chacune de ces paires constitue une <strong>propriété</strong> et un groupe de propriété forme un <strong>objet (<em>item</em>)</strong>. Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL et peuvent être associées à de nombreux éléments comme {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}} et {{HTMLElement("video")}}.</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`itemprop`** est utilisé afin d'ajouter des propriétés à un objet. C'est un attribut universel et chaque élément HTML peut donc avoir un attribut `itemprop` qui permettra de former un couple de nom (la valeur de l'attribut) et de valeur (la valeur de l'élément). Chacune de ces paires constitue une **propriété** et un groupe de propriété forme un **objet (_item_)**. Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL et peuvent être associées à de nombreux éléments comme {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}} et {{HTMLElement("video")}}.
 
-<h3 id="Un_exemple_simple">Un exemple simple</h3>
+### Un exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div itemscope itemtype="http://schema.org/Movie"&gt;
-  &lt;h1 <strong>itemprop="name"</strong>&gt;Avatar&lt;/h1&gt;
-  &lt;span&gt;Director:
-    &lt;span <strong>itemprop="director"</strong>&gt;James Cameron&lt;/span&gt;
+```html
+<div itemscope itemtype="http://schema.org/Movie">
+  <h1 itemprop="name">Avatar</h1>
+  <span>Director:
+    <span itemprop="director">James Cameron</span>
     (born August 16, 1954)
-  &lt;/span&gt;
-  &lt;span <strong>itemprop="genre"</strong>&gt;Science fiction&lt;/span&gt;
-  &lt;a href="../movies/avatar-theatrical-trailer.html"
-    <strong>itemprop="trailer"</strong>&gt;Trailer&lt;/a&gt;
-&lt;/div&gt;</pre>
+  </span>
+  <span itemprop="genre">Science fiction</span>
+  <a href="../movies/avatar-theatrical-trailer.html"
+    itemprop="trailer">Trailer</a>
+</div>
+```
 
-<h4 id="Structure_de_données">Structure de données</h4>
+#### Structure de données
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td colspan="1" rowspan="2"> </td>
-   <th colspan="2" rowspan="1"><strong>Objet</strong></th>
-  </tr>
-  <tr>
-   <th><strong>Nom pour <code>itemprop</code></strong></th>
-   <th><strong>Valeur pour <code>itemprop</code></strong></th>
-  </tr>
-  <tr>
-   <td><code>itemprop</code></td>
-   <td>name</td>
-   <td>Avatar</td>
-  </tr>
-  <tr>
-   <td><code>itemprop</code></td>
-   <td>director</td>
-   <td>James Cameron</td>
-  </tr>
-  <tr>
-   <td><code>itemprop</code></td>
-   <td>genre</td>
-   <td>Science fiction</td>
-  </tr>
-  <tr>
-   <td><code>itemprop</code></td>
-   <td>trailer</td>
-   <td>../movies/avatar-theatrical-trailer.html</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td colspan="1" rowspan="2"> </td>
+      <th colspan="2" rowspan="1"><strong>Objet</strong></th>
+    </tr>
+    <tr>
+      <th>
+        <strong>Nom pour <code>itemprop</code></strong>
+      </th>
+      <th>
+        <strong>Valeur pour <code>itemprop</code></strong>
+      </th>
+    </tr>
+    <tr>
+      <td><code>itemprop</code></td>
+      <td>name</td>
+      <td>Avatar</td>
+    </tr>
+    <tr>
+      <td><code>itemprop</code></td>
+      <td>director</td>
+      <td>James Cameron</td>
+    </tr>
+    <tr>
+      <td><code>itemprop</code></td>
+      <td>genre</td>
+      <td>Science fiction</td>
+    </tr>
+    <tr>
+      <td><code>itemprop</code></td>
+      <td>trailer</td>
+      <td>../movies/avatar-theatrical-trailer.html</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Propriétés">Propriétés</h2>
+## Propriétés
 
-<p>Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL. Lorsque c'est une URL, on l'exprime grâce à l'élément {{HTMLElement("a")}} et avec son attribut <code>href</code>. Pour un élément {{HTMLElement("img")}}, on lira son attribut <code>src</code>, de même pour les autres éléments HTML qui font appel à d'autres ressources.</p>
+Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL. Lorsque c'est une URL, on l'exprime grâce à l'élément {{HTMLElement("a")}} et avec son attribut `href`. Pour un élément {{HTMLElement("img")}}, on lira son attribut `src`, de même pour les autres éléments HTML qui font appel à d'autres ressources.
 
-<h3 id="Trois_propriétés_dont_les_valeurs_sont_des_chaînes_simples">Trois propriétés dont les valeurs sont des chaînes simples</h3>
+### Trois propriétés dont les valeurs sont des chaînes simples
 
-<pre class="brush: html">&lt;div itemscope&gt;
- &lt;p&gt;My name is
-   &lt;span itemprop="name"&gt;Neil&lt;/span&gt;.
- &lt;/p&gt;
- &lt;p&gt;My band is called
-   &lt;span itemprop="band"&gt;Four Parts Water&lt;/span&gt;.
- &lt;/p&gt;
- &lt;p&gt;I am
-   &lt;span itemprop="nationality"&gt;British&lt;/span&gt;.
- &lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div itemscope>
+ <p>My name is
+   <span itemprop="name">Neil</span>.
+ </p>
+ <p>My band is called
+   <span itemprop="band">Four Parts Water</span>.
+ </p>
+ <p>I am
+   <span itemprop="nationality">British</span>.
+ </p>
+</div>
+```
 
-<h3 id="Une_propriété_«_image_»_dont_la_valeur_est_une_URL">Une propriété « image » dont la valeur est une URL</h3>
+### Une propriété « image » dont la valeur est une URL
 
-<pre class="brush: html">&lt;div itemscope&gt;
- &lt;img itemprop="image"
-  src="google-logo.png" alt="Google"&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div itemscope>
+ <img itemprop="image"
+  src="google-logo.png" alt="Google">
+</div>
+```
 
-<h3 id="Une_propriété_dont_la_valeur_est_un_identifiant_«_machine_»">Une propriété dont la valeur est un identifiant « machine »</h3>
+### Une propriété dont la valeur est un identifiant « machine »
 
-<pre class="brush: html">&lt;h1 itemscope&gt;
- &lt;data itemprop="product-id"
-  value="9678AOU879"&gt;The Instigator 2000&lt;/data&gt;
-&lt;/h1&gt;</pre>
+```html
+<h1 itemscope>
+ <data itemprop="product-id"
+  value="9678AOU879">The Instigator 2000</data>
+</h1>
+```
 
-<p>Lorsqu'une chaîne est décrite avec un format machine plutôt qu'un format « humain », on la propriété est exprimée avec la valeur de l'attribut <code>value</code> de l'élément {{HTMLElement("data")}} et c'est le contenu de l'élément qui fournira la valeur humainement compréhensible.</p>
+Lorsqu'une chaîne est décrite avec un format machine plutôt qu'un format « humain », on la propriété est exprimée avec la valeur de l'attribut `value` de l'élément {{HTMLElement("data")}} et c'est le contenu de l'élément qui fournira la valeur humainement compréhensible.
 
-<h3 id="Un_exemple_de_mesure">Un exemple de mesure</h3>
+### Un exemple de mesure
 
-<pre class="brush: html">&lt;div itemscope itemtype="http://schema.org/Product"&gt;
- &lt;span itemprop="name"&gt;
+```html
+<div itemscope itemtype="http://schema.org/Product">
+ <span itemprop="name">
    Panasonic White 60L Refrigerator
- &lt;/span&gt;
- &lt;img src="panasonic-fridge-60l-white.jpg" alt=""&gt;
-  &lt;div itemprop="aggregateRating"
+ </span>
+ <img src="panasonic-fridge-60l-white.jpg" alt="">
+  <div itemprop="aggregateRating"
        itemscope
-       itemtype="http://schema.org/AggregateRating"&gt;
-   &lt;meter itemprop="ratingValue" min=0 value=3.5 max=5&gt;
+       itemtype="http://schema.org/AggregateRating">
+   <meter itemprop="ratingValue" min=0 value=3.5 max=5>
      Rated 3.5/5
-   &lt;/meter&gt;
-   (based on &lt;span itemprop="reviewCount"&gt;11&lt;/span&gt;
+   </meter>
+   (based on <span itemprop="reviewCount">11</span>
    customer reviews)
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+  </div>
+</div>
+```
 
-<p>Pour les données numériques, on peut utiliser l'élément {{HTMLElement("meter")}} et la valeur de son attribut <code>value</code>.</p>
+Pour les données numériques, on peut utiliser l'élément {{HTMLElement("meter")}} et la valeur de son attribut `value`.
 
-<h3 id="Une_propriété_de_date">Une propriété de date</h3>
+### Une propriété de date
 
-<pre class="brush: html">&lt;div itemscope&gt;
+```html
+<div itemscope>
  I was born on
- &lt;time itemprop="birthday" datetime="2009-05-10"&gt;
+ <time itemprop="birthday" datetime="2009-05-10">
    May 10th 2009
- &lt;/time&gt;.
-&lt;/div&gt;</pre>
-
-<p>Pour les valeurs temporelles, on utilisera les éléments {{HTMLElement("time")}} et son attribut <code>datetime</code>.</p>
-
-<h3 id="Imbrication_de_propriétés">Imbrication de propriétés</h3>
-
-<pre class="brush: html">&lt;div itemscope&gt;
- &lt;p&gt;Name:
-   &lt;span itemprop="name"&gt;Amanda&lt;/span&gt;
- &lt;/p&gt;
- &lt;p&gt;Band:
-   &lt;span itemprop="band" itemscope&gt;
-     &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt;
-    (&lt;span itemprop="size"&gt;12&lt;/span&gt; players)
-   &lt;/span&gt;
- &lt;/p&gt;
-&lt;/div&gt;</pre>
+ </time>.
+</div>
+```
+
+Pour les valeurs temporelles, on utilisera les éléments {{HTMLElement("time")}} et son attribut `datetime`.
+
+### Imbrication de propriétés
+
+```html
+<div itemscope>
+ <p>Name:
+   <span itemprop="name">Amanda</span>
+ </p>
+ <p>Band:
+   <span itemprop="band" itemscope>
+     <span itemprop="name">Jazz Band</span>
+    (<span itemprop="size">12</span> players)
+   </span>
+ </p>
+</div>
+```
 
-<p>On peut avoir des imbrications de propriétés et utiliser l'attribut <code>itemscope</code> sur l'élément qui porte le groupe.</p>
+On peut avoir des imbrications de propriétés et utiliser l'attribut `itemscope` sur l'élément qui porte le groupe.
 
-<p>L'élément de plus haut niveau possède deux propriétés <code>name</code> et <code>band</code>. La valeur de <code>name</code> est Amanda et la valeur de <code>ban</code><code>d</code> est un objet à part entière, composé de deux propriétés <code>name</code> et <code>size</code>. Le valeur pour <code>name</code> est Jazz Band et la valeur de <code>size</code> est 12. L'objet de plus haut niveau est un objet qui ne fait pas partie d'un autre objet.</p>
+L'élément de plus haut niveau possède deux propriétés `name` et `band`. La valeur de `name` est Amanda et la valeur de ` ban``d ` est un objet à part entière, composé de deux propriétés `name` et `size`. Le valeur pour `name` est Jazz Band et la valeur de `size` est 12. L'objet de plus haut niveau est un objet qui ne fait pas partie d'un autre objet.
 
-<h3 id="Séparation_des_objets">Séparation des objets</h3>
+### Séparation des objets
 
-<pre class="brush: html">&lt;div itemscope id="amanda" itemref="a b"&gt;&lt;/div&gt;
-&lt;p id="a"&gt;Name: &lt;span itemprop="name"&gt;Amanda&lt;/span&gt;&lt;/p&gt;
-&lt;div id="b" itemprop="band" itemscope itemref="c"&gt;&lt;/div&gt;
-&lt;div id="c"&gt;
- &lt;p&gt;Band: &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt;&lt;/p&gt;
- &lt;p&gt;Size: &lt;span itemprop="size"&gt;12&lt;/span&gt; players&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div itemscope id="amanda" itemref="a b"></div>
+<p id="a">Name: <span itemprop="name">Amanda</span></p>
+<div id="b" itemprop="band" itemscope itemref="c"></div>
+<div id="c">
+ <p>Band: <span itemprop="name">Jazz Band</span></p>
+ <p>Size: <span itemprop="size">12</span> players</p>
+</div>
+```
 
-<p>On obtient le même résultat qu'avec l'exemple précédent. Le premier objet possède deux propriétés <code>name</code> (qui vaut Amanda) et <code>band</code> qui est défini avec un autre objet. Le deuxième objet possède deux propriétés <code>name</code> (qui vaut Jazz Band) et <code>size</code> (qui vaut 12).</p>
+On obtient le même résultat qu'avec l'exemple précédent. Le premier objet possède deux propriétés `name` (qui vaut Amanda) et `band` qui est défini avec un autre objet. Le deuxième objet possède deux propriétés `name` (qui vaut Jazz Band) et `size` (qui vaut 12).
 
-<h3 id="Un_objet_avec_plusieurs_occurrences_d'une_propriété">Un objet avec plusieurs occurrences d'une propriété</h3>
+### Un objet avec plusieurs occurrences d'une propriété
 
-<pre class="brush: html">&lt;div itemscope&gt;
- &lt;p&gt;Flavors in my favorite ice cream:&lt;/p&gt;
- &lt;ul&gt;
-  &lt;li itemprop="flavor"&gt;Lemon sorbet&lt;/li&gt;
-  &lt;li itemprop="flavor"&gt;Apricot sorbet&lt;/li&gt;
- &lt;/ul&gt;
-&lt;/div&gt;</pre>
+```html
+<div itemscope>
+ <p>Flavors in my favorite ice cream:</p>
+ <ul>
+  <li itemprop="flavor">Lemon sorbet</li>
+  <li itemprop="flavor">Apricot sorbet</li>
+ </ul>
+</div>
+```
 
-<p>Cet objet possède deux fois la même propriété <code>flavor</code>, qui prend deux valeurs Lemon sorbet et Apricot sorbet.</p>
+Cet objet possède deux fois la même propriété `flavor`, qui prend deux valeurs Lemon sorbet et Apricot sorbet.
 
-<h3 id="Deux_propriétés_avec_la_même_valeur">Deux propriétés avec la même valeur</h3>
+### Deux propriétés avec la même valeur
 
-<pre class="brush: html">&lt;div itemscope&gt;
- &lt;span itemprop="favorite-color favorite-fruit"&gt;
+```html
+<div itemscope>
+ <span itemprop="favorite-color favorite-fruit">
   orange
- &lt;/span&gt;
-&lt;/div&gt;</pre>
+ </span>
+</div>
+```
 
-<p>On peut définir deux propriétés au même endroit si elles prennent la même valeur.</p>
+On peut définir deux propriétés au même endroit si elles prennent la même valeur.
 
-<h3 id="Équivalence_sémantique">Équivalence sémantique</h3>
+### Équivalence sémantique
 
-<pre class="brush: html">&lt;figure&gt;
- &lt;img src="castle.jpeg"&gt;
- &lt;figcaption&gt;
-  &lt;span itemscope&gt;
-    &lt;span itemprop="name"&gt;The Castle&lt;/span&gt;
-  &lt;/span&gt;
+```html
+<figure>
+ <img src="castle.jpeg">
+ <figcaption>
+  <span itemscope>
+    <span itemprop="name">The Castle</span>
+  </span>
   (1986)
- &lt;/figcaption&gt;
-&lt;/figure&gt;</pre>
+ </figcaption>
+</figure>
+```
 
-<pre class="brush: html">&lt;span itemscope&gt;
-  &lt;meta itemprop="name" content="The Castle"&gt;
-&lt;/span&gt;
-&lt;figure&gt;
- &lt;img src="castle.jpeg"&gt;
- &lt;figcaption&gt;The Castle (1986)&lt;/figcaption&gt;
-&lt;/figure&gt;</pre>
+```html
+<span itemscope>
+  <meta itemprop="name" content="The Castle">
+</span>
+<figure>
+ <img src="castle.jpeg">
+ <figcaption>The Castle (1986)</figcaption>
+</figure>
+```
 
-<p>Ces deux exemples sont équivalents d'un point de vue sémantique. Tous les deux se composent d'un schéma et d'une légende et tous les deux possèdent un objet avec une propriété <code>name</code> qui vaut The Castle. Une différence subsiste : si l'utilisateur glisse-dépose l'élément, l'objet sera inclus dans les données. Dans les deux cas, l'image n'est pas associée à l'objet.</p>
+Ces deux exemples sont équivalents d'un point de vue sémantique. Tous les deux se composent d'un schéma et d'une légende et tous les deux possèdent un objet avec une propriété `name` qui vaut The Castle. Une différence subsiste : si l'utilisateur glisse-dépose l'élément, l'objet sera inclus dans les données. Dans les deux cas, l'image n'est pas associée à l'objet.
 
-<h2 id="Les_noms_et_les_valeurs">Les noms et les valeurs</h2>
+## Les noms et les valeurs
 
-<p>Une propriété est un ensemble non-ordonné de composants uniques sensibles à la casse qui représentent les paires de noms/valeurs. Les valeur doit avoir au moins composant pour se rattacher à l'objet. Dans le tableau ci-après, chaque cellule correspond à un composant.</p>
+Une propriété est un ensemble non-ordonné de composants uniques sensibles à la casse qui représentent les paires de noms/valeurs. Les valeur doit avoir au moins composant pour se rattacher à l'objet. Dans le tableau ci-après, chaque cellule correspond à un composant.
 
-<h3 id="Exemples_de_noms">Exemples de noms</h3>
+### Exemples de noms
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th colspan="1" rowspan="2" scope="col"> </th>
-   <th colspan="2" rowspan="1" scope="col">Objet</th>
-  </tr>
-  <tr>
-   <th scope="col">nom pour <code>itemprop</code></th>
-   <th scope="col">valeur pour <code>itemprop</code></th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th><code>itemprop</code></th>
-   <td>country</td>
-   <td>Ireland</td>
-  </tr>
-  <tr>
-   <th><code>itemprop</code></th>
-   <td>Option</td>
-   <td>2</td>
-  </tr>
-  <tr>
-   <th><code>itemprop</code></th>
-   <td>https://www.flickr.com/photos/nlireland/6992065114/</td>
-   <td>Ring of Kerry</td>
-  </tr>
-  <tr>
-   <th><code>itemprop</code></th>
-   <td>img</td>
-   <td>https://www.flickr.com/photos/nlireland/6992065114/</td>
-  </tr>
-  <tr>
-   <th><code>itemprop</code></th>
-   <td>website</td>
-   <td>flickr</td>
-  </tr>
-  <tr>
-   <th><code>itemprop</code></th>
-   <td>(token)</td>
-   <td>(token)</td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th colspan="1" rowspan="2" scope="col"> </th>
+      <th colspan="2" rowspan="1" scope="col">Objet</th>
+    </tr>
+    <tr>
+      <th scope="col">nom pour <code>itemprop</code></th>
+      <th scope="col">valeur pour <code>itemprop</code></th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th><code>itemprop</code></th>
+      <td>country</td>
+      <td>Ireland</td>
+    </tr>
+    <tr>
+      <th><code>itemprop</code></th>
+      <td>Option</td>
+      <td>2</td>
+    </tr>
+    <tr>
+      <th><code>itemprop</code></th>
+      <td>https://www.flickr.com/photos/nlireland/6992065114/</td>
+      <td>Ring of Kerry</td>
+    </tr>
+    <tr>
+      <th><code>itemprop</code></th>
+      <td>img</td>
+      <td>https://www.flickr.com/photos/nlireland/6992065114/</td>
+    </tr>
+    <tr>
+      <th><code>itemprop</code></th>
+      <td>website</td>
+      <td>flickr</td>
+    </tr>
+    <tr>
+      <th><code>itemprop</code></th>
+      <td>(token)</td>
+      <td>(token)</td>
+    </tr>
+  </tbody>
 </table>
 
-<p><strong>Les composants</strong> sont des chaînes de caractères ou des URL. Un objet est appelé un objet typé si c'est une URL. Les chaînes ne peuvent pas contenir de point ou de deux points.</p>
-
-<ol>
- <li>Si un objet est un objet typé, il doit être :
-  <ol>
-   <li>Un nom de propriété autorisé par la spécification qui définit les types pertinents pour un objet ou</li>
-   <li>Une URL valide qui est une URL absolue qui définit un nom faisant partie de la spécification du vocabulaire ou</li>
-   <li>Une URL valide qui est une URL absolue utilisée comme un nom propriétaire ou</li>
-  </ol>
- </li>
- <li>Si un objet n'est pas un objet typé, le nom doit être :
-  <ol>
-   <li>Une chaîne qui ne contient pas de caractères "<strong>.</strong>" (U+002E FULL STOP) ou "<strong>:</strong>" (U+003A COLON) et qui est utilisée comme un nom « propriétaire » pour la propriété (c'est-à-dire avec un nom qui n'est pas défini dans une spécification publique).</li>
-  </ol>
- </li>
-</ol>
-
-<div class="note">
-  <p><strong>Note :</strong> Les caractères « : » sont interdits pour les valeurs qui ne sont pas des URL afin de pouvoir distinguer les URL du reste. Les valeurs avec les caractères « . » sont réservés pour de futurs ajouts et les blancs ne sont pas autorisés car les valeurs seraient analysées comme plusieurs valeurs distinctes.</p>
+**Les composants** sont des chaînes de caractères ou des URL. Un objet est appelé un objet typé si c'est une URL. Les chaînes ne peuvent pas contenir de point ou de deux points.
+
+1.  Si un objet est un objet typé, il doit être :
+
+    1.  Un nom de propriété autorisé par la spécification qui définit les types pertinents pour un objet ou
+    2.  Une URL valide qui est une URL absolue qui définit un nom faisant partie de la spécification du vocabulaire ou
+    3.  Une URL valide qui est une URL absolue utilisée comme un nom propriétaire ou
+
+2.  Si un objet n'est pas un objet typé, le nom doit être :
+
+    1.  Une chaîne qui ne contient pas de caractères "**.**" (U+002E FULL STOP) ou "**:**" (U+003A COLON) et qui est utilisée comme un nom « propriétaire » pour la propriété (c'est-à-dire avec un nom qui n'est pas défini dans une spécification publique).
+
+> **Note :** Les caractères « : » sont interdits pour les valeurs qui ne sont pas des URL afin de pouvoir distinguer les URL du reste. Les valeurs avec les caractères « . » sont réservés pour de futurs ajouts et les blancs ne sont pas autorisés car les valeurs seraient analysées comme plusieurs valeurs distinctes.
+
+## Valeurs
+
+La valeur d'une propriété est définie comme le premier cas qui correspond dans cette liste :
+
+- Si l'élément possède un attribut **`itemscope` :**
+
+  - La valeur est **l'objet** créé par l'élément.
+
+- Si l'élément est un élément **`meta` :**
+
+  - La valeur est celle de l'attribut **`content`** s'il existe, la chaîne vide sinon.
+
+- Si l'élément est **`audio`**, **`embed`**, **`iframe`**, **`img`**, **`source`**, **`track`** ou **`video` :**
+
+  - La valeur est l'URL correspondant à l'analyse de l'attribut `src` relatif au nœeud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.
+
+- Si l'élément est un élément **`a`**, **`area`** ou **`link` :**
+
+  - La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut `href` relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.
+
+- Si l'élément est un élément **`object` :**
+
+  - La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut `data` relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.
+
+- Si l'élément est un élément **`data` :**
+
+  - La valeur est la valeur l'attribut `value` s'il est présent ou la chaîne vide sinon.
+
+- Si l'élément est un élément **`meter` :**
+
+  - La valeur est la valeur l'attribut `value` s'il est présent ou la chaîne vide sinon.
+
+- Si l'élément est un élément **`time` :**
+
+  - La valeur de l'élément est la valeur de l'attribut **`datetime`**.
+
+Sinon :
+
+- La valeur de l'élément est le contenu textuel de l'élément HTML (`textContent`).
+
+Les éléments qui permettent d'utiliser des attributs URL pour des URL absolues sont : **`a`**, **`area`**, **`audio`**, **`embed`**, **`iframe`**, **`img`**, **`link`**, **`object`**, **`source`**, **`track`** et **`video`**.
+
+### Ordre des noms
+
+L'ordre des noms n'a pas d'importance mais si une propriété possède plusieurs valeurs, l'ordre sera relatif pour cette propriété.
+
+#### Exemples équivalents
+
+```html
+<div itemscope>
+ <p itemprop="a">1</p>
+ <p itemprop="a">2</p>
+ <p itemprop="b">test</p>
+</div>
+```
+
+```html
+<div itemscope>
+ <p itemprop="b">test</p>
+ <p itemprop="a">1</p>
+ <p itemprop="a">2</p>
 </div>
+```
 
-<h2 id="Valeurs">Valeurs</h2>
-
-<p>La valeur d'une propriété est définie comme le premier cas qui correspond dans cette liste :</p>
-
-<ul>
- <li>Si l'élément possède un attribut <strong><code>itemscope</code> :</strong>
-
-  <ul>
-   <li>La valeur est <strong>l'objet</strong> créé par l'élément.</li>
-  </ul>
- </li>
- <li>Si l'élément est un élément <strong><code>meta</code> :</strong>
-  <ul>
-   <li>La valeur est celle de l'attribut <strong><code>content</code></strong> s'il existe, la chaîne vide sinon.</li>
-  </ul>
- </li>
- <li>Si l'élément est <code><strong>audio</strong></code>, <code><strong>embed</strong></code>, <code><strong>iframe</strong></code>, <code><strong>img</strong></code>, <code><strong>source</strong></code>, <code><strong>track</strong></code> ou <strong><code>video</code> :</strong>
-  <ul>
-   <li>La valeur est l'URL correspondant à l'analyse de l'attribut <code>src</code> relatif au nœeud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.</li>
-  </ul>
- </li>
- <li>Si l'élément est un élément <code><strong>a</strong></code>, <code><strong>area</strong></code> ou <strong><code>link</code> :</strong>
-  <ul>
-   <li>La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut <code>href</code> relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.</li>
-  </ul>
- </li>
- <li>Si l'élément est un élément <strong><code>object</code> :</strong>
-  <ul>
-   <li>La valeur est l'URL qui correspond à l'analyse de la valeur de l'attribut <code>data</code> relatif au nœud du document ou la chaîne vide s'il n'y pas de tel attribut ou que la recomposition de l'URL échoue.</li>
-  </ul>
- </li>
- <li>Si l'élément est un élément <strong><code>data</code> :</strong>
-  <ul>
-   <li>La valeur est la valeur l'attribut <code>value</code> s'il est présent ou la chaîne vide sinon.</li>
-  </ul>
- </li>
- <li>Si l'élément est un élément <strong><code>meter</code> :</strong>
-  <ul>
-   <li>La valeur est la valeur l'attribut <code>value</code> s'il est présent ou la chaîne vide sinon.
-    <ul>
-    </ul>
-   </li>
-  </ul>
- </li>
- <li>Si l'élément est un élément <strong><code>time</code> :</strong>
-  <ul>
-   <li>La valeur de l'élément est la valeur de l'attribut <strong><code>datetime</code></strong>.</li>
-  </ul>
- </li>
-</ul>
-
-<p>Sinon :</p>
-
-<ul>
- <li>La valeur de l'élément est le contenu textuel de l'élément HTML (<code>textContent</code>).</li>
-</ul>
-
-<p>Les éléments qui permettent d'utiliser des attributs URL pour des URL absolues sont : <code><strong>a</strong></code>, <code><strong>area</strong></code>, <code><strong>audio</strong></code>, <code><strong>embed</strong></code>, <code><strong>iframe</strong></code>, <code><strong>img</strong></code>, <code><strong>link</strong></code>, <code><strong>object</strong></code>, <code><strong>source</strong></code>, <code><strong>track</strong></code> et <strong><code>video</code></strong>.</p>
-
-<h3 id="Ordre_des_noms">Ordre des noms</h3>
-
-<p>L'ordre des noms n'a pas d'importance mais si une propriété possède plusieurs valeurs, l'ordre sera relatif pour cette propriété.</p>
-
-<h4 id="Exemples_équivalents">Exemples équivalents</h4>
-
-<pre class="brush: html">&lt;div itemscope&gt;
- &lt;p itemprop="a"&gt;1&lt;/p&gt;
- &lt;p itemprop="a"&gt;2&lt;/p&gt;
- &lt;p itemprop="b"&gt;test&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: html">&lt;div itemscope&gt;
- &lt;p itemprop="b"&gt;test&lt;/p&gt;
- &lt;p itemprop="a"&gt;1&lt;/p&gt;
- &lt;p itemprop="a"&gt;2&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: html">&lt;div itemscope&gt;
- &lt;p itemprop="a"&gt;1&lt;/p&gt;
- &lt;p itemprop="b"&gt;test&lt;/p&gt;
- &lt;p itemprop="a"&gt;2&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: html">&lt;div id="x"&gt;
- &lt;p itemprop="a"&gt;1&lt;/p&gt;
-&lt;/div&gt;
-&lt;div itemscope itemref="x"&gt;
- &lt;p itemprop="b"&gt;test&lt;/p&gt;
- &lt;p itemprop="a"&gt;2&lt;/p&gt;
-&lt;/div&gt;
-</pre>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
-
-<pre class="syntaxbox">itemprop = "name", value</pre>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML_2">HTML</h3>
-
-<p>Un exemple sur un livre qu'on décrit avec les différents attributs.</p>
-
-<pre class="brush: html">&lt;dl itemscope
+```html
+<div itemscope>
+ <p itemprop="a">1</p>
+ <p itemprop="b">test</p>
+ <p itemprop="a">2</p>
+</div>
+```
+
+```html
+<div id="x">
+ <p itemprop="a">1</p>
+</div>
+<div itemscope itemref="x">
+ <p itemprop="b">test</p>
+ <p itemprop="a">2</p>
+</div>
+```
+
+## Syntaxe
+
+### Syntaxe formelle
+
+    itemprop = "name", value
+
+## Exemples
+
+### HTML
+
+Un exemple sur un livre qu'on décrit avec les différents attributs.
+
+```html
+<dl itemscope
     itemtype="http://vocab.example.net/book"
-    itemid="urn:isbn:0-330-34032-8"&gt;
- &lt;dt&gt;Title &lt;dd itemprop="title"&gt;The Reality Dysfunction
- &lt;dt&gt;Author &lt;dd itemprop="author"&gt;Peter F. Hamilton
- &lt;dt&gt;Publication date
- &lt;dd&gt;
-  &lt;time itemprop="pubdate" datetime="1996-01-26"&gt;
+    itemid="urn:isbn:0-330-34032-8">
+ <dt>Title <dd itemprop="title">The Reality Dysfunction
+ <dt>Author <dd itemprop="author">Peter F. Hamilton
+ <dt>Publication date
+ <dd>
+  <time itemprop="pubdate" datetime="1996-01-26">
     26 January 1996
-  &lt;/time&gt;
-&lt;/dl&gt;
-</pre>
+  </time>
+</dl>
+```
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}}</td>
-   <td>{{Spec2('HTML Microdata')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                        | État                                 | Commentaires |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ |
+| {{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}}                                 | {{Spec2('HTML Microdata')}} |              |
+| {{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}} | {{Spec2('HTML WHATWG')}}     |              |
+
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("html.global_attributes.itemprop")}}
 
-<p>{{Compat("html.global_attributes.itemprop")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
+- Les autres attributs universels relatifs aux microdonnées :
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
- <li>Les autres attributs universels relatifs aux microdonnées :
-  <ul>
-   <li>{{htmlattrxref("itemid")}}</li>
-   <li>{{htmlattrxref("itemprop")}}</li>
-   <li>{{htmlattrxref("itemref")}}</li>
-   <li>{{htmlattrxref("itemscope")}}</li>
-   <li>{{htmlattrxref("itemtype")}}</li>
-  </ul>
- </li>
-</ul>
+  - {{htmlattrxref("itemid")}}
+  - {{htmlattrxref("itemprop")}}
+  - {{htmlattrxref("itemref")}}
+  - {{htmlattrxref("itemscope")}}
+  - {{htmlattrxref("itemtype")}}
diff --git a/files/fr/web/html/global_attributes/itemref/index.md b/files/fr/web/html/global_attributes/itemref/index.md
index 5942220cc7..acea015ebe 100644
--- a/files/fr/web/html/global_attributes/itemref/index.md
+++ b/files/fr/web/html/global_attributes/itemref/index.md
@@ -11,39 +11,40 @@ tags:
 translation_of: Web/HTML/Global_attributes/itemref
 original_slug: Web/HTML/Attributs_universels/itemref
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>itemref</strong></code> permet d'associer des propriétés à un objet via <code>itemscope</code> lorsque l'élement courant n'est pas un élément descendant. <code>itemref</code> fournit une liste d'identifiants d'éléments (à ne pas confondre avec <code>itemid</code>) dont des propriétés sont définies plus loin dans le document.</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`itemref`** permet d'associer des propriétés à un objet via `itemscope` lorsque l'élement courant n'est pas un élément descendant. `itemref` fournit une liste d'identifiants d'éléments (à ne pas confondre avec `itemid`) dont des propriétés sont définies plus loin dans le document.
 
-<p>L'attribut <code>itemref</code> peut uniquement être défini sur des éléments pour lesquels un attribut <code>itemscope</code> a été défini.</p>
+L'attribut `itemref` peut uniquement être défini sur des éléments pour lesquels un attribut `itemscope` a été défini.
 
-<div class="note">
-  <p><strong>Note :</strong> L'attribut <code>itemref</code> ne fait pas partie du modèle de données des micro-données. Il s'agit purement d'une construction syntaxique pour aider les auteurs à annoter une page où les données ne suivent pas une structure arborescente claire.</p>
-</div>
+> **Note :** L'attribut `itemref` ne fait pas partie du modèle de données des micro-données. Il s'agit purement d'une construction syntaxique pour aider les auteurs à annoter une page où les données ne suivent pas une structure arborescente claire.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
-<pre class="syntaxbox">itemref</pre>
+    itemref
 
-<h2 id="Exemple">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div itemscope id="amanda" itemref="a b"&gt;&lt;/div&gt;
-&lt;p id="a"&gt;Name: &lt;span itemprop="name"&gt;Amanda&lt;/span&gt; &lt;/p&gt;
-&lt;div id="b" itemprop="band" itemscope itemref="c"&gt;&lt;/div&gt;
-&lt;div id="c"&gt;
-    &lt;p&gt;Band: &lt;span itemprop="name"&gt;Jazz Band&lt;/span&gt; &lt;/p&gt;
-    &lt;p&gt;Size: &lt;span itemprop="size"&gt;12&lt;/span&gt; players&lt;/p&gt;
-&lt;/div&gt;</pre>
+```html
+<div itemscope id="amanda" itemref="a b"></div>
+<p id="a">Name: <span itemprop="name">Amanda</span> </p>
+<div id="b" itemprop="band" itemscope itemref="c"></div>
+<div id="c">
+    <p>Band: <span itemprop="name">Jazz Band</span> </p>
+    <p>Size: <span itemprop="size">12</span> players</p>
+</div>
+```
 
-<h3 id="Structure_de_données_correspondante">Structure de données correspondante</h3>
+### Structure de données correspondante
 
-<p><small>Au format <a href="https://json-ld.org/" rel="external">JSON-LD</a> :</small></p>
+Au format [JSON-LD](https://json-ld.org/) :
 
-<pre class="brush: json">{
+```json
+{
   "@id": "amanda",
   "name": "Amanda",
   "band": {
@@ -52,47 +53,26 @@ original_slug: Web/HTML/Attributs_universels/itemref
     "size": 12
   }
 }
-</pre>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}}</td>
-   <td>{{Spec2('HTML Microdata')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.global_attributes.itemref")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
- <li>Les autres attributs universels relatifs aux microdonnées :
-  <ul>
-   <li>{{htmlattrxref("itemid")}}</li>
-   <li>{{htmlattrxref("itemprop")}}</li>
-   <li>{{htmlattrxref("itemref")}}</li>
-   <li>{{htmlattrxref("itemscope")}}</li>
-   <li>{{htmlattrxref("itemtype")}}</li>
-  </ul>
- </li>
-</ul>
+```
+
+## Spécifications
+
+| Spécification                                                                                | État                                 | Commentaires |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ |
+| {{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}}                 | {{Spec2('HTML Microdata')}} |              |
+| {{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}} | {{Spec2('HTML WHATWG')}}     |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.global_attributes.itemref")}}
+
+## Voir aussi
+
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
+- Les autres attributs universels relatifs aux microdonnées :
+
+  - {{htmlattrxref("itemid")}}
+  - {{htmlattrxref("itemprop")}}
+  - {{htmlattrxref("itemref")}}
+  - {{htmlattrxref("itemscope")}}
+  - {{htmlattrxref("itemtype")}}
diff --git a/files/fr/web/html/global_attributes/itemscope/index.md b/files/fr/web/html/global_attributes/itemscope/index.md
index b09fa56d2b..a232429c6a 100644
--- a/files/fr/web/html/global_attributes/itemscope/index.md
+++ b/files/fr/web/html/global_attributes/itemscope/index.md
@@ -11,216 +11,198 @@ tags:
 translation_of: Web/HTML/Global_attributes/itemscope
 original_slug: Web/HTML/Attributs_universels/itemscope
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
-
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemscope</code> </strong>fonctionne généralement avec l'attribut <code>itemtype</code> afin d' indiquer qu'un bloc HTML contient un objet donné. <code>itemscope</code> crée l'objet et définit la portée de l'<code>itemtype</code> associé. Il est possible d'associer un attribut <code>itemscope</code> à n'importe quel élément HTML.</p>
-
-<h3 id="Les_identifiants_rattachés_à_itemscope">Les identifiants rattachés à <code>itemscope</code></h3>
-
-<p>Un élément qui possède un attribut <code>itemscope</code> permet de définir un nouvel élément qui sera un groupe de paires de noms/valeurs. Les éléments qui ont un attribut <code>itemscope</code> et un attribut <code>itemtype</code> peuvent également définir un attribut <code>id</code> (à ne pas confondre avec <code>itemid)</code> pour identifier de façon unique l'élément sur le Web.</p>
-
-<h2 id="Syntaxe">Syntaxe</h2>
-
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
-
-<pre class="syntaxbox">itemscope</pre>
-
-<h2 id="Exemple">Exemple</h2>
-
-<p>Dans cet exemple, on a trois attributs <code>itemscopes</code>. Ces trois <code>itemscopes</code> définissent les portées respectives des <code>itemtypes</code> correspondants qui sont : Recipe, AggregateRating et NutritionInformation.</p>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;div itemscope itemtype="https://schema.org/Recipe"&gt;
-&lt;h2 itemprop="name"&gt;Grandma's Holiday Apple Pie&lt;/h2&gt;
-&lt;img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/&gt;
-&lt;p&gt;By &lt;span itemprop="author" itemscope itemtype="https://schema.org/Person"&gt;
-&lt;span itemprop="name"&gt;Carol Smith&lt;/p&gt;&lt;/span&gt;
-&lt;/span&gt;
-&lt;p&gt;Published: &lt;time datetime="2009-11-05" itemprop="datePublished"&gt;
-November 5, 2009&lt;/p&gt;&lt;/time&gt;
-&lt;span itemprop="description"&gt;This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.&lt;br&gt;&lt;/span&gt;
- &lt;span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"&gt;
- &lt;span itemprop="ratingValue"&gt;4.0&lt;/span&gt; stars based on &lt;span itemprop="reviewCount"&gt;35&lt;/span&gt; reviews&lt;br&gt;&lt;/span&gt;
-Prep time: &lt;time datetime="PT30M" itemprop="prepTime"&gt;30 min&lt;br&gt;&lt;/time&gt;
- Cook time: &lt;time datetime="PT1H" itemprop="cookTime"&gt;1 hour&lt;br&gt;&lt;/time&gt;
- Total time: &lt;time datetime="PT1H30M" itemprop="totalTime"&gt;1 hour 30 min&lt;br&gt;&lt;/time&gt;
- Yield: &lt;span itemprop="recipeYield"&gt;1 9" pie (8 servings)&lt;br&gt;&lt;/span&gt;
- &lt;span itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation"&gt;
- Serving size: &lt;span itemprop="servingSize"&gt;1 medium slice&lt;br&gt;&lt;/span&gt;
- Calories per serving: &lt;span itemprop="calories"&gt;250 cal&lt;br&gt;&lt;/span&gt;
- Fat per serving: &lt;span itemprop="fatContent"&gt;12 g&lt;br&gt;&lt;/span&gt;
-&lt;/span&gt;
-&lt;p&gt;Ingredients:&lt;br&gt;
-  &lt;span itemprop="recipeIngredient"&gt;Thinly-sliced apples: 6 cups&lt;br&gt;&lt;/span&gt;
-  &lt;span itemprop="recipeIngredient"&gt;White sugar: 3/4 cup&lt;br&gt;&lt;/span&gt;
- ... &lt;/p&gt;
-
-Directions: &lt;br&gt;
-  &lt;div itemprop="recipeInstructions"&gt;
-    1. Cut and peel apples&lt;br&gt;
-    2. Mix sugar and cinnamon. Use additional sugar for tart apples. &lt;br&gt;
+{{HTMLSidebar("Global_attributes")}}
+
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`itemscope` **fonctionne généralement avec l'attribut `itemtype` afin d' indiquer qu'un bloc HTML contient un objet donné. `itemscope` crée l'objet et définit la portée de l'`itemtype` associé. Il est possible d'associer un attribut `itemscope` à n'importe quel élément HTML.
+
+### Les identifiants rattachés à `itemscope`
+
+Un élément qui possède un attribut `itemscope` permet de définir un nouvel élément qui sera un groupe de paires de noms/valeurs. Les éléments qui ont un attribut `itemscope` et un attribut `itemtype` peuvent également définir un attribut `id` (à ne pas confondre avec `itemid)` pour identifier de façon unique l'élément sur le Web.
+
+## Syntaxe
+
+### Syntaxe formelle
+
+    itemscope
+
+## Exemple
+
+Dans cet exemple, on a trois attributs `itemscopes`. Ces trois `itemscopes` définissent les portées respectives des `itemtypes` correspondants qui sont : Recipe, AggregateRating et NutritionInformation.
+
+### HTML
+
+```html
+<div itemscope itemtype="https://schema.org/Recipe">
+<h2 itemprop="name">Grandma's Holiday Apple Pie</h2>
+<img itemprop="image" src="https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg" width="50" height="50"/>
+<p>By <span itemprop="author" itemscope itemtype="https://schema.org/Person">
+<span itemprop="name">Carol Smith</p></span>
+</span>
+<p>Published: <time datetime="2009-11-05" itemprop="datePublished">
+November 5, 2009</p></time>
+<span itemprop="description">This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.<br></span>
+ <span itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
+ <span itemprop="ratingValue">4.0</span> stars based on <span itemprop="reviewCount">35</span> reviews<br></span>
+Prep time: <time datetime="PT30M" itemprop="prepTime">30 min<br></time>
+ Cook time: <time datetime="PT1H" itemprop="cookTime">1 hour<br></time>
+ Total time: <time datetime="PT1H30M" itemprop="totalTime">1 hour 30 min<br></time>
+ Yield: <span itemprop="recipeYield">1 9" pie (8 servings)<br></span>
+ <span itemprop="nutrition" itemscope itemtype="https://schema.org/NutritionInformation">
+ Serving size: <span itemprop="servingSize">1 medium slice<br></span>
+ Calories per serving: <span itemprop="calories">250 cal<br></span>
+ Fat per serving: <span itemprop="fatContent">12 g<br></span>
+</span>
+<p>Ingredients:<br>
+  <span itemprop="recipeIngredient">Thinly-sliced apples: 6 cups<br></span>
+  <span itemprop="recipeIngredient">White sugar: 3/4 cup<br></span>
+ ... </p>
+
+Directions: <br>
+  <div itemprop="recipeInstructions">
+    1. Cut and peel apples<br>
+    2. Mix sugar and cinnamon. Use additional sugar for tart apples. <br>
     ...
-  &lt;/div&gt;
-&lt;/div&gt; </pre>
+  </div>
+</div>
+```
 
-<h3 id="Structure_des_données">Structure des données</h3>
+### Structure des données
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td colspan="1" rowspan="14">itemscope</td>
-   <td>itemtype</td>
-   <td colspan="2" rowspan="1">Recipe</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>name:</td>
-   <td>Grandma's Holiday Apple Pie</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>image:</td>
-   <td>
-    https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg
-   </td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>datePublished:</td>
-   <td>2009-11-05</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>description:</td>
-   <td>This is my grandmother's apple pie recipe. I like to add a dash of nutmeg.</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>prepTime:</td>
-   <td>PT30M</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>cookTime:</td>
-   <td>PT1H</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>totalTime:</td>
-   <td>PT1H30M</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>recipeYield:</td>
-   <td>1 9" pie (8 servings)</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>recipeIngredient:</td>
-   <td>Thinly-sliced apples: 6 cups</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>recipeIngredient:</td>
-   <td>White sugar: 3/4 cup</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>recipeInstructions:</td>
-   <td>1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar for tart apples .
-   </td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td colspan="2" rowspan="1">author [Person]:</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>name:</td>
-   <td>Carol Smith</td>
-  </tr>
-  <tr>
-   <td colspan="1" rowspan="3">itemscope</td>
-   <td>itemprop[itemtype]</td>
-   <td colspan="2" rowspan="1">aggregateRating [AggregateRating]:</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>ratingValue:</td>
-   <td>4.0</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>reviewCount:</td>
-   <td>35</td>
-  </tr>
-  <tr>
-   <td colspan="1" rowspan="4">itemscope</td>
-   <td>itemprop[itemtype]</td>
-   <td colspan="2" rowspan="1">nutrition [NutritionInformation]:</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>servingSize:</td>
-   <td>1 medium slice</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>calories:</td>
-   <td>250 cal</td>
-  </tr>
-  <tr>
-   <td>itemprop</td>
-   <td>fatContent:</td>
-   <td>12 g</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td colspan="1" rowspan="14">itemscope</td>
+      <td>itemtype</td>
+      <td colspan="2" rowspan="1">Recipe</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>name:</td>
+      <td>Grandma's Holiday Apple Pie</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>image:</td>
+      <td>https://c1.staticflickr.com/1/30/42759561_8631e2f905_n.jpg</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>datePublished:</td>
+      <td>2009-11-05</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>description:</td>
+      <td>
+        This is my grandmother's apple pie recipe. I like to add a dash of
+        nutmeg.
+      </td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>prepTime:</td>
+      <td>PT30M</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>cookTime:</td>
+      <td>PT1H</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>totalTime:</td>
+      <td>PT1H30M</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>recipeYield:</td>
+      <td>1 9" pie (8 servings)</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>recipeIngredient:</td>
+      <td>Thinly-sliced apples: 6 cups</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>recipeIngredient:</td>
+      <td>White sugar: 3/4 cup</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>recipeInstructions:</td>
+      <td>
+        1. Cut and peel apples 2. Mix sugar and cinnamon. Use additional sugar
+        for tart apples .
+      </td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td colspan="2" rowspan="1">author [Person]:</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>name:</td>
+      <td>Carol Smith</td>
+    </tr>
+    <tr>
+      <td colspan="1" rowspan="3">itemscope</td>
+      <td>itemprop[itemtype]</td>
+      <td colspan="2" rowspan="1">aggregateRating [AggregateRating]:</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>ratingValue:</td>
+      <td>4.0</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>reviewCount:</td>
+      <td>35</td>
+    </tr>
+    <tr>
+      <td colspan="1" rowspan="4">itemscope</td>
+      <td>itemprop[itemtype]</td>
+      <td colspan="2" rowspan="1">nutrition [NutritionInformation]:</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>servingSize:</td>
+      <td>1 medium slice</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>calories:</td>
+      <td>250 cal</td>
+    </tr>
+    <tr>
+      <td>itemprop</td>
+      <td>fatContent:</td>
+      <td>12 g</td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-<p><strong>Note :</strong> Pour extraire des micro-données d'un document HTML, vous pouvez utiliser <a href="https://developers.google.com/structured-data/testing-tool/">l'outil d'extraction de Google pour les micro-données.</a> Vous pouvez par exemple utiliser le document HTML précédent.</p>
-</div>
+> **Note :** Pour extraire des micro-données d'un document HTML, vous pouvez utiliser [l'outil d'extraction de Google pour les micro-données.](https://developers.google.com/structured-data/testing-tool/) Vous pouvez par exemple utiliser le document HTML précédent.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}</td>
-   <td>{{Spec2('HTML Microdata')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                 | Commentaires |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------ |
+| {{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}}                 | {{Spec2('HTML Microdata')}} |              |
+| {{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}} | {{Spec2('HTML WHATWG')}}     |              |
+
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("html.global_attributes.itemscope")}}
 
-<p>{{Compat("html.global_attributes.itemscope")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
+- Les autres attributs universels relatifs aux microdonnées :
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
- <li>Les autres attributs universels relatifs aux microdonnées :
-  <ul>
-   <li>{{htmlattrxref("itemid")}}</li>
-   <li>{{htmlattrxref("itemprop")}}</li>
-   <li>{{htmlattrxref("itemref")}}</li>
-   <li>{{htmlattrxref("itemscope")}}</li>
-   <li>{{htmlattrxref("itemtype")}}</li>
-  </ul>
- </li>
-</ul>
+  - {{htmlattrxref("itemid")}}
+  - {{htmlattrxref("itemprop")}}
+  - {{htmlattrxref("itemref")}}
+  - {{htmlattrxref("itemscope")}}
+  - {{htmlattrxref("itemtype")}}
diff --git a/files/fr/web/html/global_attributes/itemtype/index.md b/files/fr/web/html/global_attributes/itemtype/index.md
index 92063e83eb..76416d82d1 100644
--- a/files/fr/web/html/global_attributes/itemtype/index.md
+++ b/files/fr/web/html/global_attributes/itemtype/index.md
@@ -11,102 +11,81 @@ tags:
 translation_of: Web/HTML/Global_attributes/itemtype
 original_slug: Web/HTML/Attributs_universels/itemtype
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <strong><code>itemtype</code> </strong>définit l'URL du vocabulaire qui sera utilisé pour définir les propriétés des objets dans la structure de données. <code>itemscope</code> est utilisé afin de définir la portée, dans le document, où le vocabulaire défini sera actif.</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`itemtype` **définit l'URL du vocabulaire qui sera utilisé pour définir les propriétés des objets dans la structure de données. `itemscope` est utilisé afin de définir la portée, dans le document, où le vocabulaire défini sera actif.
 
-<p>L'attribut <code>itemtype</code> doit avoir une valeur qui est un ensemble non ordonné de fragments uniques, sensible à la casse. Chaque fragment doit être une URL absolue valide et tous les fragments participent à la définition du même vocabulaire. La valeur de l'attribut doit avoir au moins un fragment.</p>
+L'attribut `itemtype` doit avoir une valeur qui est un ensemble non ordonné de fragments uniques, sensible à la casse. Chaque fragment doit être une URL absolue valide et tous les fragments participent à la définition du même vocabulaire. La valeur de l'attribut doit avoir au moins un fragment.
 
-<p>Les types d'objet doivent tous être définis dans des spécifications de vocabulaire (comme <a href="http://schema.org/">schema.org</a>) et doivent tous être définis avec le même vocabulaire.</p>
+Les types d'objet doivent tous être définis dans des spécifications de vocabulaire (comme [schema.org](http://schema.org/)) et doivent tous être définis avec le même vocabulaire.
 
-<p>L'attribut <code>itemtype</code> peut uniquement être défini pour les éléments qui ont un attribut <code>itemscope</code>.</p>
+L'attribut `itemtype` peut uniquement être défini pour les éléments qui ont un attribut `itemscope`.
 
-<p>Google et les autres moteurs de recherche participent au vocabulaire défini par <a href="http://schema.org/">schema.org</a> pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple <code><a href="http://schema.org/MusicEvent">MusicEvent</a></code> indique un événement musical dont les propriétés <code><a href="http://schema.org/startDate">startDate</a></code> et <code><a href="http://schema.org/location">location</a></code> utilisées pour définir les détails du concert. Dans ce cas, l'URL <code><a href="http://schema.org/MusicEvent">http://schema.org/MusicEvent</a></code> sera l'URL utilisée pour l'attribut <code>itemtype</code> et les propriétés <code>startDate</code> et <code>location</code> seront les propriétés utilisées, définies par <code><a href="http://schema.org/MusicEvent">http://schema.org/MusicEvent</a></code>.</p>
+Google et les autres moteurs de recherche participent au vocabulaire défini par [schema.org](http://schema.org/) pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple [`MusicEvent`](http://schema.org/MusicEvent) indique un événement musical dont les propriétés [`startDate`](http://schema.org/startDate) et [`location`](http://schema.org/location) utilisées pour définir les détails du concert. Dans ce cas, l'URL [`http://schema.org/MusicEvent`](http://schema.org/MusicEvent) sera l'URL utilisée pour l'attribut `itemtype` et les propriétés `startDate` et `location` seront les propriétés utilisées, définies par [`http://schema.org/MusicEvent`](http://schema.org/MusicEvent).
 
-<div class="note">
-<p><strong>Note :</strong> Vous pourrez trouver plus d'informations sur l'attribut itemtype sur <a href="http://schema.org/Thing">http://schema.org/Thing</a></p>
-</div>
+> **Note :** Vous pourrez trouver plus d'informations sur l'attribut itemtype sur <http://schema.org/Thing>
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
 
-<pre class="syntaxbox">itemtype = URL</pre>
+    itemtype = URL
 
-<h3 id="Exemple_simple">Exemple simple</h3>
+### Exemple simple
 
-<h4 id="HTML">HTML</h4>
+#### HTML
 
-<pre class="brush: html">&lt;div itemscope itemtype="http://schema.org/Product"&gt;
-  &lt;span itemprop="brand"&gt;ACME&lt;/span&gt;
-  &lt;span itemprop="name"&gt;Executive Anvil&lt;/span&gt;
-&lt;/div&gt;</pre>
+```html
+<div itemscope itemtype="http://schema.org/Product">
+  <span itemprop="brand">ACME</span>
+  <span itemprop="name">Executive Anvil</span>
+</div>
+```
 
-<h4 id="Structure_de_données">Structure de données</h4>
+#### Structure de données
 
 <table class="standard-table">
- <tbody>
-  <tr>
-   <td rowspan="4"><code>itemscope</code></td>
-   <td><code>itemtype</code></td>
-   <td colspan="2" rowspan="1">http://schema.org/Product</td>
-  </tr>
-  <tr>
-   <td><code>itemprop</code></td>
-   <td><code>name</code></td>
-   <td>Executive Anvil</td>
-  </tr>
-  <tr>
-   <td><code>itemprop</code></td>
-   <td colspan="2" rowspan="1"><code>brand [Thing]</code></td>
-  </tr>
-  <tr>
-   <td><code>itemprop</code></td>
-   <td><code>name</code></td>
-   <td>ACME</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <td rowspan="4"><code>itemscope</code></td>
+      <td><code>itemtype</code></td>
+      <td colspan="2" rowspan="1">http://schema.org/Product</td>
+    </tr>
+    <tr>
+      <td><code>itemprop</code></td>
+      <td><code>name</code></td>
+      <td>Executive Anvil</td>
+    </tr>
+    <tr>
+      <td><code>itemprop</code></td>
+      <td colspan="2" rowspan="1"><code>brand [Thing]</code></td>
+    </tr>
+    <tr>
+      <td><code>itemprop</code></td>
+      <td><code>name</code></td>
+      <td>ACME</td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}}</td>
-   <td>{{Spec2('HTML Microdata')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                                 | Commentaires |
+| ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------ |
+| {{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}}                 | {{Spec2('HTML Microdata')}} |              |
+| {{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}} | {{Spec2('HTML WHATWG')}}     |              |
+
+## Compatibilité des navigateurs
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+{{Compat("html.global_attributes.itemtype")}}
 
-<p>{{Compat("html.global_attributes.itemtype")}}</p>
+## Voir aussi
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
+- Les autres attributs universels relatifs aux microdonnées :
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
- <li>Les autres attributs universels relatifs aux microdonnées :
-  <ul>
-   <li>{{htmlattrxref("itemid")}}</li>
-   <li>{{htmlattrxref("itemprop")}}</li>
-   <li>{{htmlattrxref("itemref")}}</li>
-   <li>{{htmlattrxref("itemscope")}}</li>
-   <li>{{htmlattrxref("itemtype")}}</li>
-  </ul>
- </li>
-</ul>
+  - {{htmlattrxref("itemid")}}
+  - {{htmlattrxref("itemprop")}}
+  - {{htmlattrxref("itemref")}}
+  - {{htmlattrxref("itemscope")}}
+  - {{htmlattrxref("itemtype")}}
diff --git a/files/fr/web/html/global_attributes/lang/index.md b/files/fr/web/html/global_attributes/lang/index.md
index 8bb1022cd3..1b3bfd1b3d 100644
--- a/files/fr/web/html/global_attributes/lang/index.md
+++ b/files/fr/web/html/global_attributes/lang/index.md
@@ -9,75 +9,46 @@ tags:
 translation_of: Web/HTML/Global_attributes/lang
 original_slug: Web/HTML/Attributs_universels/lang
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>lang</strong></code> permet de définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits. Pour les éléments éditables, c'est la langue dans laquelle devrait écrire l'utilisateur. La valeur de cet attribut est une « balise de langue » dont le format est défini par le document de l'IETF : <a class="external" href="https://www.ietf.org/rfc/bcp/bcp47.txt"><em>Les balises d'identification de langues (BCP47)</em></a>. Si cette balise est la chaîne vide, la langue sera définie comme <em>inconnue</em>. Si la balise de langue n'est pas valide selon BCP47, la langue sera définie comme <em>invalide</em>.</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`lang`** permet de définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits. Pour les éléments éditables, c'est la langue dans laquelle devrait écrire l'utilisateur. La valeur de cet attribut est une « balise de langue » dont le format est défini par le document de l'IETF : [_Les balises d'identification de langues (BCP47)_](https://www.ietf.org/rfc/bcp/bcp47.txt). Si cette balise est la chaîne vide, la langue sera définie comme _inconnue_. Si la balise de langue n'est pas valide selon BCP47, la langue sera définie comme _invalide_.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}}
 
-<p>Même lorsque l'attribut <code><strong>lang</strong></code> est défini, il peut ne pas être pris en compte. En effet, l'attribut {{htmlattrxref("xml:lang")}} aura la priorité sur celui-ci.</p>
+Même lorsque l'attribut **`lang`** est défini, il peut ne pas être pris en compte. En effet, l'attribut {{htmlattrxref("xml:lang")}} aura la priorité sur celui-ci.
 
-<p>Pour la pseudo-classe CSS {{cssxref(":lang")}}, deux noms de langues invalides sont considérés différents si les noms utilisés sont différents. Par exemple, alors que <code>:lang(fr)</code> permet l'appariement avec les déclarations (valides) <code>lang="fr-BE"</code> ou <code>lang="fr-CH"</code>, un encodage (invalide) comme <code>:lang(xyzzy)</code> ne permet pas l'appariement avec une déclaration (invalide) comme <code>lang="xyzzy-Zorp!"</code>.</p>
+Pour la pseudo-classe CSS {{cssxref(":lang")}}, deux noms de langues invalides sont considérés différents si les noms utilisés sont différents. Par exemple, alors que `:lang(fr)` permet l'appariement avec les déclarations (valides) `lang="fr-BE"` ou `lang="fr-CH"`, un encodage (invalide) comme `:lang(xyzzy)` ne permet pas l'appariement avec une déclaration (invalide) comme `lang="xyzzy-Zorp!"`.
 
-<h2 id="Syntaxe_des_balises_de_langue">Syntaxe des balises de langue</h2>
+## Syntaxe des balises de langue
 
-<p>La syntaxe complète décrite par la BCP 47 est suffisamment développée pour désigner certains dialectes spécifiques. Toutefois, dans la plupart des cas, l'utilisation sera assez simple.</p>
+La syntaxe complète décrite par la BCP 47 est suffisamment développée pour désigner certains dialectes spécifiques. Toutefois, dans la plupart des cas, l'utilisation sera assez simple.
 
-<p>Voici un aperçu de la syntaxe simplifiée. Une balise de langue est composées de trois « sous-balises » séparées par des tirets. Chacune de ces sous-balises indique une certaine propriété de la langue. Les trois sous-balises communément utilisées sont :</p>
+Voici un aperçu de la syntaxe simplifiée. Une balise de langue est composées de trois « sous-balises » séparées par des tirets. Chacune de ces sous-balises indique une certaine propriété de la langue. Les trois sous-balises communément utilisées sont :
 
-<dl>
- <dt>Sous-balise de langue</dt>
- <dd>Ce fragment est obligatoire. C'est un code sur deux ou trois caractères (généralement en minuscules) qui définit la langue de base. Pour l'anglais, cette sous-balise est <code>en</code> et pour le Badeshi, cette balise est <code>bdz</code>.</dd>
- <dt>Sous-balise de script</dt>
- <dd>Ce fragment est optionnel. Il décrit le système d'écriture utilisé par la langue. Cette sous-balise contient toujours quatre caractères. Pour le braille français, la balise complète sera donc <code>fr-Brail</code> ; pour le japonais écrit avec l'alphabet Katakana, le code sera <code>ja-Kana</code>. Si la langue est utilisée avec le script le plus fréquemment utilisé (par exemple de l'espagnol écrit avec l'alphabet latin), il n'est pas nécessaire d'indiquer cette sous-balise.</dd>
- <dt>Sous-balise régionale</dt>
- <dd>Ce fragment est optionnel. Il définit un dialecte de la langue de base pour une région donnée. Cette sous-balise est composée de deux lettres en majuscules pour indiquer un pays ou de trois chiffres pour une indiquer une région qui n'est pas un pays. Ainsi, <code>es-ES</code> représente l'espagnol parlé en Espagne et <code>es-013</code> représente l'espagnol parlé en Amérique centrale ; l'espagnol international serait simplement <code>es</code>.</dd>
-</dl>
+- Sous-balise de langue
+  - : Ce fragment est obligatoire. C'est un code sur deux ou trois caractères (généralement en minuscules) qui définit la langue de base. Pour l'anglais, cette sous-balise est `en` et pour le Badeshi, cette balise est `bdz`.
+- Sous-balise de script
+  - : Ce fragment est optionnel. Il décrit le système d'écriture utilisé par la langue. Cette sous-balise contient toujours quatre caractères. Pour le braille français, la balise complète sera donc `fr-Brail` ; pour le japonais écrit avec l'alphabet Katakana, le code sera `ja-Kana`. Si la langue est utilisée avec le script le plus fréquemment utilisé (par exemple de l'espagnol écrit avec l'alphabet latin), il n'est pas nécessaire d'indiquer cette sous-balise.
+- Sous-balise régionale
+  - : Ce fragment est optionnel. Il définit un dialecte de la langue de base pour une région donnée. Cette sous-balise est composée de deux lettres en majuscules pour indiquer un pays ou de trois chiffres pour une indiquer une région qui n'est pas un pays. Ainsi, `es-ES` représente l'espagnol parlé en Espagne et `es-013` représente l'espagnol parlé en Amérique centrale ; l'espagnol international serait simplement `es`.
 
-<p>La sous-balise de script doit précéder la sous-balise régionale si les deux sont présentes. Voici un exemple avec les trois fragments : <code>ru-Cyrl-BY</code> qui correspond au russe, écrit avec l'alphabet cyrillique, tel que parlé en Biélorussie.</p>
+La sous-balise de script doit précéder la sous-balise régionale si les deux sont présentes. Voici un exemple avec les trois fragments : `ru-Cyrl-BY` qui correspond au russe, écrit avec l'alphabet cyrillique, tel que parlé en Biélorussie.
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "dom.html#the-lang-and-xmllang-attributes", "lang")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "dom.html#the-lang-and-xmllang-attributes", "lang")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}. Définition du comportement de l'attribut <strong>xml:lang</strong> et de l'algorithme à utiliser pour déterminer la langue utilisée. Cet attribut devient également un attribut global à part entière.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Attribut supporté pour tous les éléments {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                                | État                             | Commentaires                                                                                                                                                                                                                                                                                                                                                      |
+| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "dom.html#the-lang-and-xml:lang-attributes", "lang")}} | {{Spec2('HTML WHATWG')}} | Aucun changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}                                                                                                                                                                                                                                                                                  |
+| {{SpecName('HTML5.1', "dom.html#the-lang-and-xmllang-attributes", "lang")}}         | {{Spec2('HTML5.1')}}     | Dérivée de {{SpecName('HTML WHATWG')}}, aucun changement de {{SpecName('HTML5 W3C')}}                                                                                                                                                                                                                                                             |
+| {{SpecName('HTML5 W3C', "dom.html#the-lang-and-xmllang-attributes", "lang")}}     | {{Spec2('HTML5 W3C')}}     | Dérivée de {{SpecName('HTML WHATWG')}}. Définition du comportement de l'attribut **xml:lang** et de l'algorithme à utiliser pour déterminer la langue utilisée. Cet attribut devient également un attribut global à part entière.                                                                                                                        |
+| {{SpecName('HTML4.01', 'struct/dirlang.html#h-8.1', 'lang')}}                             | {{Spec2('HTML4.01')}}     | Attribut supporté pour tous les éléments {{HTMLElement("applet")}}, {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("br")}}, {{HTMLElement("frame")}}, {{HTMLElement("frameset")}}, {{HTMLElement("iframe")}}, {{HTMLElement("param")}}, et {{HTMLElement("script")}}. |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.global_attributes.lang")}}</p>
+{{Compat("html.global_attributes.lang")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
- <li>La pseudo-classe CSS {{cssxref(":lang")}}</li>
- <li>L'en-tête HTTP {{HTTPHeader("Content-Language")}}</li>
-</ul>
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
+- La pseudo-classe CSS {{cssxref(":lang")}}
+- L'en-tête HTTP {{HTTPHeader("Content-Language")}}
diff --git a/files/fr/web/html/global_attributes/part/index.md b/files/fr/web/html/global_attributes/part/index.md
index 649ae677ec..ceb706a15b 100644
--- a/files/fr/web/html/global_attributes/part/index.md
+++ b/files/fr/web/html/global_attributes/part/index.md
@@ -1,25 +1,23 @@
 ---
 title: part
 slug: Web/HTML/Global_attributes/part
+translation_of: Web/HTML/Global_attributes/part
 browser-compat: html.global_attributes.part
-translation_of: 'Web/HTML/Global_attributes/part'
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p><a href="/fr/docs/Web/HTML/Global_attributes">L'attribut universel</a> <strong><code>part</code></strong> contient une liste des parties du nom de l'élément, séparées par des espaces. Les parties du nom permettent de sélectionner et de mettre en forme en CSS des parties spécifiques du <i lang="en">DOM</i> dans l'arbre fantôme avec le pseudo-élément {{CSSxRef("::part")}}.</p>
+[L'attribut universel](/fr/docs/Web/HTML/Global_attributes) **`part`** contient une liste des parties du nom de l'élément, séparées par des espaces. Les parties du nom permettent de sélectionner et de mettre en forme en CSS des parties spécifiques du <i lang="en">DOM</i> dans l'arbre fantôme avec le pseudo-élément {{CSSxRef("::part")}}.
 
-<p>Consultez notre <a href="https://mdn.github.io/web-components-examples/shadow-part/">exemple d'utilisation des parties fantômes du DOM</a>.</p>
+Consultez notre [exemple d'utilisation des parties fantômes du DOM](https://mdn.github.io/web-components-examples/shadow-part/).
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="see_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li>Liste de tous les <a href="/fr/docs/Web/HTML/Global_attributes">attributs universels</a>.</li>
-</ul>
+- Liste de tous les [attributs universels](/fr/docs/Web/HTML/Global_attributes).
diff --git a/files/fr/web/html/global_attributes/slot/index.md b/files/fr/web/html/global_attributes/slot/index.md
index 9e86b06f3d..94dda62360 100644
--- a/files/fr/web/html/global_attributes/slot/index.md
+++ b/files/fr/web/html/global_attributes/slot/index.md
@@ -9,40 +9,23 @@ tags:
 translation_of: Web/HTML/Global_attributes/slot
 original_slug: Web/HTML/Attributs_universels/slot
 ---
-<div>{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}</div>
-
-<p>L'attribut HTML universel <code><strong>slot</strong></code> permet d'affecter un créneau d'un <em><a href="/fr/docs/Web/Web_Components/Shadow_DOM">shadow DOM</a></em> à un élément. Un élément avec un attribut <code>slot</code> est affecté au créneau créé par l'élément {{HTMLElement("slot")}} dont la valeur de l'attribut {{htmlattrxref("name", "slot")}} correspond à celle de l'attribut <code>slot</code>.</p>
-
-<p>Pour des exemples d'application, consulter le guide <a href="/fr/docs/Web/Web_Components/Using_templates_and_slots">Utiliser les modèles (<em>templates</em>) et les emplacements (<em>slots</em>)</a>.</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td> </td>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td> </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.global_attributes.slot")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les autres attributs universels</a></li>
-</ul>
+{{HTMLSidebar("Global_attributes")}}{{SeeCompatTable}}
+
+L'attribut HTML universel **`slot`** permet d'affecter un créneau d'un _[shadow DOM](/fr/docs/Web/Web_Components/Shadow_DOM)_ à un élément. Un élément avec un attribut `slot` est affecté au créneau créé par l'élément {{HTMLElement("slot")}} dont la valeur de l'attribut {{htmlattrxref("name", "slot")}} correspond à celle de l'attribut `slot`.
+
+Pour des exemples d'application, consulter le guide [Utiliser les modèles (_templates_) et les emplacements (_slots_)](/fr/docs/Web/Web_Components/Using_templates_and_slots).
+
+## Spécifications
+
+| Spécification                                                                            | État                             | Commentaires |
+| ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ |
+| {{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}} | {{Spec2('HTML WHATWG')}} |              |
+| {{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}} | {{Spec2('DOM WHATWG')}} |              |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.global_attributes.slot")}}
+
+## Voir aussi
+
+- [Les autres attributs universels](/fr/docs/Web/HTML/Attributs_universels)
diff --git a/files/fr/web/html/global_attributes/spellcheck/index.md b/files/fr/web/html/global_attributes/spellcheck/index.md
index b15ac3d517..a68478d1be 100644
--- a/files/fr/web/html/global_attributes/spellcheck/index.md
+++ b/files/fr/web/html/global_attributes/spellcheck/index.md
@@ -9,142 +9,139 @@ tags:
 translation_of: Web/HTML/Global_attributes/spellcheck
 original_slug: Web/HTML/Attributs_universels/spellcheck
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'attribut universel <code><strong>spellcheck</strong></code> est un attribut à valeur contrainte qui définit si l'orthographe du contenu de l'élément doit être vérifiée.</p>
+L'attribut universel **`spellcheck`** est un attribut à valeur contrainte qui définit si l'orthographe du contenu de l'élément doit être vérifiée.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/attribute-spellcheck.html","tabbed-shorter")}}
 
-<p>Les valeurs autorisées pour cet attribut sont :</p>
+Les valeurs autorisées pour cet attribut sont :
 
-<ul>
- <li><code>true</code> : cette valeur indique que, si possible, l'orthographe de l'élément doit être vérifiée avec le correcteur orthographique.</li>
- <li><code>false</code> : cette valeur indique que l'orthographe de l'élément ne doit pas être vérifié.</li>
-</ul>
+- `true` : cette valeur indique que, si possible, l'orthographe de l'élément doit être vérifiée avec le correcteur orthographique.
+- `false` : cette valeur indique que l'orthographe de l'élément ne doit pas être vérifié.
 
-<p>La valeur par défaut de l'attribut (utilisée si elle n'est pas définie explicitement) sera fonction du navigateur et du type d'élément. Cette valeur par défaut peut également être héritée (autrement dit, la valeur utilisée pour l'élément courant sera la valeur explicite définie pour son plus proche ancêtre dans l'arbre des éléments).</p>
+La valeur par défaut de l'attribut (utilisée si elle n'est pas définie explicitement) sera fonction du navigateur et du type d'élément. Cette valeur par défaut peut également être héritée (autrement dit, la valeur utilisée pour l'élément courant sera la valeur explicite définie pour son plus proche ancêtre dans l'arbre des éléments).
 
-<p>Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser explicitement les valeurs <code>true</code> ou <code>false</code>. Ainsi :</p>
+Cet attribut est un attribut à valeur contrainte, ce n'est pas un attribut booléen. Il faut donc utiliser explicitement les valeurs `true` ou `false`. Ainsi :
 
-<pre class="example-bad brush: html">&lt;label spellcheck&gt;Label exemple&lt;/label&gt;</pre>
+```html example-bad
+<label spellcheck>Label exemple</label>
+```
 
-<p>sera invalide, la formulation correcte étant :</p>
+sera invalide, la formulation correcte étant :
 
-<pre class="example-good brush: html">&lt;label spellcheck="true"&gt;Label exemple&lt;/label&gt;</pre>
+```html example-good
+<label spellcheck="true">Label exemple</label>
+```
 
-<p>Cet attribut n'est qu'une indication à destination du navigateur : il n'est pas obligatoire qu'un navigateur puisse vérifier l'orthographe. Les éléments non-éditables ne sont généralement pas vérifiés, même lorsque <code><strong>spellcheck</strong></code> vaut <code>true</code> et que le navigateur possède une fonctionnalité de vérification orthographique.</p>
+Cet attribut n'est qu'une indication à destination du navigateur : il n'est pas obligatoire qu'un navigateur puisse vérifier l'orthographe. Les éléments non-éditables ne sont généralement pas vérifiés, même lorsque **`spellcheck`** vaut `true` et que le navigateur possède une fonctionnalité de vérification orthographique.
 
-<p>La valeur par défaut sera différente selon l'élément et le navigateur :</p>
+La valeur par défaut sera différente selon l'élément et le navigateur :
 
 <table class="fullwidth-table">
- <tbody>
-  <tr>
-   <th>Navigateur</th>
-   <th>{{HTMLElement("html")}}</th>
-   <th>{{HTMLElement("textarea")}}</th>
-   <th>{{HTMLElement("input")}}</th>
-   <th>Autres</th>
-   <th>Commentaires</th>
-  </tr>
-  <tr>
-   <td rowspan="3">Firefox / Gecko</td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><code>false</code></td>
-   <td><em>hérité</em></td>
-   <td>Lorsque <code>layout.spellcheckDefault</code> vaut <code>0</code></td>
-  </tr>
-  <tr>
-   <td><strong><code>false</code></strong></td>
-   <td><strong><code>true</code></strong></td>
-   <td><strong><em>hérité</em></strong></td>
-   <td><strong><em>hérité</em></strong></td>
-   <td><strong>Lorsque <code>layout.spellcheckDefault</code> vaut <code>1</code> (valeur par défaut)</strong></td>
-  </tr>
-  <tr>
-   <td><code>false</code></td>
-   <td><code>true</code></td>
-   <td><code>true</code></td>
-   <td><em>hérité</em></td>
-   <td>Lorsque <code>layout.spellcheckDefault</code> vaut <code>2</code></td>
-  </tr>
-  <tr>
-   <td>Chrome</td>
-   <td><code>false</code></td>
-   <td><code>true</code></td>
-   <td>?</td>
-   <td><em>hérité</em></td>
-  </tr>
-  <tr>
-   <td>Internet Explorer</td>
-   <td><code>false</code></td>
-   <td><code>true</code></td>
-   <td>?</td>
-   <td><em>hérité</em></td>
-  </tr>
-  <tr>
-   <td>Opera</td>
-   <td><code>false</code></td>
-   <td><code>true</code></td>
-   <td>?</td>
-   <td><em>hérité</em></td>
-  </tr>
-  <tr>
-   <td>Safari</td>
-   <td><code>false</code></td>
-   <td><code>true</code></td>
-   <td>?</td>
-   <td><em>hérité</em></td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th>Navigateur</th>
+      <th>{{HTMLElement("html")}}</th>
+      <th>{{HTMLElement("textarea")}}</th>
+      <th>{{HTMLElement("input")}}</th>
+      <th>Autres</th>
+      <th>Commentaires</th>
+    </tr>
+    <tr>
+      <td rowspan="3">Firefox / Gecko</td>
+      <td><code>false</code></td>
+      <td><code>false</code></td>
+      <td><code>false</code></td>
+      <td><em>hérité</em></td>
+      <td>Lorsque <code>layout.spellcheckDefault</code> vaut <code>0</code></td>
+    </tr>
+    <tr>
+      <td>
+        <strong><code>false</code></strong>
+      </td>
+      <td>
+        <strong><code>true</code></strong>
+      </td>
+      <td>
+        <strong><em>hérité</em></strong>
+      </td>
+      <td>
+        <strong><em>hérité</em></strong>
+      </td>
+      <td>
+        <strong
+          >Lorsque <code>layout.spellcheckDefault</code> vaut
+          <code>1</code> (valeur par défaut)</strong
+        >
+      </td>
+    </tr>
+    <tr>
+      <td><code>false</code></td>
+      <td><code>true</code></td>
+      <td><code>true</code></td>
+      <td><em>hérité</em></td>
+      <td>Lorsque <code>layout.spellcheckDefault</code> vaut <code>2</code></td>
+    </tr>
+    <tr>
+      <td>Chrome</td>
+      <td><code>false</code></td>
+      <td><code>true</code></td>
+      <td>?</td>
+      <td><em>hérité</em></td>
+    </tr>
+    <tr>
+      <td>Internet Explorer</td>
+      <td><code>false</code></td>
+      <td><code>true</code></td>
+      <td>?</td>
+      <td><em>hérité</em></td>
+    </tr>
+    <tr>
+      <td>Opera</td>
+      <td><code>false</code></td>
+      <td><code>true</code></td>
+      <td>?</td>
+      <td><em>hérité</em></td>
+    </tr>
+    <tr>
+      <td>Safari</td>
+      <td><code>false</code></td>
+      <td><code>true</code></td>
+      <td>?</td>
+      <td><em>hérité</em></td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;!-- La valeur par défaut --&gt;
-&lt;textarea&gt;Saisissay un texte issy&lt;/textarea&gt;
-
-&lt;!-- Les valeurs explicites --&gt;
-&lt;textarea spellcheck="true"&gt;Saisissay un texte issy&lt;/textarea&gt;
-&lt;textarea spellcheck="false"&gt;Saisissay un texte issy&lt;/textarea&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Pas de changement depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+## Exemples
+
+### HTML
+
+```html
+<!-- La valeur par défaut -->
+<textarea>Saisissay un texte issy</textarea>
+
+<!-- Les valeurs explicites -->
+<textarea spellcheck="true">Saisissay un texte issy</textarea>
+<textarea spellcheck="false">Saisissay un texte issy</textarea>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","300")}}
+
+## Spécifications
+
+| Spécification                                                                                                            | État                             | Commentaires                                                                      |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "interaction.html#spelling-and-grammar-checking", "spellcheck")}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis la dernière dérivation, {{SpecName('HTML5.1')}} |
+| {{SpecName('HTML5.1', "editing.html#spelling-and-grammar-checking", "spellcheck")}}         | {{Spec2('HTML5.1')}}     | Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.             |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.global_attributes.spellcheck")}}</p>
+{{Compat("html.global_attributes.spellcheck")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
-</ul>
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
diff --git a/files/fr/web/html/global_attributes/style/index.md b/files/fr/web/html/global_attributes/style/index.md
index abebdb3092..b3f21c7492 100644
--- a/files/fr/web/html/global_attributes/style/index.md
+++ b/files/fr/web/html/global_attributes/style/index.md
@@ -9,81 +9,54 @@ tags:
 translation_of: Web/HTML/Global_attributes/style
 original_slug: Web/HTML/Attributs_universels/style
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>style</strong></code> contient des déclarations <a href="/fr/docs/Web/CSS">CSS</a> afin de mettre en forme l'élément. Attention, il est recommandé de définir les règles de mise en forme dans un ou plusieurs fichiers séparés. Cet attribut, ainsi que l'élément {{HTMLElement("style")}} ont simplement pour but de permettre une mise en forme rapide, notamment pour tester.</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`style`** contient des déclarations [CSS](/fr/docs/Web/CSS) afin de mettre en forme l'élément. Attention, il est recommandé de définir les règles de mise en forme dans un ou plusieurs fichiers séparés. Cet attribut, ainsi que l'élément {{HTMLElement("style")}} ont simplement pour but de permettre une mise en forme rapide, notamment pour tester.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/attribute-style.html","tabbed-shorter")}}
 
-<div class="note">
-<p><strong>Note :</strong> Cet attribut ne doit pas être utilisé à des fins sémantiques. En effet, si toute mise en forme est retirée, toute page doit rester correcte d'un point de vue sémantique. On ne devrait pas, notamment, utiliser cet attribut afin de cacher des informations qui ne seraient pas pertinentes (cela devrait être réalisé avec l'attribut {{htmlattrxref("hidden")}}.</p>
-</div>
+> **Note :** Cet attribut ne doit pas être utilisé à des fins sémantiques. En effet, si toute mise en forme est retirée, toute page doit rester correcte d'un point de vue sémantique. On ne devrait pas, notamment, utiliser cet attribut afin de cacher des informations qui ne seraient pas pertinentes (cela devrait être réalisé avec l'attribut {{htmlattrxref("hidden")}}.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p style="color: rgb(255, 0, 0)"&gt;
+```html
+<p style="color: rgb(255, 0, 0)">
   Cette méthode n'est pas vraiment recommandée
-&lt;/p&gt;
+</p>
 
-&lt;p class="toto"&gt;
+<p class="toto">
   Alors que ça, c'est mieux.
-&lt;/p&gt;</pre>
+</p>
+```
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<pre class="brush: css">.toto {
+```css
+.toto {
   color: rgb(0, 255, 0);
-}</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","300","300")}}</p>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}. Depuis {{SpecName("HTML4.01")}}, cet attribut est désormais un attribut universel.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Cet attribut est pris en charge par tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName("CSS3 Style", "", "")}}</td>
-   <td>{{Spec2("CSS3 Style")}}</td>
-   <td>Définition du contenu pour l'attribut <code>style</code>.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.global_attributes.style")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
-</ul>
+}
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","300","300")}}
+
+## Spécifications
+
+| Spécification                                                                                | État                             | Commentaires                                                                                                                                                                                                                                                                                                                                                                                    |
+| -------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "dom.html#the-style-attribute", "style")}} | {{Spec2('HTML WHATWG')}} | Aucune modification depuis la dernière dérivation de {{SpecName('HTML5.1')}}                                                                                                                                                                                                                                                                                                           |
+| {{SpecName('HTML5.1', "dom.html#the-style-attribute", "style")}}         | {{Spec2('HTML5.1')}}     | Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}                                                                                                                                                                                                                                                                                    |
+| {{SpecName('HTML5 W3C', "dom.html#the-style-attribute", "style")}}     | {{Spec2('HTML5 W3C')}}     | Dérivée de {{SpecName('HTML WHATWG')}}. Depuis {{SpecName("HTML4.01")}}, cet attribut est désormais un attribut universel.                                                                                                                                                                                                                                                     |
+| {{SpecName('HTML4.01', 'present/styles.html#h-14.2.2', 'style')}}     | {{Spec2('HTML4.01')}}     | Cet attribut est pris en charge par tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, et {{HTMLElement("title")}}. |
+| {{SpecName("CSS3 Style", "", "")}}                                                 | {{Spec2("CSS3 Style")}} | Définition du contenu pour l'attribut `style`.                                                                                                                                                                                                                                                                                                                                                  |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.global_attributes.style")}}
+
+## Voir aussi
+
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
diff --git a/files/fr/web/html/global_attributes/tabindex/index.md b/files/fr/web/html/global_attributes/tabindex/index.md
index 9e0bbf1b3c..4118876ab5 100644
--- a/files/fr/web/html/global_attributes/tabindex/index.md
+++ b/files/fr/web/html/global_attributes/tabindex/index.md
@@ -9,104 +9,69 @@ tags:
 translation_of: Web/HTML/Global_attributes/tabindex
 original_slug: Web/HTML/Attributs_universels/tabindex
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
-
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>tabindex</strong></code> est un entier indiquant si l'élément peut capturer le focus et si c'est le cas, dans quel ordre il le capture lors de la navigation au clavier (généralement à l'aide de la touche <kbd>Tab</kbd>). Si plusieurs éléments partagent la même valeur d'attribut <strong><code>tabindex</code></strong>, leur ordre sera calculé en fonction de leur position dans le document.</p>
-
-<div>{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}</div>
-
-<p>Cet attribut peut prendre l'une des valeurs suivantes :</p>
-
-<ul>
- <li>Une valeur négative : l'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier ;
-  <div class="note">
-  <p><strong>Note :</strong> Cette valeur peut être utile lorsqu'on a un contenu situé en dehors de l'écran qui doit apparaître lors d'un évènement donné. Il ne sera pas possible d'y passer le focus au clavier mais on pourra le faire avec <a href="/fr/docs/Web/API/HTMLElement/focus">la méthode <code>focus()</code></a>.</p>
-  </div>
- </li>
- <li><code>0</code> : l'élément peut capturer le focus et être atteint via la navigation au clavier, cependant son ordre relatif est défini par la plateforme, généralement selon l'ordre des éléments du DOM ;
-  <div class="warning">
-  <p><strong>Attention :</strong> Le positionnement CSS n'aura pas d'impact sur le <code>taborder</code>. Le positionnement n'a qu'un impact visuel, l'ordre des tabulations correspond à l'ordre du DOM.</p>
-  </div>
- </li>
- <li>Une valeur positive : l'élément peut capturer le focus et peut être atteint via la navigation au clavier, l'ordre relatif dans la navigation est défini par la valeur de l'attribut. Les navigations seront parcourues dans l'ordre croissant.
-  <div class="warning">
-  <p><strong>Attention :</strong> Il n'est pas recommandé de fournir des valeurs positives pour les éléments car cela peut être source de confusion, notamment pour les personnes qui utilisent des technologies d'assistance. Il est préférable d'organiser les éléments dans un ordre correct au niveau du DOM.</p>
-  </div>
- </li>
-</ul>
-
-<p>Si on utilise l'attribut <code>tabindex</code> sur un élément {{HTMLElement("div")}}, on ne pourra pas naviguer dans le contenu de cet élément avec les flèches du clavier, sauf si <code>tabindex</code> est également utilisé sur le contenu. Pour observer ce comportement, vous pouvez utiliser <a href="https://jsfiddle.net/jainakshay/0b2q4Lgv/">cet exemple JSFiddle</a>.</p>
-
-<div class="note">
-<p><strong>Note :</strong> La valeur maximale pour <code>tabindex</code> est fixée à 32767 par HTML4. Sa valeur par défaut est 0 pour les éléments qui peuvent recevoir le focus et -1 pour les autres.</p>
-</div>
-
-<h2 id="Exemples">Exemples</h2>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html">&lt;button tabindex="1"&gt;Un bouton&lt;/button&gt;
-&lt;textarea&gt;Saisir un texte&lt;/textarea&gt;
-&lt;button tabindex="0"&gt;Un autre bouton&lt;/button&gt;
-&lt;button tabindex="1"&gt;Et un troisième&lt;/button&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Exemples","200","300")}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>Il faut éviter d'utiliser l'attribut <code>tabindex</code> avec du contenu <a href="/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_interactif">non-interactif</a> si on souhaite uniquement rendre cet élément accessible au clavier (par exemple en voulant utiliser un élément {{HTMLElement("div")}} plutôt qu'un élément {{HTMLElement("button")}}).</p>
-
-<p>Les composants rendus interactifs par cette méthode ne feront pas partie de l'<a href="/fr/Apprendre/a11y/What_is_accessibility#Accessibility_APIs">arbre d'accessibilité</a> et ne pourront pas être analysés par les technologies d'assistance. Le contenu devrait être décrit sémantiquement avec des éléments interactifs ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.). En effet, ces éléments disposent nativement de rôles et d'états qui peuvent être utilisées par les API d'accessibilité (il faut sinon les gérer via <a href="/fr/docs/Accessibilité/ARIA">ARIA</a>).</p>
-
-<ul>
- <li><a href="https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/">Utiliser l'attribut <code>tabindex</code>|<em>The Paciello Group</em> (en anglais)</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, l'attribut est désormais supporté sur tous les éléments, c'est un attribut global à part entière.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Attribut uniquement supporté sur {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.global_attributes.tabindex")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>La propriété {{domxref("HTMLElement.tabIndex")}} qui reflète cet attribut.</li>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
- <li><a href="https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html">Ce billet en anglais sur l'accessibilité et <code>tabindex</code></a> écrit par Adrian Roselli</li>
- <li><code><a href="/fr/docs/Web/API/Document/hasFocus">Document.hasFocus()</a></code></li>
-</ul>
+{{HTMLSidebar("Global_attributes")}}
+
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`tabindex`** est un entier indiquant si l'élément peut capturer le focus et si c'est le cas, dans quel ordre il le capture lors de la navigation au clavier (généralement à l'aide de la touche <kbd>Tab</kbd>). Si plusieurs éléments partagent la même valeur d'attribut **`tabindex`**, leur ordre sera calculé en fonction de leur position dans le document.
+
+{{EmbedInteractiveExample("pages/tabbed/attribute-tabindex.html","tabbed-standard")}}
+
+Cet attribut peut prendre l'une des valeurs suivantes :
+
+- Une valeur négative : l'élément peut capturer le focus mais ne peut pas être atteint via la navigation au clavier ;
+
+  > **Note :** Cette valeur peut être utile lorsqu'on a un contenu situé en dehors de l'écran qui doit apparaître lors d'un évènement donné. Il ne sera pas possible d'y passer le focus au clavier mais on pourra le faire avec [la méthode `focus()`](/fr/docs/Web/API/HTMLElement/focus).
+
+- `0` : l'élément peut capturer le focus et être atteint via la navigation au clavier, cependant son ordre relatif est défini par la plateforme, généralement selon l'ordre des éléments du DOM ;
+
+  > **Attention :** Le positionnement CSS n'aura pas d'impact sur le `taborder`. Le positionnement n'a qu'un impact visuel, l'ordre des tabulations correspond à l'ordre du DOM.
+
+- Une valeur positive : l'élément peut capturer le focus et peut être atteint via la navigation au clavier, l'ordre relatif dans la navigation est défini par la valeur de l'attribut. Les navigations seront parcourues dans l'ordre croissant.
+
+  > **Attention :** Il n'est pas recommandé de fournir des valeurs positives pour les éléments car cela peut être source de confusion, notamment pour les personnes qui utilisent des technologies d'assistance. Il est préférable d'organiser les éléments dans un ordre correct au niveau du DOM.
+
+Si on utilise l'attribut `tabindex` sur un élément {{HTMLElement("div")}}, on ne pourra pas naviguer dans le contenu de cet élément avec les flèches du clavier, sauf si `tabindex` est également utilisé sur le contenu. Pour observer ce comportement, vous pouvez utiliser [cet exemple JSFiddle](https://jsfiddle.net/jainakshay/0b2q4Lgv/).
+
+> **Note :** La valeur maximale pour `tabindex` est fixée à 32767 par HTML4. Sa valeur par défaut est 0 pour les éléments qui peuvent recevoir le focus et -1 pour les autres.
+
+## Exemples
+
+### HTML
+
+```html
+<button tabindex="1">Un bouton</button>
+<textarea>Saisir un texte</textarea>
+<button tabindex="0">Un autre bouton</button>
+<button tabindex="1">Et un troisième</button>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Exemples","200","300")}}
+
+## Accessibilité
+
+Il faut éviter d'utiliser l'attribut `tabindex` avec du contenu [non-interactif](/fr/docs/Web/Guide/HTML/Catégories_de_contenu#Contenu_interactif) si on souhaite uniquement rendre cet élément accessible au clavier (par exemple en voulant utiliser un élément {{HTMLElement("div")}} plutôt qu'un élément {{HTMLElement("button")}}).
+
+Les composants rendus interactifs par cette méthode ne feront pas partie de l'[arbre d'accessibilité](/fr/Apprendre/a11y/What_is_accessibility#Accessibility_APIs) et ne pourront pas être analysés par les technologies d'assistance. Le contenu devrait être décrit sémantiquement avec des éléments interactifs ({{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, etc.). En effet, ces éléments disposent nativement de rôles et d'états qui peuvent être utilisées par les API d'accessibilité (il faut sinon les gérer via [ARIA](/fr/docs/Accessibilité/ARIA)).
+
+- [Utiliser l'attribut `tabindex`|_The Paciello Group_ (en anglais)](https://developer.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/)
+
+## Spécifications
+
+| Spécification                                                                                        | État                             | Commentaires                                                                                                                                                                                                                                    |
+| ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "interaction.html#attr-tabindex", "tabindex")}}     | {{Spec2('HTML WHATWG')}} | Aucune modification depuis la dernière dérivation, {{SpecName('HTML5.1')}}                                                                                                                                                             |
+| {{SpecName('HTML5.1', "editing.html#the-tabindex-attribute", "tabindex")}} | {{Spec2('HTML5.1')}}     | Dérivée de {{SpecName('HTML WHATWG')}}, aucune modification depuis {{SpecName('HTML5 W3C')}}                                                                                                                                    |
+| {{SpecName('HTML5 W3C', "editing.html#attr-tabindex", "tabindex")}}             | {{Spec2('HTML5 W3C')}}     | Dérivée de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, l'attribut est désormais supporté sur tous les éléments, c'est un attribut global à part entière.                                                |
+| {{SpecName('HTML4.01', 'interact/forms.html#adef-tabindex', 'tabindex')}}     | {{Spec2('HTML4.01')}}     | Attribut uniquement supporté sur {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("button")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}. |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.global_attributes.tabindex")}}
+
+## Voir aussi
+
+- La propriété {{domxref("HTMLElement.tabIndex")}} qui reflète cet attribut.
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
+- [Ce billet en anglais sur l'accessibilité et `tabindex`](https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html) écrit par Adrian Roselli
+- [`Document.hasFocus()`](/fr/docs/Web/API/Document/hasFocus)
diff --git a/files/fr/web/html/global_attributes/title/index.md b/files/fr/web/html/global_attributes/title/index.md
index ccd0ef2b45..97c1f2246b 100644
--- a/files/fr/web/html/global_attributes/title/index.md
+++ b/files/fr/web/html/global_attributes/title/index.md
@@ -9,118 +9,88 @@ tags:
 translation_of: Web/HTML/Global_attributes/title
 original_slug: Web/HTML/Attributs_universels/title
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>title</strong></code> contient un texte d'information relatif à l'élément auquel il est rattaché.</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`title`** contient un texte d'information relatif à l'élément auquel il est rattaché.
 
-<div>{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}</div>
+{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}
 
-<p>On le trouve généralement utilisé pour :</p>
+On le trouve généralement utilisé pour :
 
-<ul>
- <li>Fournir un libellé pour les éléments {{HTMLElement("iframe")}}</li>
- <li>Fournir un libellé associé automatiquement à un élément {{HTMLElement("input")}}</li>
- <li>Fournir un libellé pour les contrôles des <a href="/fr/docs/Web/HTML/Element/table">tableaux de données</a></li>
-</ul>
+- Fournir un libellé pour les éléments {{HTMLElement("iframe")}}
+- Fournir un libellé associé automatiquement à un élément {{HTMLElement("input")}}
+- Fournir un libellé pour les contrôles des [tableaux de données](/fr/docs/Web/HTML/Element/table)
 
-<p>Si cet attribut est absent, cela signifie que le titre de l'élément ancêtre le plus proche est toujours pertinent (et pourrait être utilisé comme bulle d'information pour l'élément courant). Si cet attribut vaut la chaîne vide, cela signifie explicitement que la valeur du titre de l'ancêtre le plus proche n'est pas pertinent (et ne devrait pas être utilisé comme bulle d'information).</p>
+Si cet attribut est absent, cela signifie que le titre de l'élément ancêtre le plus proche est toujours pertinent (et pourrait être utilisé comme bulle d'information pour l'élément courant). Si cet attribut vaut la chaîne vide, cela signifie explicitement que la valeur du titre de l'ancêtre le plus proche n'est pas pertinent (et ne devrait pas être utilisé comme bulle d'information).
 
-<p>Une sémantique différente est définie pour cet attribut lorsqu'il est utilisé avec les éléments {{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}} et {{HTMLElement("menuitem")}}.</p>
+Une sémantique différente est définie pour cet attribut lorsqu'il est utilisé avec les éléments {{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}} et {{HTMLElement("menuitem")}}.
 
-<h2 id="Titre_sur_plusieurs_lignes">Titre sur plusieurs lignes</h2>
+## Titre sur plusieurs lignes
 
-<p>Un attribut <code>title</code> peut contenir plusieurs lignes. Chaque caractère <code>U+000A LINE FEED</code> (<code>LF</code>) représentera un saut de ligne. Le fragment de code suivant représente donc un élément dont le titre est écrit sur deux lignes.</p>
+Un attribut `title` peut contenir plusieurs lignes. Chaque caractère `U+000A LINE FEED` (`LF`) représentera un saut de ligne. Le fragment de code suivant représente donc un élément dont le titre est écrit sur deux lignes.
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Les sauts de ligne au sein d'un attribut title doivent être pris en compte :
-  &lt;abbr title="Ceci est un
-  titre sur plusieurs lignes"&gt;Exemple&lt;/abbr&gt;.
-&lt;/p&gt;
-</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<p>{{EmbedLiveSample("Titre_sur_plusieurs_lignes")}}</p>
-
-<h2 id="Héritage_de_title">Héritage de <code>title</code></h2>
-
-<p>Lorsqu'un élément ne possède pas d'attribut <code>title</code>, il hérite de la valeur de l'attribut pour l'élément parent (qui peut également l'hériter de son parent, etc.).</p>
-
-<p>Si cet attribut est défini avec la chaîne vide, cela signifie que le titre provenant d'un élément parent n'est pas pertinent et qu'il ne devrait pas être utilisé.</p>
-
-<h3 id="HTML_2">HTML</h3>
-
-<pre class="brush: html">&lt;div title="Une bubulle"&gt;
-  &lt;p&gt;Si vous survolez cet élément, il y aura une bulle d'information "Une bubulle".&lt;/p&gt;
-  &lt;p title=""&gt;Et au-dessus de celui-ci, aucune info.&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="Résultat_2">Résultat</h3>
-
-<p>{{EmbedLiveSample("Héritage_de_title")}}</p>
-
-<h2 id="Accessibilité">Accessibilité</h2>
-
-<p>L'attribut <code>title</code> est très problématique pour :</p>
-
-<ul>
- <li>Les personnes qui utilisent des appareils à interface tactile</li>
- <li>Les personnes qui naviguent au clavier</li>
- <li>Les personnes qui naviguent en utilisant des outils d'assistance comme des lecteurs d'écran ou des loupes logicielles</li>
- <li>Les personnes souffrant de troubles musculaires ou cognitifs.</li>
-</ul>
-
-<p>Cela est dû à une prise en charge hétérogène de la part des navigateurs. Si on souhaite avoir une bulle d'information, mieux vaudra <a href="https://inclusive-components.design/tooltips-toggletips/">utiliser une technique plus accessible</a>.</p>
-
-<ul>
- <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Utiliser l'attribut HTML <code>title</code> - The Paciello Group (en anglais)</a></li>
- <li><em><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips &amp; Toggletips - Inclusive Components</a></em><a href="https://inclusive-components.design/tooltips-toggletips/"> (en anglais)</a></li>
- <li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/"><em>The Trials and Tribulations of the Title Attribute</em> (en anglais) - 24 Accessibility</a></li>
-</ul>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucune modification depuis {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Dérivation de {{SpecName('HTML WHATWG')}}, aucune modification de {{SpecName('HTML5 W3C')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td>
-   <td>{{Spec2('HTML5 W3C')}}</td>
-   <td>Dérivation de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, <code>title</code> est désormais un attribut universel.</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td>
-   <td>{{Spec2('HTML4.01')}}</td>
-   <td>Pris en charge par l'ensemble des éléments sauf {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("html.global_attributes.title")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
- <li>{{domxref("HTMLElement.title")}} that reflects this attribute.</li>
-</ul>
+  <abbr title="Ceci est un
+  titre sur plusieurs lignes">Exemple</abbr>.
+</p>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Titre_sur_plusieurs_lignes")}}
+
+## Héritage de `title`
+
+Lorsqu'un élément ne possède pas d'attribut `title`, il hérite de la valeur de l'attribut pour l'élément parent (qui peut également l'hériter de son parent, etc.).
+
+Si cet attribut est défini avec la chaîne vide, cela signifie que le titre provenant d'un élément parent n'est pas pertinent et qu'il ne devrait pas être utilisé.
+
+### HTML
+
+```html
+<div title="Une bubulle">
+  <p>Si vous survolez cet élément, il y aura une bulle d'information "Une bubulle".</p>
+  <p title="">Et au-dessus de celui-ci, aucune info.</p>
+</div>
+```
+
+### Résultat
+
+{{EmbedLiveSample("Héritage_de_title")}}
+
+## Accessibilité
+
+L'attribut `title` est très problématique pour :
+
+- Les personnes qui utilisent des appareils à interface tactile
+- Les personnes qui naviguent au clavier
+- Les personnes qui naviguent en utilisant des outils d'assistance comme des lecteurs d'écran ou des loupes logicielles
+- Les personnes souffrant de troubles musculaires ou cognitifs.
+
+Cela est dû à une prise en charge hétérogène de la part des navigateurs. Si on souhaite avoir une bulle d'information, mieux vaudra [utiliser une technique plus accessible](https://inclusive-components.design/tooltips-toggletips/).
+
+- [Utiliser l'attribut HTML `title` - The Paciello Group (en anglais)](https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/)
+- _[Tooltips & Toggletips - Inclusive Components](https://inclusive-components.design/tooltips-toggletips/)_[ (en anglais)](https://inclusive-components.design/tooltips-toggletips/)
+- [_The Trials and Tribulations of the Title Attribute_ (en anglais) - 24 Accessibility](https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/)
+
+## Spécifications
+
+| Spécification                                                                                    | État                             | Commentaires                                                                                                                                                                                                                                                                                                                          |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "elements.html#the-title-attribute", "title")}} | {{Spec2('HTML WHATWG')}} | Aucune modification depuis {{SpecName('HTML5.1')}}                                                                                                                                                                                                                                                                           |
+| {{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}             | {{Spec2('HTML5.1')}}     | Dérivation de {{SpecName('HTML WHATWG')}}, aucune modification de {{SpecName('HTML5 W3C')}}                                                                                                                                                                                                                           |
+| {{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}         | {{Spec2('HTML5 W3C')}}     | Dérivation de {{SpecName('HTML WHATWG')}}. À partir de {{SpecName("HTML4.01")}}, `title` est désormais un attribut universel.                                                                                                                                                                                        |
+| {{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}         | {{Spec2('HTML4.01')}}     | Pris en charge par l'ensemble des éléments sauf {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}} et {{HTMLElement("title")}}. |
+
+## Compatibilité des navigateurs
+
+{{Compat("html.global_attributes.title")}}
+
+## Voir aussi
+
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
+- {{domxref("HTMLElement.title")}} that reflects this attribute.
diff --git a/files/fr/web/html/global_attributes/translate/index.md b/files/fr/web/html/global_attributes/translate/index.md
index 6d5b55ef44..946876abd1 100644
--- a/files/fr/web/html/global_attributes/translate/index.md
+++ b/files/fr/web/html/global_attributes/translate/index.md
@@ -10,61 +10,42 @@ tags:
 translation_of: Web/HTML/Global_attributes/translate
 original_slug: Web/HTML/Attributs_universels/translate
 ---
-<div>{{HTMLSidebar("Global_attributes")}}</div>
+{{HTMLSidebar("Global_attributes")}}
 
-<p>L'<a href="/fr/docs/Web/HTML/Attributs_universels">attribut universel</a> <code><strong>translate</strong></code> est un attribut à valeur contrainte qui peut être utilisé afin d'indiquer si les valeurs d'attribut d'un élément et si les valeurs de ses nœuds {{domxref("Text")}} descendants doivent être traduits lorsque la page est localisée ou s'il faut les laisser inchangés. Les valeurs autorisées pour cet attribut sont :</p>
+L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`translate`** est un attribut à valeur contrainte qui peut être utilisé afin d'indiquer si les valeurs d'attribut d'un élément et si les valeurs de ses nœuds {{domxref("Text")}} descendants doivent être traduits lorsque la page est localisée ou s'il faut les laisser inchangés. Les valeurs autorisées pour cet attribut sont :
 
-<ul>
- <li><code>"yes"</code> (ou une chaîne vide), qui indique que l'élément devrait être traduit lorsque la page est localisée ;</li>
- <li><code>"no"</code>, qui indique que l'élément ne doit pas être traduit.</li>
-</ul>
+- `"yes"` (ou une chaîne vide), qui indique que l'élément devrait être traduit lorsque la page est localisée ;
+- `"no"`, qui indique que l'élément ne doit pas être traduit.
 
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Bien que la prise en charge de cet attribut ne soit pas homogène pour les navigateurs, celui-ci est pris en compte par les outils de traduction automatique (Google Translate par exemple) et les outils de traduction utilisés par les traducteurs. Aussi, cet attribut doit être utilisé par les auteurs web afin d'indiquer correctement le contenu qui ne devrait pas être traduit.</p>
-</div>
+> **Note :** Bien que la prise en charge de cet attribut ne soit pas homogène pour les navigateurs, celui-ci est pris en compte par les outils de traduction automatique (Google Translate par exemple) et les outils de traduction utilisés par les traducteurs. Aussi, cet attribut doit être utilisé par les auteurs web afin d'indiquer correctement le contenu qui ne devrait pas être traduit.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;label for="postcode" translate="no"&gt;
-   &lt;span translate="yes"&gt;Enter your postcode to find the nearest store&lt;/span&gt;
-&lt;/label&gt;
-&lt;input id="postcode" type="text"&gt;</pre>
+```html
+<label for="postcode" translate="no">
+   <span translate="yes">Enter your postcode to find the nearest store</span>
+</label>
+<input id="postcode" type="text">
+```
 
-<h3 id="Résultat">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("Exemples","250","250")}}</p>
+{{EmbedLiveSample("Exemples","250","250")}}
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">Spécification</th>
-   <th scope="col">État</th>
-   <th scope="col">Commentaires</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td>Aucun changement depuis la dernière dérivation {{SpecName('HTML5.1')}}</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}}</td>
-   <td>{{Spec2('HTML5.1')}}</td>
-   <td>Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.</td>
-  </tr>
- </tbody>
-</table>
+| Spécification                                                                                    | État                             | Commentaires                                                                    |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', "dom.html#attr-translate", "translate")}}         | {{Spec2('HTML WHATWG')}} | Aucun changement depuis la dernière dérivation {{SpecName('HTML5.1')}} |
+| {{SpecName('HTML5.1', "dom.html#the-translate-attribute", "translate")}} | {{Spec2('HTML5.1')}}     | Dérivée de {{SpecName('HTML WHATWG')}}, définition initiale.           |
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.global_attributes.translate")}}</p>
+{{Compat("html.global_attributes.translate")}}
 
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Attributs_universels">Les différents attributs universels</a></li>
- <li>La propriété {{domxref("HTMLElement.translate")}} qui reflète cet attribut.</li>
-</ul>
+- [Les différents attributs universels](/fr/docs/Web/HTML/Attributs_universels)
+- La propriété {{domxref("HTMLElement.translate")}} qui reflète cet attribut.
diff --git a/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.md b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.md
index 817e5996bb..56c930ba28 100644
--- a/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.md
+++ b/files/fr/web/html/global_attributes/x-ms-acceleratorkey/index.md
@@ -9,38 +9,46 @@ tags:
 translation_of: Web/HTML/Global_attributes/x-ms-acceleratorkey
 original_slug: Web/HTML/Attributs_universels/x-ms-acceleratorkey
 ---
-<div>{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}</div>
+{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
 
-<p>La propriété <code><strong>x-ms-acceleratorkey</strong></code> fournit une méthode pour déclarer si une touche d'accélération a été affectée à un élément.</p>
+La propriété **`x-ms-acceleratorkey`** fournit une méthode pour déclarer si une touche d'accélération a été affectée à un élément.
 
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Pour fournir un raccourci clavier pour un élément qui n'utilise pas JavaScript, on utilisera l'attribut <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code>.</p>
-</div>
+> **Note :** Pour fournir un raccourci clavier pour un élément qui n'utilise pas JavaScript, on utilisera l'attribut [`accesskey`](/fr/docs/Web/HTML/Attributs_universels/accesskey).
 
-<p>{{Non-standard_Inline}} Cette propriété non-standard est spécifique à Internet Explorer et à Microsoft Edge.</p>
+{{Non-standard_Inline}} Cette propriété non-standard est spécifique à Internet Explorer et à Microsoft Edge.
 
-<p>La propriété <code>x-ms-acceleratorkey</code> permet d'indiquer sur l'arbre d'accessibilité (utilisé par les outils d'assistance tels que les lecteurs d'écran) qu'une touche d'accélération existe. Cet attribut ne fournit pas le comportement déclenché par cette touche. Il est nécessaire de fournir les gestionnaires d'évènements associés tels que <code>onkeypress</code>, <code>onkeydown</code> ou <code>onkeyup</code> afin de traiter l'utilisation de la touche dans l'application.</p>
+La propriété `x-ms-acceleratorkey` permet d'indiquer sur l'arbre d'accessibilité (utilisé par les outils d'assistance tels que les lecteurs d'écran) qu'une touche d'accélération existe. Cet attribut ne fournit pas le comportement déclenché par cette touche. Il est nécessaire de fournir les gestionnaires d'évènements associés tels que `onkeypress`, `onkeydown` ou `onkeyup` afin de traiter l'utilisation de la touche dans l'application.
 
+## Syntaxe
 
+```html
+<button x-ms-acceleratorkey="string">...</button>
+```
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Valeur
 
-<pre class="brush: html">&lt;button x-ms-acceleratorkey="string"&gt;...&lt;/button&gt;</pre>
+Cette propriété peut être une chaîne de caractères avec le nom de la touche accélératrice :
 
-<h2 id="Valeur">Valeur</h2>
+- `"Ctrl+B"` pour indiquer la combinaison des touches
 
-<p>Cette propriété peut être une chaîne de caractères avec le nom de la touche accélératrice :</p>
+  <kbd>Ctrl</kbd>
 
-<ul>
- <li><code>"Ctrl+B"</code> pour indiquer la combinaison des touches <kbd>Ctrl</kbd> et <kbd>B</kbd>.</li>
- <li><code>"J"</code> pour indiquer la touche <kbd>J</kbd> uniquement.</li>
- <li><code>"Ctrl+; then K"</code> (cf. <a href="https://help.manuscript.com/7558/fogbugz-keyboard-shortcuts#For_Your_Server_or_non-Ocelot_Keyboard_Shortcuts">FogBugz’s old keyboard mode</a>). Une approche plus compliquée mais qui ne remplace pas les raccourcis clavier fournis par le navigateur ou le système d'exploitation.</li>
-</ul>
+  et
 
-<h2 id="See_Also">Voir aussi</h2>
+  <kbd>B</kbd>
 
-<ul>
- <li><a href="/fr/docs/Mozilla/Tech/XUL/Propri%C3%A9t%C3%A9s/accessKey">L'attribut universel <code>accesskey</code></a></li>
- <li><a href="/fr/docs/Web/CSS/-ms-accelerator">La propriété CSS spécifique <code>-ms-accelerator</code></a></li>
- <li><a href="/fr/docs/Web/API/Microsoft_API_extensions">Les extensions spécifiques à Microsoft</a></li>
-</ul>
+  .
+
+- `"J"` pour indiquer la touche
+
+  <kbd>J</kbd>
+
+  uniquement.
+
+- `"Ctrl+; then K"` (cf. [FogBugz’s old keyboard mode](https://help.manuscript.com/7558/fogbugz-keyboard-shortcuts#For_Your_Server_or_non-Ocelot_Keyboard_Shortcuts)). Une approche plus compliquée mais qui ne remplace pas les raccourcis clavier fournis par le navigateur ou le système d'exploitation.
+
+## Voir aussi
+
+- [L'attribut universel `accesskey`](/fr/docs/Mozilla/Tech/XUL/Propri%C3%A9t%C3%A9s/accessKey)
+- [La propriété CSS spécifique `-ms-accelerator`](/fr/docs/Web/CSS/-ms-accelerator)
+- [Les extensions spécifiques à Microsoft](/fr/docs/Web/API/Microsoft_API_extensions)
diff --git a/files/fr/web/html/global_attributes/x-ms-format-detection/index.md b/files/fr/web/html/global_attributes/x-ms-format-detection/index.md
index 8218568bf7..d6a42bced1 100644
--- a/files/fr/web/html/global_attributes/x-ms-format-detection/index.md
+++ b/files/fr/web/html/global_attributes/x-ms-format-detection/index.md
@@ -9,53 +9,47 @@ tags:
 translation_of: Web/HTML/Global_attributes/x-ms-format-detection
 original_slug: Web/HTML/Attributs_universels/x-ms-format-detection
 ---
-<div>{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}</div>
+{{HTMLSidebar("Global_attributes")}}{{Non-standard_Header}}
 
-<p>L'attribut <code><strong>x-ms-format-detection</strong></code> détermine si le format de la donnée dans le contenu est détectée automatiquement et, lorsqu'elle est trouvée, est convertie en un lien sur lequel on peut cliquer.</p>
+L'attribut **`x-ms-format-detection`** détermine si le format de la donnée dans le contenu est détectée automatiquement et, lorsqu'elle est trouvée, est convertie en un lien sur lequel on peut cliquer.
 
-<div class="blockIndicator note">
-<p><strong>Note :</strong> Les liens créés grâce à la détection de format n'apparaissent pas dans le DOM.</p>
-</div>
+> **Note :** Les liens créés grâce à la détection de format n'apparaissent pas dans le DOM.
 
-<p>{{Non-standard_inline}}Cette propriété est spécifique à Internet Explorer et à Microsoft Edge.</p>
+{{Non-standard_inline}}Cette propriété est spécifique à Internet Explorer et à Microsoft Edge.
 
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
 
-<pre class="brush: html">&lt;html x-ms-format-detection="none"&gt;
-</pre>
+```html
+<html x-ms-format-detection="none">
+```
 
-<h2 id="Valeurs">Valeurs</h2>
+## Valeurs
 
-<p>Cet attribut peut prendre une chaîne de caractères parmi les suivantes comme valeur :</p>
+Cet attribut peut prendre une chaîne de caractères parmi les suivantes comme valeur :
 
-<dl>
- <dt><code>all</code></dt>
- <dd>Tous les formats de donnée pris en charge sont détectés.</dd>
- <dt><code>none</code></dt>
- <dd>La détection de format est désactivée.</dd>
- <dt><code>phone</code></dt>
- <dd>Seuls les numéros de téléphone sont détectés.</dd>
-</dl>
+- `all`
+  - : Tous les formats de donnée pris en charge sont détectés.
+- `none`
+  - : La détection de format est désactivée.
+- `phone`
+  - : Seuls les numéros de téléphone sont détectés.
 
-<div class="note">
-<p><strong>Note :</strong> Les liens créés via la détection de format n'auront pas d'impact sur le contenu ou sur la disposition du DOM.</p>
-</div>
+> **Note :** Les liens créés via la détection de format n'auront pas d'impact sur le contenu ou sur la disposition du DOM.
 
-<h2 id="Exemples">Exemples</h2>
+## Exemples
 
-<p>Pour désactiver la détection automatique sous certaines conditions, on pourra par exemple utiliser JavaScript afin d'ajouter <code>x-ms-format-detection</code> sur les éléments qu'on soit sur un mobile (détection activée) ou sur un ordinateur de bureau (détection désactivée) :</p>
+Pour désactiver la détection automatique sous certaines conditions, on pourra par exemple utiliser JavaScript afin d'ajouter `x-ms-format-detection` sur les éléments qu'on soit sur un mobile (détection activée) ou sur un ordinateur de bureau (détection désactivée) :
 
-<pre class="brush: js">if (window.matchMedia('(min-width: 1024px)').matches) {
+```js
+if (window.matchMedia('(min-width: 1024px)').matches) {
     var e = document.getElementsByClassName("phone");
-    for (i = 0; i &lt; e.length; i++)
+    for (i = 0; i < e.length; i++)
         e[i].setAttribute("x-ms-format-detection", "none");
 }
-</pre>
+```
 
-<p>Dans cet exemple, les numéros de téléphone conservent la mise en forme tant que la zone d'affichage (<em>viewport</em>) est moins large que 1024 pixels.</p>
+Dans cet exemple, les numéros de téléphone conservent la mise en forme tant que la zone d'affichage (_viewport_) est moins large que 1024 pixels.
 
-<h2 id="See_Also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/API/Microsoft_Extensions">Les extensions spécifiques à Microsoft</a></li>
-</ul>
+- [Les extensions spécifiques à Microsoft](/fr/docs/Web/API/Microsoft_Extensions)
diff --git a/files/fr/web/html/index.md b/files/fr/web/html/index.md
index b9b45a43ae..e622de9626 100644
--- a/files/fr/web/html/index.md
+++ b/files/fr/web/html/index.md
@@ -9,90 +9,79 @@ tags:
   - Web
 translation_of: Web/HTML
 ---
-<div>{{HTMLSidebar}}</div>
-
-<p><strong>HTML</strong> signifie « <em>HyperText Markup Language</em> » qu'on peut traduire par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une page web et sa structure. D'autres technologies sont utilisées avec HTML pour décrire la présentation d'une page (<a href="/fr/docs/Web/CSS">CSS</a>) et/ou ses fonctionnalités interactives (<a href="/fr/docs/Web/JavaScript">JavaScript</a>).</p>
-
-<p>L'« hypertexte » désigne les liens qui relient les pages web entre elles, que ce soit au sein d'un même site web ou entre différents sites web. Les liens sont un aspect fondamental du Web. Ce sont eux qui forment cette « toile » (ce mot est traduit par <i>web</i> en anglais). En téléchargeant du contenu sur l'Internet et en le reliant à des pages créées par d'autres personnes, vous devenez un participant actif du World Wide Web.</p>
-
-<p>Le langage HTML utilise des « balises » pour annoter du texte, des images et d'autres contenus afin de les afficher dans un navigateur web. Le balisage HTML comprend des « éléments » spéciaux tels que <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/title"><code>&lt;title&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/body"><code>&lt;body&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/header"><code>&lt;header&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/footer"><code>&lt;footer&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/section"><code>&lt;section&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/p"><code>&lt;p&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/aside"><code>&lt;aside&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/datalist"><code>&lt;datalist&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/details"><code>&lt;details&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/embed"><code>&lt;embed&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/nav"><code>&lt;nav&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/output"><code>&lt;output&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Progress"><code>&lt;progress&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/ul"><code>&lt;ul&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/ol"><code>&lt;ol&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/li"><code>&lt;li&gt;</code></a> et bien d'autres.</p>
-
-<p>En HTML, les balises sont insensibles à la casse et peuvent aussi bien être écrites en minuscules, en majuscules voire avec un mélange des deux. Autrement dit, la balise <code>&lt;title&gt;</code> pourrait très bien être écrite comme <code>&lt;Title&gt;</code>, <code>&lt;TiTle&gt;</code> ou d'une autre façon.</p>
-
-<p>Les articles suivants fournissent des éléments de référence utiles au développement web.</p>
-
-<h2 id="Key_resources">Ressources clés</h2>
-
-<dl>
-  <dt>Introduction au HTML</dt>
-  <dd>Vous faites vos premiers pas dans le développement web ? <a href="/fr/docs/Learn/Getting_started_with_the_web/HTML_basics">Nos articles sur les bases de HTML</a> expliquent ce qu'est HTML et comment l'utiliser.</dd>
-  <dt>Tutoriels HTML</dt>
-  <dd>Pour plus d'informations sur l'utilisation du HTML, des tutoriels et des exemples complets, vous pouvez consulter <a href="/fr/docs/Learn/HTML">notre section Apprendre HTML</a>.</dd>
-  <dt>Référence HTML</dt>
-  <dd>Dans notre <a href="/fr/docs/Web/HTML/Reference">référence exhaustive</a>, vous trouverez le détail de chaque élément et attribut constituant HTML.</dd>
-</dl>
-
-<div class="callout">
-  <h4 id="Looking_to_become_a_front-end_web_developer">Vous cherchez à devenir un développeur web front-end ?</h4>
-
-  <p>Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.</p>
-
-  <p><a href="/fr/docs/Learn/Front-end_web_developer">Commencer</a>
-  </p>
-</div>
-
-<h2 id="Beginners_tutorials">Tutoriels pour les débutants</h2>
-
-<p>La section <a href="/fr/docs/Learn/HTML">Apprendre HTML</a> contient plusieurs modules pour vous apprendre à utiliser HTML — sans autre connaissance particulière.</p>
-
-<dl>
-  <dt><a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Une introduction à HTML</a></dt>
-  <dd>Dans ce module, on brosse un premier portrait de HTML pour présenter les concepts importants, la syntaxe. On voit comment appliquer HTML sur du texte, comment créer des hyperliens et comment structurer une page web grâce à HTML.</dd>
-  <dt><a href="/fr/docs/Learn/HTML/Multimedia_and_embedding">Le multimédia et l'intégration</a></dt>
-  <dd>Dans ce module, on explore comment utiliser HTML pour intégrer des fichiers multimédias dans une page web. Cela couvre les différentes façons d'inclure une image, comment ajouter une vidéo ou un fichier audio voire aussi comment intégrer d'autres pages web.</dd>
-  <dt><a href="/fr/docs/Learn/HTML/Tables">Les tableaux HTML</a></dt>
-  <dd>Il est parfois compliqué de représenter des données tabulaires de façon compréhensible et lisible sur une page web. Dans ce module, on voit les différentes balises utilisées pour construire des tableaux et certaines fonctionnalités plus complexes comme les légendes et résumés.</dd>
-  <dt><a href="/fr/docs/Learn/Forms">Les formulaires HTML</a></dt>
-  <dd>Les formulaires sont cruciaux sur le Web, ils permettent de créer un compte sur un site, de se connecter, d'acheter des produits, d'écrire des commentaires, etc. Dans ce module, on voit comment créer des formulaires pour le navigateur (« côté client »).</dd>
-  <dt><a href="/fr/docs/Learn/HTML/Howto">Utiliser HTML pour résoudre des problèmes courants</a></dt>
-  <dd>Ce module fournit un ensemble d'articles au sujet des problèmes qu'on rencontre fréquemment lorsqu'on crée une page web : gérer les titres, ajouter des images ou des vidéos, mettre en avant une partie du texte, créer un formulaire, etc.</dd>
-</dl>
-
-<h2 id="Advanced_topics">Sujets avancés</h2>
-
-<dl>
-  <dt><a href="/fr/docs/Web/HTML/CORS_enabled_image">Images avec le contrôle d'accès HTTP</a></dt>
-  <dd>L'attribut <a href="/fr/docs/Web/HTML/Element/Img#attr-crossorigin"><code>crossorigin</code></a>, associé à un en-tête <a href="/fr/docs/Glossary/CORS">CORS</a> approprié, permet de charger des images définies par l'élément <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a> depuis des origines étrangères et de les utiliser dans un élément <a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a> comme si elles étaient chargées depuis l'origine actuelle.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Attributes/crossorigin">Attributs de réglage du CORS</a></dt>
-  <dd>Certains éléments HTML qui fournissent un support pour <a href="/fr/docs/Web/HTTP/CORS">CORS</a>, tels que <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a>, ont un attribut <code>crossorigin</code> (propriété <code>crossOrigin</code>), qui vous permet de configurer les requêtes CORS pour les données extraites de l'élément.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Preloading_content">Précharger du contenu avec <code>rel="preload"</code></a></dt>
-  <dd>La valeur <code>preload</code> de l'attribut <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> de l'élément <a href="/fr/docs/Web/HTML/Element/link#attr-rel"><code>rel</code></a> vous permet d'écrire des requêtes déclaratives de récupération dans votre <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a> HTML, en spécifiant les ressources dont vos pages auront besoin très rapidement après le chargement, et que vous souhaitez donc commencer à précharger au début du cycle de vie d'une page, avant que le cycle de rendu du navigateur ne se mette en marche. Cela permet de s'assurer que ces éléments sont disponibles plus tôt et qu'ils risquent moins de bloquer le premier rendu de la page, améliorant ainsi les performances. Cet article fournit un guide de base sur le fonctionnement du <code>preload</code>.</dd>
-</dl>
-
-<h2 id="References">Références</h2>
-
-<dl>
-  <dt><a href="/fr/docs/Web/HTML/Reference">Référence HTML</a></dt>
-  <dd>HTML est un langage décrivant la structure et le contenu sémantique d'un document web. Il est constitué d'<strong>éléments</strong>, chacun pouvant être paramétré grâce à différents <strong>attributs</strong>. Les documents HTML sont connectés à d'autres via des <a href="/en-US/docs/Web/HTML/Link_types">liens</a></dd>
-  <dt><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></dt>
-  <dd>Cette page liste les différents éléments HTML.</dd>
-  <dt class="landingPageList"><a href="/fr/docs/Web/HTML/Attributes">Liste des attributs HTML</a></dt>
-  <dd class="landingPageList">Les éléments du langage HTML possèdent des <strong>attributs</strong>. Il s'agit de valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement de diverses manières.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Global_attributes">Attributs universels</a></dt>
-  <dd>Les attributs universels peuvent être spécifiés sur tous les <a href="/fr/docs/Web/HTML/Element">éléments HTML</a>, <em>même ceux qui ne sont pas spécifiés dans la norme</em>. Par exemple, les navigateurs qui prennent en charge HTML5 masquent les contenus marqués comme <code>&lt;toto hidden&gt;…&lt;toto&gt;</code><code>, bien que </code><code>&lt;toto&gt;</code> ne soit pas un élément valide HTML.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Inline_elements">Éléments en ligne</a> et <a href="/fr/docs/Web/HTML/Block-level_elements">éléments de bloc</a></dt>
-  <dd>Les éléments HTML sont habituellement des éléments « en ligne » ou des éléments de bloc. Un élément en ligne occupe seulement l'espace associé aux balises. Les éléments de bloc sont une catégorie d'éléments HTML opposés aux éléments en ligne. Leur caractéristique principale réside dans le fait qu'ils sont séparés par un saut de ligne avant et après l'élément. Ce faisant, ils prennent la largeur de leurs conteneurs (créant ainsi un bloc de contenu).</dd>
-  <dt><a href="/fr/docs/Web/HTML/Link_types">Types de lien</a></dt>
-  <dd>Les différents liens permettent de décrire les relations entre deux documents qui sont reliés entre eux par un élément <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/Media/Formats">Formats de média audio et vidéo pris en charge par HTML</a></dt>
-  <dd>Les éléments <a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a> permettent d'ajouter des médias audio et vidéo directement dans le navigateur (sans avoir à utiliser des plugins ou programmes tiers).</dd>
-  <dt><a href="/fr/docs/Web/Guide/HTML/Content_categories">Types de contenu HTML</a></dt>
-  <dd>HTML s'organise selon différents types de contenu dont chacun peut être autorisé ou non en fonction du contexte. Ces catégories indiquent quels éléments peuvent être contenus ou non dans d'autres éléments. Cet article explique le fonctionnement de ces catégories.</dd>
-</dl>
-
-<h2 id="Related_topics">Sujets connexes</h2>
-
-<dl>
-  <dt><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></dt>
-  <dd>Cet article couvre la plupart des façons d'utiliser CSS pour ajouter de la couleur au contenu HTML, en indiquant les parties des documents HTML qui peuvent être colorées et les propriétés CSS à utiliser pour ce faire. Il comprend des exemples, des liens vers des outils de création de palettes, etc.</dd>
-</dl>
+{{HTMLSidebar}}
+
+**HTML** signifie « _HyperText Markup Language_ » qu'on peut traduire par « langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de représenter le contenu d'une page web et sa structure. D'autres technologies sont utilisées avec HTML pour décrire la présentation d'une page ([CSS](/fr/docs/Web/CSS)) et/ou ses fonctionnalités interactives ([JavaScript](/fr/docs/Web/JavaScript)).
+
+L'« hypertexte » désigne les liens qui relient les pages web entre elles, que ce soit au sein d'un même site web ou entre différents sites web. Les liens sont un aspect fondamental du Web. Ce sont eux qui forment cette « toile » (ce mot est traduit par _web_ en anglais). En téléchargeant du contenu sur l'Internet et en le reliant à des pages créées par d'autres personnes, vous devenez un participant actif du World Wide Web.
+
+Le langage HTML utilise des « balises » pour annoter du texte, des images et d'autres contenus afin de les afficher dans un navigateur web. Le balisage HTML comprend des « éléments » spéciaux tels que [`<head>`](/fr/docs/Web/HTML/Element/head), [`<title>`](/fr/docs/Web/HTML/Element/title), [`<body>`](/fr/docs/Web/HTML/Element/body), [`<header>`](/fr/docs/Web/HTML/Element/header), [`<footer>`](/fr/docs/Web/HTML/Element/footer), [`<article>`](/fr/docs/Web/HTML/Element/article), [`<section>`](/fr/docs/Web/HTML/Element/section), [`<p>`](/fr/docs/Web/HTML/Element/p), [`<div>`](/fr/docs/Web/HTML/Element/div), [`<span>`](/fr/docs/Web/HTML/Element/span), [`<img>`](/fr/docs/Web/HTML/Element/Img), [`<aside>`](/fr/docs/Web/HTML/Element/aside), [`<audio>`](/fr/docs/Web/HTML/Element/audio), [`<canvas>`](/fr/docs/Web/HTML/Element/canvas), [`<datalist>`](/fr/docs/Web/HTML/Element/datalist), [`<details>`](/fr/docs/Web/HTML/Element/details), [`<embed>`](/fr/docs/Web/HTML/Element/embed), [`<nav>`](/fr/docs/Web/HTML/Element/nav), [`<output>`](/fr/docs/Web/HTML/Element/output), [`<progress>`](/fr/docs/Web/HTML/Element/Progress), [`<video>`](/fr/docs/Web/HTML/Element/video), [`<ul>`](/fr/docs/Web/HTML/Element/ul), [`<ol>`](/fr/docs/Web/HTML/Element/ol), [`<li>`](/fr/docs/Web/HTML/Element/li) et bien d'autres.
+
+En HTML, les balises sont insensibles à la casse et peuvent aussi bien être écrites en minuscules, en majuscules voire avec un mélange des deux. Autrement dit, la balise `<title>` pourrait très bien être écrite comme `<Title>`, `<TiTle>` ou d'une autre façon.
+
+Les articles suivants fournissent des éléments de référence utiles au développement web.
+
+## Ressources clés
+
+- Introduction au HTML
+  - : Vous faites vos premiers pas dans le développement web ? [Nos articles sur les bases de HTML](/fr/docs/Learn/Getting_started_with_the_web/HTML_basics) expliquent ce qu'est HTML et comment l'utiliser.
+- Tutoriels HTML
+  - : Pour plus d'informations sur l'utilisation du HTML, des tutoriels et des exemples complets, vous pouvez consulter [notre section Apprendre HTML](/fr/docs/Learn/HTML).
+- Référence HTML
+  - : Dans notre [référence exhaustive](/fr/docs/Web/HTML/Reference), vous trouverez le détail de chaque élément et attribut constituant HTML.
+
+> **Remarque :**
+>
+> #### Vous cherchez à devenir un développeur web front-end ?
+>
+> Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif.
+>
+> [Commencer](/fr/docs/Learn/Front-end_web_developer)
+
+## Tutoriels pour les débutants
+
+La section [Apprendre HTML](/fr/docs/Learn/HTML) contient plusieurs modules pour vous apprendre à utiliser HTML — sans autre connaissance particulière.
+
+- [Une introduction à HTML](/fr/docs/Learn/HTML/Introduction_to_HTML)
+  - : Dans ce module, on brosse un premier portrait de HTML pour présenter les concepts importants, la syntaxe. On voit comment appliquer HTML sur du texte, comment créer des hyperliens et comment structurer une page web grâce à HTML.
+- [Le multimédia et l'intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding)
+  - : Dans ce module, on explore comment utiliser HTML pour intégrer des fichiers multimédias dans une page web. Cela couvre les différentes façons d'inclure une image, comment ajouter une vidéo ou un fichier audio voire aussi comment intégrer d'autres pages web.
+- [Les tableaux HTML](/fr/docs/Learn/HTML/Tables)
+  - : Il est parfois compliqué de représenter des données tabulaires de façon compréhensible et lisible sur une page web. Dans ce module, on voit les différentes balises utilisées pour construire des tableaux et certaines fonctionnalités plus complexes comme les légendes et résumés.
+- [Les formulaires HTML](/fr/docs/Learn/Forms)
+  - : Les formulaires sont cruciaux sur le Web, ils permettent de créer un compte sur un site, de se connecter, d'acheter des produits, d'écrire des commentaires, etc. Dans ce module, on voit comment créer des formulaires pour le navigateur (« côté client »).
+- [Utiliser HTML pour résoudre des problèmes courants](/fr/docs/Learn/HTML/Howto)
+  - : Ce module fournit un ensemble d'articles au sujet des problèmes qu'on rencontre fréquemment lorsqu'on crée une page web : gérer les titres, ajouter des images ou des vidéos, mettre en avant une partie du texte, créer un formulaire, etc.
+
+## Sujets avancés
+
+- [Images avec le contrôle d'accès HTTP](/fr/docs/Web/HTML/CORS_enabled_image)
+  - : L'attribut [`crossorigin`](/fr/docs/Web/HTML/Element/Img#attr-crossorigin), associé à un en-tête [CORS](/fr/docs/Glossary/CORS) approprié, permet de charger des images définies par l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img) depuis des origines étrangères et de les utiliser dans un élément [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) comme si elles étaient chargées depuis l'origine actuelle.
+- [Attributs de réglage du CORS](/fr/docs/Web/HTML/Attributes/crossorigin)
+  - : Certains éléments HTML qui fournissent un support pour [CORS](/fr/docs/Web/HTTP/CORS), tels que [`<img>`](/fr/docs/Web/HTML/Element/Img) ou [`<video>`](/fr/docs/Web/HTML/Element/video), ont un attribut `crossorigin` (propriété `crossOrigin`), qui vous permet de configurer les requêtes CORS pour les données extraites de l'élément.
+- [Précharger du contenu avec `rel="preload"`](/fr/docs/Web/HTML/Preloading_content)
+  - : La valeur `preload` de l'attribut [`<link>`](/fr/docs/Web/HTML/Element/link) de l'élément [`rel`](/fr/docs/Web/HTML/Element/link#attr-rel) vous permet d'écrire des requêtes déclaratives de récupération dans votre [`<head>`](/fr/docs/Web/HTML/Element/head) HTML, en spécifiant les ressources dont vos pages auront besoin très rapidement après le chargement, et que vous souhaitez donc commencer à précharger au début du cycle de vie d'une page, avant que le cycle de rendu du navigateur ne se mette en marche. Cela permet de s'assurer que ces éléments sont disponibles plus tôt et qu'ils risquent moins de bloquer le premier rendu de la page, améliorant ainsi les performances. Cet article fournit un guide de base sur le fonctionnement du `preload`.
+
+## Références
+
+- [Référence HTML](/fr/docs/Web/HTML/Reference)
+  - : HTML est un langage décrivant la structure et le contenu sémantique d'un document web. Il est constitué d'**éléments**, chacun pouvant être paramétré grâce à différents **attributs**. Les documents HTML sont connectés à d'autres via des [liens](/en-US/docs/Web/HTML/Link_types)
+- [Référence des éléments HTML](/fr/docs/Web/HTML/Element)
+  - : Cette page liste les différents éléments HTML.
+- [Liste des attributs HTML](/fr/docs/Web/HTML/Attributes)
+  - : Les éléments du langage HTML possèdent des **attributs**. Il s'agit de valeurs supplémentaires qui configurent les éléments ou ajustent leur comportement de diverses manières.
+- [Attributs universels](/fr/docs/Web/HTML/Global_attributes)
+  - : Les attributs universels peuvent être spécifiés sur tous les [éléments HTML](/fr/docs/Web/HTML/Element), _même ceux qui ne sont pas spécifiés dans la norme_. Par exemple, les navigateurs qui prennent en charge HTML5 masquent les contenus marqués comme ` <toto hidden>…<toto>`` , bien que ``<toto> ` ne soit pas un élément valide HTML.
+- [Éléments en ligne](/fr/docs/Web/HTML/Inline_elements) et [éléments de bloc](/fr/docs/Web/HTML/Block-level_elements)
+  - : Les éléments HTML sont habituellement des éléments « en ligne » ou des éléments de bloc. Un élément en ligne occupe seulement l'espace associé aux balises. Les éléments de bloc sont une catégorie d'éléments HTML opposés aux éléments en ligne. Leur caractéristique principale réside dans le fait qu'ils sont séparés par un saut de ligne avant et après l'élément. Ce faisant, ils prennent la largeur de leurs conteneurs (créant ainsi un bloc de contenu).
+- [Types de lien](/fr/docs/Web/HTML/Link_types)
+  - : Les différents liens permettent de décrire les relations entre deux documents qui sont reliés entre eux par un élément [`<a>`](/fr/docs/Web/HTML/Element/a), [`<area>`](/fr/docs/Web/HTML/Element/area) ou [`<link>`](/fr/docs/Web/HTML/Element/link).
+- [Formats de média audio et vidéo pris en charge par HTML](/fr/docs/Web/Media/Formats)
+  - : Les éléments [`<audio>`](/fr/docs/Web/HTML/Element/audio) et [`<video>`](/fr/docs/Web/HTML/Element/video) permettent d'ajouter des médias audio et vidéo directement dans le navigateur (sans avoir à utiliser des plugins ou programmes tiers).
+- [Types de contenu HTML](/fr/docs/Web/Guide/HTML/Content_categories)
+  - : HTML s'organise selon différents types de contenu dont chacun peut être autorisé ou non en fonction du contexte. Ces catégories indiquent quels éléments peuvent être contenus ou non dans d'autres éléments. Cet article explique le fonctionnement de ces catégories.
+
+## Sujets connexes
+
+- [Appliquer des couleurs sur des éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color)
+  - : Cet article couvre la plupart des façons d'utiliser CSS pour ajouter de la couleur au contenu HTML, en indiquant les parties des documents HTML qui peuvent être colorées et les propriétés CSS à utiliser pour ce faire. Il comprend des exemples, des liens vers des outils de création de palettes, etc.
diff --git a/files/fr/web/html/index/index.md b/files/fr/web/html/index/index.md
index 1b11c889ca..73f68028a6 100644
--- a/files/fr/web/html/index/index.md
+++ b/files/fr/web/html/index/index.md
@@ -6,4 +6,4 @@ tags:
   - Index
 translation_of: Web/HTML/Index
 ---
-<p>{{Index("/fr/docs/Web/HTML")}}</p>
+{{Index("/fr/docs/Web/HTML")}}
diff --git a/files/fr/web/html/inline_elements/index.md b/files/fr/web/html/inline_elements/index.md
index 541c51b8c2..7c8bc2f452 100644
--- a/files/fr/web/html/inline_elements/index.md
+++ b/files/fr/web/html/inline_elements/index.md
@@ -13,33 +13,36 @@ tags:
 translation_of: Web/HTML/Inline_elements
 original_slug: Web/HTML/Éléments_en_ligne
 ---
-<p>Les éléments HTML (<strong>Hypertext Markup Language</strong>) étaient historiquement catégorisés comme des éléments de type « bloc » (<i>block</i> en anglais) ou de type « en ligne » (<i>inline</i> en anglais). Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans le module de spécification <a href="/fr/docs/Web/CSS/CSS_Flow_Layout"><i>Flow Layout</i></a> qui définit l'organisation visuelle par défaut des éléments (le « flux » normal). Les éléments en lignes n'occupent que l'espace entre leurs balises et s'insèrent dans le flux du contenu plutôt que de créer un nouveau « bloc » visuel. Dans cet article, nous verrons en détails ces éléments en ligne et leurs différences par rapport aux <a href="/fr/docs/Web/HTML/Block-level_elements">éléments de bloc</a>.</p>
+Les éléments HTML (**Hypertext Markup Language**) étaient historiquement catégorisés comme des éléments de type « bloc » (_block_ en anglais) ou de type « en ligne » (_inline_ en anglais). Comme il s'agit d'une caractéristique de présentation, elle est aujourd'hui spécifiée par CSS dans le module de spécification [_Flow Layout_](/fr/docs/Web/CSS/CSS_Flow_Layout) qui définit l'organisation visuelle par défaut des éléments (le « flux » normal). Les éléments en lignes n'occupent que l'espace entre leurs balises et s'insèrent dans le flux du contenu plutôt que de créer un nouveau « bloc » visuel. Dans cet article, nous verrons en détails ces éléments en ligne et leurs différences par rapport aux [éléments de bloc](/fr/docs/Web/HTML/Block-level_elements).
 
-<div class="note">
-  <p><strong>Note :</strong> Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.</p>
-</div>
+> **Note :** Un élément en ligne ne commence pas sur une nouvelle ligne et prend uniquement la largeur qui lui est nécessaire.
 
-<h2 id="Inline_vs_block-level_elements_a_demonstration">Éléments en ligne et éléments de bloc : un exemple</h2>
+## Éléments en ligne et éléments de bloc : un exemple
 
-<p>Un exemple vaut mieux qu'une longue explication. Voici pour commencer la feuille de style CSS que nous utiliserons :</p>
+Un exemple vaut mieux qu'une longue explication. Voici pour commencer la feuille de style CSS que nous utiliserons :
 
-<pre class="brush: css">.highlight {
+```css
+.highlight {
   background-color:#ee3;
-}</pre>
+}
+```
 
-<h3 id="Inline">Élément en ligne</h3>
+### Élément en ligne
 
-<p>Le fragment de code HTML qui suit utilise un élément en ligne avec la classe <code>highlight</code> :</p>
+Le fragment de code HTML qui suit utilise un élément en ligne avec la classe `highlight` :
 
-<pre class="brush: html">&lt;p&gt;L'élément span qui suit est un &lt;span class="highlight"&gt;élément en ligne&lt;/span&gt; ;
+```html
+<p>L'élément span qui suit est un <span class="highlight">élément en ligne</span> ;
 son arrière-plan est coloré afin d'illustrer la zone couverte par cet élément en
-ligne.&lt;/p&gt;</pre>
+ligne.</p>
+```
 
-<p>Dans cet exemple, l'élément <a href="/fr/docs/Web/HTML/Element/p"><code>&lt;p&gt;</code></a> (le paragraphe) est un élément de bloc qui contient du texte. Dans ce texte, on a un élément <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a> qui est un élément en ligne. L'élément <code>&lt;span&gt;</code> étant un élément en ligne, le paragraphe est bien affiché sous la forme d'un flux de texte sans rupture :</p>
+Dans cet exemple, l'élément [`<p>`](/fr/docs/Web/HTML/Element/p) (le paragraphe) est un élément de bloc qui contient du texte. Dans ce texte, on a un élément [`<span>`](/fr/docs/Web/HTML/Element/span) qui est un élément en ligne. L'élément `<span>` étant un élément en ligne, le paragraphe est bien affiché sous la forme d'un flux de texte sans rupture :
 
-<p>{{EmbedLiveSample("Inline", "", 120)}}</p>
+{{EmbedLiveSample("Inline", "", 120)}}
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   margin: 0;
   padding: 4px;
   border: 1px solid #333;
@@ -47,17 +50,21 @@ ligne.&lt;/p&gt;</pre>
 
 .highlight {
   background-color:#ee3;
-}</pre>
+}
+```
 
-<h3 id="Block-level">Élément de bloc</h3>
+### Élément de bloc
 
-<p>Transformons l'exemple précédent pour passer d'un élément <code>&lt;span&gt;</code> à un élément <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> qui est un élément de bloc :</p>
+Transformons l'exemple précédent pour passer d'un élément `<span>` à un élément [`<div>`](/fr/docs/Web/HTML/Element/div) qui est un élément de bloc :
 
-<pre class="brush: html">&lt;p&gt;L'élément div qui suit est un &lt;div class="highlight"&gt;élément de bloc&lt;/div&gt; ;
+```html
+<p>L'élément div qui suit est un <div class="highlight">élément de bloc</div> ;
 son arrière-plan est coloré afin d'illustrer la zone couverte par cet élément de
-bloc.&lt;/p&gt;</pre>
+bloc.</p>
+```
 
-<pre class="brush: css hidden">body {
+```css hidden
+body {
   margin: 0;
   padding: 4px;
   border: 1px solid #333;
@@ -65,97 +72,92 @@ bloc.&lt;/p&gt;</pre>
 
 .highlight {
   background-color:#ee3;
-}</pre>
-
-<p>Et voici le résultat qu'on obtient :</p>
-
-<p>{{EmbedLiveSample("Block-level", "", 150)}}</p>
-
-<p>On voit ici que l'élément <code>&lt;div&gt;</code> modifie complètement la disposition du texte et le découpe en trois parties : une partie avant le <code>&lt;div&gt;</code>, une partie constituée avec le texte de l'élément <code>&lt;div&gt;</code> et une dernière partie ensuite.</p>
-
-<h3 id="Changing_element_levels">Modifier le type d'un d'élément</h3>
-
-<p>Il est possible de choisir le mode d'affichage d'un élément afin de modifier son comportement par défaut grâce à la propriété CSS <a href="/fr/docs/Web/CSS/display"><code>display</code></a>. En passant la valeur de <code>display</code> de <code>"inline"</code> à <code>"block"</code>, on peut indiquer au navigateur d'afficher l'élément comme une boîte de bloc plutôt que comme une boîte en ligne. Attention, l'élément ne sera plus affiché de la même façon, vérifiez le résultat obtenu. De plus, ce changement n'impactera pas la catégorie et le modèle de contenu de l'élément : utiliser <code>display:block</code> sur un élément <a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a> ne permettra toujours pas de lui imbriquer un élément <a href="/fr/docs/Web/HTML/Element/div"><code>&lt;div&gt;</code></a> à l'intérieur.</p>
-
-<h2 id="Conceptual_differences">Différences conceptuelles</h2>
-
-<p>Voici, en résumé, les différences conceptuelles entre les éléments en ligne et les éléments de bloc :</p>
-
-<dl>
-  <dt>Modèle de contenu</dt>
-  <dd>En général, les éléments en ligne ne peuvent contenir que des données ou d'autres éléments en ligne. Il n'est pas possible de placer des éléments de bloc à l'intérieur d'éléments en ligne.</dd>
-  <dt>Formatage</dt>
-  <dd>Par défaut, les éléments en ligne n'introduisent pas de saut de ligne dans le flux du document. En revanche, les éléments de bloc provoquent un saut de ligne (ce comportement peut être modifié grâce au CSS).</dd>
-</dl>
-
-<h2 id="Elements">Liste des éléments en ligne</h2>
-
-<p>Bien que cette notion de présentation soit désormais (depuis HTML5) portée par le CSS et remplacée par les <a href="/fr/docs/Web/Guide/HTML/Content_categories">catégories de contenu</a>, voici les éléments HTML qui se comportent par défaut comme des éléments en ligne:</p>
-
-<ul>
-  <li><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/abbr"><code>&lt;abbr&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/acronym"><code>&lt;acronym&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a> (si les contrôles sont visibles)</li>
-  <li><a href="/fr/docs/Web/HTML/Element/b"><code>&lt;b&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/bdi"><code>&lt;bdi&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/bdo"><code>&lt;bdo&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/big"><code>&lt;big&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/br"><code>&lt;br&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/Button"><code>&lt;button&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/canvas"><code>&lt;canvas&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/cite"><code>&lt;cite&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/code"><code>&lt;code&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/data"><code>&lt;data&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/datalist"><code>&lt;datalist&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/del"><code>&lt;del&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/dfn"><code>&lt;dfn&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/em"><code>&lt;em&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/embed"><code>&lt;embed&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/i"><code>&lt;i&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/iframe"><code>&lt;iframe&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/ins"><code>&lt;ins&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/kbd"><code>&lt;kbd&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/Label"><code>&lt;label&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/map"><code>&lt;map&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/mark"><code>&lt;mark&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/Meter"><code>&lt;meter&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/noscript"><code>&lt;noscript&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/output"><code>&lt;output&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/picture"><code>&lt;picture&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/Progress"><code>&lt;progress&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/q"><code>&lt;q&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/ruby"><code>&lt;ruby&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/s"><code>&lt;s&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/samp"><code>&lt;samp&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/script"><code>&lt;script&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/select"><code>&lt;select&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/slot"><code>&lt;slot&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/small"><code>&lt;small&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/span"><code>&lt;span&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/strong"><code>&lt;strong&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/sub"><code>&lt;sub&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/sup"><code>&lt;sup&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/SVG/Element/svg"><code>&lt;svg&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/template"><code>&lt;template&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/u"><code>&lt;u&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/tt"><code>&lt;tt&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/var"><code>&lt;var&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a></li>
-  <li><a href="/fr/docs/Web/HTML/Element/wbr"><code>&lt;wbr&gt;</code></a></li>
-</ul>
-
-<h2 id="See_also">Voir aussi</h2>
-
-<ul>
-  <li><a href="/fr/docs/Web/HTML/Block-level_elements">Les éléments de bloc</a></li>
-  <li><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></li>
-  <li><a href="/fr/docs/Web/CSS/display">La propriété CSS <code>display</code></a></li>
-  <li><a href="/fr/docs/Web/Guide/HTML/Content_categories">Les catégories de contenu</a></li>
-  <li><a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Les éléments de bloc et les éléments en ligne dans le flux normal</a></li>
-</ul>
-
-<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}</div>
+}
+```
+
+Et voici le résultat qu'on obtient :
+
+{{EmbedLiveSample("Block-level", "", 150)}}
+
+On voit ici que l'élément `<div>` modifie complètement la disposition du texte et le découpe en trois parties : une partie avant le `<div>`, une partie constituée avec le texte de l'élément `<div>` et une dernière partie ensuite.
+
+### Modifier le type d'un d'élément
+
+Il est possible de choisir le mode d'affichage d'un élément afin de modifier son comportement par défaut grâce à la propriété CSS [`display`](/fr/docs/Web/CSS/display). En passant la valeur de `display` de `"inline"` à `"block"`, on peut indiquer au navigateur d'afficher l'élément comme une boîte de bloc plutôt que comme une boîte en ligne. Attention, l'élément ne sera plus affiché de la même façon, vérifiez le résultat obtenu. De plus, ce changement n'impactera pas la catégorie et le modèle de contenu de l'élément : utiliser `display:block` sur un élément [`<span>`](/fr/docs/Web/HTML/Element/span) ne permettra toujours pas de lui imbriquer un élément [`<div>`](/fr/docs/Web/HTML/Element/div) à l'intérieur.
+
+## Différences conceptuelles
+
+Voici, en résumé, les différences conceptuelles entre les éléments en ligne et les éléments de bloc :
+
+- Modèle de contenu
+  - : En général, les éléments en ligne ne peuvent contenir que des données ou d'autres éléments en ligne. Il n'est pas possible de placer des éléments de bloc à l'intérieur d'éléments en ligne.
+- Formatage
+  - : Par défaut, les éléments en ligne n'introduisent pas de saut de ligne dans le flux du document. En revanche, les éléments de bloc provoquent un saut de ligne (ce comportement peut être modifié grâce au CSS).
+
+## Liste des éléments en ligne
+
+Bien que cette notion de présentation soit désormais (depuis HTML5) portée par le CSS et remplacée par les [catégories de contenu](/fr/docs/Web/Guide/HTML/Content_categories), voici les éléments HTML qui se comportent par défaut comme des éléments en ligne:
+
+- [`<a>`](/fr/docs/Web/HTML/Element/a)
+- [`<abbr>`](/fr/docs/Web/HTML/Element/abbr)
+- [`<acronym>`](/fr/docs/Web/HTML/Element/acronym)
+- [`<audio>`](/fr/docs/Web/HTML/Element/audio) (si les contrôles sont visibles)
+- [`<b>`](/fr/docs/Web/HTML/Element/b)
+- [`<bdi>`](/fr/docs/Web/HTML/Element/bdi)
+- [`<bdo>`](/fr/docs/Web/HTML/Element/bdo)
+- [`<big>`](/fr/docs/Web/HTML/Element/big)
+- [`<br>`](/fr/docs/Web/HTML/Element/br)
+- [`<button>`](/fr/docs/Web/HTML/Element/Button)
+- [`<canvas>`](/fr/docs/Web/HTML/Element/canvas)
+- [`<cite>`](/fr/docs/Web/HTML/Element/cite)
+- [`<code>`](/fr/docs/Web/HTML/Element/code)
+- [`<data>`](/fr/docs/Web/HTML/Element/data)
+- [`<datalist>`](/fr/docs/Web/HTML/Element/datalist)
+- [`<del>`](/fr/docs/Web/HTML/Element/del)
+- [`<dfn>`](/fr/docs/Web/HTML/Element/dfn)
+- [`<em>`](/fr/docs/Web/HTML/Element/em)
+- [`<embed>`](/fr/docs/Web/HTML/Element/embed)
+- [`<i>`](/fr/docs/Web/HTML/Element/i)
+- [`<iframe>`](/fr/docs/Web/HTML/Element/iframe)
+- [`<img>`](/fr/docs/Web/HTML/Element/Img)
+- [`<input>`](/fr/docs/Web/HTML/Element/Input)
+- [`<ins>`](/fr/docs/Web/HTML/Element/ins)
+- [`<kbd>`](/fr/docs/Web/HTML/Element/kbd)
+- [`<label>`](/fr/docs/Web/HTML/Element/Label)
+- [`<map>`](/fr/docs/Web/HTML/Element/map)
+- [`<mark>`](/fr/docs/Web/HTML/Element/mark)
+- [`<meter>`](/fr/docs/Web/HTML/Element/Meter)
+- [`<noscript>`](/fr/docs/Web/HTML/Element/noscript)
+- [`<object>`](/fr/docs/Web/HTML/Element/object)
+- [`<output>`](/fr/docs/Web/HTML/Element/output)
+- [`<picture>`](/fr/docs/Web/HTML/Element/picture)
+- [`<progress>`](/fr/docs/Web/HTML/Element/Progress)
+- [`<q>`](/fr/docs/Web/HTML/Element/q)
+- [`<ruby>`](/fr/docs/Web/HTML/Element/ruby)
+- [`<s>`](/fr/docs/Web/HTML/Element/s)
+- [`<samp>`](/fr/docs/Web/HTML/Element/samp)
+- [`<script>`](/fr/docs/Web/HTML/Element/script)
+- [`<select>`](/fr/docs/Web/HTML/Element/select)
+- [`<slot>`](/fr/docs/Web/HTML/Element/slot)
+- [`<small>`](/fr/docs/Web/HTML/Element/small)
+- [`<span>`](/fr/docs/Web/HTML/Element/span)
+- [`<strong>`](/fr/docs/Web/HTML/Element/strong)
+- [`<sub>`](/fr/docs/Web/HTML/Element/sub)
+- [`<sup>`](/fr/docs/Web/HTML/Element/sup)
+- [`<svg>`](/fr/docs/Web/SVG/Element/svg)
+- [`<template>`](/fr/docs/Web/HTML/Element/template)
+- [`<u>`](/fr/docs/Web/HTML/Element/u)
+- [`<tt>`](/fr/docs/Web/HTML/Element/tt)
+- [`<var>`](/fr/docs/Web/HTML/Element/var)
+- [`<video>`](/fr/docs/Web/HTML/Element/video)
+- [`<wbr>`](/fr/docs/Web/HTML/Element/wbr)
+
+## Voir aussi
+
+- [Les éléments de bloc](/fr/docs/Web/HTML/Block-level_elements)
+- [Référence des éléments HTML](/fr/docs/Web/HTML/Element)
+- [La propriété CSS `display`](/fr/docs/Web/CSS/display)
+- [Les catégories de contenu](/fr/docs/Web/Guide/HTML/Content_categories)
+- [Les éléments de bloc et les éléments en ligne dans le flux normal](/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow)
+
+{{QuickLinksWithSubpages("/fr/docs/Web/HTML/")}}
diff --git a/files/fr/web/html/link_types/dns-prefetch/index.md b/files/fr/web/html/link_types/dns-prefetch/index.md
index 1e61ea8584..7565575fee 100644
--- a/files/fr/web/html/link_types/dns-prefetch/index.md
+++ b/files/fr/web/html/link_types/dns-prefetch/index.md
@@ -1,17 +1,17 @@
 ---
-title: 'Types de liens : dns-prefetch'
+title: "Types de liens\_: dns-prefetch"
 slug: Web/HTML/Link_types/dns-prefetch
+translation_of: Web/HTML/Link_types/dns-prefetch
 browser-compat: html.elements.link.rel.dns-prefetch
-translation_of: 'Web/HTML/Link_types/dns-prefetch'
 ---
-<p>Le mot-clé <strong><code>dns-prefetch</code></strong> de l'attribut {{HTMLAttrxRef("rel", "link")}} de l'élément {{HTMLElement("link")}} est une information destinée à indiquer aux navigateurs que la personne visitant le site va avoir besoin de charger des ressources provenant de l'origine de la ressource cible, et donc que le navigateur peut sans doute améliorer l'expérience de visite en effectuant la résolution DNS de cette origine de façon préventive.</p>
+Le mot-clé **`dns-prefetch`** de l'attribut {{HTMLAttrxRef("rel", "link")}} de l'élément {{HTMLElement("link")}} est une information destinée à indiquer aux navigateurs que la personne visitant le site va avoir besoin de charger des ressources provenant de l'origine de la ressource cible, et donc que le navigateur peut sans doute améliorer l'expérience de visite en effectuant la résolution DNS de cette origine de façon préventive.
 
-<p>Voir <a href="/fr/docs/Web/Performance/dns-prefetch">Utilisation de <code>dns-prefetch</code></a> pour plus de détails.</p>
+Voir [Utilisation de `dns-prefetch`](/fr/docs/Web/Performance/dns-prefetch) pour plus de détails.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
diff --git a/files/fr/web/html/link_types/index.md b/files/fr/web/html/link_types/index.md
index 8e06e6866b..26b3b23cca 100644
--- a/files/fr/web/html/link_types/index.md
+++ b/files/fr/web/html/link_types/index.md
@@ -10,12 +10,14 @@ tags:
 translation_of: Web/HTML/Link_types
 original_slug: Web/HTML/Types_de_lien
 ---
-<div>{{HTMLSidebar}}</div>
+{{HTMLSidebar}}
 
-<p>En HTML, les types de lien indiquent la relation entre deux documents, reliés ensemble grâce à un élément <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>.</p>
+En HTML, les types de lien indiquent la relation entre deux documents, reliés ensemble grâce à un élément [`<a>`](/fr/docs/Web/HTML/Element/a), [`<area>`](/fr/docs/Web/HTML/Element/area), [`<form>`](/fr/docs/Web/HTML/Element/Form) ou [`<link>`](/fr/docs/Web/HTML/Element/link).
 
 <table class="standard-table">
-  <caption>Liste des types de lien HTML et leur signification</caption>
+  <caption>
+    Liste des types de lien HTML et leur signification
+  </caption>
   <thead>
     <tr>
       <th scope="col">Type de lien</th>
@@ -29,262 +31,929 @@ original_slug: Web/HTML/Types_de_lien
       <td><code>alternate</code></td>
       <td>
         <ul>
-          <li>Si l'élément est un élément <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> et que l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-rel"><code>&lt;rel&gt;</code></a> contient le type <code>stylesheet</code>, ce lien définit <a href="/fr/docs/Web/CSS/Alternative_style_sheets">une feuille de style alternative</a>. Dans ce cas, l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-title"><code>&lt;title&gt;</code></a> doit être présent et ne doit pas être la chaîne de caractères vide.</li>
-          <li>Si l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-type"><code>type</code></a> vaut <code>application/rss+xml</code> ou <code>application/atom+xml</code>, le lien définit <a href="/fr/docs/Web/Archive/RSS/Premiers_pas/Syndication">un flux de syndication</a>. Le premier flux définit sur la page est le flux par défaut.</li>
-          <li>Sinon, le lien définit une page alternative, il peut s'agir :
+          <li>
+            Si l'élément est un élément
+            <a href="/fr/docs/Web/HTML/Element/link"
+              ><code>&#x3C;link></code></a
+            >
+            et que l'attribut
+            <a href="/fr/docs/Web/HTML/Element/link#attr-rel"
+              ><code>&#x3C;rel></code></a
+            >
+            contient le type <code>stylesheet</code>, ce lien définit
+            <a href="/fr/docs/Web/CSS/Alternative_style_sheets"
+              >une feuille de style alternative</a
+            >. Dans ce cas, l'attribut
+            <a href="/fr/docs/Web/HTML/Element/link#attr-title"
+              ><code>&#x3C;title></code></a
+            >
+            doit être présent et ne doit pas être la chaîne de caractères vide.
+          </li>
+          <li>
+            Si l'attribut
+            <a href="/fr/docs/Web/HTML/Element/link#attr-type"
+              ><code>type</code></a
+            >
+            vaut <code>application/rss+xml</code> ou
+            <code>application/atom+xml</code>, le lien définit
+            <a href="/fr/docs/Web/Archive/RSS/Premiers_pas/Syndication"
+              >un flux de syndication</a
+            >. Le premier flux définit sur la page est le flux par défaut.
+          </li>
+          <li>
+            Sinon, le lien définit une page alternative, il peut s'agir :
             <ul>
-              <li>Si l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-media"><code>media</code></a> est défini, d'une page destinée à un autre support (par exemple une tablette)</li>
-              <li>D'une page dans une autre langue si l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-hreflang"><code>hreflang</code></a> est défini,</li>
-              <li>D'une page dans un autre format (par exemple PDF) si l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-type"><code>type</code></a> est défini,</li>
+              <li>
+                Si l'attribut
+                <a href="/fr/docs/Web/HTML/Element/link#attr-media"
+                  ><code>media</code></a
+                >
+                est défini, d'une page destinée à un autre support (par exemple
+                une tablette)
+              </li>
+              <li>
+                D'une page dans une autre langue si l'attribut
+                <a href="/fr/docs/Web/HTML/Element/link#attr-hreflang"
+                  ><code>hreflang</code></a
+                >
+                est défini,
+              </li>
+              <li>
+                D'une page dans un autre format (par exemple PDF) si l'attribut
+                <a href="/fr/docs/Web/HTML/Element/link#attr-type"
+                  ><code>type</code></a
+                >
+                est défini,
+              </li>
               <li>D'une combinaison de ces documents.</li>
             </ul>
           </li>
         </ul>
       </td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>archives</code> {{obsolete_inline}}</td>
-      <td><p>Ce type définit un hyperlien vers un document qui contient un lien d'archive vers le document courant. Un billet de blog pourrait ainsi créer un lien vers un index qui liste les articles publiés pendant ce mois.</p>
-      <p><strong>Note :</strong> Bien que la forme <code>archive</code> (au singulier) soit reconnue, elle est incorrecte et doit être évitée.</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <p>
+          Ce type définit un hyperlien vers un document qui contient un lien
+          d'archive vers le document courant. Un billet de blog pourrait ainsi
+          créer un lien vers un index qui liste les articles publiés pendant ce
+          mois.
+        </p>
+        <p>
+          <strong>Note :</strong> Bien que la forme <code>archive</code> (au
+          singulier) soit reconnue, elle est incorrecte et doit être évitée.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>author</code></td>
-      <td><p>Ce type définit un hyperlien vers une page qui décrit l'auteur ou qui fournit un moyen de contacter l'auteur du document.</p>
-      <p><strong>Note :</strong> Ce lien peut être un lien <code>mailto:</code> bien que ce ne soit pas recommandé afin d'éviter la collecte de l'adresse électronique (mieux vaut avoir un formulaire de contact).</p>
-      <p>Bien que l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-rev"><code>&lt;rev&gt;</code></a> soit reconnu pour les éléments <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, il ne faut pas utiliser cet attribut avec un type de lien « <code>made</code> » mais plutôt utiliser <a href="/fr/docs/Web/HTML/Element/link#attr-rel"><code>&lt;rel&gt;</code></a> avec ce type de lien (« <code>author</code> »).</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <p>
+          Ce type définit un hyperlien vers une page qui décrit l'auteur ou qui
+          fournit un moyen de contacter l'auteur du document.
+        </p>
+        <p>
+          <strong>Note :</strong> Ce lien peut être un lien
+          <code>mailto:</code> bien que ce ne soit pas recommandé afin d'éviter
+          la collecte de l'adresse électronique (mieux vaut avoir un formulaire
+          de contact).
+        </p>
+        <p>
+          Bien que l'attribut
+          <a href="/fr/docs/Web/HTML/Element/link#attr-rev"
+            ><code>&#x3C;rev></code></a
+          >
+          soit reconnu pour les éléments
+          <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+          >,
+          <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a>
+          et
+          <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a
+          >, il ne faut pas utiliser cet attribut avec un type de lien «
+          <code>made</code> » mais plutôt utiliser
+          <a href="/fr/docs/Web/HTML/Element/link#attr-rel"
+            ><code>&#x3C;rel></code></a
+          >
+          avec ce type de lien (« <code>author</code> »).
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>bookmark</code></td>
-      <td><p>Ce type de lien indique l'hyperlien est <a href="https://fr.wikipedia.org/wiki/Permalien">un permalien</a> pour l'élément <a href="/fr/docs/Web/HTML/Element/article"><code>&lt;article&gt;</code></a> qui est l'ancêtre le plus proche. S'il n'y en a aucun, c'est un permalien pour <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">la section</a> la plus proche de l'élément courant.</p>
-      <p>Ce type de lien permet de placer un marque-page pour un seul article d'une page qui contient plusieurs articles (par exemple un agrégateur).</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <p>
+          Ce type de lien indique l'hyperlien est
+          <a href="https://fr.wikipedia.org/wiki/Permalien">un permalien</a>
+          pour l'élément
+          <a href="/fr/docs/Web/HTML/Element/article"
+            ><code>&#x3C;article></code></a
+          >
+          qui est l'ancêtre le plus proche. S'il n'y en a aucun, c'est un
+          permalien pour
+          <a href="/fr/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines"
+            >la section</a
+          >
+          la plus proche de l'élément courant.
+        </p>
+        <p>
+          Ce type de lien permet de placer un marque-page pour un seul article
+          d'une page qui contient plusieurs articles (par exemple un
+          agrégateur).
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>canonical</code></td>
-      <td>Un lien canonique est un élément HTML qui aide les webmasters à ne pas dupliquer du contenu en indiquant la version <em>canonique</em> ou <em>préférée</em> de la page pour l'optimisation à destination des moteurs de recherche.</td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        Un lien canonique est un élément HTML qui aide les webmasters à ne pas
+        dupliquer du contenu en indiquant la version <em>canonique</em> ou
+        <em>préférée</em> de la page pour l'optimisation à destination des
+        moteurs de recherche.
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
-      <td><code><a href="/fr/docs/Web/HTML/Link_types/dns-prefetch">dns-prefetch</a></code> {{experimental_inline}}</td>
-      <td>Ce type de lien indique au navigateur qu'une ressource est nécessaire et permet au navigateur d'effectuer une requête DNS et un établissement de connexion avant que l'utilisateur clique sur le lien.</td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <code
+          ><a href="/fr/docs/Web/HTML/Link_types/dns-prefetch"
+            >dns-prefetch</a
+          ></code
+        >
+        {{experimental_inline}}
+      </td>
+      <td>
+        Ce type de lien indique au navigateur qu'une ressource est nécessaire et
+        permet au navigateur d'effectuer une requête DNS et un établissement de
+        connexion avant que l'utilisateur clique sur le lien.
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>external</code></td>
-      <td>Ce type de lien indique que l'hyperlien mène vers une ressource située à l'extérieur du site sur lequel se trouve la page courante. Autrement dit, en suivant ce lien, l'utilisateur quitte le site qu'il visite.</td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
+      <td>
+        Ce type de lien indique que l'hyperlien mène vers une ressource située à
+        l'extérieur du site sur lequel se trouve la page courante. Autrement
+        dit, en suivant ce lien, l'utilisateur quitte le site qu'il visite.
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>first</code> {{obsolete_inline}}</td>
-      <td><p>Ce type indique que l'hyperlien mène à la première ressource dans la série de ressources à laquelle appartient la page actuelle.</p>
-      <p><strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>last</code>, <code>prev</code>, <code>next</code> (pour respectivement la dernière, la précédente et la suivante).</p>
-      <p>Bien que les synonymes <code>begin</code> et <code>start</code> puissent être reconnus, ils sont incorrects et devraient être évités.</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <p>
+          Ce type indique que l'hyperlien mène à la première ressource dans la
+          série de ressources à laquelle appartient la page actuelle.
+        </p>
+        <p>
+          <strong>Note :</strong> les autres types de lien permettant une
+          navigation séquentielle sont : <code>last</code>, <code>prev</code>,
+          <code>next</code> (pour respectivement la dernière, la précédente et
+          la suivante).
+        </p>
+        <p>
+          Bien que les synonymes <code>begin</code> et
+          <code>start</code> puissent être reconnus, ils sont incorrects et
+          devraient être évités.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>help</code></td>
       <td>
         <ul>
-        <li>Si l'élément est un élément <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, ce type indique que l'hyperlien mène vers une ressource contenant de l'aide sur l'utilisation de l'élément parent du lien et de ses descendants.</li>
-        <li>Si l'élément est un élément <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, ce type indique que l'hyperlien mène vers une ressource fournissant une aide à propos de la page entière.</li>
+          <li>
+            Si l'élément est un élément
+            <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a> ou
+            <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+            >, ce type indique que l'hyperlien mène vers une ressource contenant
+            de l'aide sur l'utilisation de l'élément parent du lien et de ses
+            descendants.
+          </li>
+          <li>
+            Si l'élément est un élément
+            <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a
+            >, ce type indique que l'hyperlien mène vers une ressource
+            fournissant une aide à propos de la page entière.
+          </li>
         </ul>
       </td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
       <td><em>Aucun</em>.</td>
     </tr>
     <tr>
       <td><code>icon</code></td>
-      <td><p>Ce type définit une ressource qui représente la page dans l'interface utilisateur. C'est généralement une icône (visuelle ou auditive).</p>
-      <p>Les attributs <a href="/fr/docs/Web/HTML/Element/link#attr-media"><code>media</code></a>, <a href="/fr/docs/Web/HTML/Element/link#attr-type"><code>type</code></a> et <a href="/fr/docs/Web/HTML/Element/link#attr-sizes"><code>sizes</code></a> permettent au navigateur de choisir l'icône la plus appropriée au contexte. Si plusieurs ressources sont équivalentes, le navigateur sélectionnera celle qui est déclarée en dernière, dans l'ordre des éléments de l'arbre du document. Ces attributs ne sont que des indications et les ressources associées peuvent ne pas correspondre, auquel cas, le navigateur en sélectionnera une autre s'il en existe une adéquate.</p>
-      <p><strong>Note :</strong> sur iOS, ce type de lien n'est pas utilisé, à la place, ce sont les relations (<a href="/fr/docs/Web/HTML/Element/link#attr-rel"><code>rel</code></a>) <code><a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4">apple-touch-icon</a></code> et <code><a href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6">apple-touch-startup-image</a></code> qui sont utilisées.</p>
-      <p>Le type de lien <code>shortcut</code> est souvent vu avant <code>icon</code> mais il n'est pas conforme et les navigateurs l'ignorent, c'est pourquoi il ne doit plus être utilisé.</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <p>
+          Ce type définit une ressource qui représente la page dans l'interface
+          utilisateur. C'est généralement une icône (visuelle ou auditive).
+        </p>
+        <p>
+          Les attributs
+          <a href="/fr/docs/Web/HTML/Element/link#attr-media"
+            ><code>media</code></a
+          >,
+          <a href="/fr/docs/Web/HTML/Element/link#attr-type"
+            ><code>type</code></a
+          >
+          et
+          <a href="/fr/docs/Web/HTML/Element/link#attr-sizes"
+            ><code>sizes</code></a
+          >
+          permettent au navigateur de choisir l'icône la plus appropriée au
+          contexte. Si plusieurs ressources sont équivalentes, le navigateur
+          sélectionnera celle qui est déclarée en dernière, dans l'ordre des
+          éléments de l'arbre du document. Ces attributs ne sont que des
+          indications et les ressources associées peuvent ne pas correspondre,
+          auquel cas, le navigateur en sélectionnera une autre s'il en existe
+          une adéquate.
+        </p>
+        <p>
+          <strong>Note :</strong> sur iOS, ce type de lien n'est pas utilisé, à
+          la place, ce sont les relations (<a
+            href="/fr/docs/Web/HTML/Element/link#attr-rel"
+            ><code>rel</code></a
+          >)
+          <code
+            ><a
+              href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW4"
+              >apple-touch-icon</a
+            ></code
+          >
+          et
+          <code
+            ><a
+              href="https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6"
+              >apple-touch-startup-image</a
+            ></code
+          >
+          qui sont utilisées.
+        </p>
+        <p>
+          Le type de lien <code>shortcut</code> est souvent vu avant
+          <code>icon</code> mais il n'est pas conforme et les navigateurs
+          l'ignorent, c'est pourquoi il ne doit plus être utilisé.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>import</code>{{experimental_inline}}</td>
-      <td><a href="/fr/docs/Web/Web_Components/HTML_Imports">Imports de ressources en HTML</a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <a href="/fr/docs/Web/Web_Components/HTML_Imports"
+          >Imports de ressources en HTML</a
+        >
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>index</code> {{Obsolete_Inline("HTML5")}}</td>
-      <td><p>Ce type indique que la page fait partie d'une structure hiérarchique et que l'hyperlien renvoie au niveau le plus haut de cette structure.</p>
-      <p>Si un ou plusieurs liens de type <code>up</code> sont présents, la quantité de ces liens indique la profondeur de la page courante au sein de la hiérarchie.</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <p>
+          Ce type indique que la page fait partie d'une structure hiérarchique
+          et que l'hyperlien renvoie au niveau le plus haut de cette structure.
+        </p>
+        <p>
+          Si un ou plusieurs liens de type <code>up</code> sont présents, la
+          quantité de ces liens indique la profondeur de la page courante au
+          sein de la hiérarchie.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>last</code> {{obsolete_inline}}</td>
       <td>
-        <p>Ce type indique que l'hyperlien mène à la dernière ressource dans la série de ressources à laquelle appartient la page actuelle.</p>
-        <p><strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, <code>prev</code>, <code>next</code> (pour respectivement la première, la précédente et la suivante).</p>
-
-        <p>Bien que le synonyme <code>end</code> puisse être reconnu, il est incorrect et doit être évité.</p>
+        <p>
+          Ce type indique que l'hyperlien mène à la dernière ressource dans la
+          série de ressources à laquelle appartient la page actuelle.
+        </p>
+        <p>
+          <strong>Note :</strong> les autres types de lien permettant une
+          navigation séquentielle sont : <code>first</code>, <code>prev</code>,
+          <code>next</code> (pour respectivement la première, la précédente et
+          la suivante).
+        </p>
+        <p>
+          Bien que le synonyme <code>end</code> puisse être reconnu, il est
+          incorrect et doit être évité.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
       </td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
       <td><em>Aucun</em>.</td>
     </tr>
     <tr>
       <td><code>license</code></td>
-      <td><p>Ce type de lien mène vers un document contenant des informations relatives à la licence appliquée au contenu. Si le lien n'est pas dans l'élément <a href="/fr/docs/Web/HTML/Element/head"><code>&lt;head&gt;</code></a>, le standard n'indique pas que la licence doit s'appliquer à tout ou partie du document, seules les données de la page permettent de le savoir.</p>
-      <p><strong>Note :</strong> bien qu'il puisse être reconnu, le synonyme <code>copyright</code> est incorrect et doit être évité.</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
+      <td>
+        <p>
+          Ce type de lien mène vers un document contenant des informations
+          relatives à la licence appliquée au contenu. Si le lien n'est pas dans
+          l'élément
+          <a href="/fr/docs/Web/HTML/Element/head"><code>&#x3C;head></code></a
+          >, le standard n'indique pas que la licence doit s'appliquer à tout ou
+          partie du document, seules les données de la page permettent de le
+          savoir.
+        </p>
+        <p>
+          <strong>Note :</strong> bien qu'il puisse être reconnu, le synonyme
+          <code>copyright</code> est incorrect et doit être évité.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
       <td><em>Aucun</em>.</td>
     </tr>
     <tr>
-      <td><code><a href="/fr/docs/Web/HTML/Link_types/manifest">manifest</a></code></td>
-      <td>Ce type de lien indique que la ressource liée est <a href="/fr/docs/Web/Manifest">un manifeste d'application web</a>.</td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <code
+          ><a href="/fr/docs/Web/HTML/Link_types/manifest">manifest</a></code
+        >
+      </td>
+      <td>
+        Ce type de lien indique que la ressource liée est
+        <a href="/fr/docs/Web/Manifest">un manifeste d'application web</a>.
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
-      <td><code><a href="/fr/docs/Web/HTML/Link_types/modulepreload">modulepreload</a></code></td>
-      <td>Initialise le chargement anticipé (et prioritaire) des modules de scripts</td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <code
+          ><a href="/fr/docs/Web/HTML/Link_types/modulepreload"
+            >modulepreload</a
+          ></code
+        >
+      </td>
+      <td>
+        Initialise le chargement anticipé (et prioritaire) des modules de
+        scripts
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>next</code></td>
-      <td><p>Ce type indique que l'hyperlien mène à la prochaine ressource dans la série de ressources à laquelle appartient la page actuelle.</p>
-      <p><strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, <code>prev</code>, <code>last</code> (pour respectivement la première, la précédente et la dernière).</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
+      <td>
+        <p>
+          Ce type indique que l'hyperlien mène à la prochaine ressource dans la
+          série de ressources à laquelle appartient la page actuelle.
+        </p>
+        <p>
+          <strong>Note :</strong> les autres types de lien permettant une
+          navigation séquentielle sont : <code>first</code>, <code>prev</code>,
+          <code>last</code> (pour respectivement la première, la précédente et
+          la dernière).
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
       <td><em>Aucun</em>.</td>
     </tr>
     <tr>
       <td><code>nofollow</code></td>
-      <td>Ce type de lien indique que le document lié n'est pas approuvé par l'auteur du document actuel, par exemple s'il n'a aucun contrôle envers le document lié ou si le document est un mauvais exemple ou encore s'il existe une relation commerciale (le lien a été vendu). Ce type de lien peut être utilisé par certains moteurs de recherche qui utilise des classements selon la popularité des documents.</td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
+      <td>
+        Ce type de lien indique que le document lié n'est pas approuvé par
+        l'auteur du document actuel, par exemple s'il n'a aucun contrôle envers
+        le document lié ou si le document est un mauvais exemple ou encore s'il
+        existe une relation commerciale (le lien a été vendu). Ce type de lien
+        peut être utilisé par certains moteurs de recherche qui utilise des
+        classements selon la popularité des documents.
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
     </tr>
     <tr>
-      <td><code><a href="/fr/docs/Web/HTML/Link_types/noopener">noopener</a></code></td>
       <td>
-        <p>Ce type de lien indique au navigateur d'ouvrir le lien sans que le nouveau contexte de navigation créé ait accès au document qui contenait le lien (techniquement la propriété <a href="/fr/docs/Web/API/Window/opener"><code>Window.opener</code></a> renverra <code>null</code>).</p>
-        <p>Ce type est particulièrement utile lorsqu'on ouvre un lien pour lequel on ne veut pas qu'il puisse interagir avec le document source (voir également l'article <em><a href="https://mathiasbynens.github.io/rel-noopener/">About <code>rel=noopener</code></a></em> pour plus de détails) tout en fournissant un référent via l'en-tête HTTP (à moins que <code>noreferrer</code> n'y soit également utilisé).</p>
-
-        <p>Lorsque <code>noopener</code> est utilisé, les noms utilisés pour l'attribut <code>target</code>, qui ne sont pas vides et qui ne sont pas <code>_top</code>, <code>_self</code> ou <code>_parent</code> sont alors traités comme s'ils étaient synonymes de <code>_blank</code> lorsqu'il s'agit de décider d'ouvrir une nouvelle fenêtre ou un nouvel onglet.</p>
+        <code
+          ><a href="/fr/docs/Web/HTML/Link_types/noopener">noopener</a></code
+        >
+      </td>
+      <td>
+        <p>
+          Ce type de lien indique au navigateur d'ouvrir le lien sans que le
+          nouveau contexte de navigation créé ait accès au document qui
+          contenait le lien (techniquement la propriété
+          <a href="/fr/docs/Web/API/Window/opener"
+            ><code>Window.opener</code></a
+          >
+          renverra <code>null</code>).
+        </p>
+        <p>
+          Ce type est particulièrement utile lorsqu'on ouvre un lien pour lequel
+          on ne veut pas qu'il puisse interagir avec le document source (voir
+          également l'article
+          <em
+            ><a href="https://mathiasbynens.github.io/rel-noopener/"
+              >About <code>rel=noopener</code></a
+            ></em
+          >
+          pour plus de détails) tout en fournissant un référent via l'en-tête
+          HTTP (à moins que <code>noreferrer</code> n'y soit également utilisé).
+        </p>
+        <p>
+          Lorsque <code>noopener</code> est utilisé, les noms utilisés pour
+          l'attribut <code>target</code>, qui ne sont pas vides et qui ne sont
+          pas <code>_top</code>, <code>_self</code> ou <code>_parent</code> sont
+          alors traités comme s'ils étaient synonymes de
+          <code>_blank</code> lorsqu'il s'agit de décider d'ouvrir une nouvelle
+          fenêtre ou un nouvel onglet.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
       </td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
     </tr>
     <tr>
       <td><code>noreferrer</code></td>
       <td>
-        <p>Ce type de lien empêche le navigateur, lorsqu'on navigue vers une autre page, que le l'adresse de la page ou toute autre valeur soit fournie via l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a>.</p>
-        <p>(Dans Firefox, avant Firefox 37, ce type ne fonctionnait que pour les liens sur lesquels on cliquait directement, lorsqu'on utilisait un menu « Ouvrir dans un nouvel onglet », ce type était ignoré.</p>
+        <p>
+          Ce type de lien empêche le navigateur, lorsqu'on navigue vers une
+          autre page, que le l'adresse de la page ou toute autre valeur soit
+          fournie via l'en-tête HTTP
+          <a href="/fr/docs/Web/HTTP/Headers/Referer"><code>Referer</code></a
+          >.
+        </p>
+        <p>
+          (Dans Firefox, avant Firefox 37, ce type ne fonctionnait que pour les
+          liens sur lesquels on cliquait directement, lorsqu'on utilisait un
+          menu « Ouvrir dans un nouvel onglet », ce type était ignoré.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
       </td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
     </tr>
     <tr>
       <td><code>opener</code> {{experimental_inline}}</td>
-      <td>Annule l'effet de l'ajout implicite de <code>rel="noopener"</code> sur les liens qui possèdent explicitement <code>target="_blank"</code> (voir <a href="https://github.com/whatwg/html/issues/4078">la discussion sur les spécifications HTML</a>, <a href="https://trac.webkit.org/changeset/237144/webkit/">la modification WebKit change</a> et <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1503681">la discussion sur le bug Firefox correspondant</a>).</td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
+      <td>
+        Annule l'effet de l'ajout implicite de <code>rel="noopener"</code> sur
+        les liens qui possèdent explicitement <code>target="_blank"</code> (voir
+        <a href="https://github.com/whatwg/html/issues/4078"
+          >la discussion sur les spécifications HTML</a
+        >,
+        <a href="https://trac.webkit.org/changeset/237144/webkit/"
+          >la modification WebKit change</a
+        >
+        et
+        <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1503681"
+          >la discussion sur le bug Firefox correspondant</a
+        >).
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>pingback</code></td>
-      <td><p>Ce type définit une URI vers une ressource externee qui doit être appelée si quelqu'un ajoute un commentaire ou une citation à propos de la page web courant. Le protocole pour un tel appel est défini dans la spécification <a href="https://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a>.</p>
-      <p><strong>Note :</strong> si l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/X-Pingback"><code>X-Pingback</code></a> est également présent, celui-ci aura la prioriété sur l'élément <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a> avec ce type de lien.</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <p>
+          Ce type définit une URI vers une ressource externee qui doit être
+          appelée si quelqu'un ajoute un commentaire ou une citation à propos de
+          la page web courant. Le protocole pour un tel appel est défini dans la
+          spécification
+          <a href="https://www.hixie.ch/specs/pingback/pingback">Pingback 1.0</a
+          >.
+        </p>
+        <p>
+          <strong>Note :</strong> si l'en-tête HTTP
+          <a href="/fr/docs/Web/HTTP/Headers/X-Pingback"
+            ><code>X-Pingback</code></a
+          >
+          est également présent, celui-ci aura la prioriété sur l'élément
+          <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+          avec ce type de lien.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
-      <td><code><a href="/fr/docs/Web/HTML/Link_types/preconnect">preconnect</a></code> {{experimental_inline}}</td>
-      <td>Ce type de lien suggère au navigateur d'ouvrir une connexion vers le site web visé de façon anticipée, sans diffuser d'information privée et sans télécharger de contenu. Il est utilisé afin de pouvoir récupérer le contenu lié plus rapidement.</td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <code
+          ><a href="/fr/docs/Web/HTML/Link_types/preconnect"
+            >preconnect</a
+          ></code
+        >
+        {{experimental_inline}}
+      </td>
+      <td>
+        Ce type de lien suggère au navigateur d'ouvrir une connexion vers le
+        site web visé de façon anticipée, sans diffuser d'information privée et
+        sans télécharger de contenu. Il est utilisé afin de pouvoir récupérer le
+        contenu lié plus rapidement.
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
-    <td><code><a href="/fr/docs/Web/HTML/Link_types/prefetch">prefetch</a></code></td>
-      <td><p>Ce type de lien suggère au navigateur de récupérer la ressource liée de façon anticipée phase car il est probable que l'utilisateur la demande. À partir de Firefox 44, la valeur de l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-crossorigin"><code>&lt;crossorigin&gt;</code></a> est prise en compte, ce qui permet d'effectuer des récupérations anticipées anonymes.</p>
-      <p><strong>Note :</strong> <a href="/fr/docs/Web/HTTP/Link_prefetching_FAQ">la FAQ sur <code>prefetch</code></a> explique quels liens peuvent être récupérés de façon anticipée et quelles peuvent être les méthodes alternatives.</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <code
+          ><a href="/fr/docs/Web/HTML/Link_types/prefetch">prefetch</a></code
+        >
+      </td>
+      <td>
+        <p>
+          Ce type de lien suggère au navigateur de récupérer la ressource liée
+          de façon anticipée phase car il est probable que l'utilisateur la
+          demande. À partir de Firefox 44, la valeur de l'attribut
+          <a href="/fr/docs/Web/HTML/Element/link#attr-crossorigin"
+            ><code>&#x3C;crossorigin></code></a
+          >
+          est prise en compte, ce qui permet d'effectuer des récupérations
+          anticipées anonymes.
+        </p>
+        <p>
+          <strong>Note :</strong>
+          <a href="/fr/docs/Web/HTTP/Link_prefetching_FAQ"
+            >la FAQ sur <code>prefetch</code></a
+          >
+          explique quels liens peuvent être récupérés de façon anticipée et
+          quelles peuvent être les méthodes alternatives.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
-      <td><code><a href="/fr/docs/Web/HTML/Link_types/preload">preload</a></code></td>
       <td>
-        <p>Ce type de lien indique au navigateur de précharger une ressource car celle-ci sera nécessaire par la suite lors de la navigation.</p>
-
-        <p>Voir l'article <a href="/fr/docs/Web/HTML/Preloading_content">Précharger du contenu grâce à <code>rel="preload"</code></a> pour plus d'informations.</p>
+        <code><a href="/fr/docs/Web/HTML/Link_types/preload">preload</a></code>
+      </td>
+      <td>
+        <p>
+          Ce type de lien indique au navigateur de précharger une ressource car
+          celle-ci sera nécessaire par la suite lors de la navigation.
+        </p>
+        <p>
+          Voir l'article
+          <a href="/fr/docs/Web/HTML/Preloading_content"
+            >Précharger du contenu grâce à <code>rel="preload"</code></a
+          >
+          pour plus d'informations.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
       </td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
     </tr>
     <tr>
-      <td><code><a href="/fr/docs/Web/HTML/Link_types/prerender">prerender</a></code> {{experimental_inline}}</td>
-      <td>Ce type de lien suggère au navigateur de récupérer la ressource liée en avance et de préparer son rendu hors de l'écran afin qu'elle puisse être présentée rapidement à l'utilisateur lorsqu'elle sera nécessaire.</td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <code
+          ><a href="/fr/docs/Web/HTML/Link_types/prerender">prerender</a></code
+        >
+        {{experimental_inline}}
+      </td>
+      <td>
+        Ce type de lien suggère au navigateur de récupérer la ressource liée en
+        avance et de préparer son rendu hors de l'écran afin qu'elle puisse être
+        présentée rapidement à l'utilisateur lorsqu'elle sera nécessaire.
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>prev</code></td>
-      <td><p>Ce type indique que l'hyperlien mène à la ressource précédente dans la série de ressources à laquelle appartient la page actuelle.</p>
-      <p><strong>Note :</strong> les autres types de lien permettant une navigation séquentielle sont : <code>first</code>, next, <code>last</code> (pour respectivement la première, la suivante et la dernière).</p>
-      <p>Bien que la valeur <code>previous</code> soit reconnue comme synonyme, elle est incorrecte et ne doit pas être utilisée.</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <p>
+          Ce type indique que l'hyperlien mène à la ressource précédente dans la
+          série de ressources à laquelle appartient la page actuelle.
+        </p>
+        <p>
+          <strong>Note :</strong> les autres types de lien permettant une
+          navigation séquentielle sont : <code>first</code>, next,
+          <code>last</code> (pour respectivement la première, la suivante et la
+          dernière).
+        </p>
+        <p>
+          Bien que la valeur <code>previous</code> soit reconnue comme synonyme,
+          elle est incorrecte et ne doit pas être utilisée.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
       <td><em>Aucun</em>.</td>
     </tr>
     <tr>
       <td><code>search</code></td>
-      <td><p>Ce type de lien indique que l'hyperlien cible un document dont l'interface est destinée à la recherche sur ce document, sur ce site ou sur les ressources associées.</p>
-      <p>Si l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-type"><code>type</code></a> vaut <code>application/opensearchdescription+xml</code>, la ressource est <a href="/fr/docs/Web/OpenSearch">un plugin OpenSearch</a> qui peut facilement être ajouté à l'interface de certains navigateurs comme Firefox ou Internet Explorer.</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <p>
+          Ce type de lien indique que l'hyperlien cible un document dont
+          l'interface est destinée à la recherche sur ce document, sur ce site
+          ou sur les ressources associées.
+        </p>
+        <p>
+          Si l'attribut
+          <a href="/fr/docs/Web/HTML/Element/link#attr-type"
+            ><code>type</code></a
+          >
+          vaut <code>application/opensearchdescription+xml</code>, la ressource
+          est <a href="/fr/docs/Web/OpenSearch">un plugin OpenSearch</a> qui
+          peut facilement être ajouté à l'interface de certains navigateurs
+          comme Firefox ou Internet Explorer.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
       <td><em>Aucun</em>.</td>
     </tr>
     <tr>
       <td><code>shortlink</code></td>
-      <td><p><a href="https://code.google.com/archive/p/shortlink/wikis/Specification.wiki">Spécification pour <code>shortlink</code></a></p>
-      <p>Page Wikipédia : <a href="https://fr.wikipedia.org/wiki/URL_shortening">Le raccourcissement des URL</a></p>
-      <p>Certains sites web créent des liens courts pour faciliter le partage de liens par messagerie instantanée.</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
+      <td>
+        <p>
+          <a
+            href="https://code.google.com/archive/p/shortlink/wikis/Specification.wiki"
+            >Spécification pour <code>shortlink</code></a
+          >
+        </p>
+        <p>
+          Page Wikipédia :
+          <a href="https://fr.wikipedia.org/wiki/URL_shortening"
+            >Le raccourcissement des URL</a
+          >
+        </p>
+        <p>
+          Certains sites web créent des liens courts pour faciliter le partage
+          de liens par messagerie instantanée.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
       <td></td>
     </tr>
     <tr>
-      <td><code>sidebar</code> {{non-standard_inline}}{{Obsolete_Inline("Gecko63")}}</td>
-      <td><p>Ce type indique que l'hyperlien mène vers une ressource qui serait plus pertinente au sein d'un contexte de navigation secondaire tel qu'une barre latérale. Les navigateurs qui ne possèdent pas de tel contexte ignoreront ce mot-clé.</p>
-      <p>Bien que ce type de lien ait fait partie de la spécification HTML, il a été retiré de la spécification et est uniquement implémenté par Firefox pour les versions antérieures à Firefox 63.</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <code>sidebar</code>
+        {{non-standard_inline}}{{Obsolete_Inline("Gecko63")}}
+      </td>
+      <td>
+        <p>
+          Ce type indique que l'hyperlien mène vers une ressource qui serait
+          plus pertinente au sein d'un contexte de navigation secondaire tel
+          qu'une barre latérale. Les navigateurs qui ne possèdent pas de tel
+          contexte ignoreront ce mot-clé.
+        </p>
+        <p>
+          Bien que ce type de lien ait fait partie de la spécification HTML, il
+          a été retiré de la spécification et est uniquement implémenté par
+          Firefox pour les versions antérieures à Firefox 63.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>stylesheet</code></td>
-      <td><p>Ce type de lien définit une ressource externe qui doit être utilisée comme une feuille de style. Si le type de la ressource n'est pas défini, le navigateur considèrera que c'est une feuille de style <code>text/css</code>.</p>
-      <p>Utilisé avec le mot-clé <code>alternate</code>, il permet de définir <a href="/fr/docs/Web/CSS/Alternative_style_sheets">une feuille de style alternative</a> auquel cas l'atttribut <a href="/fr/docs/Web/HTML/Element/link#attr-title"><code>&lt;title&gt;</code></a> doit être présent et ne doit pas être la chaîne vide.</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <p>
+          Ce type de lien définit une ressource externe qui doit être utilisée
+          comme une feuille de style. Si le type de la ressource n'est pas
+          défini, le navigateur considèrera que c'est une feuille de style
+          <code>text/css</code>.
+        </p>
+        <p>
+          Utilisé avec le mot-clé <code>alternate</code>, il permet de définir
+          <a href="/fr/docs/Web/CSS/Alternative_style_sheets"
+            >une feuille de style alternative</a
+          >
+          auquel cas l'atttribut
+          <a href="/fr/docs/Web/HTML/Element/link#attr-title"
+            ><code>&#x3C;title></code></a
+          >
+          doit être présent et ne doit pas être la chaîne vide.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>tag</code></td>
-      <td><p>Ce type indique que l'hyperlien fait référence à un document qui décrit l'étiquette (le <em>tag</em>) appliquée à ce document.</p>
-      <p><strong>Note :</strong> ce type de lien ne doit pas être utilisé pour renvoyer vers un nuage de <em>tags</em> car ce dernier concerne un ensemble de pages et pas uniquement le document courant.</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <p>
+          Ce type indique que l'hyperlien fait référence à un document qui
+          décrit l'étiquette (le <em>tag</em>) appliquée à ce document.
+        </p>
+        <p>
+          <strong>Note :</strong> ce type de lien ne doit pas être utilisé pour
+          renvoyer vers un nuage de <em>tags</em> car ce dernier concerne un
+          ensemble de pages et pas uniquement le document courant.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
     <tr>
       <td><code>up</code> {{obsolete_inline}}</td>
-      <td><p>Ce type de lien indique que la page fait partie d'une structure hiérarchique et que l'hyperlien mène vers une ressource située au niveau supérieur de cette structure.</p>
-      <p>Le nombre de <code>up</code> indique la différence de profondeur dans la hiérarchie entre la page courante et la page associée.</p></td>
-      <td><a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a></td>
-      <td><a href="/fr/docs/Web/HTML/Element/Form"><code>&lt;form&gt;</code></a></td>
+      <td>
+        <p>
+          Ce type de lien indique que la page fait partie d'une structure
+          hiérarchique et que l'hyperlien mène vers une ressource située au
+          niveau supérieur de cette structure.
+        </p>
+        <p>
+          Le nombre de <code>up</code> indique la différence de profondeur dans
+          la hiérarchie entre la page courante et la page associée.
+        </p>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/a"><code>&#x3C;a></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/area"><code>&#x3C;area></code></a
+        >, <a href="/fr/docs/Web/HTML/Element/link"><code>&#x3C;link></code></a>
+      </td>
+      <td>
+        <a href="/fr/docs/Web/HTML/Element/Form"><code>&#x3C;form></code></a>
+      </td>
     </tr>
   </tbody>
 </table>
 
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
 
 <table class="standard-table">
   <thead>
@@ -296,38 +965,75 @@ original_slug: Web/HTML/Types_de_lien
   </thead>
   <tbody>
     <tr>
-      <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td>
+      <td>
+        {{SpecName('Preload','#x2.link-type-preload','preload')}}
+      </td>
       <td>{{Spec2('Preload')}}</td>
       <td>Ajout du type <code>preload</code>.</td>
     </tr>
     <tr>
-      <td>{{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}</td>
+      <td>
+        {{SpecName('Resource Hints', '#dfn-preconnect', 'preconnect')}}
+      </td>
       <td>{{Spec2('Resource Hints')}}</td>
-      <td>Ajout des types <code>dns-prefetch</code>, <code>preconnect</code> et <code>prerender</code>.</td>
+      <td>
+        Ajout des types <code>dns-prefetch</code>, <code>preconnect</code> et
+        <code>prerender</code>.
+      </td>
     </tr>
     <tr>
-      <td>{{SpecName("HTML WHATWG", "links.html#linkTypes", "link types")}}</td>
+      <td>
+        {{SpecName("HTML WHATWG", "links.html#linkTypes", "link types")}}
+      </td>
       <td>{{Spec2('HTML WHATWG')}}</td>
-      <td>Ajout de <code>opener</code>. <code>noopener</code> devient le comportement par défaut pour les liens avec <code>target="_blank"</code>.</td>
+      <td>
+        Ajout de <code>opener</code>. <code>noopener</code> devient le
+        comportement par défaut pour les liens avec
+        <code>target="_blank"</code>.
+      </td>
     </tr>
     <tr>
-      <td>{{SpecName("HTML5 W3C", "links.html#linkTypes", "link types")}}</td>
+      <td>
+        {{SpecName("HTML5 W3C", "links.html#linkTypes", "link types")}}
+      </td>
       <td>{{Spec2('HTML5 W3C')}}</td>
-      <td><p>Ajout de <code>tag</code>, <code>search</code>, <code>prefetch</code>, <code>noreferrer</code>, <code>nofollow</code>, <code>icon</code> et <code>author</code>.</p>
-      <p>Renommage de <code>copyright</code> en <code>license</code>.</p>
-      <p>Suppression de <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code> et <code>appendix</code></p></td>
+      <td>
+        <p>
+          Ajout de <code>tag</code>, <code>search</code>, <code>prefetch</code>,
+          <code>noreferrer</code>, <code>nofollow</code>, <code>icon</code> et
+          <code>author</code>.
+        </p>
+        <p>Renommage de <code>copyright</code> en <code>license</code>.</p>
+        <p>
+          Suppression de <code>start</code>, <code>chapter</code>,
+          <code>section</code>, <code>subsection</code> et <code>appendix</code>
+        </p>
+      </td>
     </tr>
     <tr>
-      <td>{{SpecName("HTML4.01", "types.html#type-links", "link types")}}</td>
+      <td>
+        {{SpecName("HTML4.01", "types.html#type-links", "link types")}}
+      </td>
       <td>{{Spec2('HTML4.01')}}</td>
-      <td><p>Ajout de <code>alternate</code>, <code>stylesheet</code>, <code>start</code>, <code>chapter</code>, <code>section</code>, <code>subsection</code>, <code>appendix</code> et <code>bookmark</code>.</p>
-      <p>Renommage de <code>previous</code> en <code>prev</code>.</p>
-      <p>Suppression de <code>top</code> et <code>search</code>.</p></td>
+      <td>
+        <p>
+          Ajout de <code>alternate</code>, <code>stylesheet</code>,
+          <code>start</code>, <code>chapter</code>, <code>section</code>,
+          <code>subsection</code>, <code>appendix</code> et
+          <code>bookmark</code>.
+        </p>
+        <p>Renommage de <code>previous</code> en <code>prev</code>.</p>
+        <p>Suppression de <code>top</code> et <code>search</code>.</p>
+      </td>
     </tr>
     <tr>
       <td>{{SpecName("HTML3.2", "#link", "&lt;link&gt;")}}</td>
       <td>Obsolete</td>
-      <td>Ajout de <code>top</code>, <code>contents</code>, <code>index</code>, <code>glossary</code>, <code>copyright</code>, <code>next</code>, <code>previous</code>, <code>help</code> et <code>search</code>.</td>
+      <td>
+        Ajout de <code>top</code>, <code>contents</code>, <code>index</code>,
+        <code>glossary</code>, <code>copyright</code>, <code>next</code>,
+        <code>previous</code>, <code>help</code> et <code>search</code>.
+      </td>
     </tr>
     <tr>
       <td>{{RFC(1866, "HTML 2.0")}}</td>
@@ -337,6 +1043,6 @@ original_slug: Web/HTML/Types_de_lien
   </tbody>
 </table>
 
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat("html.elements.link.rel")}}</p>
+{{Compat("html.elements.link.rel")}}
diff --git a/files/fr/web/html/link_types/manifest/index.md b/files/fr/web/html/link_types/manifest/index.md
index c8086787ff..b1a7f102e1 100644
--- a/files/fr/web/html/link_types/manifest/index.md
+++ b/files/fr/web/html/link_types/manifest/index.md
@@ -1,15 +1,15 @@
 ---
-title: 'Types de liens : manifest'
+title: "Types de liens\_: manifest"
 slug: Web/HTML/Link_types/manifest
+translation_of: Web/HTML/Link_types/manifest
 browser-compat: html.elements.link.rel.manifest
-translation_of: 'Web/HTML/Link_types/manifest'
 ---
-<p>Le mot-clé <strong><code>manifest</code></strong> de l'attribut {{HTMLAttrxRef("rel", "link")}} de l'élément {{HTMLElement("link")}} est une information indiquant que la ressource ciblée est un <a href="/fr/docs/Web/Manifest">manifeste d'application web</a>.</p>
+Le mot-clé **`manifest`** de l'attribut {{HTMLAttrxRef("rel", "link")}} de l'élément {{HTMLElement("link")}} est une information indiquant que la ressource ciblée est un [manifeste d'application web](/fr/docs/Web/Manifest).
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
diff --git a/files/fr/web/html/link_types/modulepreload/index.md b/files/fr/web/html/link_types/modulepreload/index.md
index 3d02a89393..26011be346 100644
--- a/files/fr/web/html/link_types/modulepreload/index.md
+++ b/files/fr/web/html/link_types/modulepreload/index.md
@@ -1,15 +1,15 @@
 ---
 title: 'Link types: modulepreload'
 slug: Web/HTML/Link_types/modulepreload
+translation_of: Web/HTML/Link_types/modulepreload
 browser-compat: html.elements.link.rel.modulepreload
-translation_of: 'Web/HTML/Link_types/modulepreload'
 ---
-<p>Le mot-clé <strong><code>modulepreload</code></strong> de l'attribut {{HTMLAttrxRef("rel", "link")}} de l'élément {{HTMLElement("link")}} fournit une manière déclarative d'analyser de façon préventive un <a href="/fr/docs/Web/JavaScript/Guide/Modules">module JavaScript</a> et ses dépendances, ainsi que de les stocker dans la carte des modules du document pour une évaluation future.</p>
+Le mot-clé **`modulepreload`** de l'attribut {{HTMLAttrxRef("rel", "link")}} de l'élément {{HTMLElement("link")}} fournit une manière déclarative d'analyser de façon préventive un [module JavaScript](/fr/docs/Web/JavaScript/Guide/Modules) et ses dépendances, ainsi que de les stocker dans la carte des modules du document pour une évaluation future.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
diff --git a/files/fr/web/html/link_types/noopener/index.md b/files/fr/web/html/link_types/noopener/index.md
index 96771dbb1c..066acfc0e7 100644
--- a/files/fr/web/html/link_types/noopener/index.md
+++ b/files/fr/web/html/link_types/noopener/index.md
@@ -1,23 +1,21 @@
 ---
 title: 'Types de liens : noopener'
 slug: Web/HTML/Link_types/noopener
+translation_of: Web/HTML/Link_types/noopener
 browser-compat: html.elements.a.rel.noopener
-translation_of: 'Web/HTML/Link_types/noopener'
 ---
-<p>Le mot-clé <strong><code>noopener</code></strong> de l'attribut <code><a href="/fr/docs/Web/HTML/Attributes/rel">rel</a></code> des éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} et {{HTMLElement("form")}} indique au navigateur d'ouvrir la ressource cible sans que le nouveau contexte de navigation ne reçoive d'accès au document précédent (le moteur ne définit alors pas {{DOMxRef("Window.opener")}} sur le nouveau contexte, sa valeur sera <code>null</code>).</p>
+Le mot-clé **`noopener`** de l'attribut [`rel`](/fr/docs/Web/HTML/Attributes/rel) des éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} et {{HTMLElement("form")}} indique au navigateur d'ouvrir la ressource cible sans que le nouveau contexte de navigation ne reçoive d'accès au document précédent (le moteur ne définit alors pas {{DOMxRef("Window.opener")}} sur le nouveau contexte, sa valeur sera `null`).
 
-<p>Ceci est tout spécialement utile lors de l'ouverture de liens non vérifiés/fiables, afin de s'assurer qu'ils ne peuvent pas trafiquer le document d'origine via la propriété {{DOMxRef("Window.opener")}} (pour plus de détails, voir <a href="https://mathiasbynens.github.io/rel-noopener/">cet article en anglais concernant <code>rel=noopener</code></a>), tout en fournissant néanmoins l'en-tête HTTP <code>Referer</code> (à moins que <code>noreferrer</code> soit également utilisé).</p>
+Ceci est tout spécialement utile lors de l'ouverture de liens non vérifiés/fiables, afin de s'assurer qu'ils ne peuvent pas trafiquer le document d'origine via la propriété {{DOMxRef("Window.opener")}} (pour plus de détails, voir [cet article en anglais concernant `rel=noopener`](https://mathiasbynens.github.io/rel-noopener/)), tout en fournissant néanmoins l'en-tête HTTP `Referer` (à moins que `noreferrer` soit également utilisé).
 
-<p>Veuillez noter que lorsque <code>noopener</code> est utilisé, les noms de cibles non vides et différents de <code>_top</code>, <code>_self</code> et <code>_parent</code> sont tous traités en tant que <code>_blank</code> pour déterminer si le lien doit s'ouvrir ou non dans un nouvel onglet/fenêtre.</p>
+Veuillez noter que lorsque `noopener` est utilisé, les noms de cibles non vides et différents de `_top`, `_self` et `_parent` sont tous traités en tant que `_blank` pour déterminer si le lien doit s'ouvrir ou non dans un nouvel onglet/fenêtre.
 
-<div class="note">
-  <p><strong>Note :</strong> l'utilisation de <code>target="_blank"</code> sur des éléments <code>&lt;a&gt;</code> fournit désormais implicitement le même comportement pour l'attribut <code>rel</code> que si l'on avait utilisé <code>rel="noopener"</code>, c'est à dire l'absence de mise en place de <code>window.opener</code>. Voir la <a href="/fr/docs/Web/HTML/Element/a#browser_compatibility">compatibilité navigateur</a> pour plus d'informations sur l'implémentation actuelle dans les navigateurs.</p>
-</div>
+> **Note :** l'utilisation de `target="_blank"` sur des éléments `<a>` fournit désormais implicitement le même comportement pour l'attribut `rel` que si l'on avait utilisé `rel="noopener"`, c'est à dire l'absence de mise en place de `window.opener`. Voir la [compatibilité navigateur](/fr/docs/Web/HTML/Element/a#browser_compatibility) pour plus d'informations sur l'implémentation actuelle dans les navigateurs.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
diff --git a/files/fr/web/html/link_types/noreferrer/index.md b/files/fr/web/html/link_types/noreferrer/index.md
index 1c48872d9a..70bd2f48e6 100644
--- a/files/fr/web/html/link_types/noreferrer/index.md
+++ b/files/fr/web/html/link_types/noreferrer/index.md
@@ -1,15 +1,15 @@
 ---
-title: 'Types de liens : noreferrer'
+title: "Types de liens\_: noreferrer"
 slug: Web/HTML/Link_types/noreferrer
+translation_of: Web/HTML/Link_types/noreferrer
 browser-compat: html.elements.a.rel.noreferrer
-translation_of: 'Web/HTML/Link_types/noreferrer'
 ---
-<p>Le mot-clé <strong><code>noreferrer</code></strong> de l'attribut <code><a href="/fr/docs/Web/HTML/Attributes/rel">rel</a></code> des éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} et {{HTMLElement("form")}} indique au navigateur, lorsque celui-ci ouvre la ressource cible, d'omettre l'en-tête {{HTTPHeader("Referer")}} et de ne divulguer aucune information de <i lang="en">referrer</i>. Lorsque <code>noreferrer</code> est indiqué, le navigateur se comporte également comme si le mot-clé <code>noopener</code> avait été spécifié (il n'est donc pas utile d'indiquer les deux).</p>
+Le mot-clé **`noreferrer`** de l'attribut [`rel`](/fr/docs/Web/HTML/Attributes/rel) des éléments {{HTMLElement("a")}}, {{HTMLElement("area")}} et {{HTMLElement("form")}} indique au navigateur, lorsque celui-ci ouvre la ressource cible, d'omettre l'en-tête {{HTTPHeader("Referer")}} et de ne divulguer aucune information de <i lang="en">referrer</i>. Lorsque `noreferrer` est indiqué, le navigateur se comporte également comme si le mot-clé `noopener` avait été spécifié (il n'est donc pas utile d'indiquer les deux).
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité navigateur</h2>
+## Compatibilité navigateur
 
-<p>{{Compat}}</p>
+{{Compat}}
diff --git a/files/fr/web/html/link_types/preconnect/index.md b/files/fr/web/html/link_types/preconnect/index.md
index 8aaf4d4420..ababa59226 100644
--- a/files/fr/web/html/link_types/preconnect/index.md
+++ b/files/fr/web/html/link_types/preconnect/index.md
@@ -1,18 +1,19 @@
 ---
-title: 'Types de liens : preconnect'
+title: "Types de liens\_: preconnect"
 slug: Web/HTML/Link_types/preconnect
+translation_of: Web/HTML/Link_types/preconnect
 browser-compat: html.elements.link.rel.preconnect
-translation_of: 'Web/HTML/Link_types/preconnect'
 ---
-<p>Le mot-clé <strong><code>preconnect</code></strong> de l'attribut {{HTMLAttrxRef("rel", "link")}} de l'élément {{HTMLElement("link")}} est une information destinée à indiquer aux navigateurs que la personne visitant le site va avoir besoin de charger des ressources provenant de l'origine de la ressource cible, et donc que le navigateur peut sans doute améliorer l'expérience de visite en initialisant une connexion vers l'origine de la ressource de façon préventive.</p>
+Le mot-clé **`preconnect`** de l'attribut {{HTMLAttrxRef("rel", "link")}} de l'élément {{HTMLElement("link")}} est une information destinée à indiquer aux navigateurs que la personne visitant le site va avoir besoin de charger des ressources provenant de l'origine de la ressource cible, et donc que le navigateur peut sans doute améliorer l'expérience de visite en initialisant une connexion vers l'origine de la ressource de façon préventive.
 
-<pre class="brush: html">&lt;link rel="preconnect" href="https://example.com"&gt;
-</pre>
+```html
+<link rel="preconnect" href="https://example.com">
+```
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
diff --git a/files/fr/web/html/link_types/prefetch/index.md b/files/fr/web/html/link_types/prefetch/index.md
index c7937abb6c..b40ae5afb6 100644
--- a/files/fr/web/html/link_types/prefetch/index.md
+++ b/files/fr/web/html/link_types/prefetch/index.md
@@ -1,15 +1,15 @@
 ---
-title: 'Types de liens : prefetch'
+title: "Types de liens\_: prefetch"
 slug: Web/HTML/Link_types/prefetch
+translation_of: Web/HTML/Link_types/prefetch
 browser-compat: html.elements.link.rel.prefetch
-translation_of: 'Web/HTML/Link_types/prefetch'
 ---
-<p>Le mot-clé <strong><code>prefetch</code></strong> de l'attribut {{HTMLAttrxRef("rel", "link")}} de l'élément {{HTMLElement("link")}} est une information destinée à indiquer aux navigateurs que la personne visitant le site va avoir besoin de charger des ressources ciblées pour sa navigation future, et donc que le navigateur peut sans doute améliorer l'expérience de visite en analysant et en mettant en cache la ressource de façon préventive.</p>
+Le mot-clé **`prefetch`** de l'attribut {{HTMLAttrxRef("rel", "link")}} de l'élément {{HTMLElement("link")}} est une information destinée à indiquer aux navigateurs que la personne visitant le site va avoir besoin de charger des ressources ciblées pour sa navigation future, et donc que le navigateur peut sans doute améliorer l'expérience de visite en analysant et en mettant en cache la ressource de façon préventive.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
diff --git a/files/fr/web/html/link_types/preload/index.md b/files/fr/web/html/link_types/preload/index.md
index 6a5c4dd6df..e53e9481e1 100644
--- a/files/fr/web/html/link_types/preload/index.md
+++ b/files/fr/web/html/link_types/preload/index.md
@@ -1,162 +1,167 @@
 ---
-title: 'Types de liens : preload'
+title: "Types de liens\_: preload"
 slug: Web/HTML/Link_types/preload
+translation_of: Web/HTML/Link_types/preload
 browser-compat: html.elements.link.rel.preload
-translation_of: 'Web/HTML/Link_types/preload'
 ---
-<div>{{HTMLSidebar}}</div>
+{{HTMLSidebar}}
 
-<p>La valeur <code>preload</code> de l'attribut {{htmlattrxref("rel", "link")}} de l'élément {{htmlelement("link")}} permet de déclarer des requêtes à récupérer dans la partie {{htmlelement("head")}} du HTML de la page, en spécifiant les ressources dont votre page va avoir besoin dans peu de temps, et qu'il serait souhaitable de charger le plus tôt possible, avant que le rendu de la page par le navigateur ne commence. Cela permet de s'assurer que les ressources sont disponibles plus tôt et qu'elles auront moins de chances de bloquer le rendu de la page, ce qui améliore les performances.</p>
+La valeur `preload` de l'attribut {{htmlattrxref("rel", "link")}} de l'élément {{htmlelement("link")}} permet de déclarer des requêtes à récupérer dans la partie {{htmlelement("head")}} du HTML de la page, en spécifiant les ressources dont votre page va avoir besoin dans peu de temps, et qu'il serait souhaitable de charger le plus tôt possible, avant que le rendu de la page par le navigateur ne commence. Cela permet de s'assurer que les ressources sont disponibles plus tôt et qu'elles auront moins de chances de bloquer le rendu de la page, ce qui améliore les performances.
 
+## Les bases
 
-<h2 id="the_basics">Les bases</h2>
+Pour charger un fichier CSS permettant de styler une page, on utilise le plus souvent l'élément `<link>` de la manière suivante :
 
-<p>Pour charger un fichier CSS permettant de styler une page, on utilise le plus souvent l'élément <code>&lt;link&gt;</code> de la manière suivante&nbsp;:</p>
+```html
+<link rel="stylesheet" href="styles/main.css">
+```
 
-<pre class="brush: html">&lt;link rel="stylesheet" href="styles/main.css"&gt;</pre>
+Ici, nous allons utiliser la valeur `preload` sur l'attribut `rel`, ce qui transformera l'élément `<link>` en outil de préchargement utilisable pour n'importe quelle ressource. Nous devrons aussi indiquer :
 
-<p>Ici, nous allons utiliser la valeur <code>preload</code> sur l'attribut <code>rel</code>, ce qui transformera l'élément <code>&lt;link&gt;</code> en outil de préchargement utilisable pour n'importe quelle ressource. Nous devrons aussi indiquer&nbsp;:</p>
+- le chemin de la ressource dans l'attribut {{htmlattrxref("href", "link")}} ;
+- le type de ressource dans l'attribut {{htmlattrxref("as", "link")}} ;
 
-<ul>
-  <li>le chemin de la ressource dans l'attribut {{htmlattrxref("href", "link")}}&nbsp;;</li>
-  <li>le type de ressource dans l'attribut {{htmlattrxref("as", "link")}}&nbsp;;</li>
-</ul>
+Voici un exemple simple (voir nos [fichiers JS et CSS d'exemple](https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css) et le [résultat obtenu](https://mdn.github.io/html-examples/link-rel-preload/js-and-css/)) :
 
-<p>Voici un exemple simple (voir nos <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">fichiers JS et CSS d'exemple</a> et le <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">résultat obtenu</a>)&nbsp;:</p>
+```html
+<head>
+  <meta charset="utf-8">
+  <title>Exemple de préchargement JS et CSS</title>
 
-<pre class="brush: html">&lt;head&gt;
-  &lt;meta charset="utf-8"&gt;
-  &lt;title&gt;Exemple de préchargement JS et CSS&lt;/title&gt;
+  <link rel="preload" href="style.css" as="style">
+  <link rel="preload" href="main.js" as="script">
 
-  &lt;link rel="preload" href="style.css" as="style"&gt;
-  &lt;link rel="preload" href="main.js" as="script"&gt;
+  <link rel="stylesheet" href="style.css">
+</head>
 
-  &lt;link rel="stylesheet" href="style.css"&gt;
-&lt;/head&gt;
+<body>
+  <h1>Balles rebondissantes</h1>
+  <canvas></canvas>
 
-&lt;body&gt;
-  &lt;h1&gt;Balles rebondissantes&lt;/h1&gt;
-  &lt;canvas&gt;&lt;/canvas&gt;
+  <script src="main.js" defer></script>
+</body>
+```
 
-  &lt;script src="main.js" defer&gt;&lt;/script&gt;
-&lt;/body&gt;</pre>
+Dans l'exemple ci-dessus, nous préchargeons nos fichiers CSS et JavaScript afin qu'ils puissent être disponibles dès qu'ils sont nécessaires pour le rendu de la page. Cet exemple est trivial, car le navigateur va probablement découvrir en même temps les balises de préchargement, le `<link rel="stylesheet">` et le `<script>`, mais le bénéfice sera bien plus visible si les ressources sont plus nombreuses, plus lourdes et chargées à différents endroits. Par exemple :
 
-<p>Dans l'exemple ci-dessus, nous préchargeons nos fichiers CSS et JavaScript afin qu'ils puissent être disponibles dès qu'ils sont nécessaires pour le rendu de la page. Cet exemple est trivial, car le navigateur va probablement découvrir en même temps les balises de préchargement, le <code>&lt;link rel="stylesheet"&gt;</code> et le <code>&lt;script&gt;</code>, mais le bénéfice sera bien plus visible si les ressources sont plus nombreuses, plus lourdes et chargées à différents endroits. Par exemple&nbsp;:</p>
+- les ressources qui sont chargées depuis un fichier CSS, comme certaines polices et images ;
+- les ressources inclues par des fichiers JavaScript, comme des fichiers JSON, d'autres scripts importés ou des services web ;
+- les fichiers image et vidéos plus importants.
 
-<ul>
-  <li>les ressources qui sont chargées depuis un fichier CSS, comme certaines polices et images&nbsp;;</li>
-  <li>les ressources inclues par des fichiers JavaScript, comme des fichiers JSON, d'autres scripts importés ou des services web&nbsp;;</li>
-  <li>les fichiers image et vidéos plus importants.</li>
-</ul>
+`preload` dispose aussi d'autres avantages. L'utilisation de l'attribut `as` pour spécifier le type de contenu à précharger permet au navigateur de :
 
-<p><code>preload</code> dispose aussi d'autres avantages. L'utilisation de l'attribut <code>as</code> pour spécifier le type de contenu à précharger permet au navigateur de&nbsp;:</p>
+- prioriser les ressources se chargeant avec davantage de précision ;
+- les stocker dans le cache pour de futures requêtes, ce qui permet de réutiliser les ressources si c'est pertinent ;
+- appliquer la bonne [stratégie de sécurité du contenu](/fr/docs/Web/HTTP/CSP) aux ressources ;
+- mettre en place les bons en-têtes de requêtes {{HTTPHeader("Accept")}} pour les ressources.
 
-<ul>
-  <li>prioriser les ressources se chargeant avec davantage de précision&nbsp;;</li>
-  <li>les stocker dans le cache pour de futures requêtes, ce qui permet de réutiliser les ressources si c'est pertinent&nbsp;;</li>
-  <li>appliquer la bonne <a href="/fr/docs/Web/HTTP/CSP">stratégie de sécurité du contenu</a> aux ressources&nbsp;;</li>
-  <li>mettre en place les bons en-têtes de requêtes {{HTTPHeader("Accept")}} pour les ressources.</li>
-</ul>
+### Quels types de contenu peuvent être préchargés ?
 
-<h3 id="what_types_of_content_can_be_preloaded">Quels types de contenu peuvent être préchargés&nbsp;?</h3>
+De nombreux différents types de contenu peuvent être préchargés. Les valeurs possibles de l'attribut `as` sont les suivantes :
 
-<p>De nombreux différents types de contenu peuvent être préchargés. Les valeurs possibles de l'attribut <code>as</code> sont les suivantes&nbsp;:</p>
+- `audio` : fichier audio, typiquement intégré avec l'élément {{htmlelement("audio")}} ;
+- `document` : un document HTML destiné à être embarqué dans une {{htmlelement("frame")}} ou dans une {{htmlelement("iframe")}} ;
+- `embed` : une ressource à embarquer dans un élément {{htmlelement("embed")}} ;
+- `fetch` : une ressource accessible via une requête `fetch` ou `XHR`, comme un `ArrayBuffer` ou un fichier JSON ;
+- `font` : un fichier de police ;
+- `image` : un fichier image ;
+- `object` : une ressource à embarquer à l'intérieur d'un élément {{htmlelement("object")}} ;
+- `script` : un fichier JavaScript ;
+- `style` : une feuille de styles CSS ;
+- `track` : un fichier WebVTT ;
+- `worker` : un
 
-<ul>
-  <li><code>audio</code>&nbsp;: fichier audio, typiquement intégré avec l'élément {{htmlelement("audio")}}&nbsp;;</li>
-  <li><code>document</code>&nbsp;: un document HTML destiné à être embarqué dans une {{htmlelement("frame")}} ou dans une {{htmlelement("iframe")}}&nbsp;;</li>
-  <li><code>embed</code>&nbsp;: une ressource à embarquer dans un élément {{htmlelement("embed")}}&nbsp;;</li>
-  <li><code>fetch</code>&nbsp;: une ressource accessible via une requête <code>fetch</code> ou <code>XHR</code>, comme un <code>ArrayBuffer</code> ou un fichier JSON&nbsp;;</li>
-  <li><code>font</code>&nbsp;: un fichier de police&nbsp;;</li>
-  <li><code>image</code>&nbsp;: un fichier image&nbsp;;</li>
-  <li><code>object</code>&nbsp;: une ressource à embarquer à l'intérieur d'un élément {{htmlelement("object")}}&nbsp;;</li>
-  <li><code>script</code>&nbsp;: un fichier JavaScript&nbsp;;</li>
-  <li><code>style</code>&nbsp;: une feuille de styles CSS&nbsp;;</li>
-  <li><code>track</code>&nbsp;: un fichier WebVTT&nbsp;;</li>
-  <li><code>worker</code>&nbsp;: un <i lang="en">web worker</i> JavaScript ou un <i lang="en">worker</i> partagé&nbsp;;</li>
-  <li><code>video</code>&nbsp;: un fichier vidéo, typiquement intégré avec l'élément {{htmlelement("video")}}.</li>
-</ul>
+  <i lang="en">web worker</i>
 
-<div class="note">
-  <p><strong>Note :</strong> le préchargement de l'élément <code>video</code> est inclut dans la spécification <i lang="en">Preload</i> mais n'est pas encore implémenté par les navigateurs.</p>
-</div>
+  JavaScript ou un
 
-<div class="note">
-<p><strong>Note :</strong> pour davantage de détails sur ces valeurs et sur la façon dont la spécification <i lang="en">Preload</i> prévoit de les traiter, consultez <a href="https://w3c.github.io/preload/#link-element-extensions"><i lang="en">link element extensions</i> (en anglais)</a>. Notez également que la liste complète des valeurs acceptées par l'attribut <code>as</code> est déterminé par la spécification <i lang="en">Fetch</i> — voir la spécification <a href="https://fetch.spec.whatwg.org/#concept-request-destination"><i lang="en">request destinations</i> (en anglais)</a>.</p>
-</div>
+  <i lang="en">worker</i>
 
-<h2 id="including_a_mime_type">Inclure un type MIME</h2>
+  partagé ;
 
-<p>Les éléments <code>&lt;link&gt;</code> peuvent accepter un attribut {{htmlattrxref("type", "link")}}, contenant le type MIME de la ressource vers laquelle pointe le document. Ceci est tout spécialement utile lorsque l'on effectue un préchargement des ressources – le navigateur utilisera alors l'attribut <code>type</code> pour vérifier s'il prend en charge la ressource et la télécharger si c'est le cas, ou l'ignorer dans le cas contraire.</p>
+- `video` : un fichier vidéo, typiquement intégré avec l'élément {{htmlelement("video")}}.
 
-<p>Vous pouvez voir un exemple de ce fonctionnement dans notre vidéo d'exemple (voir le <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">code source complet</a> ou la <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">version exécutable en direct</a>), utilisant le bout de code proposé ci-dessous. À noter que si ce code ne lancera pas de préchargement effectif sur aucun navigateur – le préchargement des vidéos n'est encore implémenté sur aucun navigateur&nbsp;– cela permet d'illustrer le fonctionnement général du préchargement.</p>
+> **Note :** le préchargement de l'élément `video` est inclut dans la spécification <i lang="en">Preload</i> mais n'est pas encore implémenté par les navigateurs.
 
-<pre class="brush: html">&lt;head&gt;
-  &lt;meta charset="utf-8"&gt;
-  &lt;title&gt;Exemple de préchargement de vidéo&lt;/title&gt;
+> **Note :** pour davantage de détails sur ces valeurs et sur la façon dont la spécification <i lang="en">Preload</i> prévoit de les traiter, consultez [<i lang="en">link element extensions</i> (en anglais)](https://w3c.github.io/preload/#link-element-extensions). Notez également que la liste complète des valeurs acceptées par l'attribut `as` est déterminé par la spécification <i lang="en">Fetch</i> — voir la spécification [<i lang="en">request destinations</i> (en anglais)](https://fetch.spec.whatwg.org/#concept-request-destination).
 
-  &lt;link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;video controls&gt;
-    &lt;source src="sintel-short.mp4" type="video/mp4"&gt;
-    &lt;source src="sintel-short.webm" type="video/webm"&gt;
-    &lt;p&gt;Votre navigateur ne prend pas en charge les vidéos HTML5. Voici un &lt;a href="sintel-short.mp4"&gt;lien vers le fichier vidéo en remplacement&lt;/a&gt;.&lt;/p&gt;
-  &lt;/video&gt;
-&lt;/body&gt;</pre>
+## Inclure un type MIME
 
-<p>Le code de l'exemple ci-dessus permet le préchargement de la <code>video/mp4</code> uniquement sur les navigateurs qui prennent en charge cette fonctionnalité et pour les personnes ayant un navigateur prenant en charge le format <code>video/mp4</code> (car ce format est le premier élément {{htmlelement("source")}} spécifié). Cela devrait rendre le lecteur vidéo plus ergonomique et plus <a href="/fr/docs/Learn/CSS/CSS_layout/Responsive_Design"><i lang="en">responsive</i></a> pour ces personnes.</p>
+Les éléments `<link>` peuvent accepter un attribut {{htmlattrxref("type", "link")}}, contenant le type MIME de la ressource vers laquelle pointe le document. Ceci est tout spécialement utile lorsque l'on effectue un préchargement des ressources – le navigateur utilisera alors l'attribut `type` pour vérifier s'il prend en charge la ressource et la télécharger si c'est le cas, ou l'ignorer dans le cas contraire.
 
-<p>Concernant les personnes disposant d'un navigateur prenant en charge tout aussi bien les formats <code>video/mp4</code> et <code>video/webm</code> support, il est important de noter que si un élément <code>&lt;link rel="preload" href="sintel-short.webm" as="video" type="video/webm"&gt;</code> est aussi spécifié, alors <strong>les deux formats <code>video/mp4</code> et <code>video/webm</code> seront préchargés</strong> — même si un seul d'entre eux est utilisé.</p>
+Vous pouvez voir un exemple de ce fonctionnement dans notre vidéo d'exemple (voir le [code source complet](https://github.com/mdn/html-examples/tree/master/link-rel-preload/video) ou la [version exécutable en direct](https://mdn.github.io/html-examples/link-rel-preload/video/)), utilisant le bout de code proposé ci-dessous. À noter que si ce code ne lancera pas de préchargement effectif sur aucun navigateur – le préchargement des vidéos n'est encore implémenté sur aucun navigateur – cela permet d'illustrer le fonctionnement général du préchargement.
 
-<p>En conclusion, il est déconseillé de précharger de multiple formats pour la même ressource. La bonne pratique est plutôt de précharger uniquement le type de média qu'utilise la majorité des personnes qui visitent votre site. C'est pourquoi le code fourni en exemple ne précharge pas la vidéo au format <code>video/webm</code>.</p>
+```html
+<head>
+  <meta charset="utf-8">
+  <title>Exemple de préchargement de vidéo</title>
 
-<p>Cependant, l'absence de préchargement n'empêche pas la vidéo <code>video/webm</code> d'être utilisée par les personnes qui en ont besoin : pour les navigateurs qui ne prennent pas en charge le format <code>video/mp4</code> mais qui prennent en charge le format <code>video/webm</code> alors le code de l'exemple permettra toujours d'utiliser la vidéo au format <code>video/webm</code> — cela évitera simplement de précharger inutilement une ressource pour la plupart des navigateurs.</p>
+  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
+</head>
+<body>
+  <video controls>
+    <source src="sintel-short.mp4" type="video/mp4">
+    <source src="sintel-short.webm" type="video/webm">
+    <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici un <a href="sintel-short.mp4">lien vers le fichier vidéo en remplacement</a>.</p>
+  </video>
+</body>
+```
 
-<h2 id="cors-enabled_fetches">Récupération de l'activation du <i lang="en">CORS</i></h2>
+Le code de l'exemple ci-dessus permet le préchargement de la `video/mp4` uniquement sur les navigateurs qui prennent en charge cette fonctionnalité et pour les personnes ayant un navigateur prenant en charge le format `video/mp4` (car ce format est le premier élément {{htmlelement("source")}} spécifié). Cela devrait rendre le lecteur vidéo plus ergonomique et plus [<i lang="en">responsive</i>](/fr/docs/Learn/CSS/CSS_layout/Responsive_Design) pour ces personnes.
 
-<p>Lors du préchargement des ressources analysées par des fonctions activant le&nbsp;<a href="/fr/docs/Web/HTTP/CORS">CORS</a> (partage des ressources entre origines multiples), comme par exemple <code><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code>, <code><a href="/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> ou <a href="/fr/docs/Web/CSS/@font-face">fonts</a>), une attention particulière doit être portée à la mise en place de l'attribut {{htmlattrxref("crossorigin","link")}} sur l'élément <code><a href="/fr/docs/Web/HTML/Element/link">&lt;link&gt;</a></code>. L'attribut à besoin d'être mis en place pour faire correspondre le <i lang="en">CORS</i> de la ressource et le mode d'identification, même s'il ne s'agit pas d'une ressource ayant une origine différente de celle de la page.</p>
+Concernant les personnes disposant d'un navigateur prenant en charge tout aussi bien les formats `video/mp4` et `video/webm` support, il est important de noter que si un élément `<link rel="preload" href="sintel-short.webm" as="video" type="video/webm">` est aussi spécifié, alors **les deux formats `video/mp4` et `video/webm` seront préchargés** — même si un seul d'entre eux est utilisé.
 
-<p>Comme mentionné ci-dessus, un cas de figure intéressant est celui qui s'applique aux fichiers de polices. Pour plusieurs raisons, celles-ci doivent être analysées en utilisant le mode anonyme du <i lang="en">CORS</i> (voir cet article en anglais&nbsp;: <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements"><i lang="en">Font fetching requirements</i></a>).</p>
+En conclusion, il est déconseillé de précharger de multiple formats pour la même ressource. La bonne pratique est plutôt de précharger uniquement le type de média qu'utilise la majorité des personnes qui visitent votre site. C'est pourquoi le code fourni en exemple ne précharge pas la vidéo au format `video/webm`.
 
-<p>Voici un cas d'utilisation. Vous trouverez <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">le code source complet sur GitHub</a> ainsi qu'une <a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">démonstration</a>&nbsp;:</p>
+Cependant, l'absence de préchargement n'empêche pas la vidéo `video/webm` d'être utilisée par les personnes qui en ont besoin : pour les navigateurs qui ne prennent pas en charge le format `video/mp4` mais qui prennent en charge le format `video/webm` alors le code de l'exemple permettra toujours d'utiliser la vidéo au format `video/webm` — cela évitera simplement de précharger inutilement une ressource pour la plupart des navigateurs.
 
-<pre class="brush: html">&lt;head&gt;
-  &lt;meta charset="utf-8"&gt;
-  &lt;title&gt;Exemple de préchargement de police Web&lt;/title&gt;
+## Récupération de l'activation du <i lang="en">CORS</i>
 
-  &lt;link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin&gt;
-  &lt;link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin&gt;
+Lors du préchargement des ressources analysées par des fonctions activant le [CORS](/fr/docs/Web/HTTP/CORS) (partage des ressources entre origines multiples), comme par exemple [`fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch), [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) ou [fonts](/fr/docs/Web/CSS/@font-face)), une attention particulière doit être portée à la mise en place de l'attribut {{htmlattrxref("crossorigin","link")}} sur l'élément [`<link>`](/fr/docs/Web/HTML/Element/link). L'attribut à besoin d'être mis en place pour faire correspondre le <i lang="en">CORS</i> de la ressource et le mode d'identification, même s'il ne s'agit pas d'une ressource ayant une origine différente de celle de la page.
 
-  &lt;link href="style.css" rel="stylesheet"&gt;
-&lt;/head&gt;
-&lt;body&gt;
+Comme mentionné ci-dessus, un cas de figure intéressant est celui qui s'applique aux fichiers de polices. Pour plusieurs raisons, celles-ci doivent être analysées en utilisant le mode anonyme du <i lang="en">CORS</i> (voir cet article en anglais : [<i lang="en">Font fetching requirements</i>](https://drafts.csswg.org/css-fonts/#font-fetching-requirements)).
+
+Voici un cas d'utilisation. Vous trouverez [le code source complet sur GitHub](https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts) ainsi qu'une [démonstration](https://mdn.github.io/html-examples/link-rel-preload/fonts/) :
+
+```html
+<head>
+  <meta charset="utf-8">
+  <title>Exemple de préchargement de police Web</title>
+
+  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin>
+
+  <link href="style.css" rel="stylesheet">
+</head>
+<body>
   …
-&lt;/body&gt;</pre>
+</body>
+```
 
-<p>En plus de fournir un type MIME avec l'attribut <code>type</code>, ce code utilise un attribut <code>crossorigin</code> afin de s'assurer que le préchargement du <i lang="en">CORS</i> correspond à la requête de chargement de la police.</p>
+En plus de fournir un type MIME avec l'attribut `type`, ce code utilise un attribut `crossorigin` afin de s'assurer que le préchargement du <i lang="en">CORS</i> correspond à la requête de chargement de la police.
 
-<h2 id="including_media">Inclure des médias</h2>
+## Inclure des médias
 
-<p>Une autre belle fonctionnalité de l'élément <code>&lt;link&gt;</code> concerne leur capacité à accepter les attributs {{htmlattrxref("media", "link")}}. Il peut accepter les requêtes de <a href="/fr/docs/Web/CSS/@media#media_types">types de médias</a> ou encore des <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries"><i lang="en">media queries</i></a> complètes, ce qui vous permet de faire du préchargement <i lang="en">responsive</i>&nbsp;!</p>
+Une autre belle fonctionnalité de l'élément `<link>` concerne leur capacité à accepter les attributs {{htmlattrxref("media", "link")}}. Il peut accepter les requêtes de [types de médias](/fr/docs/Web/CSS/@media#media_types) ou encore des [<i lang="en">media queries</i>](/fr/docs/Web/CSS/Media_Queries/Using_media_queries) complètes, ce qui vous permet de faire du préchargement <i lang="en">responsive</i> !
 
-<p>Voici un exemple. Vous pouvez consulter son <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">code source sur GitHub</a> ou étudier un <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">exemple de démonstration</a>&nbsp;:</p>
+Voici un exemple. Vous pouvez consulter son [code source sur GitHub](https://github.com/mdn/html-examples/tree/master/link-rel-preload/media) ou étudier un [exemple de démonstration](https://mdn.github.io/html-examples/link-rel-preload/media/) :
 
-<pre class="brush: html">&lt;head&gt;
-  &lt;meta charset="utf-8"&gt;
-  &lt;title&gt;Exemple de préchargement responsive&lt;/title&gt;
+```html
+<head>
+  <meta charset="utf-8">
+  <title>Exemple de préchargement responsive</title>
 
-  &lt;link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"&gt;
-  &lt;link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"&gt;
+  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
+  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
 
-  &lt;link rel="stylesheet" href="main.css"&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;header&gt;
-    &lt;h1&gt;Mon site&lt;/h1&gt;
-  &lt;/header&gt;
+  <link rel="stylesheet" href="main.css">
+</head>
+<body>
+  <header>
+    <h1>Mon site</h1>
+  </header>
 
-  &lt;script&gt;
+  <script>
     var mediaQueryList = window.matchMedia("(max-width: 600px)");
     var header = document.querySelector('header');
 
@@ -165,58 +170,57 @@ translation_of: 'Web/HTML/Link_types/preload'
     } else {
       header.style.backgroundImage = 'url(bg-image-wide.png)';
     }
-  &lt;/script&gt;
-&lt;/body&gt;</pre>
+  </script>
+</body>
+```
 
-<p>Dans cet exemple nous incluons les attributs <code>media</code> dans notre élément <code>&lt;link&gt;</code> pour qu'une image plus fine soit préchargée si la personne visitant le site dispose d'un écran plus petit, et pour qu'une image plus large soit chargée sur les écrans plus larges. Pour cela, nous utilisons {{domxref("Window.matchMedia")}} et {{domxref("MediaQueryList")}} (consultez la page <a href="/fr/docs/Web/CSS/Media_Queries/Testing_media_queries">Tester les requêtes média en JavaScript</a> pour en savoir plus).</p>
+Dans cet exemple nous incluons les attributs `media` dans notre élément `<link>` pour qu'une image plus fine soit préchargée si la personne visitant le site dispose d'un écran plus petit, et pour qu'une image plus large soit chargée sur les écrans plus larges. Pour cela, nous utilisons {{domxref("Window.matchMedia")}} et {{domxref("MediaQueryList")}} (consultez la page [Tester les requêtes média en JavaScript](/fr/docs/Web/CSS/Media_Queries/Testing_media_queries) pour en savoir plus).
 
-<p>Cela augmente les chances que la police sera disponible lors du rendu de la page, et diminue les risques de <i lang="en">FOUT</i> (pour <i lang="en">flash of unstyled text</i>, soit «&nbsp;flash de texte sans mis en forme&nbsp;» en français).</p>
+Cela augmente les chances que la police sera disponible lors du rendu de la page, et diminue les risques de <i lang="en">FOUT</i> (pour <i lang="en">flash of unstyled text</i>, soit « flash de texte sans mis en forme » en français).
 
-<p>Il sera dommage de limiter le préchargement aux images, voyez plus loin&nbsp;! On pourrait imaginer de précharger l'affichage d'un diagramme SVG si le visiteur se trouve sur un petit écran avec une bande passante ou une disponibilité CPU plus limitée, ou encore de précharger des morceaux de JavaScript complexes utilisés pour faire fonctionner une modélisation 3D interactive uniquement si les ressources du visiteur sont suffisantes.</p>
+Il sera dommage de limiter le préchargement aux images, voyez plus loin ! On pourrait imaginer de précharger l'affichage d'un diagramme SVG si le visiteur se trouve sur un petit écran avec une bande passante ou une disponibilité CPU plus limitée, ou encore de précharger des morceaux de JavaScript complexes utilisés pour faire fonctionner une modélisation 3D interactive uniquement si les ressources du visiteur sont suffisantes.
 
-<h2 id="scripting_and_preloads">Scripts et préchargement</h2>
+## Scripts et préchargement
 
-<p>Une autre fonctionnalité notable est la possibilité d'exécuter le préchargement à l'aide d'un script. Par exemple, voici la création d'une instance {{domxref("HTMLLinkElement")}} qui est ensuite attachée au <i lang="en">DOM</i>&nbsp;:</p>
+Une autre fonctionnalité notable est la possibilité d'exécuter le préchargement à l'aide d'un script. Par exemple, voici la création d'une instance {{domxref("HTMLLinkElement")}} qui est ensuite attachée au <i lang="en">DOM</i> :
 
-<pre class="brush: js">var preloadLink = document.createElement(&quot;link&quot;);
-preloadLink.href = &quot;myscript.js&quot;;
-preloadLink.rel = &quot;preload&quot;;
-preloadLink.as = &quot;script&quot;;
+```js
+var preloadLink = document.createElement("link");
+preloadLink.href = "myscript.js";
+preloadLink.rel = "preload";
+preloadLink.as = "script";
 document.head.appendChild(preloadLink);
-</pre>
+```
 
-<p>Cela signifie que le navigateur va précharger le fichier <code>myscript.js</code>, mais ne va pas réellement l'utiliser directement. Pour l'utiliser, vous pouvez faire ceci&nbsp;:</p>
+Cela signifie que le navigateur va précharger le fichier `myscript.js`, mais ne va pas réellement l'utiliser directement. Pour l'utiliser, vous pouvez faire ceci :
 
-<pre class="brush: js">var preloadedScript = document.createElement(&quot;script&quot;);
-preloadedScript.src = &quot;myscript.js&quot;;
+```js
+var preloadedScript = document.createElement("script");
+preloadedScript.src = "myscript.js";
 document.body.appendChild(preloadedScript);
-</pre>
+```
+
+C'est utile lorsque vous voulez précharger un script mais repousser son exécution au moment exact où vous en avez réellement besoin.
 
-<p>C'est utile lorsque vous voulez précharger un script mais repousser son exécution au moment exact où vous en avez réellement besoin.</p>
+## Autres ressources concernant les mécanismes de préchargement
 
-<h2 id="other_resource_preloading_mechanisms">Autres ressources concernant les mécanismes de préchargement</h2>
+D'autres fonctionnalités de préchargement sont disponibles, mais sachez qu'aucune d'entre elle n'est aussi adaptée à l'objectif recherché que `<link rel="preload">`. En voici la liste :
 
-<p>D'autres fonctionnalités de préchargement sont disponibles, mais sachez qu'aucune d'entre elle n'est aussi adaptée à l'objectif recherché que <code>&lt;link rel="preload"&gt;</code>. En voici la liste&nbsp;:</p>
+- `<link rel="prefetch">` est pris en charge depuis quelque temps par les navigateurs, mais est destinée à la récupération préalable des ressources qui vont être utilisées lors de la **_prochaine_** page visitée/chargée (par exemple lorsque vous vous rendrez sur une autre page du site). C'est une bonne chose, mais ce n'est pas utile pour la page en cours de chargement ! Par ailleurs, les navigateurs donnent une priorité plus faible à `prefetch` qu'à `preload` — la page courante est prioritaire par rapport à la page suivante. Consultez la [FAQ sur le préchargement des liens](/fr/docs/Web/HTTP/Link_prefetching_FAQ) pour plus de détails ;
+- `<link rel="prerender">` effectue le rendu une page spécifiée en arrière-plan, ce qui permet d'accélerer son chargement si la personne visitant le site se rend sur cette page par la suite. Du fait du gaspillage potentiel de bande passante pour les visiteurs (on charge des éléments sans savoir si on en aura besoin), Chrome traite l'instruction `prerender` comme une instruction [NoState prefetch](https://developers.google.com/web/updates/2018/07/nostate-prefetch) ;
+- `<link rel="subresource">` {{non-standard_inline}} était pris en charge par Chrome il y a quelques temps et était destiné à gérer la même chose que `preload`, mais il y avait un problème : il n'y avait aucun moyen de définir une priorité sur les éléments à charger (`as` n'existait pas encore), donc toutes les ressources étaient chargées avec la même priorité (la plus faible) ;
+- Il y a un grand nombre de scripts de chargements de ressources disponibles un peu partout, mais aucun ne peut avoir la puissance d'une file de priorisation gérée directement par le navigateur. De plus, ces scripts sont sujets à des problèmes de performances similaires.
 
-<ul>
-  <li><code>&lt;link rel="prefetch"&gt;</code> est pris en charge depuis quelque temps par les navigateurs, mais est destinée à la récupération préalable des ressources qui vont être utilisées lors de la <strong><em>prochaine</em></strong> page visitée/chargée (par exemple lorsque vous vous rendrez sur une autre page du site). C'est une bonne chose, mais ce n'est pas utile pour la page en cours de chargement&nbsp;! Par ailleurs, les navigateurs donnent une priorité plus faible à <code>prefetch</code> qu'à <code>preload</code> — la page courante est prioritaire par rapport à la page suivante. Consultez la <a href="/fr/docs/Web/HTTP/Link_prefetching_FAQ">FAQ sur le préchargement des liens</a> pour plus de détails&nbsp;;</li>
-  <li><code>&lt;link rel="prerender"&gt;</code> effectue le rendu une page spécifiée en arrière-plan, ce qui permet d'accélerer son chargement si la personne visitant le site se rend sur cette page par la suite. Du fait du gaspillage potentiel de bande passante pour les visiteurs (on charge des éléments sans savoir si on en aura besoin), Chrome traite l'instruction <code>prerender</code> comme une instruction <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">NoState prefetch</a>&nbsp;;</li>
-  <li><code>&lt;link rel="subresource"&gt;</code> {{non-standard_inline}} était pris en charge par Chrome il y a quelques temps et était destiné à gérer la même chose que <code>preload</code>, mais il y avait un problème&nbsp;: il n'y avait aucun moyen de définir une priorité sur les éléments à charger (<code>as</code> n'existait pas encore), donc toutes les ressources étaient chargées avec la même priorité (la plus faible)&nbsp;;</li>
-  <li>Il y a un grand nombre de scripts de chargements de ressources disponibles un peu partout, mais aucun ne peut avoir la puissance d'une file de priorisation gérée directement par le navigateur. De plus, ces scripts sont sujets à des problèmes de performances similaires.</li>
-</ul>
+## Spécifications
 
-<h2 id="specifications">Spécifications</h2>
+{{Specifications}}
 
-<p>{{Specifications}}</p>
+## Compatibilité des navigateurs
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+{{Compat}}
 
-<p>{{Compat}}</p>
+## Voir aussi
 
-<h2 id="see_also">Voir aussi</h2>
+- <i lang="en">Preload: What Is It Good For?</i>
 
-<ul>
-  <li>
-    <a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/"><i lang="en">Preload: What Is It Good For?</i></a> par Yoav Weiss (en anglais)
-  </li>
-</ul>
+  par Yoav Weiss (en anglais)
diff --git a/files/fr/web/html/link_types/prerender/index.md b/files/fr/web/html/link_types/prerender/index.md
index 01679321c3..e20055df1b 100644
--- a/files/fr/web/html/link_types/prerender/index.md
+++ b/files/fr/web/html/link_types/prerender/index.md
@@ -1,15 +1,15 @@
 ---
-title: 'Types de liens : prerender'
+title: "Types de liens\_: prerender"
 slug: Web/HTML/Link_types/prerender
+translation_of: Web/HTML/Link_types/prerender
 browser-compat: html.elements.link.rel.prerender
-translation_of: 'Web/HTML/Link_types/prerender'
 ---
-<p>Le mot-clé <strong><code>prerender</code></strong> de l'attribut {{HTMLAttrxRef("rel", "link")}} de l'élément {{HTMLElement("link")}} indique aux navigateurs que la personne visitant le site pourrait avoir besoin de la ressource cible pour la prochaine page visitée, et donc que le navigateur peut sans doute améliorer l'expérience utilisateur en récupérant et en traitant la ressource de façon préventive – par exemple, en récupérant les ressources de cette page ou en effectuant son rendu en arrière-plan.</p>
+Le mot-clé **`prerender`** de l'attribut {{HTMLAttrxRef("rel", "link")}} de l'élément {{HTMLElement("link")}} indique aux navigateurs que la personne visitant le site pourrait avoir besoin de la ressource cible pour la prochaine page visitée, et donc que le navigateur peut sans doute améliorer l'expérience utilisateur en récupérant et en traitant la ressource de façon préventive – par exemple, en récupérant les ressources de cette page ou en effectuant son rendu en arrière-plan.
 
-<h2 id="specifications">Spécifications</h2>
+## Spécifications
 
-<p>{{Specifications}}</p>
+{{Specifications}}
 
-<h2 id="browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>{{Compat}}</p>
+{{Compat}}
diff --git a/files/fr/web/html/microdata/index.md b/files/fr/web/html/microdata/index.md
index aecd248fbe..637688e175 100644
--- a/files/fr/web/html/microdata/index.md
+++ b/files/fr/web/html/microdata/index.md
@@ -12,93 +12,89 @@ tags:
 translation_of: Web/HTML/Microdata
 original_slug: Web/HTML/Microdonnées
 ---
-<p>Les microdonnées (<em>microdata</em>) sont une partie de la spécification HTML du <a href="/fr/docs/Glossary/WHATWG">WHATWG</a> qui est utilisée afin de fournir des métadonnées sur le contenu des pages web. Les moteurs de recherche, les robots (<em>crawlers</em>) d'analyse peuvent traiter les microdonnées d'une page web pour améliorer l'expérience de navigation. Les moteurs de recherches peuvent tirer parti des informations pour obtenir une meilleure pertinence. Les microdonnées sont structurées grâce à un vocabulaire permettant de décrire des objets qui sont des groupes de paires de noms/valeurs. Le but des microdonnées est de faciliter l'annotation des éléments HTML et d'être plus simple à utiliser que RDFa ou les microformats.</p>
+Les microdonnées (_microdata_) sont une partie de la spécification HTML du [WHATWG](/fr/docs/Glossary/WHATWG) qui est utilisée afin de fournir des métadonnées sur le contenu des pages web. Les moteurs de recherche, les robots (_crawlers_) d'analyse peuvent traiter les microdonnées d'une page web pour améliorer l'expérience de navigation. Les moteurs de recherches peuvent tirer parti des informations pour obtenir une meilleure pertinence. Les microdonnées sont structurées grâce à un vocabulaire permettant de décrire des objets qui sont des groupes de paires de noms/valeurs. Le but des microdonnées est de faciliter l'annotation des éléments HTML et d'être plus simple à utiliser que RDFa ou les microformats.
 
-<p>Les microdonnées sont des groupes de paires nom-valeur. Ces groupes sont appelés des objets (<em>items</em>) et chaque paire nom-valeur est une propriété. Les objets et les propriétés s'inscrivent dans des éléments HTML classiques :</p>
+Les microdonnées sont des groupes de paires nom-valeur. Ces groupes sont appelés des objets (_items_) et chaque paire nom-valeur est une propriété. Les objets et les propriétés s'inscrivent dans des éléments HTML classiques :
 
-<ul>
-  <li>Pour créer un objet, on utilise l'attribut <strong><code>itemscope</code></strong></li>
-  <li>Pour ajouter une propriété, on utilise l'attribut <strong><code>itemprop</code></strong> sur l'un des descendants.</li>
-</ul>
+- Pour créer un objet, on utilise l'attribut **`itemscope`**
+- Pour ajouter une propriété, on utilise l'attribut **`itemprop`** sur l'un des descendants.
 
-<h2 id="Vocabularies">Vocabulaires</h2>
+## Vocabulaires
 
-<p>Google et les autres moteurs de recherches participent au vocabulaire défini par <a href="https://schema.org/">schema.org</a> pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple <code><a href="https://schema.org/MusicEvent">MusicEvent</a></code> indique un événement musical dont les propriétés <code><a href="https://schema.org/startDate">startDate</a></code> et <code><a href="https://schema.org/location">location</a></code> utilisées pour définir les détails du concert. Dans ce cas, l'URL <code><a href="https://schema.org/MusicEvent">https://schema.org/MusicEvent</a></code> sera l'URL utilisée pour l'attribut <code>itemtype</code> et les propriétés <code>startDate</code> et <code>location</code> seront les propriétés utilisées, définies par <code><a href="https://schema.org/MusicEvent">https://schema.org/MusicEvent</a></code>.</p>
+Google et les autres moteurs de recherches participent au vocabulaire défini par [schema.org](https://schema.org/) pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple [`MusicEvent`](https://schema.org/MusicEvent) indique un événement musical dont les propriétés [`startDate`](https://schema.org/startDate) et [`location`](https://schema.org/location) utilisées pour définir les détails du concert. Dans ce cas, l'URL [`https://schema.org/MusicEvent`](https://schema.org/MusicEvent) sera l'URL utilisée pour l'attribut `itemtype` et les propriétés `startDate` et `location` seront les propriétés utilisées, définies par [`https://schema.org/MusicEvent`](https://schema.org/MusicEvent).
 
-<div class="note">
-  <p><strong>Note :</strong> Pour en savoir plus sur les attributs <code>itemtype</code>, consultez le site <a href="http://schema.org/Thing">http://schema.org/Thing</a>.</p>
-</div>
+> **Note :** Pour en savoir plus sur les attributs `itemtype`, consultez le site <http://schema.org/Thing>.
 
-<p>Les vocabulaires de microdonnées fournissent la sémantique ou la signification d'un élément. Les développeurs Web peuvent concevoir un vocabulaire personnalisé ou utiliser des vocabulaires disponibles sur le Web, tels que le vocabulaire largement utilisé <a href="http://schema.org">schema.org</a>. Une collection de vocabulaires de balisage couramment utilisés est fournie par Schema.org.</p>
+Les vocabulaires de microdonnées fournissent la sémantique ou la signification d'un élément. Les développeurs Web peuvent concevoir un vocabulaire personnalisé ou utiliser des vocabulaires disponibles sur le Web, tels que le vocabulaire largement utilisé [schema.org](http://schema.org). Une collection de vocabulaires de balisage couramment utilisés est fournie par Schema.org.
 
-<p>Vocabulaires couramment utilisés :</p>
+Vocabulaires couramment utilisés :
 
-<ul>
-  <li>Œuvres créatives : <a href="http://schema.org/CreativeWork">CreativeWork</a>, <a href="http://schema.org/Book">Book</a>, <a href="http://schema.org/Movie">Movie</a>, <a href="http://schema.org/MusicRecording">MusicRecording</a>, <a href="http://schema.org/Recipe">Recipe</a>, <a href="http://schema.org/TVSeries">TVSeries</a></li>
-  <li>Objets non textuels incorporés : <a href="http://schema.org/AudioObject">AudioObject</a>, <a href="http://schema.org/ImageObject">ImageObject</a>, <a href="http://schema.org/VideoObject">VideoObject</a></li>
-  <li><a href="http://schema.org/Event">Event</a></li>
-  <li><a href="http://schema.org/docs/meddocs.html">Health and medical types</a> : Notes sur les types de santé et médicaux sous <a href="http://schema.org/MedicalEntity">MedicalEntity</a></li>
-  <li><a href="http://schema.org/Organization">Organization</a></li>
-  <li><a href="http://schema.org/Person">Person</a></li>
-  <li><a href="http://schema.org/Place">Place</a>, <a href="http://schema.org/LocalBusiness">LocalBusiness</a>, <a href="http://schema.org/Restaurant">Restaurant</a></li>
-  <li><a href="http://schema.org/Product">Product</a>, <a href="http://schema.org/Offer">Offer</a>, <a href="http://schema.org/AggregateOffer">AggregateOffer</a></li>
-  <li><a href="http://schema.org/Review">Review</a>, <a href="http://schema.org/AggregateRating">AggregateRating</a></li>
-  <li><a href="http://schema.org/Action">Action</a></li>
-  <li><a href="http://schema.org/Thing">Thing</a></li>
-  <li><a href="http://schema.org/Intangible">Intangible</a></li>
-</ul>
+- Œuvres créatives : [CreativeWork](http://schema.org/CreativeWork), [Book](http://schema.org/Book), [Movie](http://schema.org/Movie), [MusicRecording](http://schema.org/MusicRecording), [Recipe](http://schema.org/Recipe), [TVSeries](http://schema.org/TVSeries)
+- Objets non textuels incorporés : [AudioObject](http://schema.org/AudioObject), [ImageObject](http://schema.org/ImageObject), [VideoObject](http://schema.org/VideoObject)
+- [Event](http://schema.org/Event)
+- [Health and medical types](http://schema.org/docs/meddocs.html) : Notes sur les types de santé et médicaux sous [MedicalEntity](http://schema.org/MedicalEntity)
+- [Organization](http://schema.org/Organization)
+- [Person](http://schema.org/Person)
+- [Place](http://schema.org/Place), [LocalBusiness](http://schema.org/LocalBusiness), [Restaurant](http://schema.org/Restaurant)
+- [Product](http://schema.org/Product), [Offer](http://schema.org/Offer), [AggregateOffer](http://schema.org/AggregateOffer)
+- [Review](http://schema.org/Review), [AggregateRating](http://schema.org/AggregateRating)
+- [Action](http://schema.org/Action)
+- [Thing](http://schema.org/Thing)
+- [Intangible](http://schema.org/Intangible)
 
-<p>Les principaux opérateurs de moteurs de recherche comme Google, Microsoft et Yahoo ! s'appuient sur le vocabulaire <a href="http://schema.org/">schema.org</a> pour améliorer les résultats de recherche. Pour certains usages, un vocabulaire ad-hoc est adéquat. Pour d'autres, un vocabulaire devra être conçu. Dans la mesure du possible, les auteurs sont encouragés à réutiliser les vocabulaires existants, car cela facilite la réutilisation du contenu.</p>
+Les principaux opérateurs de moteurs de recherche comme Google, Microsoft et Yahoo ! s'appuient sur le vocabulaire [schema.org](http://schema.org/) pour améliorer les résultats de recherche. Pour certains usages, un vocabulaire ad-hoc est adéquat. Pour d'autres, un vocabulaire devra être conçu. Dans la mesure du possible, les auteurs sont encouragés à réutiliser les vocabulaires existants, car cela facilite la réutilisation du contenu.
 
-<h2 id="Localization">Localisation</h2>
+## Localisation
 
-<p>Dans certains cas, les moteurs de recherche couvrent un public régional. Certaines extensions sont donc ajoutées aux microdonnées pour fournir du contenu spécifique. Ainsi, <a href="https://www.yandex.com/">Yandex</a> qui est un moteur de recherche très présent en Russie supporte des microformats comme <em>hCard</em>, <em>hRecipe</em>, <em>hReview</em> et <em>hProduct</em> et fournit son propre format pour dédfinir les termes et les articles encyclopédiques. Cette extension a été construite afin de résoudre les problèmes de translitération entre les alphabets cyrillique et latin.</p>
+Dans certains cas, les moteurs de recherche couvrent un public régional. Certaines extensions sont donc ajoutées aux microdonnées pour fournir du contenu spécifique. Ainsi, [Yandex](https://www.yandex.com/) qui est un moteur de recherche très présent en Russie supporte des microformats comme _hCard_, _hRecipe_, _hReview_ et _hProduct_ et fournit son propre format pour dédfinir les termes et les articles encyclopédiques. Cette extension a été construite afin de résoudre les problèmes de translitération entre les alphabets cyrillique et latin.
 
-<h2 id="Global_attributes">Attributs globaux liés aux microdonnées</h2>
+## Attributs globaux liés aux microdonnées
 
-<dl>
- <dt><a href="/fr/docs/Web/HTML/Global_attributes/itemid"><code>itemid</code></a></dt>
- <dd>Cet attribut est l'identifiant unique d'un objet.</dd>
- <dt><a href="/fr/docs/Web/HTML/Global_attributes/itemprop"><code>itemprop</code></a></dt>
- <dd>Cet attribut est utilisé afin d'ajouter des propriétés à un élément.</dd>
- <dt><a href="/fr/docs/Web/HTML/Global_attributes/itemref"><code>itemref</code></a></dt>
- <dd>Cet attribut permet de faire référence à d'autres éléments HTML décrivant le même objet.</dd>
- <dt><a href="/fr/docs/Web/HTML/Global_attributes/itemscope"><code>itemscope</code></a></dt>
- <dd>Cet attribut définit la portée du vocabulaire déclaré par <code>itemtype</code> et englobe généralement un objet.</dd>
- <dt><a href="/fr/docs/Web/HTML/Global_attributes/itemtype"><code>itemtype</code></a></dt>
- <dd>Cet attribut définit l'URL du vocabulaire qui spécifie le modèle de données utilisé pour décrire les objets.</dd>
-</dl>
+- [`itemid`](/fr/docs/Web/HTML/Global_attributes/itemid)
+  - : Cet attribut est l'identifiant unique d'un objet.
+- [`itemprop`](/fr/docs/Web/HTML/Global_attributes/itemprop)
+  - : Cet attribut est utilisé afin d'ajouter des propriétés à un élément.
+- [`itemref`](/fr/docs/Web/HTML/Global_attributes/itemref)
+  - : Cet attribut permet de faire référence à d'autres éléments HTML décrivant le même objet.
+- [`itemscope`](/fr/docs/Web/HTML/Global_attributes/itemscope)
+  - : Cet attribut définit la portée du vocabulaire déclaré par `itemtype` et englobe généralement un objet.
+- [`itemtype`](/fr/docs/Web/HTML/Global_attributes/itemtype)
+  - : Cet attribut définit l'URL du vocabulaire qui spécifie le modèle de données utilisé pour décrire les objets.
 
-<h2 id="Example">Exemple</h2>
+## Exemple
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;div itemscope itemtype="https://schema.org/SoftwareApplication"&gt;
-  &lt;span itemprop="name"&gt;Angry Birds&lt;/span&gt; -
+```html
+<div itemscope itemtype="https://schema.org/SoftwareApplication">
+  <span itemprop="name">Angry Birds</span> -
 
-  NÉCESSITE &lt;span itemprop="operatingSystem"&gt;ANDROID&lt;/span&gt;&lt;br&gt;
-  &lt;link itemprop="applicationCategory" href="https://schema.org/GameApplication"/&gt;
+  NÉCESSITE <span itemprop="operatingSystem">ANDROID</span><br>
+  <link itemprop="applicationCategory" href="https://schema.org/GameApplication"/>
 
-  &lt;div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"&gt;
+  <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
   ÉVALUATION :
-    &lt;span itemprop="ratingValue"&gt;4.6&lt;/span&gt; (
-    &lt;span itemprop="ratingCount"&gt;8864&lt;/span&gt; notes )
-  &lt;/div&gt;
-
-  &lt;div itemprop="offers" itemscope itemtype="https://schema.org/Offer"&gt;
-    Prix : &lt;span itemprop="price"&gt;1.00&lt;/span&gt;$
-    &lt;meta itemprop="priceCurrency" content="USD" /&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+    <span itemprop="ratingValue">4.6</span> (
+    <span itemprop="ratingCount">8864</span> notes )
+  </div>
+
+  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
+    Prix : <span itemprop="price">1.00</span>$
+    <meta itemprop="priceCurrency" content="USD" />
+  </div>
+</div>
+```
 
-<h3 id="Structured_data">Données structurées</h3>
+### Données structurées
 
 <table class="standard-table">
   <tbody>
     <tr>
       <td rowspan="4">itemscope</td>
       <td>itemtype</td>
-      <td colspan="2">SoftwareApplication (https://schema.org/SoftwareApplication)</td>
+      <td colspan="2">
+        SoftwareApplication (https://schema.org/SoftwareApplication)
+      </td>
     </tr>
     <tr>
       <td>itemprop</td>
@@ -148,22 +144,18 @@ original_slug: Web/HTML/Microdonnées
   </tbody>
 </table>
 
-<h3 id="Result">Résultat</h3>
+### Résultat
 
-<p>{{EmbedLiveSample("HTML", "", "100")}}</p>
+{{EmbedLiveSample("HTML", "", "100")}}
 
-<div class="note">
-  <p><strong>Note :</strong> Un outil pratique pour extraire les structures de microdonnées du HTML est l'<a href="https://developers.google.com/search/docs/guides/intro-structured-data">outil de test des données structurées</a> de Google. Essayez-le sur le HTML présenté ci-dessus.</p>
-</div>
+> **Note :** Un outil pratique pour extraire les structures de microdonnées du HTML est l'[outil de test des données structurées](https://developers.google.com/search/docs/guides/intro-structured-data) de Google. Essayez-le sur le HTML présenté ci-dessus.
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Fonctionnalité ajoutée dans Firefox 16 et retirée dans Firefox 49.</p>
+Fonctionnalité ajoutée dans Firefox 16 et retirée dans Firefox 49.
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
- <li><a href="/fr/docs/Web/HTML/Global_attributes">Les attributs universels</a></li>
-</ul>
+- [Les attributs universels](/fr/docs/Web/HTML/Global_attributes)
 
-<div>{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}</div>
+{{QuickLinksWithSubpages("/en-US/docs/Web/HTML")}}
diff --git a/files/fr/web/html/microformats/index.md b/files/fr/web/html/microformats/index.md
index cfa423e69c..a2e9080846 100644
--- a/files/fr/web/html/microformats/index.md
+++ b/files/fr/web/html/microformats/index.md
@@ -12,139 +12,105 @@ tags:
   - Search
 translation_of: Web/HTML/microformats
 ---
-<p>Les <a href="https://microformats.org/"><dfn>microformats</dfn></a> (parfois abrégés <strong>μF</strong>) sont des normes utilisées pour intégrer la sémantique et les données structurées dans le HTML, et fournir une API à utiliser par les moteurs de recherche, les agrégateurs et autres outils. Ces modèles minimaux de HTML sont utilisés pour marquer des entités allant d'informations fondamentales à des informations spécifiques à un domaine, telles que des personnes, des organisations, des événements et des lieux. Les microformats utilisent des vocabulaires de soutien pour décrire les objets et des paires nom-valeur pour attribuer des valeurs à leurs propriétés. Les propriétés sont transportées dans des attributs de classe qui peuvent être ajoutés à tout élément HTML, tandis que les valeurs des données réutilisent le contenu des éléments HTML et les attributs sémantiques. Microformats2 est une mise à jour de microformats qui offre un moyen plus simple d'annoter la syntaxe structurée et les vocabulaires HTML que les approches précédentes utilisant RDFa et microdata qui nécessitent l'apprentissage de nouveaux attributs.</p>
+Les [_microformats_](https://microformats.org/) (parfois abrégés **μF**) sont des normes utilisées pour intégrer la sémantique et les données structurées dans le HTML, et fournir une API à utiliser par les moteurs de recherche, les agrégateurs et autres outils. Ces modèles minimaux de HTML sont utilisés pour marquer des entités allant d'informations fondamentales à des informations spécifiques à un domaine, telles que des personnes, des organisations, des événements et des lieux. Les microformats utilisent des vocabulaires de soutien pour décrire les objets et des paires nom-valeur pour attribuer des valeurs à leurs propriétés. Les propriétés sont transportées dans des attributs de classe qui peuvent être ajoutés à tout élément HTML, tandis que les valeurs des données réutilisent le contenu des éléments HTML et les attributs sémantiques. Microformats2 est une mise à jour de microformats qui offre un moyen plus simple d'annoter la syntaxe structurée et les vocabulaires HTML que les approches précédentes utilisant RDFa et microdata qui nécessitent l'apprentissage de nouveaux attributs.
 
-<p>Les microformats sont pris en charge par tous les principaux moteurs de recherche. Les moteurs de recherche bénéficient grandement d'un accès direct à ces données structurées, car elles leur permettent de comprendre les informations contenues dans les pages Web et de fournir des résultats plus pertinents aux utilisateurs. En plus d'être lisible par les machines, leur format est conçu pour être facilement lu par les humains.</p>
+Les microformats sont pris en charge par tous les principaux moteurs de recherche. Les moteurs de recherche bénéficient grandement d'un accès direct à ces données structurées, car elles leur permettent de comprendre les informations contenues dans les pages Web et de fournir des résultats plus pertinents aux utilisateurs. En plus d'être lisible par les machines, leur format est conçu pour être facilement lu par les humains.
 
-<ul>
-	<li>Pour créer un objet microformats, les noms de classe h-* sont utilisés dans l'attribut class.</li>
-	<li>Pour ajouter une propriété à un objet, les noms de classe p-*, u-*, dt-*, e-* sont utilisés sur un des descendants de l'objet.</li>
-</ul>
+- Pour créer un objet microformats, les noms de classe h-\* sont utilisés dans l'attribut class.
+- Pour ajouter une propriété à un objet, les noms de classe p-\*, u-\*, dt-\*, e-\* sont utilisés sur un des descendants de l'objet.
 
+Il existe [différentes bibliothèques d'analyse pour la plupart des langages de programmation](http://microformats.org/wiki/microformats2#Parsers) qui permettent d'analyser les données microformats2.
 
-<p>Il existe <a href="http://microformats.org/wiki/microformats2#Parsers">différentes bibliothèques d'analyse pour la plupart des langages de programmation</a> qui permettent d'analyser les données microformats2.</p>
+## Comment fonctionnent les microformats
 
-<h2 id="How_Microformats_Work">Comment fonctionnent les microformats</h2>
+Un auteur d'une page web peut ajouter des microformats via le contenu HTML. Ainsi, si un auteur veut s'identifier via un élément, il peut utiliser une classe [h-card](http://microformats.org/wiki/h-card) :
 
-<p>Un auteur d'une page web peut ajouter des microformats via le contenu HTML. Ainsi, si un auteur veut s'identifier via un élément, il peut utiliser une classe <a href="http://microformats.org/wiki/h-card">h-card</a> :</p>
+### Exemple HTML
 
-<h3 id="HTML_Example">Exemple HTML</h3>
+```html
+<a class="h-card" href="http://alice.example.com">Alice Blogger</a>
+```
 
-<pre class="brush: html">&lt;a class="h-card" href="http://alice.example.com"&gt;Alice Blogger&lt;/a&gt;</pre>
+Lorsqu'un parseur de microformat détectera cette donnée, il saura que cette page contient une « carte » qui décrit une personne ou une organisation nommée `Alice Blogger` et dont l'URL est `http://alice.example.com/`. Le parseur rend ensuite cette donnée accessible via des API qui pourront être utilisées par des applications.
 
-<p>Lorsqu'un parseur de microformat détectera cette donnée, il saura que cette page contient une « carte » qui décrit une personne ou une organisation nommée <code>Alice Blogger</code> et dont l'URL est <code>http://alice.example.com/</code>. Le parseur rend ensuite cette donnée accessible via des API qui pourront être utilisées par des applications.</p>
+Comme dans cet exemple, certains modèles de balisage ne nécessitent qu'un seul nom de classe racine de microformat, que les analyseurs syntaxiques utilisent pour trouver quelques propriétés génériques telles que `name`, `url` et `photo`.
 
-<p>Comme dans cet exemple, certains modèles de balisage ne nécessitent qu'un seul nom de classe racine de microformat, que les analyseurs syntaxiques utilisent pour trouver quelques propriétés génériques telles que <code>name</code>, <code>url</code> et <code>photo</code>.</p>
-</div>
+## Préfixes et microformats
 
-<h2 id="Microformats_Prefixes">Préfixes et microformats</h2>
-
-<p>Tous les microformats se composent d'une racine et d'un ensemble de propriétés. Les propriétés sont optionnelles et peuvent avoir plusieurs valeurs (si une application a besoin d'une seule valeur, elle pourra utiliser la première valeur d'une propriété). Les données hiérarchisées sont représentées avec des microformats imbriqués.</p>
-
-<p>Tous les noms de classe des microformats utilisent des préfixes. La syntaxe des préfixes <strong>est indépendante de celle des vocabulaires</strong> (développées séparément).</p>
-
-<ul>
- <li><strong>"h-*" pour les racines</strong> (ex. "h-card", "h-entry", "h-feed"…). Ces racines indiquent un type ciblant un vocabulaire de propriétés donné. Ainsi :
-
-  <ul>
-   <li><a href="http://microformats.org/wiki/h-card">h-card</a> décrit une personne ou une organisation</li>
-   <li><a href="http://microformats.org/wiki/h-entry">h-entry</a> décrit un contenu en ligne épisodique ou daté (tel qu'un billet de blog)</li>
-   <li><a href="http://microformats.org/wiki/h-feed">h-feed</a> décrit un flux (médias, billets, etc)</li>
-   <li>D'autres exemples sont décrits <a href="http://microformats.org/wiki/microformats2#v2_vocabularies">sur le wiki microformats2.</a></li>
-  </ul>
- </li>
- <li><strong>"p-*" pour les propriétés textuelles</strong> (ex. "p-name", "p-summary")
-  <ul>
-   <li>Un contenu texte. Pour certains éléments HTML, certains attributs spécifiques seront utilisés (ex. <a href="/fr/docs/Web/HTML/Element/Img#attr-alt"><code>alt</code></a> pour <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/abbr#attr-title"><code>title</code></a> pour <a href="/fr/docs/Web/HTML/Element/abbr"><code>&lt;abbr&gt;</code></a>).</li>
-  </ul>
- </li>
- <li><strong>"u-*" pour les propriétés qui sont des URL</strong> (ex. "u-url", "u-photo", "u-logo")
-  <ul>
-   <li>Analyse spéciale : attributs d'éléments <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>/<a href="/fr/docs/Web/HTML/Element/a#attr-href"><code>href</code></a>, <a href="/fr/docs/Web/HTML/Element/Img"><code>&lt;img&gt;</code></a>/<a href="/fr/docs/Web/HTML/Element/Img#attr-src"><code>src</code></a>, <a href="/fr/docs/Web/HTML/Element/object"><code>&lt;object&gt;</code></a>/<a href="/fr/docs/Web/HTML/Element/object#attr-data"><code>data</code></a> etc. attributs sur le contenu des éléments.</li>
-  </ul>
- </li>
- <li><strong>"dt-*" pour les propriétés temporelles (date/heure)</strong> (ex. "dt-start", "dt-end", "dt-bday")
-  <ul>
-   <li>Analyse syntaxique spéciale : attribut <a href="/fr/docs/Web/HTML/Element/time#attr-datetime"><code>datetime</code></a> de l'élément <a href="/fr/docs/Web/HTML/Element/time"><code>&lt;time&gt;</code></a>, <a href="https://microformats.org/wiki/value-class-pattern" title="value-class-pattern">value-class-pattern</a> et analyse séparée de la valeur date-heure pour plus de lisibilité.</li>
-  </ul>
- </li>
- <li><strong>"e-*" pour les arborescences</strong> où l'intégralité de la hiérarchie de l'élément est la valeur à récupérer (ex. "e-content"). Le préfixe "e-" peut être retenu en anglais comme "<em><strong>e</strong>lement tree</em>", "<em><strong>e</strong>mbedded markup</em>" ou "<em><strong>e</strong>ncapsulated markup</em>".</li>
-</ul>
-
-<h2 id="Some_microformats_examples">Exemples de microformats</h2>
-
-<h3 id="h-card">h-card</h3>
-
-<p>Le microformat <a href="http://microformats.org/wiki/h-card">h-card</a> représente une personne ou une organisation.</p>
-
-<p>La valeur de chaque propriété est définie en HTML via l'attribut <code>class</code>.</p>
-
-<h4 id="Example_h-card">Exemple de h-card</h4>
-
-<pre class="brush: html">&lt;p class="h-card"&gt;
-  &lt;img class="u-photo" src="http://example.org/photo.png" alt="" /&gt;
-  &lt;a class="p-name u-url" href="http://example.org"&gt;Joe Bloggs&lt;/a&gt;
-  &lt;a class="u-email" href="mailto:joebloggs@example.com"&gt;joebloggs@example.com&lt;/a&gt;,
-  &lt;span class="p-street-address"&gt;17 Austerstræti&lt;/span&gt;
-  &lt;span class="p-locality"&gt;Reykjavík&lt;/span&gt;
-  &lt;span class="p-country-name"&gt;Iceland&lt;/span&gt;
-&lt;/p&gt;</pre>
+Tous les microformats se composent d'une racine et d'un ensemble de propriétés. Les propriétés sont optionnelles et peuvent avoir plusieurs valeurs (si une application a besoin d'une seule valeur, elle pourra utiliser la première valeur d'une propriété). Les données hiérarchisées sont représentées avec des microformats imbriqués.
 
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th>Propriété</th>
-      <th>Description</th>
-    </tr>
-    <tr>
-      <td><strong><code>p-name</code></strong></td>
-      <td>Le nom complet et formaté de la personne ou de l'organisation.</td>
-    </tr>
-    <tr>
-      <td><strong><code>u-email</code></strong></td>
-      <td>L'adresse électronique.</td>
-    </tr>
-    <tr>
-      <td><strong><code>u-photo</code></strong></td>
-      <td>Une photo pour la personne ou l'organisation.</td>
-    </tr>
-    <tr>
-      <td><strong><code>u-url</code></strong></td>
-      <td>La page d'accueil ou une URL représentant la personne ou l'organisation.</td>
-    </tr>
-    <tr>
-      <td><strong><code>u-uid</code></strong></td>
-      <td>Un identifiant universel unique (de préférence une URL canonique).</td>
-    </tr>
-    <tr>
-      <td><strong><code>p-street-address</code></strong></td>
-      <td>L'adresse composée du numéro et du nom de la rue.</td>
-    </tr>
-    <tr>
-      <td><strong><code>p-locality</code></strong></td>
-      <td>La ville ou le village de résidence.</td>
-    </tr>
-    <tr>
-      <td><strong><code>p-country-name</code></strong></td>
-      <td>Le nom du pays de résidence.</td>
-    </tr>
-  </tbody>
-</table>
+Tous les noms de classe des microformats utilisent des préfixes. La syntaxe des préfixes **est indépendante de celle des vocabulaires** (développées séparément).
+
+- **"h-\*" pour les racines** (ex. "h-card", "h-entry", "h-feed"…). Ces racines indiquent un type ciblant un vocabulaire de propriétés donné. Ainsi :
+
+  - [h-card](http://microformats.org/wiki/h-card) décrit une personne ou une organisation
+  - [h-entry](http://microformats.org/wiki/h-entry) décrit un contenu en ligne épisodique ou daté (tel qu'un billet de blog)
+  - [h-feed](http://microformats.org/wiki/h-feed) décrit un flux (médias, billets, etc)
+  - D'autres exemples sont décrits [sur le wiki microformats2.](http://microformats.org/wiki/microformats2#v2_vocabularies)
+
+- **"p-\*" pour les propriétés textuelles** (ex. "p-name", "p-summary")
+
+  - Un contenu texte. Pour certains éléments HTML, certains attributs spécifiques seront utilisés (ex. [`alt`](/fr/docs/Web/HTML/Element/Img#attr-alt) pour [`<img>`](/fr/docs/Web/HTML/Element/Img), [`title`](/fr/docs/Web/HTML/Element/abbr#attr-title) pour [`<abbr>`](/fr/docs/Web/HTML/Element/abbr)).
+
+- **"u-\*" pour les propriétés qui sont des URL** (ex. "u-url", "u-photo", "u-logo")
+
+  - Analyse spéciale : attributs d'éléments [`<a>`](/fr/docs/Web/HTML/Element/a)/[`href`](/fr/docs/Web/HTML/Element/a#attr-href), [`<img>`](/fr/docs/Web/HTML/Element/Img)/[`src`](/fr/docs/Web/HTML/Element/Img#attr-src), [`<object>`](/fr/docs/Web/HTML/Element/object)/[`data`](/fr/docs/Web/HTML/Element/object#attr-data) etc. attributs sur le contenu des éléments.
+
+- **"dt-\*" pour les propriétés temporelles (date/heure)** (ex. "dt-start", "dt-end", "dt-bday")
 
-<h4 id="Nested_h-card_example">Exemple de h-card imbriqué</h4>
+  - Analyse syntaxique spéciale : attribut [`datetime`](/fr/docs/Web/HTML/Element/time#attr-datetime) de l'élément [`<time>`](/fr/docs/Web/HTML/Element/time), [value-class-pattern](https://microformats.org/wiki/value-class-pattern "value-class-pattern") et analyse séparée de la valeur date-heure pour plus de lisibilité.
 
-<pre class="brush: html">&lt;div class="h-card"&gt;
-  &lt;a class="p-name u-url"
+- **"e-\*" pour les arborescences** où l'intégralité de la hiérarchie de l'élément est la valeur à récupérer (ex. "e-content"). Le préfixe "e-" peut être retenu en anglais comme "**\*e**lement tree\*", "**\*e**mbedded markup\*" ou "**\*e**ncapsulated markup\*".
+
+## Exemples de microformats
+
+### h-card
+
+Le microformat [h-card](http://microformats.org/wiki/h-card) représente une personne ou une organisation.
+
+La valeur de chaque propriété est définie en HTML via l'attribut `class`.
+
+#### Exemple de h-card
+
+```html
+<p class="h-card">
+  <img class="u-photo" src="http://example.org/photo.png" alt="" />
+  <a class="p-name u-url" href="http://example.org">Joe Bloggs</a>
+  <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>,
+  <span class="p-street-address">17 Austerstræti</span>
+  <span class="p-locality">Reykjavík</span>
+  <span class="p-country-name">Iceland</span>
+</p>
+```
+
+| Propriété              | Description                                                              |
+| ---------------------- | ------------------------------------------------------------------------ |
+| **`p-name`**           | Le nom complet et formaté de la personne ou de l'organisation.           |
+| **`u-email`**          | L'adresse électronique.                                                  |
+| **`u-photo`**          | Une photo pour la personne ou l'organisation.                            |
+| **`u-url`**            | La page d'accueil ou une URL représentant la personne ou l'organisation. |
+| **`u-uid`**            | Un identifiant universel unique (de préférence une URL canonique).       |
+| **`p-street-address`** | L'adresse composée du numéro et du nom de la rue.                        |
+| **`p-locality`**       | La ville ou le village de résidence.                                     |
+| **`p-country-name`**   | Le nom du pays de résidence.                                             |
+
+#### Exemple de h-card imbriqué
+
+```html
+<div class="h-card">
+  <a class="p-name u-url"
    href="http://blog.lizardwrangler.com/"
-  &gt;Mitchell Baker&lt;/a&gt;
-  (&lt;a class="p-org h-card"
+  >Mitchell Baker</a>
+  (<a class="p-org h-card"
     href="http://mozilla.org/"
-   &gt;Mozilla Foundation&lt;/a&gt;)
-&lt;/div&gt;</pre>
+   >Mozilla Foundation</a>)
+</div>
+```
 
-<p>Cela fournira le JSON suivant :</p>
+Cela fournira le JSON suivant :
 
-<pre class="brush: json">{
+```json
+{
   "items": [{
   "type": ["h-card"],
   "properties": {
@@ -160,75 +126,58 @@ translation_of: Web/HTML/microformats
     }]
   }
   }]
-}</pre>
-
-<div class="note">
-  <p><strong>Note :</strong> Le h-card imbriqué récupère des valeurs implicites pour <code>name</code> et <code>url</code>.</p>
+}
+```
+
+> **Note :** Le h-card imbriqué récupère des valeurs implicites pour `name` et `url`.
+
+### h-entry
+
+Le microformat [h-entry](http://microformats.org/wiki/h-entry) représente un contenu épisodique ou daté présent sur le Web. Il est généralement utilisé pour du contenu qui est présenté dans un flux (ex. les billets de blog).
+
+```html
+<article class="h-entry">
+  <h1 class="p-name">Microformats are amazing</h1>
+  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
+   on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time></p>
+
+  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
+
+  <div class="e-content">
+  <p>Blah blah blah</p>
+  </div>
+</article>
+```
+
+#### Propriétés
+
+| Propriété          | Description                                                      |
+| ------------------ | ---------------------------------------------------------------- |
+| **`p-name`**       | Nom ou titre pour l'entrée.                                      |
+| **`p-author`**     | L'auteur de l'entrée (éventuellement imbriquée avec une h-card). |
+| **`dt-published`** | La date de publication de l'entrée.                              |
+| **`p-summary`**    | Un résumé de l'entrée.                                           |
+| **`e-content`**    | Le contenu complet de l'entrée.                                  |
+
+#### Exemple de microformat h-entry analysé
+
+```html
+<div class="h-entry">
+  <p><span class="p-author h-card">
+    <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" ><img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/></a>
+    <a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a></span>
+     Replied to <a class="u-in-reply-to" href="https://developer.mozilla.org/en-US/docs/Web/HTML/microformats">a post on
+   <strong>developer.mozilla.org</strong> </a>:
+  </p>
+   <p class="p-name e-content">Hey thanks for making this microformats resource</p>
+   <p> <a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106">Greg McVerry</a>
+  published this <a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"><time class="dt-published"
+   datetime="2019-05-31T14:19:09+0000">31 May 2019</time></a></p>
 </div>
+```
 
-<h3 id="h-entry">h-entry</h3>
-
-<p>Le microformat <a href="http://microformats.org/wiki/h-entry">h-entry</a> représente un contenu épisodique ou daté présent sur le Web. Il est généralement utilisé pour du contenu qui est présenté dans un flux (ex. les billets de blog).</p>
-
-<pre class="brush: html">&lt;article class="h-entry"&gt;
-  &lt;h1 class="p-name"&gt;Microformats are amazing&lt;/h1&gt;
-  &lt;p&gt;Published by &lt;a class="p-author h-card" href="http://example.com"&gt;W. Developer&lt;/a&gt;
-   on &lt;time class="dt-published" datetime="2013-06-13 12:00:00"&gt;13&lt;sup&gt;th&lt;/sup&gt; June 2013&lt;/time&gt;&lt;/p&gt;
-
-  &lt;p class="p-summary"&gt;In which I extoll the virtues of using microformats.&lt;/p&gt;
-
-  &lt;div class="e-content"&gt;
-  &lt;p&gt;Blah blah blah&lt;/p&gt;
-  &lt;/div&gt;
-&lt;/article&gt;</pre>
-
-<h4 id="Properties">Propriétés</h4>
-
-<table class="standard-table">
-  <tbody>
-    <tr>
-      <th>Propriété</th>
-      <th>Description</th>
-    </tr>
-    <tr>
-      <td><strong><code>p-name</code></strong></td>
-      <td>Nom ou titre pour l'entrée.</td>
-    </tr>
-    <tr>
-      <td><strong><code>p-author</code></strong></td>
-      <td>L'auteur de l'entrée (éventuellement imbriquée avec une h-card).</td>
-    </tr>
-    <tr>
-      <td><strong><code>dt-published</code></strong></td>
-      <td>La date de publication de l'entrée.</td>
-    </tr>
-    <tr>
-      <td><strong><code>p-summary</code></strong></td>
-      <td>Un résumé de l'entrée.</td>
-    </tr>
-    <tr>
-      <td><strong><code>e-content</code></strong></td>
-      <td>Le contenu complet de l'entrée.</td>
-    </tr>
-  </tbody>
-</table>
-
-<h4 id="Parsed_reply_h-entry_example">Exemple de microformat h-entry analysé</h4>
-
-<pre class="brush: html">&lt;div class="h-entry"&gt;
-  &lt;p&gt;&lt;span class="p-author h-card"&gt;
-    &lt;a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106" &gt;&lt;img class="u-photo" src="https://quickthoughts.jgregorymcverry.com/file/2d6c9cfed7ac8e849f492b5bc7e6a630/thumb.jpg"/&gt;&lt;/a&gt;
-    &lt;a class="p-name u-url" href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106"&gt;Greg McVerry&lt;/a&gt;&lt;/span&gt;
-     Replied to &lt;a class="u-in-reply-to" href="https://developer.mozilla.org/en-US/docs/Web/HTML/microformats"&gt;a post on
-   &lt;strong&gt;developer.mozilla.org&lt;/strong&gt; &lt;/a&gt;:
-  &lt;/p&gt;
-   &lt;p class="p-name e-content"&gt;Hey thanks for making this microformats resource&lt;/p&gt;
-   &lt;p&gt; &lt;a href="https://quickthoughts.jgregorymcverry.com/profile/jgmac1106"&gt;Greg McVerry&lt;/a&gt;
-  published this &lt;a class="u-url url" href="https://quickthoughts.jgregorymcverry.com/2019/05/31/hey-thanks-for-making-this-microformats-resource"&gt;&lt;time class="dt-published"
-   datetime="2019-05-31T14:19:09+0000"&gt;31 May 2019&lt;/time&gt;&lt;/a&gt;&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: json">{
+```json
+{
   "items": [
     {
       "type": [ "h-entry" ],
@@ -260,128 +209,103 @@ translation_of: Web/HTML/microformats
       "lang": "en"
     }
   ]
-}</pre>
-
-<h3 id="h-feed">h-feed</h3>
-
-<p>Le microformat <a href="http://microformats.org/wiki/h-feed">h-feed</a> est un flux de billets <a href="http://microformats.org/wiki/h-entry" title="h-entry">h-entry</a>.</p>
+}
+```
+
+### h-feed
+
+Le microformat [h-feed](http://microformats.org/wiki/h-feed) est un flux de billets [h-entry](http://microformats.org/wiki/h-entry "h-entry").
+
+#### Example h-feed
+
+```html
+<div class="h-feed">
+  <h1 class="p-name">Microformats Blogs</h1>
+  <article class="h-entry">
+  <h2 class="p-name">Microformats are amazing</h2>
+  <p>Published by <a class="p-author h-card" href="http://example.com">W. Developer</a>
+     on <time class="dt-published" datetime="2013-06-13 12:00:00">13<sup>th</sup> June 2013</time>
+  </p>
+  <p class="p-summary">In which I extoll the virtues of using microformats.</p>
+  <div class="e-content"> <p>Blah blah blah</p> </div>
+  </article>
+</div>
+```
 
-<h4 id="Example_h-feed">Example h-feed</h4>
+#### Propriétés
 
-<pre class="brush: html">&lt;div class="h-feed"&gt;
-  &lt;h1 class="p-name"&gt;Microformats Blogs&lt;/h1&gt;
-  &lt;article class="h-entry"&gt;
-  &lt;h2 class="p-name"&gt;Microformats are amazing&lt;/h2&gt;
-  &lt;p&gt;Published by &lt;a class="p-author h-card" href="http://example.com"&gt;W. Developer&lt;/a&gt;
-     on &lt;time class="dt-published" datetime="2013-06-13 12:00:00"&gt;13&lt;sup&gt;th&lt;/sup&gt; June 2013&lt;/time&gt;
-  &lt;/p&gt;
-  &lt;p class="p-summary"&gt;In which I extoll the virtues of using microformats.&lt;/p&gt;
-  &lt;div class="e-content"&gt; &lt;p&gt;Blah blah blah&lt;/p&gt; &lt;/div&gt;
-  &lt;/article&gt;
-&lt;/div&gt;</pre>
+| Propriété      | Description                                            |
+| -------------- | ------------------------------------------------------ |
+| **`p-name`**   | Nom du flux.                                           |
+| **`p-author`** | Auteur du flux, éventuellement intégré via une h-card. |
 
-<h4 id="Properties_2">Propriétés</h4>
+#### Enfants
 
 <table class="standard-table">
   <tbody>
     <tr>
-      <th>Propriété</th>
-      <th>Description</th>
+      <td><strong>h-entry</strong></td>
     </tr>
     <tr>
-      <td><strong><code>p-name</code></strong></td>
-      <td>Nom du flux.</td>
-    </tr>
-    <tr>
-      <td><strong><code>p-author</code></strong></td>
-      <td>Auteur du flux, éventuellement intégré via une h-card.</td>
+      <td>Des objets représentants des éléments du flux.</td>
     </tr>
   </tbody>
 </table>
 
-<h4 id="Children">Enfants</h4>
+### h-event
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <td><strong>h-entry</strong></td>
-  </tr>
-  <tr>
-   <td>Des objets représentants des éléments du flux.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="h-event">h-event</h3>
-
-<p>Le microformat <code>h-event</code> permet de représenter des évènements.</p>
-
-<pre class="brush: html">&lt;div class="h-event"&gt;
-  &lt;h1 class="p-name"&gt;Microformats Meetup&lt;/h1&gt;
-  &lt;p&gt;From
-  &lt;time class="dt-start" datetime="2013-06-30 12:00"&gt;30&lt;sup&gt;th&lt;/sup&gt; June 2013, 12:00&lt;/time&gt;
-  to &lt;time class="dt-end" datetime="2013-06-30 18:00"&gt;18:00&lt;/time&gt;
-  at &lt;span class="p-location"&gt;Some bar in SF&lt;/span&gt;&lt;/p&gt;
-  &lt;p class="p-summary"&gt;Get together and discuss all things microformats-related.&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<h4 id="Properties_3">Propriétés</h4>
+Le microformat `h-event` permet de représenter des évènements.
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th>Propriété</th>
-   <th>Description</th>
-  </tr>
-  <tr>
-   <td><strong><code>p-name</code></strong></td>
-   <td>Nom ou titre pour l'évènement.</td>
-  </tr>
-  <tr>
-   <td><strong><code>p-summary</code></strong></td>
-   <td>Résumé de l'évènement.</td>
-  </tr>
-  <tr>
-   <td><strong><code>dt-start</code></strong></td>
-   <td>Date/heure de début de l'évènement</td>
-  </tr>
-  <tr>
-   <td><strong><code>dt-end</code></strong></td>
-   <td>Date/heure de fin de l'évènement</td>
-  </tr>
-  <tr>
-   <td><strong><code>p-location</code></strong></td>
-   <td>Emplacement / lieu de l'évènement, éventuellement indiqué par une h-card.</td>
-  </tr>
- </tbody>
-</table>
+```html
+<div class="h-event">
+  <h1 class="p-name">Microformats Meetup</h1>
+  <p>From
+  <time class="dt-start" datetime="2013-06-30 12:00">30<sup>th</sup> June 2013, 12:00</time>
+  to <time class="dt-end" datetime="2013-06-30 18:00">18:00</time>
+  at <span class="p-location">Some bar in SF</span></p>
+  <p class="p-summary">Get together and discuss all things microformats-related.</p>
+</div>
+```
+
+#### Propriétés
+
+| Propriété        | Description                                                               |
+| ---------------- | ------------------------------------------------------------------------- |
+| **`p-name`**     | Nom ou titre pour l'évènement.                                            |
+| **`p-summary`**  | Résumé de l'évènement.                                                    |
+| **`dt-start`**   | Date/heure de début de l'évènement                                        |
+| **`dt-end`**     | Date/heure de fin de l'évènement                                          |
+| **`p-location`** | Emplacement / lieu de l'évènement, éventuellement indiqué par une h-card. |
+
+#### Exemple d'analyse
+
+```html
+<div class="h-event">
+  <h2 class="p-name">IndieWeb Summit</h2>
+  <time class="dt-start" datetime="2019-06-29T09:00:00-07:00">June 29, 2019 at 9:00am  (-0700)</time><br>through <time class="dt-end" datetime="2019-06-30T18:00:00-07:00">June 30, 2019 at 6:00pm (-0700)</time><br>
+  <div class="p-location h-card">
+    <div>
+    <span class="p-name">Mozilla</span>
+     </div>
+     <div>
+      <span class="p-street-address">1120 NW Couch St</span>,
+      <span class="p-locality">Portland</span>,
+      <span class="p-region">Oregon</span>,
+      <span class="p-country">US</span>
+     </div>
+       <data class="p-latitude" value="45.52345"></data>
+      <data class="p-longitude" value="-122.682677"></data>
+  </div>
+    <div class="e-content">Come join us
+     </div>
+    <div>
+     <span class="p-author h-card"><a class="u-url p-name" href="https://aaronparecki.com">Aaron Parecki</a></span> Published this <a href="https://aaronparecki.com/2019/06/29/1/" class="u-url">event </a>on <time class="dt published" datetime="2019-05-25T18:00:00-07:00">May 5th, 2019</time>
+    </div>
+</div>
+```
 
-<h4 id="Parsed_h-event_Example">Exemple d'analyse</h4>
-
-<pre class="brush: html">&lt;div class="h-event"&gt;
-  &lt;h2 class="p-name"&gt;IndieWeb Summit&lt;/h2&gt;
-  &lt;time class="dt-start" datetime="2019-06-29T09:00:00-07:00"&gt;June 29, 2019 at 9:00am  (-0700)&lt;/time&gt;&lt;br&gt;through &lt;time class="dt-end" datetime="2019-06-30T18:00:00-07:00"&gt;June 30, 2019 at 6:00pm (-0700)&lt;/time&gt;&lt;br&gt;
-  &lt;div class="p-location h-card"&gt;
-    &lt;div&gt;
-    &lt;span class="p-name"&gt;Mozilla&lt;/span&gt;
-     &lt;/div&gt;
-     &lt;div&gt;
-      &lt;span class="p-street-address"&gt;1120 NW Couch St&lt;/span&gt;,
-      &lt;span class="p-locality"&gt;Portland&lt;/span&gt;,
-      &lt;span class="p-region"&gt;Oregon&lt;/span&gt;,
-      &lt;span class="p-country"&gt;US&lt;/span&gt;
-     &lt;/div&gt;
-       &lt;data class="p-latitude" value="45.52345"&gt;&lt;/data&gt;
-      &lt;data class="p-longitude" value="-122.682677"&gt;&lt;/data&gt;
-  &lt;/div&gt;
-    &lt;div class="e-content"&gt;Come join us
-     &lt;/div&gt;
-    &lt;div&gt;
-     &lt;span class="p-author h-card"&gt;&lt;a class="u-url p-name" href="https://aaronparecki.com"&gt;Aaron Parecki&lt;/a&gt;&lt;/span&gt; Published this &lt;a href="https://aaronparecki.com/2019/06/29/1/" class="u-url"&gt;event &lt;/a&gt;on &lt;time class="dt published" datetime="2019-05-25T18:00:00-07:00"&gt;May 5th, 2019&lt;/time&gt;
-    &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<pre class="brush: json">{
+```json
+{
   "items": [
     {
       "type": [ "h-event" ],
@@ -429,18 +353,17 @@ translation_of: Web/HTML/microformats
       "lang": "en"
     }
   ]
-}</pre>
+}
+```
 
-<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
 
-<p>Pris en charge dans tous les navigateurs prenant en charge l'attribut class et son API DOM.</p>
+Pris en charge dans tous les navigateurs prenant en charge l'attribut class et son API DOM.
 
-<h2 id="See_also">Voir aussi</h2>
+## Voir aussi
 
-<ul>
-	<li><a href="/fr/docs/Web/HTML/Global_attributes/class">attribut <code>class</code></a></li>
-  <li><a href="https://fr.wikipedia.org/wiki/Microformat">Microformat</a> sur Wikipedia</li>
-  <li><a href="http://microformats.org/">Le site officiel des microformats</a></li>
-  <li><a href="http://microformats.org/wiki/search_engines">Prise en charge des différents moteurs de recherche</a> sur le site microformats</li>
-  <li><a href="https://indiewebcamp.com/microformats">Les microformats sur IndieWebCamp</a></li>
-</ul>
+- [attribut `class`](/fr/docs/Web/HTML/Global_attributes/class)
+- [Microformat](https://fr.wikipedia.org/wiki/Microformat) sur Wikipedia
+- [Le site officiel des microformats](http://microformats.org/)
+- [Prise en charge des différents moteurs de recherche](http://microformats.org/wiki/search_engines) sur le site microformats
+- [Les microformats sur IndieWebCamp](https://indiewebcamp.com/microformats)
diff --git a/files/fr/web/html/quirks_mode_and_standards_mode/index.md b/files/fr/web/html/quirks_mode_and_standards_mode/index.md
index 048f15b862..1cf45b19f8 100644
--- a/files/fr/web/html/quirks_mode_and_standards_mode/index.md
+++ b/files/fr/web/html/quirks_mode_and_standards_mode/index.md
@@ -10,42 +10,44 @@ tags:
   - XHTML
 translation_of: Web/HTML/Quirks_Mode_and_Standards_Mode
 ---
-<p>{{HTMLRef}}</p>
+{{HTMLRef}}
 
-<p>Par le passé, les pages web étaient souvent écrites sous deux versions : une destinée à Netscape Navigator et l'autre à Microsoft Internet Explorer. Lorsque les standards du Web sont apparus avec le W3C, les navigateurs ne pouvaient pas simplement commencer à les utiliser car leur mise en place rendrait inutilisable la plupart des sites web existant. Les navigateurs ont alors introduit deux modes afin de traiter les sites respectants les standards des autres sites historiques.</p>
+Par le passé, les pages web étaient souvent écrites sous deux versions : une destinée à Netscape Navigator et l'autre à Microsoft Internet Explorer. Lorsque les standards du Web sont apparus avec le W3C, les navigateurs ne pouvaient pas simplement commencer à les utiliser car leur mise en place rendrait inutilisable la plupart des sites web existant. Les navigateurs ont alors introduit deux modes afin de traiter les sites respectants les standards des autres sites historiques.
 
-<p>Il existe aujourd'hui trois modes utilisés par les moteurs de rendu des navigateurs web : le mode <i>quirks</i>, le mode quasi-standard et le mode standard total. En <strong>mode <i>quirks</i></strong>, le moteur de mise en page émule le comportement non-standard de Navigator 4 et d'Internet Explorer 5. Ce mode permet de prendre en charge les sites web rédigés avant l'adoption généralisée des standards web. En <strong>mode standard total</strong>, le comportement du navigateur est entièrement (aux bugs près) celui décrit par les spécifications HTML et CSS. En <strong>mode quasi-standard</strong>, très peu de déviations sont implémentées.</p>
+Il existe aujourd'hui trois modes utilisés par les moteurs de rendu des navigateurs web : le mode _quirks_, le mode quasi-standard et le mode standard total. En **mode _quirks_**, le moteur de mise en page émule le comportement non-standard de Navigator 4 et d'Internet Explorer 5. Ce mode permet de prendre en charge les sites web rédigés avant l'adoption généralisée des standards web. En **mode standard total**, le comportement du navigateur est entièrement (aux bugs près) celui décrit par les spécifications HTML et CSS. En **mode quasi-standard**, très peu de déviations sont implémentées.
 
-<h2 id="How_does_Mozilla_determine_which_mode_to_use">Comment les navigateurs déterminent le mode à utiliser ?</h2>
+## Comment les navigateurs déterminent le mode à utiliser ?
 
-<p>Pour les documents <a href="/fr/docs/Web/HTML">HTML</a>, les navigateurs utilisent le <code>DOCTYPE</code> présent au début du document afin de déterminer si celui-ci doit être géré avec le mode <i>quirks</i> ou avec l'un des modes standards. Si vous souhaitez qu'une page utilise le mode standard total, son DOCTYPE devra correspondre à celui utilisé dans cet exemple :</p>
+Pour les documents [HTML](/fr/docs/Web/HTML), les navigateurs utilisent le `DOCTYPE` présent au début du document afin de déterminer si celui-ci doit être géré avec le mode _quirks_ ou avec l'un des modes standards. Si vous souhaitez qu'une page utilise le mode standard total, son DOCTYPE devra correspondre à celui utilisé dans cet exemple :
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html lang="fr"&gt;
-  &lt;head&gt;
-    &lt;meta charset=UTF-8&gt;
-    &lt;title&gt;Bonjour tout le monde !&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+```html
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset=UTF-8>
+    <title>Bonjour tout le monde !</title>
+  </head>
+  <body>
+  </body>
+</html>
+```
 
-<p>Le DOCTYPE illustré dans cet exemple, <code>&lt;!DOCTYPE html&gt;</code>, est le plus simple possible et correspond à la recommandation HTML5. Les versions précédentes des standards HTML recommandaient d'autres variantes. Toutefois, l'ensemble des navigateurs actuels utiliseront le mode standard total avec ce DOCTYPE (y compris IE6). Il n'est pas justifié de choisir un DOCTYPE plus compliqué ; le faire risquerait de déclencher l'utilisation du mode quasi-standard ou du mode <i>quirks</i>.</p>
+Le DOCTYPE illustré dans cet exemple, `<!DOCTYPE html>`, est le plus simple possible et correspond à la recommandation HTML5. Les versions précédentes des standards HTML recommandaient d'autres variantes. Toutefois, l'ensemble des navigateurs actuels utiliseront le mode standard total avec ce DOCTYPE (y compris IE6). Il n'est pas justifié de choisir un DOCTYPE plus compliqué ; le faire risquerait de déclencher l'utilisation du mode quasi-standard ou du mode _quirks_.
 
-<p>Assurez-vous que le DOCTYPE soit présent au tout début du document HTML. Tout ce qui précède le DOCTYPE (un commentaire ou une déclaration XML) déclenchera le mode <i>quirks</i> pour Internet Explorer 9 et les versions antérieures.</p>
+Assurez-vous que le DOCTYPE soit présent au tout début du document HTML. Tout ce qui précède le DOCTYPE (un commentaire ou une déclaration XML) déclenchera le mode _quirks_ pour Internet Explorer 9 et les versions antérieures.
 
-<p>En HTML5, le seul but du DOCTYPE est d'activer le mode standard total. Les anciennes versions du standard HTML donnaient une sémantique plus riche au DOCTYPE mais aucun navigateur n'a utilisé le DOCTYPE pour autre chose que pour choisir entre le mode <i>quirks</i> et l'un des modes standards.</p>
+En HTML5, le seul but du DOCTYPE est d'activer le mode standard total. Les anciennes versions du standard HTML donnaient une sémantique plus riche au DOCTYPE mais aucun navigateur n'a utilisé le DOCTYPE pour autre chose que pour choisir entre le mode _quirks_ et l'un des modes standards.
 
-<p>Vous pouvez également consulter <a href="https://hsivonen.iki.fi/doctype/">cet article avec plus de détails sur la façon dont les navigateurs choisissent entre les différents modes</a>.</p>
+Vous pouvez également consulter [cet article avec plus de détails sur la façon dont les navigateurs choisissent entre les différents modes](https://hsivonen.iki.fi/doctype/).
 
-<h3 id="XHTML">XHTML</h3>
+### XHTML
 
-<p>Si la page est servie comme <a href="/fr/docs/Glossary/XHTML">XHTML</a> avec le type MIME <code>application/xhtml+xml</code> dans l'en-tête HTTP <code>Content-Type</code>, il n'est pas nécessaire d'utiliser de DOCTYPE afin d'activer le mode standard, car de tels documents utiliseront toujours le mode standard total. On notera toutefois que servir les pages avec un type <code>application/xhtml+xml</code> entraînera l'affichage <a href="/fr/docs/Glossary/XHTML#support">d'une boîte de téléchargement</a> d'un fichier au format inconnu sous Internet Explorer 8 car IE9 est la première version d'Internet Explorer à prendre en charge XHTML.</p>
+Si la page est servie comme [XHTML](/fr/docs/Glossary/XHTML) avec le type MIME `application/xhtml+xml` dans l'en-tête HTTP `Content-Type`, il n'est pas nécessaire d'utiliser de DOCTYPE afin d'activer le mode standard, car de tels documents utiliseront toujours le mode standard total. On notera toutefois que servir les pages avec un type `application/xhtml+xml` entraînera l'affichage [d'une boîte de téléchargement](/fr/docs/Glossary/XHTML#support) d'un fichier au format inconnu sous Internet Explorer 8 car IE9 est la première version d'Internet Explorer à prendre en charge XHTML.
 
-<p>Si on sert un contenu semblable à du XHTML mais avec le type MIME <code>text/html</code>, le navigateur l'interprètera comme du HTML et il faudra alors ajouter le DOCTYPE afin d'utiliser un mode standard.</p>
+Si on sert un contenu semblable à du XHTML mais avec le type MIME `text/html`, le navigateur l'interprètera comme du HTML et il faudra alors ajouter le DOCTYPE afin d'utiliser un mode standard.
 
-<h2 id="How_do_I_see_which_mode_is_used">Comment connaître le mode utilisé ?</h2>
+## Comment connaître le mode utilisé ?
 
-<p>Sous Firefox, vous pouvez utiliser le menu contextuel : "Informations sur la page" et le champ "Mode de rendu" de l'onglet Général..</p>
+Sous Firefox, vous pouvez utiliser le menu contextuel : "Informations sur la page" et le champ "Mode de rendu" de l'onglet Général..
 
-<p>Sous Internet Explorer, appuyez sur la touche <em>F12</em> et utilisez le champ <em>Document Mode</em>.</p>
\ No newline at end of file
+Sous Internet Explorer, appuyez sur la touche _F12_ et utilisez le champ _Document Mode_.
diff --git a/files/fr/web/html/reference/index.md b/files/fr/web/html/reference/index.md
index 9ede740ea8..2e4fc5aedc 100644
--- a/files/fr/web/html/reference/index.md
+++ b/files/fr/web/html/reference/index.md
@@ -8,21 +8,19 @@ tags:
   - Web
 translation_of: Web/HTML/Reference
 ---
-<div>{{HTMLSidebar}}</div>
+{{HTMLSidebar}}
 
-<p>Cette référence <a href="/fr/docs/Web/HTML">HTML</a> décrit l'ensemble des <strong>éléments</strong> et des <strong>attributs</strong> qui peuvent être utilisés en HTML, y compris les <strong>attributs universels</strong> qui peuvent s'appliquer sur tous les éléments.</p>
+Cette référence [HTML](/fr/docs/Web/HTML) décrit l'ensemble des **éléments** et des **attributs** qui peuvent être utilisés en HTML, y compris les **attributs universels** qui peuvent s'appliquer sur tous les éléments.
 
-<dl>
-  <dt><a href="/fr/docs/Web/HTML/Element">Référence des éléments HTML</a></dt>
-  <dd>Cette page énumère tous les éléments HTML, regroupés ici selon leurs fonctions.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Attributes">Référence des attributs HTML</a></dt>
-  <dd>Chaque élément HTML peut avoir un ou plusieurs attributs. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Global_attributes">Attributs universels</a></dt>
-  <dd>Les attributs universels peuvent être définis sur tous les éléments HTML. Il est toutefois possible qu'ils n'aient pas d'effet sur certains éléments.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Link_types">Types de liens</a></dt>
-  <dd>En HTML, les différents types de liens indiquent les relations entre deux documents. Ces liens peuvent prendre la forme d'un élément <a href="/fr/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a> ou <a href="/fr/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>.</dd>
-  <dt><a href="/fr/docs/Web/Guide/HTML/Content_categories">Catégories de contenu</a></dt>
-  <dd>Chaque élément HTML appartient à une ou plusieurs catégories de contenu. Ces catégories regroupent des éléments avec des caractéristiques communes.</dd>
-  <dt><a href="/fr/docs/Web/HTML/Date_and_time_formats">Formats des dates et heures en HTML</a></dt>
-  <dd>Certains éléments HTML permettent de manipuler des valeurs temporelles (dates, heures, dates et heures). Cet article décrit le format de représentation de ces valeurs, notamment utilisées pour les éléments <a href="/fr/docs/Web/HTML/Element/Input"><code>&lt;input&gt;</code></a>, <a href="/fr/docs/Web/HTML/Element/ins"><code>&lt;ins&gt;</code></a> et <a href="/fr/docs/Web/HTML/Element/del"><code>&lt;del&gt;</code></a>.</dd>
-</dl>
+- [Référence des éléments HTML](/fr/docs/Web/HTML/Element)
+  - : Cette page énumère tous les éléments HTML, regroupés ici selon leurs fonctions.
+- [Référence des attributs HTML](/fr/docs/Web/HTML/Attributes)
+  - : Chaque élément HTML peut avoir un ou plusieurs attributs. Ces attributs sont des valeurs supplémentaires qui permettent de configurer les éléments ou d'adapter leur comportement.
+- [Attributs universels](/fr/docs/Web/HTML/Global_attributes)
+  - : Les attributs universels peuvent être définis sur tous les éléments HTML. Il est toutefois possible qu'ils n'aient pas d'effet sur certains éléments.
+- [Types de liens](/fr/docs/Web/HTML/Link_types)
+  - : En HTML, les différents types de liens indiquent les relations entre deux documents. Ces liens peuvent prendre la forme d'un élément [`<a>`](/fr/docs/Web/HTML/Element/a), [`<area>`](/fr/docs/Web/HTML/Element/area) ou [`<link>`](/fr/docs/Web/HTML/Element/link).
+- [Catégories de contenu](/fr/docs/Web/Guide/HTML/Content_categories)
+  - : Chaque élément HTML appartient à une ou plusieurs catégories de contenu. Ces catégories regroupent des éléments avec des caractéristiques communes.
+- [Formats des dates et heures en HTML](/fr/docs/Web/HTML/Date_and_time_formats)
+  - : Certains éléments HTML permettent de manipuler des valeurs temporelles (dates, heures, dates et heures). Cet article décrit le format de représentation de ces valeurs, notamment utilisées pour les éléments [`<input>`](/fr/docs/Web/HTML/Element/Input), [`<ins>`](/fr/docs/Web/HTML/Element/ins) et [`<del>`](/fr/docs/Web/HTML/Element/del).
diff --git a/files/fr/web/html/viewport_meta_tag/index.md b/files/fr/web/html/viewport_meta_tag/index.md
index 02d55f1aec..db05d1c670 100644
--- a/files/fr/web/html/viewport_meta_tag/index.md
+++ b/files/fr/web/html/viewport_meta_tag/index.md
@@ -10,91 +10,82 @@ tags:
   - viewport
 translation_of: Web/HTML/Viewport_meta_tag
 ---
-<p>Le <a href="/fr/docs/Glossary/Viewport"><i>viewport</i></a> du navigateur est la zone de la fenêtre dans laquelle le contenu web peut être vu. Souvent, cette zone n'a pas la même taille que la page rendue, auquel cas le navigateur fournit des barres de défilement pour que l'utilisateur et l'utilisatrice puissent faire défiler la page et accéder à tout le contenu.</p>
+Le [_viewport_](/fr/docs/Glossary/Viewport) du navigateur est la zone de la fenêtre dans laquelle le contenu web peut être vu. Souvent, cette zone n'a pas la même taille que la page rendue, auquel cas le navigateur fournit des barres de défilement pour que l'utilisateur et l'utilisatrice puissent faire défiler la page et accéder à tout le contenu.
 
-<h2 id="Background">Contexte</h2>
+## Contexte
 
-<p>Les appareils à écran étroit (par exemple, les mobiles) rendent les pages dans une fenêtre virtuelle ou viewport, qui est généralement plus large que l'écran, puis réduisent le résultat rendu afin qu'il puisse être vu en une seule fois. Les utilisateurs et utilisatrices peuvent alors effectuer un panoramique et un zoom pour voir différentes zones de la page. Par exemple, si l'écran d'un téléphone mobile a une largeur de 640 pixels, les pages peuvent être affichées dans une fenêtre virtuelle de 980 pixels, puis réduites pour tenir dans l'espace de 640 pixels.</p>
+Les appareils à écran étroit (par exemple, les mobiles) rendent les pages dans une fenêtre virtuelle ou viewport, qui est généralement plus large que l'écran, puis réduisent le résultat rendu afin qu'il puisse être vu en une seule fois. Les utilisateurs et utilisatrices peuvent alors effectuer un panoramique et un zoom pour voir différentes zones de la page. Par exemple, si l'écran d'un téléphone mobile a une largeur de 640 pixels, les pages peuvent être affichées dans une fenêtre virtuelle de 980 pixels, puis réduites pour tenir dans l'espace de 640 pixels.
 
-<p>En effet, de nombreuses pages ne sont pas optimisées pour les mobiles et ne fonctionnent pas (ou du moins n'ont pas l'air de fonctionner correctement) lorsqu'elles sont affichées sur un écran de petite taille. Cette fenêtre virtuelle est un moyen d'améliorer l'aspect des sites non optimisés pour les mobiles sur les appareils à écran étroit.</p>
+En effet, de nombreuses pages ne sont pas optimisées pour les mobiles et ne fonctionnent pas (ou du moins n'ont pas l'air de fonctionner correctement) lorsqu'elles sont affichées sur un écran de petite taille. Cette fenêtre virtuelle est un moyen d'améliorer l'aspect des sites non optimisés pour les mobiles sur les appareils à écran étroit.
 
-<h3 id="Enter_viewport_meta_tag">Voici la métabalise viewport</h3>
+### Voici la métabalise viewport
 
-<p>Cependant, ce mécanisme n'est pas aussi bon pour les pages qui sont optimisées pour les écrans étroits à l'aide de <a href="/fr/docs/Web/CSS/Media_Queries"><i>media queries</i></a> - si le viewport virtuel est de 980px par exemple, les media queries qui se déclenchent à 640px, 480px ou moins ne seront jamais utilisées, ce qui limite l'efficacité de ces techniques de <i>responsive design</i>.</p>
+Cependant, ce mécanisme n'est pas aussi bon pour les pages qui sont optimisées pour les écrans étroits à l'aide de [_media queries_](/fr/docs/Web/CSS/Media_Queries) - si le viewport virtuel est de 980px par exemple, les media queries qui se déclenchent à 640px, 480px ou moins ne seront jamais utilisées, ce qui limite l'efficacité de ces techniques de _responsive design_.
 
-<p>Pour atténuer ce problème de fenêtre virtuelle sur les appareils à écran étroit, Apple a introduit la «&nbsp;métabalise viewport&nbsp;» dans Safari iOS pour permettre à une page web de contrôler la taille et l'échelle de la fenêtre. De nombreux autres navigateurs mobiles prennent désormais en charge cette balise, bien qu'elle ne fasse partie d'aucune norme web. La <a href="https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html">documentation</a> <small>(en)</small> d'Apple explique bien comment utiliser cette balise, mais nous avons dû faire un travail de détective pour savoir exactement comment l'implémenter dans Fennec. Par exemple, la documentation de Safari indique que le contenu est une « liste délimitée par des virgules », mais les navigateurs et pages web existants utilisent n'importe quel mélange de virgules, points-virgules et espaces comme séparateurs.</p>
+Pour atténuer ce problème de fenêtre virtuelle sur les appareils à écran étroit, Apple a introduit la « métabalise viewport » dans Safari iOS pour permettre à une page web de contrôler la taille et l'échelle de la fenêtre. De nombreux autres navigateurs mobiles prennent désormais en charge cette balise, bien qu'elle ne fasse partie d'aucune norme web. La [documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html) (en) d'Apple explique bien comment utiliser cette balise, mais nous avons dû faire un travail de détective pour savoir exactement comment l'implémenter dans Fennec. Par exemple, la documentation de Safari indique que le contenu est une « liste délimitée par des virgules », mais les navigateurs et pages web existants utilisent n'importe quel mélange de virgules, points-virgules et espaces comme séparateurs.
 
-<p>Pour en savoir plus sur les fenêtres d'affichage dans les différents navigateurs mobiles, consultez <a href="http://www.quirksmode.org/mobile/viewports2.html">A Tale of Two Viewports</a> sur quirksmode.org.</p>
+Pour en savoir plus sur les fenêtres d'affichage dans les différents navigateurs mobiles, consultez [A Tale of Two Viewports](http://www.quirksmode.org/mobile/viewports2.html) sur quirksmode.org.
 
-<h2 id="Viewport_basics">Un viewport de base</h2>
+## Un viewport de base
 
-<p>Un site type, optimisé pour les mobiles, contient quelque chose comme ce qui suit :</p>
+Un site type, optimisé pour les mobiles, contient quelque chose comme ce qui suit :
 
-<pre class="brush: html">&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</pre>
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1">
+```
 
-<p>La propriété <code>width</code> contrôle la taille de la zone d'affichage. Elle peut être définie sur un nombre spécifique de pixels comme <code>width=600</code> ou sur la valeur spéciale <code>device-width</code>, qui est la largeur de l'écran en pixels CSS à une échelle de 100%. (Il existe des valeurs <code>height</code> et <code>device-height</code> correspondantes, qui peuvent être utiles pour les pages comportant des éléments qui changent de taille ou de position en fonction de la hauteur du viewport).</p>
+La propriété `width` contrôle la taille de la zone d'affichage. Elle peut être définie sur un nombre spécifique de pixels comme `width=600` ou sur la valeur spéciale `device-width`, qui est la largeur de l'écran en pixels CSS à une échelle de 100%. (Il existe des valeurs `height` et `device-height` correspondantes, qui peuvent être utiles pour les pages comportant des éléments qui changent de taille ou de position en fonction de la hauteur du viewport).
 
-<p>La propriété <code>initial-scale</code> contrôle le niveau de zoom lors du premier chargement de la page. Les propriétés <code>maximum-scale</code>, <code>minimum-scale</code> et <code>user-scalable</code> contrôlent la manière dont les utilisateurs et utilisatrices sont autorisé·e·s à zoomer ou dézoomer la page.</p>
+La propriété `initial-scale` contrôle le niveau de zoom lors du premier chargement de la page. Les propriétés `maximum-scale`, `minimum-scale` et `user-scalable` contrôlent la manière dont les utilisateurs et utilisatrices sont autorisé·e·s à zoomer ou dézoomer la page.
 
-<div class="warning">
-  <p><strong>Attention :</strong> L'utilisation du <code>user-scalable=no</code> peut causer des problèmes d'accessibilité aux utilisateurs et utilisatrices ayant des déficiences visuelles telles qu'une vision faible.</p>
-</div>
+> **Attention :** L'utilisation du `user-scalable=no` peut causer des problèmes d'accessibilité aux utilisateurs et utilisatrices ayant des déficiences visuelles telles qu'une vision faible.
 
-<h2 id="A_pixel_is_not_a_pixel">Un pixel n'est pas un pixel</h2>
+## Un pixel n'est pas un pixel
 
-<p>Ces dernières années, les résolutions d'écran ont atteint une taille telle que les pixels individuels sont difficiles à distinguer à l'œil nu. Par exemple, les smartphones récents ont généralement un écran de 5 pouces avec des résolutions supérieures à 1920-1080 pixels (~400 dpi). Pour cette raison, de nombreux navigateurs peuvent afficher leurs pages dans une taille physique plus petite en convertissant plusieurs pixels matériels pour chaque « pixel » CSS. Au départ, cela a causé des problèmes de convivialité et de lisibilité sur de nombreux sites Web optimisés pour le tactile. Peter-Paul Koch a écrit sur ce problème dans <a href="http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html">A pixel is not a pixel</a> (en anglais).</p>
+Ces dernières années, les résolutions d'écran ont atteint une taille telle que les pixels individuels sont difficiles à distinguer à l'œil nu. Par exemple, les smartphones récents ont généralement un écran de 5 pouces avec des résolutions supérieures à 1920-1080 pixels (\~400 dpi). Pour cette raison, de nombreux navigateurs peuvent afficher leurs pages dans une taille physique plus petite en convertissant plusieurs pixels matériels pour chaque « pixel » CSS. Au départ, cela a causé des problèmes de convivialité et de lisibilité sur de nombreux sites Web optimisés pour le tactile. Peter-Paul Koch a écrit sur ce problème dans [A pixel is not a pixel](http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html) (en anglais).
 
-<p>Sur les écrans à haute résolution, les pages avec <code>initial-scale=1</code> seront effectivement zoomées par les navigateurs. Leur texte sera lisse et net, mais leurs images bitmap ne profiteront probablement pas de la pleine résolution de l'écran. Pour obtenir des images plus nettes sur ces écrans, les développeurs web peuvent vouloir concevoir des images - ou des mises en page entières - à une échelle plus élevée que leur taille finale, puis les réduire à l'aide de CSS ou de propriétés viewport. Cette méthode est conforme à la spécification <a href="http://www.w3.org/TR/CSS2/syndata.html#length-units">CSS 2.1</a>, qui stipule ce qui suit :</p>
+Sur les écrans à haute résolution, les pages avec `initial-scale=1` seront effectivement zoomées par les navigateurs. Leur texte sera lisse et net, mais leurs images bitmap ne profiteront probablement pas de la pleine résolution de l'écran. Pour obtenir des images plus nettes sur ces écrans, les développeurs web peuvent vouloir concevoir des images - ou des mises en page entières - à une échelle plus élevée que leur taille finale, puis les réduire à l'aide de CSS ou de propriétés viewport. Cette méthode est conforme à la spécification [CSS 2.1](http://www.w3.org/TR/CSS2/syndata.html#length-units), qui stipule ce qui suit :
 
-<blockquote>
-  <p>Si la densité de pixels, du périphérique de sortie, est très différente de celle d'un écran d'ordinateur typique, l'agent utilisateur doit redimensionner les valeurs des pixels. Il est recommandé que l'unité de pixel fasse référence au nombre entier, de pixels du dispositif, qui se rapproche le plus du pixel de référence. Il est recommandé que le pixel de référence corresponde à l'angle visuel d'un pixel sur un dispositif, dont la densité de pixels est de 96 dpi et qui se trouve à une distance d'une longueur de bras du lecteur.</p>
-</blockquote>
+> Si la densité de pixels, du périphérique de sortie, est très différente de celle d'un écran d'ordinateur typique, l'agent utilisateur doit redimensionner les valeurs des pixels. Il est recommandé que l'unité de pixel fasse référence au nombre entier, de pixels du dispositif, qui se rapproche le plus du pixel de référence. Il est recommandé que le pixel de référence corresponde à l'angle visuel d'un pixel sur un dispositif, dont la densité de pixels est de 96 dpi et qui se trouve à une distance d'une longueur de bras du lecteur.
 
-<p>Pour les développeurs et développeuses web, cela signifie que la taille d'une page est beaucoup plus petite que le nombre réel de pixels et que les navigateurs peuvent dimensionner leurs mises en page et leurs images en conséquence. Mais n'oubliez pas que tous les appareils mobiles n'ont pas la même largeur ; vous devez vous assurer que vos pages fonctionnent bien dans une grande variété de tailles d'écran et d'orientations.</p>
+Pour les développeurs et développeuses web, cela signifie que la taille d'une page est beaucoup plus petite que le nombre réel de pixels et que les navigateurs peuvent dimensionner leurs mises en page et leurs images en conséquence. Mais n'oubliez pas que tous les appareils mobiles n'ont pas la même largeur ; vous devez vous assurer que vos pages fonctionnent bien dans une grande variété de tailles d'écran et d'orientations.
 
-<p>Le rapport de pixels par défaut dépend de la densité de l'affichage. Sur un écran dont la densité est inférieure à 200 dpi, le rapport est de 1,0. Sur les écrans dont la densité est comprise entre 200 et 300dpi, le ratio est de 1,5. Sur les écrans dont la densité est supérieure à 300dpi, le ratio est le chiffre entier inférieur (<em>densité</em>/150dpi). Notez que le ratio par défaut n'est vrai que lorsque l'échelle du viewport est égale à 1. Sinon, le rapport entre les pixels CSS et les pixels du périphérique dépend du niveau de zoom actuel.</p>
+Le rapport de pixels par défaut dépend de la densité de l'affichage. Sur un écran dont la densité est inférieure à 200 dpi, le rapport est de 1,0. Sur les écrans dont la densité est comprise entre 200 et 300dpi, le ratio est de 1,5. Sur les écrans dont la densité est supérieure à 300dpi, le ratio est le chiffre entier inférieur (_densité_/150dpi). Notez que le ratio par défaut n'est vrai que lorsque l'échelle du viewport est égale à 1. Sinon, le rapport entre les pixels CSS et les pixels du périphérique dépend du niveau de zoom actuel.
 
-<h2 id="Viewport_width_and_screen_width">Largeur de la zone d'affichage et largeur de l'écran</h2>
+## Largeur de la zone d'affichage et largeur de l'écran
 
-<p>Les sites peuvent définir leur viewport à une taille spécifique. Par exemple, la définition <code>"width=320, initial-scale=1"</code> peut être utilisée pour s'adapter précisément à l'écran d'un petit téléphone en mode portrait. Cela peut causer <a href="http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag/">des problèmes</a> <small>(en)</small> lorsque le navigateur ne rend pas une page à une taille supérieure. Pour remédier à cela, les navigateurs étendent la largeur de la fenêtre d'affichage si nécessaire pour remplir l'écran à l'échelle demandée. Cela est particulièrement utile sur les appareils à grand écran comme l'iPad. (L'article d'Allen Pike <a href="http://www.antipode.ca/2010/choosing-a-viewport-for-ipad-sites/">Choosing a viewport for iPad sites</a> (en anglais) contient une bonne explication pour les développeurs et développeuses web).</p>
+Les sites peuvent définir leur viewport à une taille spécifique. Par exemple, la définition `"width=320, initial-scale=1"` peut être utilisée pour s'adapter précisément à l'écran d'un petit téléphone en mode portrait. Cela peut causer [des problèmes](http://starkravingfinkle.org/blog/2010/01/perils-of-the-viewport-meta-tag/) (en) lorsque le navigateur ne rend pas une page à une taille supérieure. Pour remédier à cela, les navigateurs étendent la largeur de la fenêtre d'affichage si nécessaire pour remplir l'écran à l'échelle demandée. Cela est particulièrement utile sur les appareils à grand écran comme l'iPad. (L'article d'Allen Pike [Choosing a viewport for iPad sites](http://www.antipode.ca/2010/choosing-a-viewport-for-ipad-sites/) (en anglais) contient une bonne explication pour les développeurs et développeuses web).
 
-<p>Pour les pages qui définissent une échelle initiale ou maximale, cela signifie que la propriété <code>width</code> se traduit en fait par une largeur <em>minimum</em> de viewport. Par exemple, si votre mise en page nécessite une largeur d'au moins 500 pixels, vous pouvez utiliser le balisage suivant. Lorsque la largeur de l'écran est supérieure à 500 pixels, le navigateur élargira la fenêtre d'affichage (plutôt que de zoomer) pour s'adapter à l'écran :</p>
+Pour les pages qui définissent une échelle initiale ou maximale, cela signifie que la propriété `width` se traduit en fait par une largeur _minimum_ de viewport. Par exemple, si votre mise en page nécessite une largeur d'au moins 500 pixels, vous pouvez utiliser le balisage suivant. Lorsque la largeur de l'écran est supérieure à 500 pixels, le navigateur élargira la fenêtre d'affichage (plutôt que de zoomer) pour s'adapter à l'écran :
 
-<pre class="brush: html">&lt;meta name="viewport" content="width=500, initial-scale=1"&gt;</pre>
+```html
+<meta name="viewport" content="width=500, initial-scale=1">
+```
 
-<p>Les autres <a href="/fr/docs/Web/HTML/Element/meta#attributes">attributs</a> disponibles sont <code>minimum-scale</code>, <code>maximum-scale</code> et <code>user-scalable</code>. Ces propriétés affectent l'échelle et la largeur initiales, ainsi que la limitation des changements de niveau de zoom.</p>
+Les autres [attributs](/fr/docs/Web/HTML/Element/meta#attributes) disponibles sont `minimum-scale`, `maximum-scale` et `user-scalable`. Ces propriétés affectent l'échelle et la largeur initiales, ainsi que la limitation des changements de niveau de zoom.
 
-<p>Tous les navigateurs mobiles ne gèrent pas les changements d'orientation de la même manière. Par exemple, Mobile Safari se contente souvent de zoomer la page lors du passage du portrait au paysage, au lieu de la disposer comme elle le ferait si elle était initialement chargée en paysage. Si les développeurs et développeuses Web veulent que leurs paramètres d'échelle restent cohérents lors du changement d'orientation sur l'iPhone, ils/elles doivent ajouter une valeur <code>maximum-scale</code> pour empêcher ce zoom, ce qui a l'effet secondaire parfois indésirable d'empêcher les utilisateurs/utilisatrices de faire un zoom avant&nbsp;:</p>
+Tous les navigateurs mobiles ne gèrent pas les changements d'orientation de la même manière. Par exemple, Mobile Safari se contente souvent de zoomer la page lors du passage du portrait au paysage, au lieu de la disposer comme elle le ferait si elle était initialement chargée en paysage. Si les développeurs et développeuses Web veulent que leurs paramètres d'échelle restent cohérents lors du changement d'orientation sur l'iPhone, ils/elles doivent ajouter une valeur `maximum-scale` pour empêcher ce zoom, ce qui a l'effet secondaire parfois indésirable d'empêcher les utilisateurs/utilisatrices de faire un zoom avant :
 
-<pre class="brush: html">&lt;meta name="viewport" content="initial-scale=1, maximum-scale=1"&gt;</pre>
+```html
+<meta name="viewport" content="initial-scale=1, maximum-scale=1">
+```
 
-<p>Supprimer le petit zoom appliqué par de nombreux smartphones en définissant les valeurs d'échelle initiale et d'échelle minimale à 0,86. Le résultat est que le défilement horizontal est supprimé dans n'importe quelle orientation et que l'utilisateur peut zoomer s'il le souhaite.</p>
+Supprimer le petit zoom appliqué par de nombreux smartphones en définissant les valeurs d'échelle initiale et d'échelle minimale à 0,86. Le résultat est que le défilement horizontal est supprimé dans n'importe quelle orientation et que l'utilisateur peut zoomer s'il le souhaite.
 
-<pre class="brush: html">&lt;meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86"&gt;</pre>
+```html
+<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=5.0, minimum-scale=0.86">
+```
 
-<h2 id="Common_viewport_sizes_for_mobile_and_tablet_devices">Tailles communes des fenêtres d'affichage pour les appareils mobiles et les tablettes</h2>
+## Tailles communes des fenêtres d'affichage pour les appareils mobiles et les tablettes
 
-<p>Si vous voulez savoir quels appareils mobiles et tablettes ont quelles largeurs de visualisation, il existe une liste complète de <a href="https://docs.adobe.com/content/help/en/target/using/experiences/vec/mobile-viewports.html">tailles de visualisation des appareils mobiles et tablettes ici</a>. Elle donne des informations telles que la largeur du viewport en orientation portrait et paysage ainsi que la taille physique de l'écran, le système d'exploitation et la densité de pixels de l'appareil.</p>
+Si vous voulez savoir quels appareils mobiles et tablettes ont quelles largeurs de visualisation, il existe une liste complète de [tailles de visualisation des appareils mobiles et tablettes ici](https://docs.adobe.com/content/help/en/target/using/experiences/vec/mobile-viewports.html). Elle donne des informations telles que la largeur du viewport en orientation portrait et paysage ainsi que la taille physique de l'écran, le système d'exploitation et la densité de pixels de l'appareil.
 
-<h2 id="Specifications">Spécifications</h2>
+## Spécifications
 
-<table class="standard-table">
-  <thead>
-    <tr>
-      <th scope="col">Spécification</th>
-      <th scope="col">Statut</th>
-      <th scope="col">Commentaire</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td>{{SpecName('CSS3 Device', '#viewport-meta', '&lt;meta name="viewport"&gt;')}}</td>
-      <td>{{Spec2('CSS3 Device')}}</td>
-      <td>Décrit de manière non normative l'élément META Viewport</td>
-    </tr>
-  </tbody>
-</table>
+| Spécification                                                                                            | Statut                           | Commentaire                                             |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------- |
+| {{SpecName('CSS3 Device', '#viewport-meta', '&lt;meta name="viewport"&gt;')}} | {{Spec2('CSS3 Device')}} | Décrit de manière non normative l'élément META Viewport |
 
-<p>Il existe manifestement une demande pour la métabalise viewport, puisqu'elle est prise en charge par la plupart des navigateurs mobiles populaires et utilisée par des milliers de sites web. Il serait bon de disposer d'une véritable norme permettant aux pages web de contrôler les propriétés de la fenêtre d'affichage. Au fur et à mesure que le processus de normalisation avance, Mozilla s'efforcera de se tenir au courant de tout changement.</p>
+Il existe manifestement une demande pour la métabalise viewport, puisqu'elle est prise en charge par la plupart des navigateurs mobiles populaires et utilisée par des milliers de sites web. Il serait bon de disposer d'une véritable norme permettant aux pages web de contrôler les propriétés de la fenêtre d'affichage. Au fur et à mesure que le processus de normalisation avance, Mozilla s'efforcera de se tenir au courant de tout changement.
 
-<p>{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}</p>
+{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}